@property --hero-word-head{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --hero-word-tail{syntax:'<percentage>';inherits:false;initial-value:0%}

/* ==========================================================================
   Site Sequel landing page
   Page-specific composition only: hero choreography, the transformation rail,
   the feature matrix, the process sequence and its illustrative micro-
   animations. Tokens and reusable components live in design-system.css,
   which must load first.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.hero{padding:clamp(48px,7vw,92px) 0 28px}
.hero-inner{max-width:760px;margin-inline:auto;text-align:center}
.url-capture{max-width:560px;margin-inline:auto}
.url-capture .urlform{margin-inline:0;border-radius:var(--radius-control)}
.hero .form-terms{text-align:center}
.hero .form-note:empty{display:none}
.hero-submit{flex:none;inline-size:170px}
.hero-submit-loading{align-items:center;justify-content:center}
.hero-submit:has(.hero-submit-loading.htmx-request) .hero-submit-label{display:none}
.hero-reassurance{display:flex;justify-content:center;gap:clamp(14px,2.4vw,24px);list-style:none;white-space:nowrap}
.hero-reassurance li{display:flex;align-items:center;gap:7px}
/* The live copy sets the responsive Georgia metrics and remains the no-script
   fallback. During motion a fitted SVG takes its place: the mint stroke really
   traces each glyph, then the navy face washes in and later clears left-to-right. */
.hero-word-effect{
  --hero-word-cycle:9s;--hero-word-ease:cubic-bezier(.3,.24,.32,.96);
  position:relative;display:inline-block;isolation:isolate
}
.hero-word{
  position:relative;display:inline-block;padding-inline:.05em;white-space:nowrap;
  color:var(--ink);line-height:1.18;margin-block:-.065em
}
.hero-word-glyphs{position:relative;z-index:2;display:inline-block}
.hero-word-probe{display:inline-block;width:0;height:0;vertical-align:baseline}
.hero-word-outline{
  display:none;position:absolute;z-index:1;overflow:visible;pointer-events:none;user-select:none;
  fill:none;stroke:none;stroke-width:0
}
.hero-word-effect.is-playing .hero-word-glyphs{color:transparent}
.hero-word-effect.is-playing .hero-word-outline{display:block}
.hero-word-outline text{
  font-family:var(--serif);font-size:inherit;font-weight:400;
  letter-spacing:-.022em;text-rendering:geometricPrecision
}
.hero-word-stroke{
  fill:none;stroke:var(--mint-deep);stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--hero-word-dash) var(--hero-word-dash)
}
.hero-word-solid{
  fill:var(--ink);stroke:none;--hero-word-head:0%;--hero-word-tail:0%;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--hero-word-tail) - 18%),#000 var(--hero-word-tail),#000 calc(var(--hero-word-head) - 18%),transparent var(--hero-word-head));
  mask-image:linear-gradient(90deg,transparent calc(var(--hero-word-tail) - 18%),#000 var(--hero-word-tail),#000 calc(var(--hero-word-head) - 18%),transparent var(--hero-word-head))
}
.hero-word-effect.is-playing .hero-word-stroke{animation:hero-word-draw var(--hero-word-cycle) linear infinite}
.hero-word-effect.is-playing .hero-word-solid{animation:hero-word-wash var(--hero-word-cycle) linear infinite}

/* The clean navy result owns the longest beat. Its shorter final wash leaves
   both sides of the loop blank, so the restart cannot pop. */
@keyframes hero-word-draw{
  0%,4%{stroke-dashoffset:var(--hero-word-dash);opacity:1;animation-timing-function:var(--hero-word-ease)}
  38%{stroke-dashoffset:0;opacity:1}
  54%{stroke-dashoffset:0;opacity:1;animation-timing-function:var(--ease-out)}
  59%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes hero-word-wash{
  0%,38%{--hero-word-head:0%;--hero-word-tail:0%;animation-timing-function:var(--hero-word-ease)}
  54%{--hero-word-head:124%;--hero-word-tail:0%}
  82%{--hero-word-head:124%;--hero-word-tail:0%;animation-timing-function:var(--ease-out)}
  96%,100%{--hero-word-head:124%;--hero-word-tail:124%}
}

/* --- Transformation rail ------------------------------------------------ */

.transformation{
  /* The transformation line coordinate, as a plain number. Read as a percent
     for anything positioned in the rail and as container-query width units
     for anything travelling across it, so line and mask cannot drift apart. */
  --line-pos:31;
  --card-gap:40px;
  --track-pad:320px; /* fallback for browsers without container query units */
  --rail-cycle:18s;
  padding:10px 0 clamp(66px,8vw,96px);overflow:hidden;
}
.transformation-head{position:relative;min-height:34px;margin-bottom:11px}
.rail-controls{display:flex;justify-content:flex-end}
/* Short mint stub tying the label row to the line; reaches exactly the rail. */
.transformation-head::after{
  content:"";position:absolute;z-index:1;left:calc(var(--line-pos) * 1%);
  top:calc(50% + 10px);bottom:-11px;
  width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--mint-deep-rgb),0),rgba(var(--mint-deep-rgb),.75));
}
.rail-tag{
  position:absolute;top:50%;z-index:2;left:calc(var(--line-pos) * 1%);
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.rail-tag-before{transform:translate(-100%,-50%);color:var(--ink-faint)}
.rail-tag-after{transform:translateY(-50%);color:var(--mint-ink)}
/* Hairline on each label pointing at the line. */
.rail-tag-before::after,.rail-tag-after::before{content:"";flex:none;height:1px;width:20px}
.rail-tag-before::after{background:linear-gradient(90deg,rgba(var(--ink-rgb),.05),rgba(var(--mint-deep-rgb),.8))}
.rail-tag-after::before{background:linear-gradient(90deg,rgba(var(--mint-deep-rgb),.8),rgba(var(--mint-deep-rgb),.14))}
.motion-toggle .play-icon{display:none;fill:currentColor;stroke:none}
.motion-toggle[aria-pressed="true"] .pause-icon{display:none}
.motion-toggle[aria-pressed="true"] .play-icon{display:block}

.journey-rail{
  container-type:inline-size;
  position:relative;height:272px;overflow:hidden;
  border-block:1px solid var(--line-soft);background:var(--paper-sunken);
}
/* Soft mint halo around the transformation line. */
.journey-rail::before{
  content:"";position:absolute;z-index:7;left:calc(var(--line-pos) * 1%);top:0;bottom:0;
  width:150px;transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(34px 66% at 50% 50%,rgba(var(--mint-rgb),.55),rgba(var(--mint-rgb),0) 100%),
    radial-gradient(75px 92% at 50% 50%,rgba(var(--mint-rgb),.24),rgba(var(--mint-rgb),0) 100%);
}
/* Crisp line core. */
.journey-rail::after{
  content:"";position:absolute;z-index:8;left:calc(var(--line-pos) * 1%);top:0;bottom:0;
  width:2px;margin-left:-1px;border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--mint-deep-rgb),.2),var(--mint-deep) 14%,var(--mint-deep) 86%,rgba(var(--mint-deep-rgb),.2));
  box-shadow:0 0 0 1.5px rgba(var(--mint-rgb),.5),0 0 9px rgba(var(--mint-deep-rgb),.42),0 0 24px rgba(var(--mint-rgb),.62);
}
.journey-card{
  /* Six equal phases need a 480px pitch (card + gap). Below 1280px the
     offscreen travel grows as the rail narrows, keeping that pitch fixed
     instead of letting cards converge and overlap at tablet widths. */
  --track-pad:max(320px, calc(960px - 50cqw));
  /* Card geometry stays numeric so responsive variants can retune both axes. */
  --card-w:440;
  --card-h:250;
  --card-width:calc(var(--card-w) * 1px);
  position:absolute;z-index:2;left:0;top:10px;
  width:var(--card-width);height:calc(var(--card-h) * 1px);overflow:hidden;
  border:1px solid rgba(var(--ink-rgb),.2);border-radius:var(--radius-md);
  background:var(--paper-lift);box-shadow:var(--shadow-lift);
  animation:journey-travel var(--rail-cycle) linear infinite;animation-delay:var(--delay);
  will-change:transform;
}
.journey-card:nth-child(1){--delay:-1s}
.journey-card:nth-child(2){--delay:-4s}
.journey-card:nth-child(3){--delay:-7s}
.journey-card:nth-child(4){--delay:-10s}
.journey-card:nth-child(5){--delay:-13s}
.journey-card:nth-child(6){--delay:-16s}
.journey-face{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--paper-lift)}
.journey-before{z-index:1}
.journey-after{
  z-index:2;
  clip-path:inset(0 0 0 calc(var(--line-pos) * 1cqw + var(--card-width) + var(--card-gap)));
  animation:journey-reveal var(--rail-cycle) linear infinite;animation-delay:var(--delay);
  will-change:clip-path;
}
.journey-face img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
  pointer-events:none;
}
.journey-rail.is-paused .journey-card,
.journey-rail.is-paused .journey-after{animation-play-state:paused}
@keyframes journey-travel{
  from{transform:translate3d(calc(-1 * (var(--card-width) + var(--card-gap) + var(--track-pad))),0,0)}
  to{transform:translate3d(calc(100cqw + var(--card-width) + var(--card-gap) + var(--track-pad)),0,0)}
}
@keyframes journey-reveal{
  from{clip-path:inset(0 0 0 calc(var(--line-pos) * 1cqw + var(--card-width) + var(--card-gap) + var(--track-pad)))}
  to{clip-path:inset(0 0 0 calc((var(--line-pos) - 100) * 1cqw - var(--card-width) - var(--card-gap) - var(--track-pad)))}
}

/* Legacy deep-link targets retained while the landing information architecture evolves. */
.anchor-alias{display:block;position:relative;top:calc(-1 * var(--header-height));visibility:hidden}

/* --- Feature matrix ---------------------------------------------------- */

.features{
  padding:clamp(52px,6vw,78px) 0 clamp(56px,6.5vw,86px);
  border-top:1px solid var(--line-soft);
}
.features-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(34px,5vw,68px);align-items:start;
}
.features-intro .eyebrow{margin-bottom:12px}
.features-intro h2{
  font-size:clamp(26px,2.6vw,34px);line-height:1.16;letter-spacing:-.015em;
  max-width:15ch;margin-bottom:12px;
}
.features-lede{font-size:15.5px;line-height:1.58;color:var(--ink-soft);max-width:33ch}
/* Six items divided only by internal hairlines: no outer border, no shadow. */
.feature-grid{
  --feature-gap:clamp(22px,2.8vw,38px);
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
.feature-item{
  display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;
  align-content:start;padding:16px 0 18px;border-top:1px solid var(--line-soft);
}
.feature-item:nth-child(-n+2){border-top:0;padding-top:2px}
.feature-item:nth-child(odd){padding-right:var(--feature-gap);border-right:1px solid var(--line-soft)}
.feature-item:nth-child(even){padding-left:var(--feature-gap)}
.feature-item .icon-tile{grid-row:1;grid-column:1;margin-top:1px}
.feature-item h3{grid-column:2;align-self:center;min-height:28px;display:flex;align-items:center}
.feature-item p{
  grid-column:2;margin-top:6px;font-size:14px;line-height:1.55;
  color:var(--ink-soft);max-width:36ch;
}

/* --- Process sequence -------------------------------------------------- */

.process{
  padding:clamp(54px,6.5vw,86px) 0 clamp(62px,7.5vw,98px);
  border-top:1px solid var(--line-soft);background:var(--paper-sunken);
}
.process-head{margin-bottom:clamp(30px,3.6vw,46px)}
.process-head .eyebrow{margin-bottom:11px}
.process-head h2{line-height:1.12;margin-bottom:11px}
.process-list{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;list-style:none;
}
/* Connector threaded through the step circles: card border + padding + half
   the 46px circle == 44px, so the 2px line sits at 43px. */
.process-list::before{
  content:"";position:absolute;z-index:0;left:8%;right:8%;top:43px;
  height:2px;background:linear-gradient(90deg,transparent,var(--mint-deep) 8%,var(--mint-deep) 92%,transparent);
  opacity:.58;box-shadow:0 0 8px rgba(var(--mint-deep-rgb),.22);
}
.process-card{z-index:1;min-height:322px}
.step-number{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:22px;
  border:1px solid rgba(var(--mint-deep-rgb),.42);border-radius:50%;
  background:var(--mint);color:var(--ink);font-size:12px;font-weight:750;letter-spacing:.08em;
}
.process-card > p{font-size:14px;line-height:1.58;color:var(--ink-soft)}

/* Illustrative step visuals. Each resolves to a legible static state under
   reduced motion (see the bottom of this file). */
.step-visual{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:10.5px;color:var(--ink-soft);
}
.step-url{height:52px;display:flex;align-items:stretch}
.step-url span{
  flex:1;display:flex;align-items:center;padding:0 8px;border:1px solid var(--line);
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  background:var(--paper-lift);color:var(--ink);font-weight:550;
}
.step-url b{
  width:38px;display:grid;place-items:center;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--ink);color:var(--paper-lift);
}
.build-spinner{
  width:14px;height:14px;border:2px solid rgba(255,255,255,.32);border-top-color:var(--mint);
  border-radius:50%;animation:build-spin .85s linear infinite;
}
.step-refine{--refine-cycle:15s;display:grid;grid-template-rows:32px 22px;gap:6px;overflow:hidden}
.version-message{
  position:relative;overflow:hidden;
  border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;
  background:var(--paper-sunken);
}
.version-track{position:relative;height:100%}
.version-track span{
  position:absolute;inset:0;display:flex;align-items:center;padding:0 9px;
  white-space:nowrap;opacity:0;animation:version-text var(--refine-cycle) ease-in-out infinite;
}
.version-track span:nth-child(2){animation-delay:3s}
.version-track span:nth-child(3){animation-delay:6s}
.version-track span:nth-child(4){animation-delay:9s}
.version-track span:nth-child(5){animation-delay:12s}
.version-tabs{display:flex;gap:4px}
.version-tabs b{
  width:24px;height:20px;display:grid;place-items:center;border-radius:var(--radius-xs);
  background:var(--paper-sunken);font-weight:650;opacity:0;
  animation-duration:var(--refine-cycle);animation-timing-function:linear;animation-iteration-count:infinite;
}
.version-tabs .version-1{animation-name:version-one}
.version-tabs .version-2{animation-name:version-two}
.version-tabs .version-3{animation-name:version-three}
.version-tabs .version-4{animation-name:version-four}
.version-tabs .version-5{animation-name:version-five}
.step-choice{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.step-choice span{
  min-height:58px;padding:7px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);text-align:center;
}
.step-choice span:last-child{border-color:rgba(var(--mint-deep-rgb),.45);background:var(--mint-surface-soft)}
.step-choice svg{width:21px;height:21px}
.download-arrow{animation:download-nudge 1.4s ease-in-out infinite alternate}
.globe-icon{transform-origin:center;animation:globe-spin 9s linear infinite}
.step-domain{display:grid;grid-template-columns:1fr 34px 1fr;gap:6px;align-items:center}
.step-domain > span{
  height:58px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-soft);
}
.domain-site svg{width:32px;height:32px;stroke-width:1.45}
.step-domain > .domain-www{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;font-weight:650;line-height:1.12;letter-spacing:.015em;text-transform:lowercase;
}
.domain-www b{font-weight:inherit}
.domain-www b:nth-child(2){font-size:11px;color:var(--ink)}
.domain-link{position:relative;height:12px;display:block}
.domain-link::before{
  content:"";position:absolute;left:0;right:0;top:5px;height:1px;
  background:rgba(var(--mint-deep-rgb),.55);
}
.domain-link b{
  position:absolute;left:0;top:2px;width:7px;height:7px;border-radius:50%;
  background:var(--mint-deep);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.35);
  animation:domain-connect 3.2s linear infinite;
}
@keyframes build-spin{to{transform:rotate(360deg)}}
@keyframes download-nudge{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}
@keyframes globe-spin{to{transform:rotate(360deg)}}
@keyframes version-text{
  0%{opacity:0}
  3%,17%{opacity:1}
  20%,100%{opacity:0}
}
@keyframes version-one{
  0%{opacity:0;background:var(--paper-lift);color:var(--ink)}
  3%,19.9%{opacity:1;background:var(--mint);color:var(--ink)}
  20%,100%{opacity:1;background:var(--paper-sunken);color:var(--ink-soft)}
}
@keyframes version-two{
  0%,19.9%{opacity:0;background:var(--paper-lift)}
  20%{opacity:0;background:var(--paper-lift);color:var(--ink)}
  23%,39.9%{opacity:1;background:var(--mint);color:var(--ink)}
  40%,100%{opacity:1;background:var(--paper-sunken);color:var(--ink-soft)}
}
@keyframes version-three{
  0%,39.9%{opacity:0;background:var(--paper-lift)}
  40%{opacity:0;background:var(--paper-lift);color:var(--ink)}
  43%,59.9%{opacity:1;background:var(--mint);color:var(--ink)}
  60%,100%{opacity:1;background:var(--paper-sunken);color:var(--ink-soft)}
}
@keyframes version-four{
  0%,59.9%{opacity:0;background:var(--paper-lift)}
  60%{opacity:0;background:var(--paper-lift);color:var(--ink)}
  63%,79.9%{opacity:1;background:var(--mint);color:var(--ink)}
  80%,100%{opacity:1;background:var(--paper-sunken);color:var(--ink-soft)}
}
@keyframes version-five{
  0%,79.9%{opacity:0;background:var(--paper-lift)}
  80%{opacity:0;background:var(--paper-lift);color:var(--ink)}
  83%,100%{opacity:1;background:var(--mint);color:var(--ink)}
}
/* The signal fades out before it snaps back to the left, so the reset is
   never visible. */
@keyframes domain-connect{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:calc(100% - 7px);opacity:0}
}

/* --- Pricing ---------------------------------------------------------- */

.landing-pricing{
  padding:clamp(72px,8vw,108px) 0;border-top:1px solid var(--line-soft);
  background:var(--paper-lift);
}
.pricing-section-head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  align-items:end;gap:clamp(36px,7vw,88px);margin-bottom:clamp(42px,5vw,62px)
}
.pricing-section-head h2{max-width:15ch}
.pricing-section-head>p{max-width:43ch;margin:0 0 5px;color:var(--ink-soft);font-size:16px;line-height:1.65}
.landing-pricing .tier-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--line)
}
.landing-pricing .tier-card{
  position:relative;display:flex;flex-direction:column;min-height:510px;
  padding:clamp(28px,3.2vw,40px);background:var(--paper-lift)
}
.landing-pricing .tier-card+.tier-card{border-left:1px solid var(--line)}
.landing-pricing .tier-card.is-featured{
  margin:-14px 0;padding-top:calc(clamp(28px,3.2vw,40px) + 14px);padding-bottom:calc(clamp(28px,3.2vw,40px) + 14px);
  border:1px solid rgba(var(--mint-deep-rgb),.46);
  background:var(--mint-surface-soft);box-shadow:0 18px 42px -30px rgba(var(--ink-rgb),.45)
}
.landing-pricing .tier-card.is-featured+.tier-card{border-left:0}
.landing-pricing .tier-flag{
  position:absolute;top:-12px;left:28px;margin:0;padding:4px 9px;
  border-radius:var(--radius-xs);background:var(--mint);color:var(--mint-ink);
  font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase
}
.landing-pricing .tier-name{margin:0;font-size:15px;font-weight:650}
.landing-pricing .tier-price{
  margin:10px 0 28px;font-family:var(--serif);font-size:clamp(38px,4vw,48px);
  font-weight:400;line-height:1;letter-spacing:-.025em
}
.landing-pricing .tier-price span{margin-left:4px;color:var(--ink-faint);font-family:var(--sans);font-size:12px;letter-spacing:0}
.landing-pricing .tier-features{margin:0 0 30px;padding:0;list-style:none;display:grid;gap:11px;color:var(--ink-soft);font-size:14px;line-height:1.45}
.landing-pricing .tier-features li{padding-left:22px;background:no-repeat left 4px/13px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" stroke="%230d9463" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m3.5 9.5 3.5 3.5 7.5-8"/></svg>')}
.landing-pricing .tier-features li.is-excluded{color:var(--ink-faint);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" stroke="%2394a3b8" stroke-width="2.4" stroke-linecap="round"><path d="m4.5 4.5 9 9M13.5 4.5l-9 9"/></svg>')}
.landing-pricing .tier-features strong{color:var(--mint-ink);font-weight:650}
.landing-pricing .tier-buy{width:100%;margin-top:auto;text-decoration:none}
.landing-pricing .tier-buy:not(.btn-primary){border:1px solid var(--line-strong);background:var(--paper-lift);color:var(--ink)}
.landing-pricing .tier-buy:not(.btn-primary):hover{border-color:var(--ink);background:var(--paper-sunken)}
.pricing-reassure{margin:20px 0 0;display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:12px;line-height:1.5}

/* --- Closing action --------------------------------------------------- */

.closer{padding:clamp(76px,9vw,116px) 0}
.closer-inner{max-width:820px;margin-inline:auto;text-align:center}
.closer h2{margin-bottom:14px;text-wrap:balance}
.closer-sub{color:var(--ink-on-dark-soft);font-size:17px;margin-bottom:28px}
.closer .form-note,.closer .url-loading{color:var(--ink-on-dark-faint);text-align:left}
.closer .form-note.is-error{color:var(--mint-lift)}
.closer .form-terms{color:var(--ink-on-dark-faint)}

/* --- Responsive composition ------------------------------------------- */

@media (max-width:940px){
  .features-grid{grid-template-columns:1fr;gap:clamp(26px,4vw,36px)}
  .features-intro h2{max-width:22ch}
  .features-lede{max-width:60ch}
  .process-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .process-list::before{display:none}
  .pricing-section-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .pricing-section-head h2{max-width:18ch}
  .landing-pricing .tier-card{padding:26px 22px;min-height:500px}
}

@media (max-width:700px){
  .hero{padding-top:44px}
  .url-capture{max-width:none}
  .url-capture .urlform{gap:8px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .url-capture .urlform:focus-within,.section-dark .url-capture .urlform:focus-within{border-color:transparent;box-shadow:none}
  .url-capture .urlform-field{min-height:54px;padding-inline:16px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--paper-lift);box-shadow:var(--shadow-sm)}
  .url-capture .urlform-field:focus-within{border-color:var(--line-focus);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.55)}
  .url-capture .urlform:has(input[aria-invalid="true"]){border:0}
  .url-capture .urlform:has(input[aria-invalid="true"]) .urlform-field{border-color:var(--error)}
  .section-dark .url-capture .urlform{border:0;background:transparent;box-shadow:none}
  .section-dark .url-capture .urlform-field{border-color:var(--line-dark);background:rgba(255,255,255,.07);box-shadow:none}
  .section-dark .url-capture .urlform-field:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.18)}
  .hero h1 br{display:none}
  .hero-submit{inline-size:100%}
  .hero-reassurance{flex-wrap:wrap;row-gap:8px}
  .hero-reassurance .tick{margin-top:0}
  .transformation{--line-pos:28}
  .transformation-head{margin-bottom:9px}
  .rail-tag{font-size:10px;letter-spacing:.11em;gap:7px}
  .rail-tag-before::after,.rail-tag-after::before{width:13px}
  .journey-rail{height:220px}
  .journey-rail::before{width:104px}
  /* Keep all six cards one card-width plus gap apart. The six animation phases
     divide the total travel distance evenly, so mobile needs extra offscreen
     travel rather than fewer visible cards. */
  .journey-card{--track-pad:calc(720px - 50cqw);--card-w:320;--card-h:200}
  .feature-grid{grid-template-columns:1fr}
  .feature-item{padding:15px 0 16px}
  .feature-item:nth-child(-n+2){padding-top:15px}
  .feature-item:first-child{padding-top:0;border-top:0}
  .feature-item:nth-child(2){border-top:1px solid var(--line-soft)}
  .feature-item:nth-child(odd){padding-right:0;border-right:0}
  .feature-item:nth-child(even){padding-left:0}
  .feature-item p{max-width:none}
  .process-list{grid-template-columns:1fr;gap:14px}
  .process-card{min-height:0}
  .step-visual{margin-top:28px}
  .landing-pricing .tier-grid{grid-template-columns:1fr;border-block:0;gap:0}
  .landing-pricing .tier-card{min-height:0;padding:30px 0;border-top:1px solid var(--line)}
  .landing-pricing .tier-card+.tier-card{border-left:0}
  .landing-pricing .tier-card.is-featured{margin:0 -12px;padding:34px 12px;border:1px solid rgba(var(--mint-deep-rgb),.46);border-radius:var(--radius-lg)}
  .landing-pricing .tier-card.is-featured+.tier-card{border-top:0}
  .landing-pricing .tier-flag{left:12px}
  .landing-pricing .tier-price{margin-bottom:22px}
  .landing-pricing .tier-features{margin-bottom:24px}
  .pricing-reassure{align-items:flex-start}
  .closer-inner{text-align:left}
}

@media (max-width:400px){
  .journey-card{--track-pad:calc(680px - 50cqw);--card-w:300;--card-h:188}
}

/* --- Reduced motion --------------------------------------------------- */
/* The global damper in design-system.css shortens every duration; these rules
   choose the resting frame each illustration should settle on. */

@media (prefers-reduced-motion:reduce){
  .motion-toggle{display:none}
  .transformation-head{min-height:0;margin-bottom:0}
  .transformation-head::after,.rail-tag{display:none}
  .journey-rail{display:flex;align-items:center;justify-content:center}
  .journey-rail::before,.journey-rail::after{display:none}
  .journey-card{position:relative;top:auto;left:auto;animation:none}
  .journey-card:not(:first-child){display:none}
  .journey-before{display:none}
  .journey-after{clip-path:none;animation:none}
  .build-spinner,.download-arrow,.globe-icon,.domain-link b{animation:none!important}
  .domain-link b{left:calc(100% - 7px)}
  .version-track span{display:none;animation:none!important}
  .version-track span:last-child{display:flex;opacity:1}
  .version-tabs b{animation:none!important;opacity:1;background:var(--paper-sunken);color:var(--ink-soft)}
  .version-tabs .version-5{background:var(--mint);color:var(--ink)}
  .hero-word-effect.is-playing .hero-word-glyphs{color:var(--ink)}
  .hero-word-effect.is-playing .hero-word-outline{display:none}
}

@media (prefers-contrast:more), (forced-colors:active){
  .hero-word-effect.is-playing .hero-word-glyphs{color:var(--ink)}
  .hero-word-effect.is-playing .hero-word-outline{display:none}
}

.landing-pricing .pricing-delivery-note{max-width:75ch;margin:22px auto 0;color:var(--ink-soft);font-size:14px;line-height:1.6;text-align:center}

.landing-pricing .tier-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}