:root {
  --ezy-ink: #102437;
  --ezy-muted: #526271;
  --ezy-cyan: #00b8d9;
  --ezy-cyan-dark: #007f9a;
  --ezy-surface: #f4f7f9;
  --ezy-white: #fff;
  --ezy-border: #d9e2e8;
  --ezy-radius: 1.25rem;
  --ezy-shadow: 0 1.25rem 3.5rem rgba(12, 39, 59, .12);
  --ezy-content: 75rem;
}

.ezy-catalog,
.ezy-catalog * { box-sizing: border-box; }
.ezy-catalog { color: var(--ezy-ink); font-family: inherit; overflow: clip; }
.ezy-catalog :where(a, button, summary):focus-visible { outline: .2rem solid var(--ezy-cyan); outline-offset: .2rem; }
.ezy-catalog :where(p, li) { color: var(--ezy-muted); line-height: 1.7; }
.ezy-catalog :where(h1, h2, h3, p) { margin-top: 0; }
.ezy-catalog :where(section, footer, nav) { margin-inline: auto; max-width: var(--ezy-content); }

.ezy-breadcrumb { padding: 1.25rem 1rem 0; }
.ezy-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ezy-breadcrumb li + li::before { color: #82919d; content: '/'; margin-right: .5rem; }
.ezy-breadcrumb a { color: var(--ezy-cyan-dark); }

.ezy-eyebrow { color: var(--ezy-cyan-dark) !important; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ezy-catalog-hero { display: grid; gap: 2rem; padding: clamp(3rem, 8vw, 7rem) 1rem; }
.ezy-catalog-hero h1 { font-size: clamp(2.45rem, 8vw, 5.5rem); letter-spacing: -.055em; line-height: .98; max-width: 14ch; }
.ezy-catalog-hero__copy > p:not(.ezy-eyebrow) { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 43rem; }
.ezy-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ezy-button { align-items: center; border: .1rem solid transparent; border-radius: 999px; display: inline-flex; font-weight: 750; justify-content: center; min-height: 3rem; padding: .75rem 1.15rem; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.ezy-button:hover { transform: translateY(-.1rem); }
.ezy-button--primary { background: var(--ezy-ink); color: var(--ezy-white); }
.ezy-button--primary:hover { background: #203b52; color: var(--ezy-white); }
.ezy-button--secondary { border-color: var(--ezy-ink); color: var(--ezy-ink); }
.ezy-button--secondary:hover { background: var(--ezy-surface); color: var(--ezy-ink); }
.ezy-catalog-hero__visual { align-items: flex-end; aspect-ratio: 4 / 3; background: var(--ezy-ink); border-radius: var(--ezy-radius); color: var(--ezy-white); display: flex; flex-direction: column; justify-content: space-between; min-height: 17rem; padding: clamp(1.5rem, 5vw, 3rem); position: relative; }
.ezy-catalog-hero__visual::before { background: var(--ezy-cyan); border-radius: 50%; content: ''; height: 36%; left: 12%; position: absolute; top: 16%; width: 36%; }
.ezy-catalog-hero__visual span { font-size: clamp(5rem, 18vw, 10rem); font-weight: 850; letter-spacing: -.08em; line-height: .8; position: relative; }
.ezy-catalog-hero__visual small { font-size: 1rem; position: relative; }

.ezy-intro { background: var(--ezy-surface); border-radius: var(--ezy-radius); padding: clamp(2rem, 6vw, 4rem); }
.ezy-intro h2, .ezy-template-grid > header h2, .ezy-process > header h2, .ezy-faq > header h2 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; line-height: 1.08; }
.ezy-intro > * { max-width: 50rem; }

.ezy-template-grid, .ezy-process, .ezy-faq { padding: clamp(4rem, 9vw, 8rem) 1rem 0; }
.ezy-template-grid > header, .ezy-process > header, .ezy-faq > header { margin-bottom: 2rem; max-width: 48rem; }
.ezy-template-grid__items { display: grid; gap: 1.5rem; }
.ezy-template-card { background: var(--ezy-white); border: .0625rem solid var(--ezy-border); border-radius: var(--ezy-radius); box-shadow: 0 .5rem 1.5rem rgba(12, 39, 59, .06); overflow: hidden; }
.ezy-template-preview { align-items: flex-start; aspect-ratio: 16 / 10; background: var(--preview-bg, var(--ezy-surface)); color: var(--preview-text, var(--ezy-ink)); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; position: relative; }
.ezy-template-preview::after { background: var(--preview-accent, var(--ezy-cyan)); border-radius: var(--preview-shape, 50%); content: ''; height: 43%; opacity: .9; position: absolute; right: 8%; top: 11%; transform: var(--preview-transform, none); width: 34%; }
.ezy-template-preview strong { font-family: var(--preview-font, inherit); font-size: clamp(1.7rem, 4vw, 2.75rem); letter-spacing: -.04em; line-height: 1; max-width: 13ch; position: relative; z-index: 1; }
.ezy-template-preview__eyebrow { font-size: .65rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .5rem; position: relative; z-index: 1; }
.ezy-template-preview > div { display: flex; gap: .35rem; left: 1.5rem; position: absolute; top: 1.5rem; }
.ezy-template-preview i { background: var(--swatch); border: .0625rem solid rgba(0, 0, 0, .15); border-radius: 50%; height: .75rem; width: .75rem; }
.ezy-template-preview--saji { --preview-bg: #f3e4d0; --preview-accent: #a6462d; --preview-text: #35251e; --preview-shape: 48% 52% 42% 58%; --preview-transform: rotate(-12deg); }
.ezy-template-preview--nusa { --preview-bg: #0b2038; --preview-accent: #00b8d9; --preview-text: #fff; --preview-shape: .25rem; }
.ezy-template-preview--forma { --preview-bg: #fcf8f0; --preview-accent: #704c31; --preview-text: #173b2b; --preview-shape: 0; --preview-transform: rotate(7deg); }
.ezy-template-preview--aura { --preview-bg: #f8f1e9; --preview-accent: #c9959e; --preview-text: #532b47; --preview-shape: 50% 50% 12% 50%; }
.ezy-template-preview--aruna { --preview-bg: #e8e7e2; --preview-accent: #123c32; --preview-text: #123c32; --preview-shape: .15rem; --preview-transform: skew(-8deg); }
.ezy-template-preview--mentor { --preview-bg: #111; --preview-accent: #00b8d9; --preview-text: #fff; --preview-shape: 0; --preview-transform: translateX(15%) rotate(45deg); }
.ezy-template-card__body { padding: 1.5rem; }
.ezy-template-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1.25rem; }
.ezy-template-card__meta span { color: var(--ezy-cyan-dark); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ezy-template-card h3 { font-size: 2.25rem; letter-spacing: -.04em; margin-bottom: .15rem; }
.ezy-template-card__category { color: var(--ezy-ink) !important; font-weight: 750; }
.ezy-feature-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0; padding: 0; }
.ezy-feature-list li { background: var(--ezy-surface); border-radius: 999px; font-size: .8rem; padding: .35rem .7rem; }
.ezy-template-card__actions { display: grid; gap: .65rem; }
.ezy-package-link { color: var(--ezy-ink); display: inline-flex; font-weight: 750; margin-top: 1rem; padding: .5rem 0; }

.ezy-process ol { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.ezy-process__item { border-top: .1rem solid var(--ezy-border); padding: 1.5rem 0; }
.ezy-process__item > span { color: var(--ezy-cyan-dark); font-weight: 850; }
.ezy-process__item h3 { font-size: 1.35rem; margin: 1rem 0 .35rem; }
.ezy-faq__items { border-top: .0625rem solid var(--ezy-border); }
.ezy-faq details { border-bottom: .0625rem solid var(--ezy-border); padding: 0; }
.ezy-faq summary { cursor: pointer; font-size: 1.05rem; font-weight: 750; min-height: 3.5rem; padding: 1rem 2rem 1rem 0; position: relative; }
.ezy-faq summary::marker { color: var(--ezy-cyan-dark); }
.ezy-faq details p { max-width: 50rem; padding-bottom: 1rem; }
.ezy-catalog-cta { align-items: center; background: var(--ezy-ink); border-radius: var(--ezy-radius); color: var(--ezy-white); display: grid; gap: 2rem; margin-block: clamp(4rem, 9vw, 8rem) 1.5rem; padding: clamp(2rem, 6vw, 4rem); }
.ezy-catalog-cta :where(h2, p) { color: var(--ezy-white); }
.ezy-catalog-cta h2 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.ezy-button--light { background: var(--ezy-white); color: var(--ezy-ink); justify-self: start; }

@media (min-width: 48rem) {
  .ezy-catalog-hero { align-items: center; grid-template-columns: 1.15fr .85fr; }
  .ezy-template-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ezy-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ezy-template-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ezy-catalog-cta { grid-template-columns: 1fr auto; }
}

@media (min-width: 64rem) {
  .ezy-template-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ezy-process ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ezy-process__item { padding-right: 2rem; }
}

@media (max-width: 77rem) {
  .ezy-intro, .ezy-catalog-cta { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ezy-catalog *, .ezy-catalog *::before, .ezy-catalog *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}