/* =========================================================
   STUDIO NOVO — Home page
   Shared tokens, reset, buttons, header, footer, and the
   scroll-reveal helper now live in common.css (loaded first).
   Only home-page-specific styles remain below.
   ========================================================= */

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height: calc(100vh - 78px); /* subtract the sticky header's height (see .header__inner) so header + hero together fill exactly one screen */
  display:flex;
  align-items:center;
  padding-top: 80px; padding-bottom: 80px; overflow:hidden;
}
.hero__inner{
  position: relative;
  width:100%;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center;
}

/* Hero entrance — plays once, on page load, regardless of scroll
   position. Deliberately NOT the [data-reveal] scroll system (common.css):
   the hero is already in view on load, so relying on the scroll
   IntersectionObserver there is a race — it can fire before the browser
   has painted the "hidden" starting state, skipping the animation
   entirely. A plain @keyframes animation always runs top-to-bottom on
   load, so it's used here instead; text leads, the image follows just
   behind it. Respects the site-wide prefers-reduced-motion rule in
   common.css (`* { animation-duration: .001ms !important; }`). */
@keyframes hero-rise{
  from{ opacity:0; transform: translateY(36px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero__text{ animation: hero-rise .9s var(--ease) both; }
.hero__visual{ animation: hero-rise .9s var(--ease) .15s both; }
.hero__title{
  font-size: clamp(2.6rem, 5vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -.01em;   /* same spacing as the other page headings */
}
.hero__title em{ font-style:italic; font-weight:600; }
.hero__desc{
  margin-top: 22px; max-width: 440px; color: var(--ink-soft); font-size: 1.05rem;
}

/* Two CTAs — Free Concept (primary, visually stronger) and View
   Templates (outline, secondary) — replacing the old single-button +
   checklist layout so the free concept offer reads as the lead action
   from the very top of the page. */
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 34px; }
.hero__subline{
  margin-top: 18px; font-size:.88rem; color: var(--ink-faint);
}


/* Trust line under the intro: stars + launch time. */
.hero__trust{
  display:flex; align-items:center; flex-wrap:wrap; gap: 6px 12px;
  margin-top: 22px; font-size: .9rem; color: var(--ink-soft); font-weight: 500;
}
.hero__stars{ color: #C9902E; letter-spacing: .12em; font-size: 1rem; }
.hero__trust-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }

/* ---------- Hero showcase: template mockups that rotate ----------
   Driven by initShowcase() in script.js. Pauses on hover / keyboard
   focus and when the tab is hidden; doesn't rotate at all for visitors
   who prefer reduced motion (the dots still let them switch). */
.showcase{ display:flex; flex-direction:column; gap: 18px; height:auto; }
.showcase__stage{ position:relative; aspect-ratio: 1430 / 972; }
.showcase__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; translate: 0 14px; scale: .97;
  transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease);
}
.showcase__slide.is-active{ opacity:1; translate: 0 0; scale: 1; }
.showcase__slide img{ width:100%; height:100%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(20,40,29,.16)); }
.showcase__bar{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; padding: 0 6px; }
.showcase__caption{
  display:inline-flex; align-items:baseline; gap: 10px; padding: 8px 16px;
  background: var(--paper); border:1px solid var(--line); border-radius: 999px; font-size:.86rem;
  transition: border-color .25s var(--ease);
}
.showcase__caption:hover{ border-color: var(--green); }
.showcase__caption:hover .arrow{ transform: translateX(3px); }
.showcase__caption .arrow{ display:inline-block; transition: transform .3s var(--ease); }
.showcase__name{ font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.showcase__industry{ color: var(--ink-faint); }
.showcase__view{ color: var(--green); font-weight: 500; }
.showcase__caption.is-changing .showcase__name,
.showcase__caption.is-changing .showcase__industry{ opacity: 0; }
.showcase__name, .showcase__industry{ transition: opacity .3s var(--ease); }
.showcase__dots{ display:flex; gap: 8px; }
.showcase__dot{
  width: 9px; height: 9px; border-radius: 999px; background: var(--line); padding:0;
  transition: width .4s var(--ease), background-color .3s var(--ease);
}
.showcase__dot:hover{ background: var(--ink-faint); }
.showcase__dot.is-active{ width: 26px; background: var(--green); }

/* =========================================================
   How it works — three steps with animated line drawings
   The drawings only animate while the section is on screen
   (.how__grid gets .is-visible from the scroll reveal), and the
   lines between steps are filled by script.js as you scroll.
   ========================================================= */
.how__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: stretch;   /* all three cards match the tallest one */
}
.how__step{
  display:flex; flex-direction:column;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 28px;
  box-shadow: 0 20px 40px -30px rgba(20,40,29,.2);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.how__step.is-reached{ border-color: var(--green-mist); box-shadow: 0 26px 46px -28px rgba(20,40,29,.26); }
.how__head{ display:flex; align-items:center; gap: 12px; margin-bottom: 16px; }
.how__num{
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size: 1.15rem; color: var(--green);
  line-height: 1; font-variant-numeric: lining-nums;   /* digits sit centred, not on a low baseline */
  padding-bottom: 1px;
  border: 1.5px solid var(--green-mist); background: var(--paper);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), scale .45s var(--ease);
}
.how__step.is-reached .how__num{ background: var(--green); color: var(--cream); border-color: var(--green); scale: 1.06; }
.how__label{ font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); }
.how__art{ background: var(--cream); border-radius: 8px; margin-bottom: 22px; }
.how__art svg{ display:block; width:100%; height:auto; }
.how__step h3{ font-size: 1.3rem; margin-bottom: 8px; }
.how__step p{ color: var(--ink-soft); font-size: .93rem; }

/* Connecting lines (horizontal on desktop). --p goes 0 → 1. */
.how__link{ position:relative; align-self:start; margin-top: 41px; height: 2px; margin-inline: 6px; }
.how__link::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px);
}
.how__link-fill{
  position:absolute; inset:0; background: var(--green); border-radius: 2px;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.how__link::after{
  content:""; position:absolute; right:-2px; top:50%; width:8px; height:8px;
  border-top: 2px solid var(--green); border-right: 2px solid var(--green);
  transform: translateY(-50%) rotate(45deg); opacity: var(--p-end, 0); transition: opacity .3s;
}

/* --- line-drawing colours --- */
.how__art .ln{ stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.how__art .ln-soft{ stroke: var(--green-mist); stroke-width: 1.6; stroke-linecap: round; }
.how__art .soft{ fill: var(--cream-2); }
.how__art .dot{ fill: var(--green-mist); }
.how__art .lbl{ font: 500 9px var(--sans); fill: var(--ink-faint); }
.how__art .heart{ fill: none; stroke: #C9902E; stroke-width: 1.8; stroke-linejoin: round; }
.how__art .pick{ stroke: #C9902E; stroke-width: 2.2; fill: rgba(201,144,46,.07); }
.how__art .cursor{ fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
.how__art .type{ stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 110; }
.how__art .tick{ stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; }
.how__art .btnshape{ fill: var(--green); }
.how__art .block{ fill: var(--cream-2); stroke: var(--green-mist); stroke-width: 1.4; }
.how__art .live-pill{ fill: var(--green); }
.how__art .live-dot{ fill: #8FD3A1; }
.how__art .live-txt{ font: 600 11px var(--sans); fill: var(--cream); }
.how__art .spark path{ stroke: #C9902E; stroke-width: 1.8; stroke-linecap: round; }
.how__art .pick, .how__art .cursor, .how__art .photo, .how__art .block,
.how__art .live, .how__art .spark, .how__art .heart, .how__art .pen{ transform-box: fill-box; transform-origin: center; }

/* --- animations (each loop ends on its "finished" picture, which is
       also what visitors with reduced motion see) --- */
.how__art *{ animation-play-state: paused; }
.how__grid.is-visible .how__art *{ animation-play-state: running; }

/* Step 1: the highlight hops between the three ways to start */
.how__art .pick{ animation: how-pick 7s var(--ease) infinite; }
.how__art .cursor{ animation: how-cursor 7s var(--ease) infinite; }
@keyframes how-pick{
  0%, 22%{ transform: translateX(0); }
  30%, 52%{ transform: translateX(88px); }
  60%, 82%{ transform: translateX(176px); }
  90%, 100%{ transform: translateX(0); }
}
@keyframes how-cursor{
  0%, 22%{ transform: translate(92px, 118px); }
  30%, 52%{ transform: translate(180px, 118px); }
  60%, 82%{ transform: translate(268px, 118px); }
  90%, 100%{ transform: translate(92px, 118px); }
}
.how__art .heart{ animation: how-beat 7s ease-in-out infinite; }
@keyframes how-beat{ 0%, 30%, 52%, 100%{ scale: 1; } 38%{ scale: 1.18; } 44%{ scale: 1; } }

/* Step 2: fields fill in, a photo drops in, the box gets ticked */
.how__art .t1{ animation: how-type1 6s steps(16) infinite; }
.how__art .t2{ animation: how-type2 6s steps(20) infinite; }
@keyframes how-type1{ 0%{ stroke-dashoffset: 110; } 18%, 100%{ stroke-dashoffset: 0; } }
@keyframes how-type2{ 0%, 20%{ stroke-dashoffset: 110; } 40%, 100%{ stroke-dashoffset: 0; } }
.how__art .photo{ animation: how-photo 6s var(--ease) infinite; }
@keyframes how-photo{ 0%, 44%{ opacity: 0; scale: .6; } 54%, 100%{ opacity: 1; scale: 1; } }
.how__art .tick{ animation: how-tick 6s var(--ease) infinite; }
@keyframes how-tick{ 0%, 62%{ stroke-dashoffset: 14; } 70%, 100%{ stroke-dashoffset: 0; } }
.how__art .btnshape{ animation: how-press 6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes how-press{ 0%, 80%, 90%, 100%{ scale: 1; } 85%{ scale: .94; } }

/* Step 3: the page builds itself, then goes live */
.how__art .b1{ animation: how-b1 6s var(--ease) infinite; }
.how__art .b2{ animation: how-b2 6s var(--ease) infinite; }
.how__art .b3{ animation: how-b3 6s var(--ease) infinite; }
@keyframes how-b1{ 0%{ opacity:0; translate: 0 10px; } 14%, 100%{ opacity:1; translate: 0 0; } }
@keyframes how-b2{ 0%, 14%{ opacity:0; translate: 0 10px; } 28%, 100%{ opacity:1; translate: 0 0; } }
@keyframes how-b3{ 0%, 26%{ opacity:0; translate: 0 10px; } 40%, 100%{ opacity:1; translate: 0 0; } }
.how__art .live{ animation: how-live 6s var(--ease) infinite; }
@keyframes how-live{ 0%, 46%{ opacity:0; scale: .5; } 56%, 100%{ opacity:1; scale: 1; } }
.how__art .live-dot{ animation: how-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes how-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }
.how__art .spark{ animation: how-spark 6s var(--ease) infinite; }
@keyframes how-spark{ 0%, 54%{ opacity:0; scale: .4; } 64%{ opacity:1; scale: 1.1; } 80%, 100%{ opacity:1; scale: 1; } }

@media (max-width: 1024px){
  .how__grid{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .how__link{ width: 2px; height: 46px; margin: 6px 0 6px 41px; }
  .how__link::before{ background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 11px); }
  .how__link-fill{ transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .how__link::after{ right:auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%) rotate(135deg); }
}

/* hero visual — desktop: stretch to match the height of the text
   column next to it (grid row default), so the image fills the
   available space instead of being capped to a fixed crop. */
.hero__visual{ position:relative; height:100%; }
.hero__visual-img{
  display:block; width:100%; height:100%; object-fit:cover; object-position: center;
}

/* placeholder blocks */
.ph{
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; position:relative;
}
.ph__tag{ position:absolute; top:16px; left:18px; font-size:.68rem; letter-spacing:.14em; font-weight:600; }
.ph__label{ font-family: var(--serif); font-size:1rem; line-height:1.3; }
.ph--dark{ background: linear-gradient(160deg,#22281f,#0f120d); color:#EDE9DC; }
.ph--sage{ background: linear-gradient(160deg,#d9d2bf,#bcb49c); color:#2b2a22; }
.ph--coffee{ background: linear-gradient(160deg,#4b3a2a,#221812); color:#EFE7D8; }
.ph--stone{ background: linear-gradient(160deg,#dedad0,#c7c2b3); color:#33322a; }
.ph--cream{ background: linear-gradient(160deg,#eee9db,#d8d2bf); }
.ph--wood{ background: linear-gradient(160deg,#8a6b4a,#4f3c28); }
.ph--paper{ background: linear-gradient(160deg,#f2efe4,#dcd7c6); }
.ph--dusk{ background: linear-gradient(160deg,#c9b7a6,#8f7461); }

/* =========================================================
   Free Website Concept — the site's primary lead-gen offer.
   A tinted (not solid-green) section so it reads as important
   without competing with the solid-green final CTA at the very
   bottom of the page — see .fc-cta and .cta-footer for where the
   stronger green accents live instead.
   ========================================================= */
.fc{ background: var(--cream-2); }
.fc__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
.fc__lead{ font-size: 1.1rem; color: var(--ink); margin-top: 4px; font-weight: 500; }
.fc__desc{ color: var(--ink-soft); font-size: .96rem; margin-top: 16px; max-width: 460px; }

.fc__benefits{
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
  margin: 26px 0 30px;
}
.fc__benefits li{ font-size:.92rem; color: var(--ink); font-weight:500; padding-left:24px; position:relative; }
.fc__benefits li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:600; }

/* ---- Before / After visual ---- */
.fc__compare{
  display:grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items:center;
}
.fc__compare-col{ display:flex; flex-direction:column; gap:12px; }
.fc__compare-label{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color: var(--ink-faint); text-align:center;
}
.fc__compare-label--accent{ color: var(--green); }
.fc__compare-arrow{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; color: var(--ink-faint); flex:0 0 auto;
}
.fc__compare-arrow svg{ width:20px; height:20px; }

.fc__mock{ display:flex; flex-direction:column; gap:10px; }
.fc__mock-caption{ text-align:center; font-size:.76rem; color: var(--ink-faint); }

/* Before — a plain, muted "Instagram-only" mock, deliberately flat and
   unstyled-looking to read as the generic starting point. */
.fc__before-frame{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; opacity:.82;
}
.fc__before-header{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.fc__before-avatar{ width:22px; height:22px; border-radius:50%; background: var(--line); flex:0 0 auto; }
.fc__before-name{ font-size:.76rem; color: var(--ink-faint); }
.fc__before-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:3px; }
.fc__before-grid span{ display:block; aspect-ratio:1; background: var(--cream-2); border:1px solid var(--line); }

/* After — a flat, line-based "browser window" standing in for a laptop
   (deliberately not a skeuomorphic device illustration), with a small
   phone frame overlapping the corner. */
.fc__mock--after{ position:relative; padding-bottom: 34px; }
.fc__laptop{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: 0 30px 60px -30px rgba(20,40,29,.28);
}
.fc__laptop-bar{ display:flex; gap:5px; padding: 10px 12px; border-bottom:1px solid var(--line); }
.fc__laptop-bar span{ width:7px; height:7px; border-radius:50%; background: var(--line); }
.fc__laptop-screen{ aspect-ratio: 16/10; overflow:hidden; }
.fc__laptop-screen img{ width:100%; height:100%; object-fit:cover; object-position: top; }

.fc__phone{
  position:absolute; right: -6px; bottom: -6px; width: 64px;
  background: var(--paper); border:2px solid var(--ink); border-radius: 12px;
  overflow:hidden; box-shadow: 0 14px 26px -12px rgba(20,40,29,.35);
}
.fc__phone-screen{ aspect-ratio: 9/17; overflow:hidden; }
.fc__phone-screen img{ width:100%; height:100%; object-fit:cover; object-position: top; }

/* =========================================================
   Free Concept — How It Works (reuses .process/.process__grid/
   .process__step styling from the section below for visual
   consistency between the two "three step" blocks on this page).
   ========================================================= */
.fc-process{ background: var(--cream); }

/* =========================================================
   Free Concept — closing CTA banner. A bordered card (not a full
   solid-green band) so the boldest green treatment on the page stays
   reserved for the final CTA at the very bottom.
   ========================================================= */
.fc-cta__card{
  max-width: 720px; margin: 0 auto; text-align:center;
  background: var(--paper); border:1px solid var(--green);
  border-radius: var(--radius-lg); padding: 56px 48px;
  box-shadow: 0 30px 70px -40px rgba(20,40,29,.22);
}
.fc-cta__card h2{ font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 14px; }
.fc-cta__card p{ color: var(--ink-soft); font-size:.98rem; max-width: 480px; margin: 0 auto; }
.fc-cta__card .btn{ margin-top: 24px; }
.fc-cta__note{ margin-top: 16px !important; font-size:.82rem !important; color: var(--ink-faint) !important; }

/* =========================================================
   Process
   ========================================================= */
.process__grid{
  display:grid; grid-template-columns: repeat(3,1fr);
}
.process__step{
  padding: 4px 40px;
  border-left: 1px solid var(--line);
}
.process__step:first-child{ border-left:none; padding-left:0; }
/* Was sized for inline SVG icons (width/height + currentColor fill).
   The markup now uses <img> PNG icons instead, which come in at
   inconsistent native sizes and ignore `color` — pin a fixed box,
   object-fit:contain so nothing stretches or crops, and display:block
   so the img's own inline-baseline spacing doesn't add extra gap
   above .process__num. */
.process__icon{
  width:44px; height:44px;
  object-fit: contain;
  display:block;
  margin-bottom: 26px;
}
.process__num{
  display:block; font-family: var(--serif); font-size:1.6rem;  margin-bottom: 10px;
}
.process__step h3{ font-size:1.15rem; margin-bottom:10px; font-weight: bolder;}
.process__step h3 small{ display:block; font-family: var(--sans); font-weight:400; font-size:.8rem; color: var(--ink-faint); margin-top:3px; }
.process__step p{ color: var(--ink-soft); font-size: .93rem; }

/* =========================================================
   Templates (home preview)
   — .tabs/.tab and .pill base rules now live in common.css
     (shared with templates.html); only the deltas stay here.
   ========================================================= */
.tabs{ margin-bottom: 48px; }

.templates__note{
  margin-top: 14px; font-size:.88rem; color: var(--ink-faint);
}
.templates__note a{ color: var(--green); font-weight:500; text-decoration: underline; text-underline-offset: 2px; }

.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.card.is-hidden{ display:none; }
/* contain:paint reinforces overflow:hidden's clipping for the animated
   (mobile crossfade) images inside — on some mobile browsers, a CSS
   `animation` on an absolutely-positioned child can get promoted to its
   own compositing layer and paint outside an ancestor's overflow:hidden
   bounds; contain:paint forces the browser to clip strictly to this
   box regardless. */
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; contain: paint; display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(20,40,29,.2); }
/* min-width:0 overrides the flex item default (min-width:auto), which
   otherwise lets this box's content (the images inside) push it wider
   than the card — the classic cause of an image bleeding past its
   container's edges in a column flex layout. width:100% makes it size
   from its own container explicitly rather than relying on flex-stretch
   alone. contain:paint is the same clipping reinforcement as .card above. */
.card__img{
  width: 100%;
  min-width: 0;
  contain: paint;
  height: 190px;
  overflow: hidden;
  position: relative;
}
.card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Cards with a hover-preview image (see templates.html for the same
   pattern) — higher specificity than ".card__img img" above so the
   absolute positioning/opacity actually take effect. */
.card__img .card__img-default,
.card__img .card__img-hover{
  position: absolute; inset: 0;
  transition: opacity .35s var(--ease);
}
.card__img .card__img-hover{ opacity: 0; object-position: top; }
.card:hover .card__img .card__img-default{ opacity: 0; }
.card:hover .card__img .card__img-hover{ opacity: 1; }
.card__body{ padding: 22px 22px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__top{ display:flex; align-items:center; justify-content:space-between; }
.card__top h3{ font-size:1.05rem; }
.card__body p{ color: var(--ink-soft); font-size:.88rem; flex:1; }
.link{ font-size:.88rem; font-weight:500; color: var(--green); }
.link .arrow{ transition: transform .3s var(--ease); display:inline-block; }
.link:hover .arrow{ transform: translateX(4px); }

/* =========================================================
   Pricing (home preview)
   ========================================================= */
.plans{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items:stretch; }
.plan{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plan:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(20,40,29,.18); }
.plan--featured{
  position: relative;
  border: 1px solid var(--green);
  border-radius: 20px;
  transform: scale(1.03);
}
.plan--featured:hover{
  transform: scale(1.03) translateY(-6px);
}
.plan__badge{
  position: absolute;
  top: -22px;
  background: var(--green);
  color: white;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
}
.plan h3{ font-size:1.2rem; margin-bottom:10px; }
.plan__desc{ color: var(--ink-soft); font-size:.9rem; min-height: 42px; }
.plan__price{ font-family: var(--serif); font-weight: 500; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; font-size:2.4rem; margin: 22px 0 20px; }
.plan__list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 30px; }
.plan__list li{ font-size:.9rem; color: var(--ink-soft); padding-left:24px; position:relative; }
.plan__list li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:600; }
.plan .btn{ align-self:flex-start; width:100%; justify-content:center; margin-top: 30px;}

/* Signature plan — "See all features" toggle (see price.css for the
   full rationale); mirrors the same checkbox-hack pattern here so the
   home page preview card matches the pricing page. */
.plan__more-check{
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}
.plan__list-extra{ display:none; }
.plan__more-check:checked ~ .plan__list .plan__list-extra{ display:block; }
.plan__more-toggle{
  display:inline-flex; cursor:pointer;
  font-size:.85rem; font-weight:500; color: var(--green); margin-bottom: 16px;
}
.plan__more-toggle:hover{ color: var(--green-dark); }
.plan__more-toggle-text-less{ display:none; }
.plan__more-check:checked ~ .plan__more-toggle .plan__more-toggle-text-more{ display:none; }
.plan__more-check:checked ~ .plan__more-toggle .plan__more-toggle-text-less{ display:inline; }

/* Starter/Business have no "See all features" toggle, so their notes
   sat higher than Signature's — an invisible same-size stand-in
   (same classes, just hidden) reserves that exact height so the
   border above every card's note lines up across the row. */
.plan__more-toggle--spacer{ visibility:hidden; pointer-events:none; }

/* Signature plan — small upsell note (Need an online shop?), same idea
   as price.html's plan__best blocks; home page cards don't use that
   component, so a lighter-weight version lives here instead. */
.plan__note{
  border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 20px;
  font-size: .82rem; color: var(--ink-soft);
}
.plan__note strong{ display:block; color: var(--ink); margin-bottom: 2px; }
.plan--featured .btn--primary{
  width: 100%;
  background: var(--green);
  color: white;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 600;
}
.plan--featured .btn--primary:hover{
  background: var(--green-dark);
}

/* Small bridge from the paid packages to the free concept offer — a
   low-key entry point for visitors not ready to commit to a package yet. */
/* Home page: compact cards — just the differences between the plans.
   The full details live on price.html. */
.plan--compact .plan__desc{ min-height: 0; }
.plan--compact .plan__price{ margin: 18px 0 18px; }
.plan--compact .plan__list{ margin-bottom: 26px; flex: 1; }
.plan--compact .btn{ margin-top: auto; }
.plans__included{
  text-align:center; margin: 34px auto 0; max-width: 620px;
  font-size: .9rem; color: var(--ink-soft);
}
.plans__included strong{ color: var(--ink); font-weight: 600; }

.pricing__bridge{
  text-align:center; margin-top: 14px; font-size:.92rem; color: var(--ink-soft);
}
.pricing__bridge a{ color: var(--green); font-weight:500; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   Recent Work — three featured projects
   ========================================================= */
/* .work keeps no bottom padding of its own; the grid's margin-bottom
   plus Testimonials' own padding-top form the (deliberately tighter)
   gap between the two sections — see the Tablet/Mobile blocks. */
.work{ padding-bottom: 0; }
.work .section-head{ margin-bottom: 48px; }
.work-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 26px;
  margin-bottom: 56px;
}
.testimonials{ padding-top: 56px; }
/* "View All Work" sits between the grid and Testimonials, so it takes
   over the grid's bottom gap. */
.work-cta{ margin-top: -16px; margin-bottom: 56px; }
.swipe-dots{ display:none; }
.card-more{ display:none; }
.work-card{ display:block; color: inherit; text-decoration: none; }
.work__img{
  border-radius: var(--radius-lg); margin-bottom: 18px;
  border: 1px solid var(--line); overflow:hidden; contain: paint;
  /* Matches the project screenshots' own shape (1280 × 692), so the
     whole screenshot is shown with nothing cropped off the sides. */
  aspect-ratio: 1280 / 692; background: var(--paper);
  box-shadow: 0 24px 46px -26px rgba(20,40,29,.22);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work__img img{ width:100%; height:100%; object-fit: cover; object-position: top center; display:block; }
.work-card:hover .work__img{ transform: translateY(-5px); box-shadow: 0 30px 54px -24px rgba(20,40,29,.28); }
.work-card h3{ font-size:1.25rem; margin-bottom: 4px; }
.work-card p{ font-size:.88rem; color: var(--ink-faint); margin-bottom: 10px; }
.work-card:hover .link .arrow{ transform: translateX(4px); }

/* =========================================================
   Testimonials
   ========================================================= */
.quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.quote{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px;
  /* Slightly more prominent than a plain bordered card — a soft shadow
     and gentle lift on hover, matching the weight already used for
     Templates/pricing cards, without growing the section footprint. */
  box-shadow: 0 20px 40px -28px rgba(20,40,29,.16);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.quote:hover{ transform: translateY(-4px); box-shadow: 0 26px 46px -24px rgba(20,40,29,.2); }
.quote__mark{ font-family: var(--serif); font-size:2.8rem; color: var(--green); line-height:1; display:block; margin-bottom:8px; }
.quote p{ color: var(--ink-soft); font-size:.94rem; margin-bottom: 22px; }
.quote__name{ font-weight:600; font-size:.92rem; }
.quote__company{ font-size:.82rem; color: var(--ink-faint); }

/* =========================================================
   Section base spacing (home only — other pages set their own)
   ========================================================= */
section{ padding: 72px 0; } /* was 100px — narrowed per feedback */

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width: 1024px){
  section{ padding: 64px 0; } /* was 96px — narrowed per feedback */
  /* Tightened Work→Testimonials gap at this breakpoint — see the
     "Recent Work" comment above. */
  .work-grid{ margin-bottom: 46px; gap: 20px; }
  .testimonials{ padding-top: 46px; }
  /* min-height:100vh (set for desktop so header+hero fill exactly one
     screen) forces the hero to full viewport height even after the
     image+text stack into a single column below and take up far less
     room — that mismatch was showing up as a huge empty gap before the
     Process section. Let the hero size to its own content instead. */
  .hero{ min-height: auto; padding-top: 60px; padding-bottom: 60px; }
  .hero__inner{ grid-template-columns: 1fr; gap: 40px; }
  /* Full natural height (previous fix) showed the whole photo but made
     the box quite tall. A moderate aspect-ratio trims a bit off the top
     and bottom (background/surroundings) while keeping the centred
     laptop + phone fully in frame, instead of the old fixed 340px box
     which cropped too aggressively. Nudged from 4/3 to 7/5 per feedback
     to trim a little more. */
  .hero__visual{ order:-1; height: auto; aspect-ratio: 7 / 5; }
  /* The rotating showcase sizes itself, and sits above the text when
     the hero stacks into one column. */
  .hero__visual.showcase{ order: -1; aspect-ratio: auto; max-width: 620px; width: 100%; margin: 0 auto; }
  .hero__visual-img{ height: 100%; object-position: center; }

  .fc__grid{ grid-template-columns: 1fr; gap: 44px; }
  .fc__visual{ max-width: 520px; margin: 0 auto; width:100%; }
  .fc-cta__card{ padding: 44px 34px; }

  .cards{ grid-template-columns: repeat(2,1fr); }
  /* stacked plans: room for the "Most Popular" badge above each card */
  .plans{
    padding-top: 14px; row-gap: 36px;
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .plan--featured{
    grid-column: auto;
    order: 0;
    transform: none;
  }
  .plan--featured:hover{
    transform: translateY(-6px);
  }
  .quotes{ grid-template-columns: repeat(2,1fr); }
  .quotes .quote:last-child{ grid-column: span 2; }
}

@media (max-width: 768px){
  .process__grid{ grid-template-columns:1fr; gap: 40px; }
  .process__step{ border-left:none; padding:0; padding-left: 0; border-top:1px solid var(--line); padding-top: 30px; }
  .process__step:first-child{ border-top:none; padding-top:0; }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */
@media (max-width: 680px){
  /* Was 72px — combined with the previous section's own 72px bottom
     padding that put ~144px of blank space between sections on mobile,
     reading as "too much space above" each one. Tightened overall. */
  section{ padding: 48px 0; }
  .section-head{ margin-bottom: 44px; }

  /* .hero keeps the tablet breakpoint's 60px padding-top (higher
     specificity than the `section` rule above) unless overridden here —
     that's the gap that was showing above the hero image on mobile, since
     .hero__visual is reordered to the top of the stack at this width.
     Tighten mobile only; tablet (681–1024px) is untouched. */
  .hero{ padding-top: 20px; }
  .hero__trust{ gap: 4px 10px; }
  .hero__trust-dot{ display: none; }
  .hero__trust span:last-child{ flex-basis: 100%; }

  .hero__title{ font-size: 2.2rem; }
  /* Slightly more cropped than the tablet breakpoint (3/2 vs 4/3) per
     feedback that desktop + mobile needed a bit more trimmed off the
     top/bottom, while keeping the centred laptop + phone in frame. */
  .hero__visual{ height: auto; aspect-ratio: 3 / 2; }
  .hero__visual.showcase{ aspect-ratio: auto; }
  .showcase__bar{ justify-content: center; }
  .hero__visual-img{ height: 100%; object-position: center; }
  .hero__desc{ max-width:none; }

  /* Free Concept — before/after stacks vertically with the arrow rotated
     to point downward between them, and benefits collapse to one column
     so nothing feels cramped on a narrow screen. */
  .fc__benefits{ grid-template-columns: 1fr; }
  .fc__compare{ grid-template-columns: 1fr; justify-items:center; }
  .fc__compare-arrow{ transform: rotate(90deg); }
  .fc__compare-col{ width:100%; max-width: 320px; }
  .fc__phone{ width: 52px; }
  .fc-cta__card{ padding: 36px 22px; }

  .cards{ grid-template-columns: 1fr; }
  /* There's no hover on touch, so a card with a second (hover) image
     cross-fades between the two automatically instead — same
     absolute-positioned layering as desktop, just driven by a looping
     animation rather than :hover. Cards with only a default image
     (:not(:has(.card__img-hover))) keep the old static, natural-height
     treatment, since there's nothing to cross-fade with.
     16/9 (not 4/3) — these photos are wide homepage screenshots
     (~16:9-ish). object-fit:cover on a box NARROWER than the source
     (4/3 is much narrower than ~16/9) crops from the left/right, which
     was cutting off the nav bar and logo text on the sides. Desktop's
     fixed 190px-tall box is wide enough that it crops top/bottom
     instead (never an issue) — 16/9 gives mobile the same safe crop
     direction. */
  .card__img:has(.card__img-hover){ width:100%; max-width:100%; height: auto; aspect-ratio: 16 / 9; }
  .card__img:has(.card__img-hover) .card__img-default,
  .card__img:has(.card__img-hover) .card__img-hover{
    width:100%; height:100%; object-fit:cover;
  }
  .card__img:has(.card__img-hover) .card__img-default{ animation: card-crossfade-default 9s ease-in-out infinite; }
  .card__img:has(.card__img-hover) .card__img-hover{ opacity:0; object-position: top; animation: card-crossfade-hover 9s ease-in-out infinite; }
  /* Stagger every other card half a cycle so the whole grid doesn't
     flip in lockstep. */
  .card:nth-child(even) .card__img-default,
  .card:nth-child(even) .card__img-hover{ animation-delay: -4.5s; }

  .card__img:not(:has(.card__img-hover)){ height: auto; }
  .card__img:not(:has(.card__img-hover)) .card__img-default{ position: static; width: 100%; height: auto; }

  .plans{ grid-template-columns: 1fr; }
  .plan--featured{ grid-column: span 1; order:-1; }

  /* Two hero CTAs stack full-width and tap-friendly on mobile instead of
     sitting side by side; the base 34px margin-top (desktop) is tightened
     here to match the rest of the mobile hero's narrower rhythm. */
  .hero__actions{ flex-direction:column; margin-top: 22px; }
  .hero__actions .btn{ width:100%; }
  .hero__subline{ margin-top: 14px; }

  /* Icons were sized (44px) for the 3-column desktop/tablet grid — scale
     down for mobile and reuse them as the marker on the timeline line
     below instead of stacking them above the number. */
  .process__icon{ width: 32px; height: 32px; margin-bottom: 0; }

  /* Timeline layout (mobile only), matching the reference: icon sits in
     a fixed-width left column acting as a line marker; number, heading
     and paragraph are indented into the right column so they all line
     up with each other instead of spanning full width under the icon.
     The base (non-media-query) rule `.process__step:first-child{
     border-left:none; padding-left:0 }` is more specific than a plain
     `.process__step{...}` here, so it's re-declared on :first-child too
     — otherwise step 01 alone drifts out of alignment with 02/03. */
  .process__step{
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 20px;
    row-gap: 8px;
    align-items: start;
    border-left: none;
    border-top: none;
    padding: 0 16px;
  }
  .process__step:first-child{ border-top: none; padding: 0 16px; }
  /* background:var(--cream) — the icon PNGs are transparent between their
     linework, so the timeline rule behind them (z-index:0, below) was
     showing through those gaps instead of being hidden by the icon.
     Matching the page background over the icon's own box blocks the
     line wherever it passes underneath, without needing to touch the
     line's own geometry. */
  .process__icon{ grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 1; background: var(--cream); }
  .process__num{ grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 0; }
  .process__step h3{ grid-column: 2; grid-row: 2; }
  .process__step p{ grid-column: 2; grid-row: 3; }

  /* Continuous vertical line running through the icon markers. Anchored
     to this step's own icon center (top:16px = half the 32px icon) and
     stretched past the step's own bottom edge through the grid's 40px
     row gap to the next icon's center (40px + 16px = 56px), so the line
     reads as one continuous rule regardless of how tall each step's
     text is. The last step has no next icon to reach, so its line is
     removed. */
  .process__step::before{
    content: "";
    position: absolute;
    left: 31px;
    top: 16px;
    bottom: -56px;
    width: 1px;
    background: var(--line);
    z-index: 0;
  }
  .process__step:last-child::before{ content: none; }

  /* Phones: the three projects become a swipeable row. The next card
     peeks in from the right so it's clear there's more to see. */
  .work-grid{
    display:flex; gap: 16px; margin: 0 -20px 18px; padding: 4px 20px 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .work-grid::-webkit-scrollbar{ display:none; }
  .work-grid .work-card{ flex: 0 0 82%; scroll-snap-align: start; }
  .swipe-dots{ display:flex; justify-content:center; gap: 8px; margin-bottom: 40px; }
  .swipe-dots button{
    width: 8px; height: 8px; padding: 0; border-radius: 999px; background: var(--line);
    transition: width .35s var(--ease), background-color .3s var(--ease);
  }
  .swipe-dots button.is-active{ width: 22px; background: var(--green); }

  /* Templates: swipeable row, ending with a "see every template" card */
  #templateCards{
    display:flex; gap: 16px; margin: 0 -20px 18px; padding: 4px 20px 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
    align-items: stretch;
  }
  #templateCards::-webkit-scrollbar{ display:none; }
  #templateCards > .card{ flex: 0 0 82%; scroll-snap-align: start; }
  #templateCards > .card.is-hidden{ display:none; }
  #templateCards .card:hover{ transform:none; }
  .card-more{
    flex: 0 0 62%; scroll-snap-align: start;
    display:flex; flex-direction:column; justify-content:center; gap: 8px;
    padding: 26px 22px; border-radius: 14px;
    background: var(--green); color: var(--cream);
    box-shadow: 0 14px 34px -20px rgba(20,40,29,.4);
  }
  .card-more__stack{ position:relative; width: 64px; height: 50px; margin-bottom: 12px; }
  .card-more__stack span{
    position:absolute; width: 46px; height: 34px; border-radius: 6px;
    border: 1.5px solid rgba(246,243,234,.75); background: rgba(246,243,234,.08);
  }
  .card-more__stack span:nth-child(1){ left: 0; top: 14px; }
  .card-more__stack span:nth-child(2){ left: 9px; top: 7px; }
  .card-more__stack span:nth-child(3){ left: 18px; top: 0; background: rgba(246,243,234,.2); }
  .card-more__title{ font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; color: var(--cream); }
  .card-more__text{ font-size: .88rem; color: rgba(246,243,234,.8); }
  .card-more__link{ margin-top: 10px; font-size: .9rem; font-weight: 500; color: var(--cream); }
  #templateDots{ margin-bottom: 8px; }
  #templates .center-cta{ margin-top: 30px; }

  /* Testimonials: same swipeable row as Our Work */
  .quotes{
    display:flex; gap: 16px; margin: 0 -20px 18px; padding: 4px 20px 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
    align-items: stretch;
  }
  .quotes::-webkit-scrollbar{ display:none; }
  .quotes .quote{ flex: 0 0 84%; scroll-snap-align: start; display:flex; flex-direction:column; }
  .quotes .quote p{ flex: 1; }
  .quotes .quote:hover{ transform: none; }
  #quoteDots{ margin-bottom: 0; }
  .testimonials{ padding-top: 56px; }
}

@keyframes card-crossfade-default{
  0%, 40%{ opacity:1; }
  50%, 90%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes card-crossfade-hover{
  0%, 40%{ opacity:0; }
  50%, 90%{ opacity:1; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .card__img-default, .card__img-hover{ animation: none !important; }
}