/* Runway Pages, every page. Direction: DIRECTION.md. A white photographic studio, black type set large,
   Lift Gold where something lifts or acts. Every color is a token below; nothing else is invented. */
:root {
  --white: #ffffff;
  --black: #000000;
  --gold: #c9a45c;
  --gold-deep: #a88437;
  --sweep: #e9e9e6;
  --graphite: #4a4a4a;
  --rule: #d6d6d3;
  --sweep-hi: #fafaf9;     /* the studio backdrop, top */
  --sweep-mid: #efefed;    /* the backdrop near the horizon */
  --floor: #f1f1ef;        /* where prints rest */
  --mute: #9a9a96;         /* an empty choice's outline */
  --on-ink: #e6e6e6;       /* text on black (the chosen example in the Building picker) */
  --ink-hover: #2b2b2b;
  --gut: clamp(20px, 4.2vw, 64px);
  --bar-h: 84px;
  --max: 1360px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--black); font: 400 19px/1.55 "Jost", "Futura", sans-serif; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

.skip { position: absolute; left: var(--gut); top: -80px; z-index: 60; padding: 12px 18px; background: var(--black); color: var(--white); text-decoration: none; }
.skip:focus { top: 12px; }

/* Buttons: a flat gold fill with the Lifted R's cut corner, black text. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px 0 28px; background: var(--gold); color: var(--black); font-weight: 600; font-size: 19px; letter-spacing: .01em; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background-color .15s ease; cursor: pointer; }
.btn:hover { background: var(--gold-deep); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--black); }

/* The bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 36px; height: var(--bar-h); padding: 0 var(--gut); transition: background-color .2s ease, box-shadow .2s ease; }
html.scrolled .bar { background: var(--white); box-shadow: 0 1px 0 var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; min-height: 44px; }
.brand span { font-weight: 500; font-size: 22px; letter-spacing: .05em; }
.nav { display: flex; gap: 30px; }
.nav a { font-weight: 500; font-size: 18px; text-decoration: none; padding: 10px 0; min-width: 44px; text-align: center; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav a[aria-current="page"], .menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.btn-bar { min-height: 50px; font-size: 18px; padding: 0 24px 0 22px; }
.burger { display: none; }

/* The first screen: the studio stage is sticky inside a track the camera travels; the copy scrolls away. */
/* short landscape screens: the first section is never shorter than its copy */
.top { position: relative; height: max(100vh, 620px); height: max(100svh, 620px); }
/* five and a half screens of scrolling: one for each of the first four prints, then the wall (studio.js, SCREENS) */
html.motion:not([data-studio="off"]) .top { height: 650vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: linear-gradient(180deg, var(--sweep-hi) 0%, var(--sweep-mid) 52%, var(--sweep) 64%, var(--sweep-hi) 100%); }
.studio-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .45s ease; }
html.studio-drawn .studio-canvas { opacity: 1; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 120% 95% at 50% 46%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .07) 100%); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .075; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero { position: absolute; inset: 0 0 auto 0; height: max(100vh, 620px); height: max(100svh, 620px); z-index: 10; overflow-x: clip; pointer-events: none; padding: calc(var(--bar-h) + 3vh) var(--gut) 0; display: flex; flex-direction: column; justify-content: space-between; }
.hero > * { pointer-events: auto; }
/* the headline sizes to the screen's height as well as its width, so on a 16:9 laptop it leaves room for the offer */
h1 { font-weight: 600; font-size: clamp(52px, min(8.4vw, 12.5vh), 136px); line-height: .95; letter-spacing: -.018em; }
/* the headline breaks only between its phrases: one phrase per line from 600px up */
h1 .ln { display: inline-block; }
@media (min-width: 600px) { h1 .ln { display: block; } }
.offer { padding-bottom: clamp(28px, 6vh, 64px); max-width: 30em; }
/* While the page scrolls, prints travel behind the copy as it leaves. A soft studio haze travels with the
   copy so it stays readable. At rest the copy sits on empty sweep, so the haze only comes in once the
   page moves, and only when the studio is in motion. */
.hero h1, .offer { position: relative; }
.hero h1::before, .offer::before { content: ""; position: absolute; inset: -14px -22px; z-index: -1; pointer-events: none; background: var(--white); filter: blur(22px); opacity: 0; transition: opacity .3s ease; }
html.motion.scrolled .hero h1::before, html.motion.scrolled .offer::before { opacity: .92; }
.offer-line { font-size: clamp(22px, 2.1vw, 32px); line-height: 1.35; font-weight: 600; max-width: 15em; }
.offer-price { margin-top: 6px; font-weight: 700; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.01em; }
.offer-terms { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--graphite); max-width: 22em; }
.offer .btn { margin-top: 20px; }
.offer-small { margin-top: 14px; font-size: 17px; color: var(--graphite); }

/* The caption is a gallery label: a white card that stays readable over any print. */
.caption { position: absolute; right: var(--gut); bottom: clamp(28px, 6vh, 64px); z-index: 11; max-width: 26em; padding: 12px 16px 13px; background: var(--white); font-size: 17px; line-height: 1.4; color: var(--graphite); }
.caption strong { display: block; font-weight: 600; font-size: 20px; color: var(--black); }

.caption-flow { display: none; }
.play { display: none; position: absolute; right: var(--gut); top: calc(var(--bar-h) + 12px); z-index: 12; min-height: 46px; padding: 0 18px; border: 2px solid var(--black); background: var(--white); color: var(--black); font: 600 17px/1 "Jost", sans-serif; cursor: pointer; }
html.rm[data-studio="gl"] .play { display: inline-flex; align-items: center; }

/* ---------- Shared chapter type and the studio surfaces ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
/* Chapter headings are the message's own words, set as large as the headline. */
.chap-h { font-weight: 600; font-size: clamp(52px, 8.4vw, 136px); line-height: .95; letter-spacing: -.018em; }
.sub-h { font-weight: 600; font-size: clamp(30px, 3.3vw, 50px); line-height: 1.1; letter-spacing: -.012em; }
.chap-h + .sub-h { margin-top: clamp(18px, 2vw, 28px); }
/* a long chapter heading breaks between its phrases, never before a lone last word */
.chap-h .ln { display: inline-block; }
.mini-h { font-weight: 700; font-size: 24px; line-height: 1.2; margin-top: 40px; }
.lead { margin-top: 22px; max-width: 30em; font-weight: 500; font-size: clamp(21px, 1.75vw, 26px); line-height: 1.4; }
.lead-sm { font-size: 21px; max-width: 34em; }
/* keeps a hyphenated term on one line */
.nw { white-space: nowrap; }
.fine { margin-top: 16px; font-size: 17px; color: var(--graphite); max-width: 36em; }
.link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 6px; display: inline-flex; align-items: center; min-height: 44px; }
.link:hover { text-decoration-color: var(--black); }

/* The page continues the studio: white, falling off to the sweep's gray where prints rest, with grain. */
.chapter { position: relative; padding: clamp(96px, 12vw, 168px) 0 clamp(96px, 11vw, 150px); background: linear-gradient(180deg, var(--white) 0%, var(--white) 62%, var(--floor) 100%); }
.chapter + .chapter { border-top: 1px solid var(--rule); }
.chapter::after, .work::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.chapter > .wrap, .work > .wrap { position: relative; z-index: 1; }

/* A print: the site's first screen with a gilt edge and the soft shadow of the studio light. */
.print { position: relative; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 2px var(--gold), 0 1px 2px rgba(0, 0, 0, .08), 0 24px 44px -26px rgba(0, 0, 0, .24); }
.print img { width: 100%; height: auto; border-radius: 10px; }
.print figcaption { position: absolute; left: 0; top: calc(100% + 16px); font-size: 17px; color: var(--graphite); }

/* ---------- The index of every demo ---------- */
.work { position: relative; padding: clamp(80px, 9vw, 130px) 0; background: var(--white); border-top: 1px solid var(--rule); }
/* The index: every demo as a small print, the same gilt edge as the runway, with its kind and name. */
.index { list-style: none; margin: 44px 0 0; padding: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 36px; border-top: 2px solid var(--black); }
.index a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.index img { display: block; width: 100%; height: auto; margin-bottom: 14px; border-radius: 3px; box-shadow: 0 0 0 2px var(--gold), 0 2px 3px rgba(0, 0, 0, .1), 0 18px 30px -18px rgba(0, 0, 0, .4); }
.index .k { font-weight: 600; font-size: 21px; line-height: 1.3; }
.index .n { font-size: 17px; line-height: 1.35; color: var(--graphite); }
.index a:hover .k { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- We Build It: the priority picker ---------- */
.recognize { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); margin-top: clamp(56px, 6vw, 90px); align-items: start; }
.pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { padding: 0; font-weight: 700; font-size: 24px; line-height: 1.35; margin-bottom: 18px; }
.pick-pr { margin-top: 44px; }
.pick-pr legend { font-size: clamp(24px, 2vw, 30px); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-ex { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pick-ex legend { grid-column: 1 / -1; }
.pick-ex label { display: flex; cursor: pointer; }
.pick-ex label span { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 10px 18px; border: 2px solid var(--black); font-size: 17px; line-height: 1.3; color: var(--graphite); }
.pick-ex label + label span { border-left: 0; }
.pick-ex b { font-weight: 700; font-size: 20px; color: var(--black); }
.pick-ex input:checked + span { background: var(--black); color: var(--on-ink); }
.pick-ex input:checked + span b { color: var(--white); }
.pick-ex input:focus-visible + span { outline: 3px solid var(--black); outline-offset: 3px; }
/* a choice mark on each example, so both read as options to tap */
.pick-ex label span { position: relative; padding-right: 54px; }
.pick-ex label span::after { content: ""; position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.pick-ex input:checked + span::after { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 4px var(--black); }
.pick-ex input:not(:checked) + span:hover { background: var(--sweep-hi); }
.pick-pr label { display: flex; align-items: center; gap: 16px; min-height: 64px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 22px; font-weight: 500; }
.pick-pr label:first-of-type { border-top: 2px solid var(--black); }
/* The selected choice carries the Lifted R's gold page, tilted 8 degrees. */
.pick-pr label::before { content: ""; flex: none; width: 18px; height: 22px; border: 2px solid var(--graphite); transform: rotate(-8deg); transition: background-color .15s ease, border-color .15s ease; }
.pick-pr label:has(input:checked) { font-weight: 700; }
.pick-pr label:has(input:checked)::before { background: var(--gold-deep); border-color: var(--gold-deep); }
.pick-pr label:has(input:focus-visible) { outline: 3px solid var(--black); outline-offset: 2px; }
.result .print { overflow: hidden; }
.result .print img { transition: opacity .18s ease; }
.result.swapping .print img { opacity: .15; }
.why { margin-top: 34px; font-weight: 500; font-size: 22px; line-height: 1.4; max-width: 32em; }
.changed { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.changed > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.changed dt { font-weight: 600; font-size: 17px; }
.changed dd { margin: 2px 0 0; font-size: 19px; line-height: 1.4; }

/* ---------- We Build It: the business's own pieces beside its finished site ---------- */
/* ---------- Scroll moments (DIRECTION.md, Scroll Through Every Section) ----------
   Every base style here is the finished state, which is what reduced motion shows. Under html.motion the
   page script sets --p (a section's progress) and --t (one object's) from the scroll, and objects move.
   Text never fades or hides. */

/* We Build It: the business's own pieces carried into its site */
.assemble { margin-top: 0; }
.assemble-pin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.assemble-list { list-style: none; margin: 26px 0 0; padding: 0; }
.assemble-list li { position: relative; padding: 11px 0 11px 40px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 19px; line-height: 1.35; }
.tick { position: absolute; left: 2px; top: 50%; width: 24px; height: 24px; margin-top: -12px; }
.tick::after { content: ""; position: absolute; left: 8px; top: 2px; width: 7px; height: 14px; border-right: 2.5px solid var(--gold-deep); border-bottom: 2.5px solid var(--gold-deep); transform: rotate(45deg); }
.assemble-scene { position: relative; aspect-ratio: 16 / 9.5; }
.assemble-print { position: absolute; right: 0; top: 13%; width: 70%; margin: 0; }
.assemble-print img { display: block; width: 100%; height: auto; }
.piece { position: absolute; z-index: 2; left: 0; width: 24%; }
.piece img { display: block; }
.piece-sign { top: 6%; }
.piece-sign img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 30px -16px rgba(0, 0, 0, .3); }
.piece-photos { top: 26%; display: flex; gap: 5%; }
.piece-photos img { flex: 1; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 12px 22px -14px rgba(0, 0, 0, .34); }
.piece-prices { top: 42%; aspect-ratio: 1600 / 844; }
.piece-prices img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 30px -16px rgba(0, 0, 0, .3); }
.piece-colors { top: 78%; aspect-ratio: 3 / 1; display: flex; gap: 6px; }
.piece-colors span { flex: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 12px 22px -14px rgba(0, 0, 0, .35); }
html.motion .assemble { height: var(--track, 300vh); }
html.motion .assemble-pin { position: sticky; top: calc(var(--bar-h) + 20px); }
html.motion .assemble.no-pin { height: auto; }
html.motion .assemble.no-pin .assemble-pin { position: static; }
html.motion .piece { transform: translate(calc(var(--dx, 0px) * var(--t, 0)), calc(var(--dy, 0px) * var(--t, 0))) scale(calc(1 + (var(--s, 1) - 1) * var(--t, 0))); opacity: var(--o, 1); will-change: transform, opacity; }
html.motion .assemble-print img { filter: saturate(var(--c, 1)); }
html.motion .assemble-print::after { content: ""; position: absolute; inset: 0; background: var(--sweep-hi); opacity: var(--v, 0); pointer-events: none; }
html.motion .assemble-list .tick { transform: scale(var(--t, 1)); }

/* We Host It: the views stand up, and the site goes out on a card, a listing and an ad */
/* the chapter clips sideways so a card on its way out never widens the page; the views stay above the
   cards tucked under the phone */
.host { overflow-x: clip; }
.views { position: relative; z-index: 2; }
html.motion .pin-track.pinned > * { position: sticky; }
/* a band that holds at the top fills the screen while it holds, so nothing empty shows under it */
html.motion .pin-track.pinned > .price { min-height: 100vh; min-height: 100svh; }
.pin-track { position: relative; }
html.motion .views .view { transform: perspective(1200px) rotateX(calc((1 - var(--t, 1)) * 28deg)); transform-origin: 50% calc(100% - 30px); will-change: transform; }
html.motion .views .view .frame { box-shadow: 0 0 0 2px var(--gold), 0 2px 3px rgba(0, 0, 0, .1), 0 calc(6px + 24px * var(--t, 1)) calc(14px + 42px * var(--t, 1)) -24px rgba(0, 0, 0, .36); }
.share { position: relative; z-index: 1; margin: clamp(48px, 5vw, 76px) auto 0; max-width: 1000px; }
.share-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px clamp(18px, 3vw, 40px); }
.card { width: 290px; padding: 18px 20px 20px; border-radius: 6px; background: var(--white); font-size: 17px; line-height: 1.4; color: var(--graphite); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 18px 32px -18px rgba(0, 0, 0, .36); }
html.motion .card { transform: translateX(calc(var(--dx, 0px) * (1 - var(--t, 1)))); will-change: transform; }
.card-listing { position: relative; z-index: 1; }
.card-label { margin-bottom: 10px; font-weight: 600; font-size: 17px; color: var(--graphite); }
.card-ad .card-label { margin: 0; padding: 14px 20px 10px; }
.card-name { font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--black); }
.card-cta { margin-top: 10px; font-weight: 600; color: var(--black); }
.card-biz { background: var(--sweep-hi); }
.card-mark { width: 44px; height: 44px; margin-bottom: 10px; }
.card-pin { display: block; margin-bottom: 8px; }
.card-open { margin-top: 6px; font-weight: 600; color: var(--black); }
.card-buttons { display: flex; gap: 10px; margin-top: 12px; }
.card-buttons span { padding: 6px 14px; border-radius: 999px; border: 2px solid var(--black); font-weight: 600; color: var(--black); }
.card-ad { padding: 0; overflow: hidden; }
.card-ad img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.card-ad-copy { padding: 14px 20px 18px; }
.share figcaption { margin-top: 26px; text-align: center; font-size: 17px; color: var(--graphite); }

/* We Keep It Up to Date: the change happens under a gold edge; the audit's checks draw in order */
.ba figure { margin: 0; }
.ba-edge { display: none; }
html.motion .ba { position: relative; display: block; max-width: 780px; }
html.motion .ba-after { position: absolute; inset: 0 0 auto 0; }
html.motion .ba-after .ba-label { text-align: right; }
html.motion .ba-after .print-crop { position: relative; overflow: visible; box-shadow: none; background: transparent; }
html.motion .ba-after .print-crop picture { display: block; clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0); }
html.motion .ba-before .print { box-shadow: 0 0 0 2px var(--gold), 0 2px 3px rgba(0, 0, 0, .1), 0 30px 56px -24px rgba(0, 0, 0, .34); }
html.motion .ba-edge { display: block; position: absolute; top: -6px; bottom: -6px; left: calc(var(--p, 1) * 100%); width: 3px; margin-left: -1.5px; background: var(--gold); }
ul.audit li { position: relative; padding-left: 32px; }
ul.audit li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 13px; margin-top: -9px; border-right: 2.5px solid var(--gold-deep); border-bottom: 2.5px solid var(--gold-deep); transform: rotate(45deg); }
html.motion ul.audit li::before { transform: rotate(45deg) scale(var(--t, 1)); }

/* $100 a Month: the bill, two ruled lines. On Home the band is black and a gold line is drawn through the
   setup fee as it comes up; on Pricing it opens on white and stands still, a firm statement. */
.price.price-paper { background: linear-gradient(180deg, var(--white) 0%, var(--white) 62%, var(--floor) 100%); }
.price.price-band { background: var(--sweep-hi); border-top: 2px solid var(--gold); border-bottom: 1px solid var(--rule); }
.price-paper .link, .price-band .link { text-decoration-color: var(--gold-deep); }
.bill { position: relative; margin: clamp(28px, 3vw, 44px) 0 0; max-width: 46em; }
.bill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--black); transform-origin: 0 50%; }
.bill > div { position: relative; display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 6px 28px; padding: 18px 0 16px; }
.bill > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
html.motion [data-moment="rule"]::before { transform: scaleX(var(--p, 1)); }
html.motion [data-moment="rule"] > div:first-child::after { transform: scaleX(clamp(0, calc(var(--p, 1) * 1.6 - .3), 1)); }
html.motion [data-moment="rule"] > div:last-child::after { transform: scaleX(clamp(0, calc(var(--p, 1) * 1.6 - .6), 1)); }
.bill dt { font-weight: 600; font-size: 19px; }
.bill dd { margin: 0; font-size: 19px; line-height: 1.45; }
.bill b { font-weight: 700; font-size: 22px; }
.bill-setup b { margin-right: 12px; }

/* The terms: a gold path runs from step to step, circle center to circle center */
.next li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 27px; bottom: -27px; width: 3px; background: var(--gold); transform-origin: 50% 0; }
.next { position: relative; }
/* the marker that rides the tip of the line (the list's own pseudo-element: a list holds only its items) */
html.motion .next::before { content: ""; position: absolute; z-index: 2; left: 7px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--floor); transform: translateY(calc(var(--y, 0px) - 1.5px)); }
/* the whole route, faint, under the drawn part: visited and still ahead read apart */
html.motion .next { background: linear-gradient(color-mix(in srgb, var(--gold) 30%, transparent), color-mix(in srgb, var(--gold) 30%, transparent)) no-repeat 15.5px 27px / 3px var(--track-h, 0px); }
html.motion .next li:not(:last-child)::after { transform: scaleY(var(--t, 1)); }

/* The index: each print settles into place as its row reaches you */
html.motion .index li { transform: perspective(1000px) translateY(calc((1 - var(--t, 1)) * 36px)) rotateX(calc((1 - var(--t, 1)) * 8deg)); transform-origin: 50% 100%; will-change: transform; }
html.motion .index li img { box-shadow: 0 0 0 2px var(--gold), 0 2px 3px rgba(0, 0, 0, .1), 0 calc(18px + 30px * (1 - var(--t, 1))) calc(30px + 34px * (1 - var(--t, 1))) -18px rgba(0, 0, 0, calc(.4 - .2 * (1 - var(--t, 1)))); }

/* ---------- We Build It: the finished site, readable, with its three notes ---------- */
.picture { margin-top: clamp(80px, 9vw, 130px); }
.views-live { display: block; margin-top: 0; }
.view-live { width: 100%; }
.picture-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 3.4vw, 56px); margin-top: 40px; align-items: start; }
.frame { position: relative; overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 2px var(--gold), 0 1px 2px rgba(0, 0, 0, .08), 0 24px 44px -26px rgba(0, 0, 0, .24); }
.frame iframe { display: block; border: 0; transform-origin: 0 0; background: var(--white); }
.frame-computer { height: 600px; }
.notes { margin: 0; }
.notes > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.notes > div:first-child { border-top: 2px solid var(--black); }
.notes dt { font-weight: 700; font-size: 20px; }
.notes dd { margin: 4px 0 0; font-size: 19px; line-height: 1.45; }

/* ---------- We Host It: the calm moment, computer and phone side by side, standing in the studio ---------- */
.studio-band { background: linear-gradient(180deg, var(--sweep-hi) 0%, var(--sweep-mid) 46%, var(--sweep) 58%, var(--floor) 74%, var(--sweep-hi) 100%); }
.studio-band + .chapter { border-top: 0; }
.host .lead { max-width: 26em; }
/* Hosting opens with its two lines side by side, so the sites start on the first screen */
.host-intro { margin-top: clamp(18px, 2vw, 28px); }
@media (min-width: 1100px) {
  .host-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
  .host-intro .lead { margin-top: 0; }
  .host .views { margin-top: clamp(40px, 4vw, 64px); }
}
.views { display: flex; align-items: flex-end; justify-content: center; gap: clamp(28px, 4vw, 64px); margin-top: clamp(56px, 6vw, 88px); }
.view { margin: 0; }
.view figcaption { margin-top: 12px; font-weight: 600; font-size: 17px; color: var(--black); text-align: center; }
.view-computer { flex: 1 1 0; min-width: 0; max-width: 900px; }
.view-computer .frame { height: 540px; }
.view-phone { flex: none; width: 300px; }
.view-phone .frame { height: 600px; border-radius: 22px; }
.share-line { margin-top: 48px; font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; justify-content: center; text-align: center; }
.host-facts { margin: 22px auto 0; max-width: 40em; text-align: center; color: var(--graphite); font-size: 19px; }

/* ---------- We Keep It Up to Date ---------- */
.update-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 72px); margin-top: 48px; align-items: start; }
.how .lead { margin-top: 0; }
.audit { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.audit li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 18px; line-height: 1.35; }
.change { margin: 0; }
.tag { display: inline-block; padding: 4px 10px; border: 2px solid var(--black); font-weight: 600; font-size: 17px; }
.change-title { margin-top: 14px; font-weight: 700; font-size: 28px; line-height: 1.25; }
.change-what { margin-top: 8px; font-size: 19px; max-width: 34em; }
.ba { display: grid; gap: 22px; margin-top: 26px; }
.ba-label { font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.print-crop { overflow: hidden; max-width: 780px; }
.print-crop img { display: block; width: 100%; height: auto; }
.ba-before .print { box-shadow: 0 0 0 2px var(--rule), 0 12px 24px -18px rgba(0, 0, 0, .3); }
.close-cta { margin-top: clamp(56px, 6vw, 88px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.close-cta p { max-width: 32em; font-weight: 500; font-size: 21px; line-height: 1.4; }

/* ---------- $100 a Month: a gold band, then the terms on black ---------- */
.price { position: relative; background: var(--gold); padding: clamp(88px, 10vw, 150px) 0 clamp(80px, 9vw, 130px); }
.price .lead { max-width: 28em; }
.terms-band { background: var(--floor); padding: clamp(88px, 10vw, 150px) 0 clamp(72px, 8vw, 120px); border-top: 1px solid var(--rule); }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); margin-top: clamp(48px, 5vw, 80px); }
.terms-h { font-weight: 700; font-size: 30px; line-height: 1.15; padding-bottom: 14px; border-bottom: 2px solid var(--gold); }
.terms dl { margin: 0; }
.terms dl > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font-weight: 700; font-size: 19px; }
.terms dd { margin: 4px 0 0; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--graphite); }
.next { margin: 18px 0 10px; padding: 0; list-style: none; counter-reset: step; }
.next li { counter-increment: step; position: relative; padding: 10px 0 10px 40px; font-size: 19px; line-height: 1.5; }
.next li::before { content: counter(step); position: absolute; z-index: 1; left: 0; top: 10px; width: 34px; height: 34px; box-sizing: border-box; border: 2px solid var(--gold); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; line-height: 1; background: var(--gold); color: var(--black); }
html.motion .next li:not(.on)::before { background: var(--white); color: var(--black); }
.next li { padding-left: 52px; }
.price-cta { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.price-cta p { font-size: 19px; }
.terms-band .link { text-decoration-color: var(--gold-deep); }

/* ---------- Pages ---------- */
@media (min-width: 1100px) { .page-work .index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; } }
/* Every inner page opens under the fixed bar with its phrase from the message, set as large as the home headline. */
.chapter.page-open, .price.page-open, .work.page-open { padding-top: calc(var(--bar-h) + clamp(56px, 7vw, 112px)); }
.next-page { margin-top: clamp(56px, 6vw, 88px); padding-top: 18px; border-top: 2px solid var(--gold); }
.next-page .link { font-size: 24px; }
.price-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

/* Home: one short chapter for each promise, each handing off to its page */
.home-ch-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; margin-top: clamp(28px, 3vw, 44px); }
.home-ch-copy .lead { margin-top: 0; }
.home-ch-copy .link { margin-top: 24px; }
.home-ch-link { margin-top: 36px; text-align: center; }
.home-print { margin: 0; overflow: hidden; }
.home-views .print img { border-radius: 10px; }
.home-views .print-phone, .home-views .print-phone img { border-radius: 22px; }
.change-home .ba { margin-top: 18px; }
html.motion .home-print { transform: perspective(1400px) rotateX(calc((1 - var(--p, 1)) * 48deg)); transform-origin: 50% 100%; will-change: transform; }
html.motion .home-print img { filter: saturate(calc(.12 + .88 * var(--p, 1))); }
html.motion .home-print::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: var(--sweep-hi); opacity: calc((1 - var(--p, 1)) * .5); pointer-events: none; }

/* Free Preview: the two designs, side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.pair-item { margin: 0; }
.pair-item .print { overflow: hidden; }
.pair-item figcaption { margin-top: 14px; font-weight: 600; font-size: 19px; }
.pair-item:last-child { position: relative; z-index: 1; }
/* only the print moves; each label stays readable under its own column */
html.motion .pair-item:last-child .print { transform: translate(calc(var(--dx, 0px) * (1 - var(--p, 1))), calc(var(--dy, 0px) * (1 - var(--p, 1)))); will-change: transform; }
.preview-dl { margin: 18px 0 0; }
.preview-dl > div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.preview-dl dt { font-weight: 700; font-size: 19px; }
.preview-dl dd { margin: 4px 0 0; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--graphite); }

/* ---------- Footer ---------- */
.foot { background: var(--sweep-hi); padding: 56px 0 56px; border-top: 2px solid var(--gold); }
.foot-grid { display: grid; gap: 14px; font-size: 17px; }
.foot-grid p { max-width: 40em; }
.brand-foot { margin: 0 0 10px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 6px; }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 500; font-size: 18px; text-decoration: none; }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.foot-note, .foot-copy { color: var(--graphite); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1099px) {
  .recognize, .picture-grid, .update-grid, .terms { grid-template-columns: minmax(0, 1fr); }
  .assemble-pin { grid-template-columns: minmax(0, 1fr); }
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .views { flex-direction: column; align-items: center; }
  .view-computer { width: 100%; }
}
@media (max-width: 599px) {
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; padding-top: 28px; }
  .index .k { font-size: 18px; }
  .home-ch-grid { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pair-item figcaption { font-size: 17px; }
  .terms { gap: 64px; }
  .terms dl > div { padding: 20px 0; }
  .pick-ex { grid-template-columns: 1fr; }
  .pick-ex label + label span { border-left: 2px solid var(--black); border-top: 0; }
  .pick-pr label { font-size: 20px; }
  .changed, .audit { grid-template-columns: minmax(0, 1fr); }
  .frame-computer { height: 560px; }
  .view-computer .frame { height: auto; aspect-ratio: 16 / 10; }
  .card { width: min(100%, 320px); }
  .foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .foot-nav a { justify-content: flex-start; }
  .bill > div { grid-template-columns: minmax(0, 1fr); }
  .view-phone { width: 280px; }
  .change-title { font-size: 24px; }
}

/* Landscape tablets and small laptops: the offer and the studio label share the bottom edge, so each keeps to its side */
/* Short landscape screens: the nearest print reaches under the offer, so its haze is on from the start */
@media (max-height: 700px) and (min-aspect-ratio: 851/1000) {
  .offer::before { opacity: .92; }
  .hero h1::before { opacity: .8; }
}
@media (max-width: 1099px) and (min-aspect-ratio: 851/1000) {
  .offer { max-width: min(30em, 52%); }
  .caption-stage { max-width: min(26em, 38%); }
}

/* Phones */
@media (max-width: 1099px) {
  .nav, .btn-bar { display: none; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0 11px; border: 0; background: transparent; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--black); transition: transform .2s ease, opacity .15s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.menu { position: fixed; inset: 0; z-index: 29; padding: calc(var(--bar-h) + 8px) var(--gut) 32px; background: var(--white); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-weight: 700; font-size: 30px; line-height: 1.1; padding: 9px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.menu-cta { align-self: stretch; margin-top: 8px; }
.menu-note { font-size: 17px; color: var(--graphite); }
.menu-label { margin-top: 16px; font-weight: 600; font-size: 17px; color: var(--graphite); }
.menu-group { display: flex; flex-direction: column; padding-left: 16px; border-left: 2px solid var(--gold); }

/* Tall screens: the row runs up behind the headline, so a white haze softens it there, the way studio
   fog would, and the caption sits under the nearest print. */
@media (max-aspect-ratio: 85/100) {
  .stage::before { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 18%, rgba(255, 255, 255, 0) 30%); }
  .hero { justify-content: flex-start; }
  .hero .play { position: static; align-self: flex-end; margin-top: 14px; }
  .caption-flow { display: block; position: static; align-self: flex-start; margin: auto 0 16px; max-width: 100%; padding-block: 10px 11px; }
  .caption-flow strong { display: inline; font-size: 17px; }
  /* short phones: the first section grows to hold its copy instead of running into the next one */
  .top { height: max(100svh, 760px); }
  .hero { height: max(100svh, 760px); }
  .caption-stage { display: none; left: var(--gut); right: auto; top: auto; bottom: 18px; }
  /* the headline sits over the row here, so its haze is on from the start */
  .hero h1::before { opacity: .8; }
  html.motion.cap-out .caption-stage { display: block; }
}
@media (max-width: 599px) {
  :root { --bar-h: 72px; }
  .brand span { font-size: 20px; }
  h1 { font-size: clamp(40px, 13vw, 64px); }
  .offer .btn { display: flex; }
}

/* ---------- Pages for each kind of business (/for/<trade>/; DIRECTION.md, Pages for Each Kind of Business) ---------- */
/* The bar: inside a trade, the logo carries the trade's name and opens the trade's own page */
.brand .brand-words { display: flex; flex-direction: column; font-size: inherit; letter-spacing: 0; }
.brand .brand-words > span:first-child { font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: .05em; }
.brand .brand-for { margin-top: 3px; font-weight: 600; font-size: 16px; line-height: 1.15; letter-spacing: .01em; color: var(--graphite); }
.brand-trade:hover .brand-for { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* The first screen: the message in the trade's words, the trade's own print on the sweep, the offer */
.trade-open { position: relative; padding: calc(var(--bar-h) + clamp(24px, 3.4vw, 52px)) 0 clamp(64px, 7vw, 110px); background: linear-gradient(180deg, var(--sweep-hi) 0%, var(--sweep-mid) 50%, var(--sweep) 66%, var(--sweep-hi) 100%); overflow-x: clip; }
.trade-open::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.trade-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy print" "lede print" "offer print"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 4vw, 72px); align-items: start; }
.trade-copy { grid-area: copy; }
.trade-h { font-weight: 600; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -.016em; text-wrap: balance; }
.trade-hero > .lead { grid-area: lede; margin-top: 20px; max-width: 24em; }
.trade-print { grid-area: print; margin: 0; align-self: center; }
.trade-print .print { transform-origin: 50% 100%; }
.trade-print figcaption { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; font-size: 18px; line-height: 1.4; color: var(--graphite); }
.trade-print figcaption .link { color: var(--black); }
.trade-hero .trade-offer { grid-area: offer; margin-top: clamp(24px, 3vw, 40px); padding-bottom: 0; max-width: 30em; }
.trade-offer::before { display: none; }
/* the one load moment: the print stands up on the sweep, straight, and settles */
@keyframes trade-stand { from { transform: perspective(1400px) rotateX(24deg) translateY(14px); } to { transform: none; } }
html.motion .trade-print .print { animation: trade-stand 1.2s cubic-bezier(.22, .7, .2, 1) .12s both; }

/* Try the feature: the demo live at phone size, scrolled to its feature; on a phone, a still of it */
.try-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; margin-top: clamp(40px, 4vw, 64px); }
.try-device { margin: 0; }
.try-live { width: 360px; height: 740px; border-radius: 28px; }
.try-still { display: none; }
.try-copy .lead { margin-top: 0; }
.try-steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; max-width: 32em; border-top: 2px solid var(--black); }
.try-steps li { counter-increment: step; position: relative; padding: 16px 0 16px 58px; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 1.45; }
.try-steps li::before { content: counter(step); position: absolute; left: 0; top: 13px; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--black); font-weight: 700; font-size: 18px; line-height: 1; }
.try-open { margin-top: 22px; }

/* The three promises, read as a contents list: each phrase large, its line under it, the whole row a link */
.promises { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; border-top: 2px solid var(--black); }
.promises li { border-bottom: 1px solid var(--rule); }
.promises a { display: block; padding: clamp(22px, 2.6vw, 36px) 0; text-decoration: none; }
.promise-h { display: block; font-weight: 600; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.015em; }
.promise-t { display: block; margin-top: 10px; max-width: 40em; font-size: 19px; line-height: 1.45; color: var(--graphite); }
.promises a:hover .promise-h { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.promises a:focus-visible { outline-offset: 4px; }

/* The other trades in the group, and the Work page's nine groups */
.trade-more { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 46em; font-size: 19px; line-height: 1.6; }
.trade-more .link { min-height: 44px; min-width: 44px; justify-content: center; }
.work-group { margin-top: clamp(56px, 6vw, 88px); }
.group-h { font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.01em; padding-bottom: 14px; border-bottom: 2px solid var(--black); }
.work-group .index { margin-top: 0; padding-top: 30px; border-top: 0; }

/* Building: the trade's feature is a piece of its own shape, sized so the column of pieces never overlaps */
.piece-feature { top: 40%; aspect-ratio: auto; width: min(24%, calc(20.2% * var(--fa, 1.9))); }
.piece-feature img { height: auto; object-fit: initial; }
.page-trade .piece-photos { top: 23%; }
.start-list { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); max-width: 1100px; }
.start-list > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.start-list > div:nth-child(-n + 2) { border-top: 2px solid var(--black); }
.start-list dt { font-weight: 700; font-size: 20px; }
.start-list dd { margin: 4px 0 0; font-size: 19px; line-height: 1.45; }
.trade-live { margin-top: clamp(48px, 5vw, 72px); }

/* Updates: the email that starts the change */
.email-line { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--black); max-width: 24em; }
.email-label { display: block; font-weight: 600; font-size: 17px; color: var(--graphite); }
.email-text { display: block; margin-top: 6px; font-weight: 600; font-size: 22px; line-height: 1.35; }

/* Pricing: the website without updates, and a trade's examples of changes */
.bill-once b { margin-right: 12px; }
.terms dd .plain { list-style: none; margin: 0; padding: 0; }
.terms dd .plain li + li { margin-top: 4px; }

@media (max-width: 1099px) {
  .trade-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "offer" "print" "lede"; grid-template-rows: none; }
  .trade-print { margin-top: clamp(24px, 4vw, 40px); max-width: 760px; }
  .trade-hero .trade-offer { margin-top: 28px; }
  .trade-hero > .lead { margin-top: 28px; }
}
@media (max-width: 767px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); }
  .try-live { display: none; }
  .try-still { display: block; max-width: 390px; }
  .try-still img { border-radius: 10px; }
  .try-hint { display: none; }
  .start-list { grid-template-columns: minmax(0, 1fr); }
  .start-list > div:nth-child(2) { border-top: 1px solid var(--rule); }
}
@media (max-width: 599px) {
  .brand .brand-words > span:first-child { font-size: 20px; }
  .brand .brand-for { font-size: 15px; max-width: 12.5em; }
  .trade-h { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.04; }
  .trade-print { margin-top: 18px; }
  .trade-print figcaption { margin-top: 12px; }
  .trade-hero .trade-offer { margin-top: 18px; }
  .trade-offer .offer-line { font-size: 21px; }
  .trade-offer .offer-price { font-size: 32px; }
  .promise-t { font-size: 18px; }
  .try-steps li { font-size: 18px; padding-left: 52px; }
}
.page-trade .build .assemble { margin-top: clamp(48px, 5vw, 80px); }
.trade-try { padding-top: clamp(72px, 8vw, 120px); }
@media (max-width: 420px) {
  .page-trade .bar { gap: 14px; }
  .brand .brand-for { max-width: 11em; }
}

/* Landing page, after Codex round 1: the update section shows the trade's own change; the sections sit closer */
.keep-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); margin-top: clamp(28px, 3vw, 44px); align-items: start; }
.keep-copy .lead { margin-top: 0; }
.keep-links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.keep-after { margin: 0; }
.keep-after .print-crop { max-width: 820px; }
.page-trade.page-home .chapter { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.page-trade.page-home .trade-open { padding-bottom: clamp(48px, 5vw, 80px); }
@media (max-width: 1099px) {
  .keep-grid { grid-template-columns: minmax(0, 1fr); }
  .trade-hero .trade-offer { margin-top: 20px; }
  .trade-print { margin-top: 26px; }
}

/* Landing page, after Codex round 2: on a phone the trade's demo shows as a phone screen, sharp and readable */
@media (max-width: 599px) {
  .trade-print .print { width: min(100%, 300px); border-radius: 24px; }
  .trade-print .print img { border-radius: 24px; }
}
@media (max-width: 1099px) and (min-width: 768px) {
  .try-live { width: 330px; height: 680px; }
}

/* Phones: a live demo shows as a still of the same site. A finger always scrolls the page, never a site inside a
   frame, and a phone loads one image instead of a whole demo. The demo stays one tap away beside it. */
.frame-still { display: none; }
@media (max-width: 767px) {
  .frame iframe[data-live] { display: none; }
  .frame-still { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: inherit; }
  .frame-computer, .view-computer .frame { height: auto; aspect-ratio: 16 / 10; }
}