/* Built with Prooflive.ai: https://prooflive.ai | ref pl1mfnwdza */
@font-face { font-family: 'Fraunces'; src: url('/media/fraunces-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/media/instrument-sans.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sample Script'; src: url('/media/script.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* brandfull.ai: paper and ink. A fat soft serif for titles, thin soft lines, forest green for the main action,
   and mustard, terracotta and blue as small touches. Sections sit on the page, not in boxes. */
:root {
  --bg: #f5efe2;
  --step: #ebe4d4;
  --ink: #1c1a15;
  --muted: #6f6a5e;
  --line: #d9d0bd;
  --edge: #bdb39d;
  --accent: #1f4a36;
  --accent-ink: #f5efe2;
  --accent-deep: #173a2a;
  --mustard: #e9b44c;
  --terra: #d8613c;
  --blue: #a7c4d4;
  --display: 'Fraunces', Georgia, serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  --step-display: clamp(3rem, 1rem + 6.2vw, 6.75rem);

  --m: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body) / 1.5 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, .ph, .aa, .cta-line input, .get-list b, .steps b { font-family: var(--display); font-weight: 900; }
h2 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--mustard); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section { scroll-margin-top: 72px; }

/* Navigation: six links and one action. On small screens the links fold into a menu. */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 14px var(--m); background: var(--bg); border-bottom: 1px solid var(--line); }
.wordmark img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 12px 20px; white-space: nowrap; transition: background 0.15s, transform 0.15s; }
.btn:hover { background: var(--accent-deep); text-decoration: none; }
.btn:active { transform: translateY(2px); }
.btn.big { padding: 17px 28px; font-size: var(--step-lead); }
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--edge); min-height: 0; font-size: inherit; display: block; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--ink); color: var(--bg); box-shadow: none; }
.nav-menu > div { position: absolute; right: 0; top: calc(100% + 14px); width: min(78vw, 300px); background: var(--bg); box-shadow: 0 0 0 1px var(--edge); display: grid; }
.nav-menu > div a { padding: 14px 18px; font-weight: 600; border-top: 1px solid var(--line); }
.nav-menu > div a:first-child { border-top: 0; }
.nav details.nav-menu, .nav details.nav-menu:last-child { border: 0; }
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; padding: 10px 14px; }
  .nav-menu { display: block; }
}
/* On phones the open menu fills the screen under the header. */
@media (max-width: 760px) {
  .nav-menu { position: static; }
  .nav-menu > div { left: 0; right: 0; top: 100%; width: auto; height: calc(100dvh - 100%); min-height: calc(100vh - 80px); align-content: start; padding: 8px var(--m) 32px; box-shadow: none; border-top: 1px solid var(--line); overflow-y: auto; }
  .nav-menu > div a { padding: 20px 0; font-family: var(--display, 'Fraunces', serif); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
}
@media (max-width: 520px) {
  .nav { gap: 12px; }
  .nav .btn { display: none; }
  .nav-menu { margin-left: auto; }
}
@media (max-width: 760px) {
  .wordmark img { height: 22px; }
  .nav { gap: 10px; }
}

/* Hero: what it does, said plainly, beside the thing happening. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--m); align-items: center; padding: clamp(40px, 7vw, 96px) var(--m) clamp(56px, 8vw, 112px); }
/* The headline is sized from its own column, so its longest line always fits on one line. */
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: clamp(2.5rem, 13.2cqw, 6.6rem); line-height: 0.95; letter-spacing: -0.02em; }
.hero h1 .line:last-child { color: var(--accent); }
h1 .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
h1 .line > span { display: block; animation: rise 0.8s var(--ease) both; }
h1 .line:nth-child(2) > span { animation-delay: 0.1s; }
h1 .line:nth-child(3) > span { animation-delay: 0.2s; }
@keyframes rise { from { transform: translateY(112%); } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }
.hero-sub { max-width: 34ch; margin-top: 28px; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; animation: fade 0.7s 0.4s both; }
.hero-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; animation: fade 0.7s 0.5s both; }
.more { font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; }
.more::after { content: ' ↓'; }

/* The hero picture: the logo goes in on the left; colours, fonts and posts come out. Nothing overlaps. */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; max-width: 600px; width: 100%; justify-self: end; }
.demo-in, .demo-out { display: grid; gap: 12px; align-content: start; }
.demo-logo { aspect-ratio: 1.25; background: #fff; display: grid; place-items: center; align-content: center; gap: 10%; box-shadow: 0 0 0 1px var(--line); animation: drop 0.9s 0.5s var(--ease) both; margin-bottom: 14px; }
.demo-logo .leaf { width: 24%; fill: #1f4d36; }
.demo-logo b { font-size: clamp(10px, 1.05vw, 15px); letter-spacing: 0.16em; color: #1f4d36; }
.demo-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.demo-swatches i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.14); animation: pop 0.5s var(--ease) both; }
.demo-swatches i:nth-child(1) { animation-delay: 1.15s; }
.demo-swatches i:nth-child(2) { animation-delay: 1.25s; }
.demo-swatches i:nth-child(3) { animation-delay: 1.35s; }
.demo-swatches i:nth-child(4) { animation-delay: 1.45s; }
.demo-swatches i:nth-child(5) { animation-delay: 1.55s; }
.demo-type { display: flex; align-items: baseline; gap: 0.3em; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.1; color: #1f4d36; animation: fade 0.7s 1.7s both; }
.demo-type b { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; }
.demo-type span { font-weight: 500; }
.demo-post { animation: fade 0.9s 2s var(--ease) both; }
.demo-tag { font-size: var(--step-small); font-weight: 600; color: var(--muted); animation: fade 0.6s both; }
.demo-tag::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; background: var(--mustard); border-radius: 50%; }
.demo-tag.t1 { animation-delay: 0.6s; }
.demo-tag.t2 { animation-delay: 1.1s; }
.demo-tag.t2::before { background: var(--terra); border-radius: 0; transform: rotate(14deg); }
.demo-tag.t3 { animation-delay: 1.9s; }
.demo-tag.t3::before { background: var(--blue); border-radius: 99px 99px 0 0; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-60%) rotate(-8deg); } 60% { opacity: 1; transform: translateY(4%) rotate(1deg); } 100% { transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } 70% { transform: scale(1.12); } }
.shuffle { position: relative; aspect-ratio: 4 / 5; }
.shuffle .post { position: absolute; inset: 0; }
.shuffle .alt-a { animation: swap-a 10s 2.5s infinite both; }
.shuffle .alt-b { animation: swap-b 10s 2.5s infinite both; }
@keyframes swap-a { 0%, 28% { opacity: 0; transform: translateY(3%); } 34%, 62% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; } }
@keyframes swap-b { 0%, 62% { opacity: 0; transform: translateY(3%); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .demo { justify-self: start; max-width: 520px; margin-top: 28px; }
}

/* Mini posts: layouts the studio produces, drawn at any size, in the sample brand's colours, fonts and logo. */
.post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; --fern: #1f4d36; --shoot: #45ac78; --clay: #c4633f; --dew: #d3e3db; --glass: #f2f8f5; --soil: #131b17; background: var(--fern); color: var(--glass); }
.post span { display: block; }
.post img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.ph { font-size: calc(var(--fs, 12.5) * 1cqw); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pscript { font-family: 'Sample Script', cursive; font-size: 14cqw; line-height: 1; white-space: nowrap; }
.pb { width: max-content; font-size: max(13px, 4.4cqw); font-weight: 600; padding: 2.4cqw 5.4cqw; border-radius: 99cqw; }
.pcopy { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; display: grid; gap: 3.2cqw; justify-items: start; }
/* The button always stands clear of the headline above it. */
.pcopy .pb, .pcard .pb { margin-top: 3.4cqw; }
/* The sample brand's logo and leaf, drawn in whatever colour the layout gives them. */
.plogo, .pmark, .pwm { background: currentColor; -webkit-mask: url('/media/fern-field-logo.svg') center / contain no-repeat; mask: url('/media/fern-field-logo.svg') center / contain no-repeat; }
.pmark, .pwm { -webkit-mask-image: url('/media/fern-field-mark.svg'); mask-image: url('/media/fern-field-mark.svg'); }
.plogo { position: absolute; width: 34cqw; aspect-ratio: 3.99; }
.pmark { width: 9cqw; aspect-ratio: 0.687; }

/* Poster: the leaf as a giant watermark, the logo up top, the words big at the foot. */
.poster .pwm { position: absolute; right: -26cqw; top: -10cqw; width: 92cqw; aspect-ratio: 0.687; color: #2a6146; transform: rotate(14deg); }
.poster .plogo { left: 8cqw; top: 8cqw; }
.poster .pscript { color: var(--shoot); }
.poster .ph { font-size: calc(var(--fs, 12.5) * 1.06cqw); }
.poster .pb { background: var(--dew); color: var(--fern); }

/* Colour block with a photo: the photo across the top, a round sticker on the join, the leaf in the corner. */
.phototop { background: var(--glass); color: var(--soil); }
.phototop img { inset: 0 0 auto 0; height: 55%; }
.phototop .psticker { position: absolute; right: 7cqw; top: calc(55% - 24cqw); width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--clay); color: var(--glass); display: grid; place-items: center; text-align: center; font-size: max(13px, 4.6cqw); font-weight: 600; line-height: 1.05; padding: 3cqw; transform: rotate(-10deg); }
.phototop .ph { position: absolute; left: 8cqw; right: 12cqw; top: 63%; font-size: calc(var(--fs, 12.5) * 0.74cqw); }
.phototop .pb { position: absolute; left: 8cqw; bottom: 6.5cqw; background: var(--fern); color: var(--glass); }
.phototop .pmark { position: absolute; right: 8cqw; bottom: 7cqw; color: var(--fern); }

/* Sticker: a loud field of colour, with the leaf on a disc that runs off the corner. */
.sticker { background: var(--clay); color: var(--glass); }
.sticker .pdisc { position: absolute; right: -22cqw; top: -22cqw; width: 78cqw; height: 78cqw; border-radius: 50%; background: var(--dew); color: var(--fern); }
.sticker .pmark { position: absolute; left: 21cqw; bottom: 15cqw; width: 17cqw; }
.sticker .pscript { color: var(--soil); }
.sticker .ph { font-size: calc(var(--fs, 12.5) * 1.02cqw); }
.sticker .pb { background: var(--soil); color: var(--glass); }

/* Arch: the photo in an arch with a ring behind it, the words centred beneath. */
.archy { background: var(--dew); color: var(--soil); }
.archy .pring { position: absolute; left: -16cqw; top: 15%; width: 62cqw; height: 62cqw; border-radius: 50%; border: 1.2cqw solid var(--clay); }
.archy img { left: 24cqw; top: 7cqw; width: 52cqw; height: 50%; border-radius: 99cqw 99cqw 0 0; }
.archy .pcopy { justify-items: center; text-align: center; gap: 3.2cqw; bottom: 8cqw; }
.archy .pscript { color: var(--fern); font-size: 12cqw; }
.archy .ph { font-size: calc(var(--fs, 12.5) * 0.74cqw); }

/* Editorial with a photo: the photo fills the post, the words sit on a card with a second colour behind it. */
.cardy img { inset: 0; }
.cardy .pbadge { position: absolute; right: 6cqw; top: 6cqw; width: 22cqw; height: 22cqw; border-radius: 50%; background: var(--glass); color: var(--fern); display: grid; place-items: center; }
.cardy .pcard { position: absolute; left: 6cqw; right: 20cqw; bottom: 8cqw; background: var(--fern); padding: 6cqw; display: grid; gap: 4cqw; box-shadow: 2.6cqw 2.6cqw 0 var(--clay); }
.cardy .ph { font-size: calc(var(--fs, 12.5) * 0.8cqw); }
.cardy .pb { background: var(--dew); color: var(--fern); }

/* How it works: four steps on the left, and one stage on the right that acts each of them out. */
.how { padding: clamp(64px, 9vw, 128px) var(--m); background: #fff; }
/* On a field of colour, lines and quiet text are ink at part strength so they read on any of them. */
.try, .rails { --line: rgba(28, 26, 21, 0.22); --edge: rgba(28, 26, 21, 0.42); --muted: rgba(28, 26, 21, 0.76); }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--m); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.steps li { border-top: 1px solid var(--line); counter-increment: step; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps button { position: relative; display: grid; grid-template-columns: 2.2em 1fr; width: 100%; padding: 22px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--muted); transition: color 0.3s; }
.steps button::before { content: counter(step); font-family: var(--display); font-weight: 900; font-size: var(--step-lead); line-height: 1.15; }
.steps b { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; }
.steps span { grid-column: 2; display: none; margin-top: 8px; }
.steps .on button { color: var(--ink); }
.steps .on span { display: block; animation: fade 0.5s var(--ease) both; }
.steps button:hover { color: var(--ink); }
.bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.bar::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.steps .on .bar::after { animation: fill 5.5s linear forwards; }
.how.still .steps .on .bar::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

.stage { position: relative; aspect-ratio: 4 / 3; background: var(--step); overflow: hidden; container-type: inline-size; }
.sc { position: absolute; inset: 0; padding: 7cqw; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.stage[data-step='0'] .sc-0, .stage[data-step='1'] .sc-1, .stage[data-step='2'] .sc-2, .stage[data-step='3'] .sc-3 { opacity: 1; visibility: visible; transition: opacity 0.45s 0.15s, visibility 0s; }
.stage .leaf { fill: #1f4d36; }
.stage svg path { fill: none; stroke: currentColor; stroke-width: 2.4; }
.stage .leaf path { fill: #1f4d36; stroke: none; }

/* 1. The logo drops into the box and is read. */
.sc-0 { display: grid; place-items: center; align-content: center; gap: 4cqw; }
.dropzone { position: relative; width: 46cqw; aspect-ratio: 1.3; border: 1.5px dashed var(--edge); display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.chip { display: grid; justify-items: center; gap: 1.6cqw; }
.chip .leaf { width: 11cqw; }
.chip b { font-size: 2.3cqw; letter-spacing: 0.18em; color: #1f4d36; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); opacity: 0; }
.file { display: flex; gap: 1.2em; font-size: max(13px, 2.2cqw); }
.file span { color: var(--muted); }
.stage[data-step='0'] .chip { animation: land 1s 0.3s var(--ease) both; }
.stage[data-step='0'] .scan { animation: scan 1.6s 1.4s ease-in-out 2 both; }
.stage[data-step='0'] .file { animation: fade 0.5s 1.2s both; }
@keyframes land { 0% { opacity: 0; transform: translateY(-180%) rotate(-10deg); } 55% { opacity: 1; transform: translateY(8%) rotate(2deg); } 100% { transform: none; } }
@keyframes scan { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35.4cqw); } }

/* 2. The colours grow out of it, one at a time, then get their names and codes. */
.sc-1 { display: grid; align-content: center; }
.sw-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; }
.sw-row div { display: grid; gap: 0.4cqw; font-size: max(13px, 1.75cqw); line-height: 1.25; }
.sw-row i { height: 34cqw; margin-bottom: 1.4cqw; transform-origin: bottom; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.12); }
.sw-row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.stage[data-step='1'] .sw-row i { animation: grow 0.7s var(--ease) both; }
.stage[data-step='1'] .sw-row b, .stage[data-step='1'] .sw-row span { animation: fade 0.5s both; }
.sw-row div:nth-child(1) > * { --d: 0.2s; }
.sw-row div:nth-child(2) > * { --d: 0.35s; }
.sw-row div:nth-child(3) > * { --d: 0.5s; }
.sw-row div:nth-child(4) > * { --d: 0.65s; }
.sw-row div:nth-child(5) > * { --d: 0.8s; }
.sw-row div:nth-child(6) > * { --d: 0.95s; }
.stage[data-step='1'] .sw-row i { animation-delay: var(--d); }
.stage[data-step='1'] .sw-row b { animation-delay: calc(var(--d) + 0.5s); }
.stage[data-step='1'] .sw-row span { animation-delay: calc(var(--d) + 0.65s); }
@keyframes grow { from { transform: scaleY(0); } }

/* 3. The fonts are chosen and the pairings are checked. */
.sc-2 { display: grid; grid-template-columns: auto 1fr; gap: 3cqw 6cqw; align-content: center; align-items: center; }
.aa { font-size: 30cqw; line-height: 0.8; letter-spacing: -0.02em; color: #1f4d36; }
.roles { display: grid; font-size: max(13px, 2.2cqw); }
.roles li { display: grid; padding: 1.5cqw 0; border-top: 1px solid var(--edge); }
.roles span { color: var(--muted); }
.checks { grid-column: 1 / -1; display: grid; gap: 1.2cqw; font-size: max(13px, 2.2cqw); font-weight: 500; }
.checks li { display: flex; align-items: center; gap: 0.7em; }
.checks svg { width: 1.1em; height: 1.1em; flex: none; color: var(--accent); stroke-dasharray: 30; }
.checks .no { color: var(--muted); }
.checks .no svg { color: var(--terra); }
.stage[data-step='2'] .aa { animation: pop 0.8s 0.2s var(--ease) both; }
.stage[data-step='2'] .roles li { animation: slide 0.6s var(--ease) both; }
.stage[data-step='2'] .roles li:nth-child(1) { animation-delay: 0.6s; }
.stage[data-step='2'] .roles li:nth-child(2) { animation-delay: 0.75s; }
.stage[data-step='2'] .roles li:nth-child(3) { animation-delay: 0.9s; }
.stage[data-step='2'] .checks li { animation: fade 0.5s both; }
.stage[data-step='2'] .checks li:nth-child(1) { animation-delay: 1.5s; }
.stage[data-step='2'] .checks li:nth-child(2) { animation-delay: 2s; }
.stage[data-step='2'] .checks li:nth-child(3) { animation-delay: 2.5s; }
.stage[data-step='2'] .checks svg { animation: draw 0.5s both; animation-delay: inherit; }
@keyframes slide { from { opacity: 0; transform: translateX(8cqw); } }
@keyframes draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* 4. A line is typed and the posts appear. */
.sc-3 { display: grid; align-content: center; gap: 3cqw; }
.typed { font-family: var(--display); font-weight: 900; font-size: 4.6cqw; line-height: 1.1; border-bottom: 2px solid var(--ink); padding-bottom: 1cqw; }
.typed span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.made { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
/* Inside the stage the posts are a picture of the result, so their small print scales with them. */
.made .pb { font-size: 4.4cqw; }
.made .psticker { font-size: 4.6cqw; }
.pass { display: flex; align-items: center; gap: 0.6em; font-size: max(13px, 2.2cqw); font-weight: 600; color: var(--accent); }
.pass svg { width: 1.1em; height: 1.1em; stroke-dasharray: 30; }
.stage[data-step='3'] .typed span { animation: wipe 1.2s 0.3s var(--ease) both; }
.stage[data-step='3'] .made .post { animation: fade 0.7s var(--ease) both; }
.stage[data-step='3'] .made .post:nth-child(1) { animation-delay: 1.9s; }
.stage[data-step='3'] .made .post:nth-child(2) { animation-delay: 2.1s; }
.stage[data-step='3'] .made .post:nth-child(3) { animation-delay: 2.3s; }
.stage[data-step='3'] .pass { animation: fade 0.5s 3.1s both; }
.stage[data-step='3'] .pass svg { animation: draw 0.5s 3.3s both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  .stage { order: -1; position: sticky; top: 60px; z-index: 1; }
}

/* Try it: the posts are explained, then set whatever is typed. */
.try { padding: clamp(64px, 9vw, 128px) var(--m); background: var(--blue); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px) var(--m); }
.try-intro p { margin-top: 20px; max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.try-field { align-self: end; display: grid; gap: 10px; }
.try-field label { font-weight: 600; }
.try-field input { width: 100%; border: 0; border-bottom: 2px solid var(--ink); background: none; padding: 0 0 0.12em; font-family: var(--display); font-weight: 900; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.1; caret-color: var(--accent); }
.try-field input:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--step-small); margin-top: 6px; }
.examples span { color: var(--muted); font-weight: 500; }
.examples button { background: none; border: 1px solid var(--edge); padding: 9px 14px; min-height: 40px; cursor: pointer; font-weight: 500; transition: border-color 0.15s, transform 0.15s; }
.examples button:hover { border-color: var(--ink); }
.examples button:active { transform: translateY(2px); }
.answer { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.8vw, 28px); align-items: start; padding: 12px 0 8px; }
.answer figure:nth-child(even) { margin-top: clamp(24px, 4vw, 64px); }
.answer .post { transition: transform 0.5s var(--ease); }
.answer figure:nth-child(1) .post { transform: rotate(-2.2deg); }
.answer figure:nth-child(2) .post { transform: rotate(1.6deg); }
.answer figure:nth-child(3) .post { transform: rotate(-1.2deg); }
.answer figure:nth-child(4) .post { transform: rotate(2deg); }
.answer figure:nth-child(5) .post { transform: rotate(-1.6deg); }
.answer figure:hover .post { transform: rotate(0deg) scale(1.04); }
.answer figcaption { margin-top: 14px; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.answer-more { grid-column: 1 / -1; font-size: var(--step-lead); line-height: 1.3; max-width: 46ch; }
.answer-more b { font-family: var(--display); font-weight: 900; }
@media (max-width: 900px) {
  .try { grid-template-columns: 1fr; }
  .answer { grid-template-columns: 1fr 1fr; }
  .answer figure:nth-child(even) { margin-top: 28px; }
}

/* The studio editor: what it lets you do on the left, and a working picture of it on the right. */
.editor { padding: clamp(64px, 9vw, 128px) var(--m); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--m); align-items: center; }
.editor-copy, .ed { min-width: 0; }
.editor-copy > p { margin-top: 20px; max-width: 38ch; font-size: var(--step-lead); line-height: 1.35; }
.editor-list { margin-top: 32px; }
.editor-list li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
.editor-list li:last-child { border-bottom: 1px solid var(--line); }
.editor-list b { font-family: var(--display); font-weight: 900; font-size: var(--step-lead); line-height: 1.15; }
.ed { display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px; grid-template-rows: auto 1fr; background: var(--bg); box-shadow: 0 0 0 1px var(--edge); font-size: 13px; line-height: 1.3; }
.ed b { font-family: var(--display); font-weight: 900; }
.ed i, .ed u { font-style: normal; text-decoration: none; display: block; }
.ed-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg); padding: 12px 16px; }
.ed-top b { font-size: 15px; margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-ok { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #a9d6b8; white-space: nowrap; animation: ed-ok 12s infinite; }
.ed-ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ed-dl { background: var(--mustard); color: var(--ink); font-weight: 600; padding: 7px 12px; white-space: nowrap; }
.ed-left, .ed-right { padding: 14px 16px 18px; display: grid; gap: 8px; align-content: start; }
.ed-left { border-right: 1px solid var(--line); }
.ed-right { border-left: 1px solid var(--line); }
.ed-left b, .ed-right b { font-size: 15px; margin-top: 8px; }
.ed-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-tools i { border: 1px solid var(--edge); padding: 9px 0; text-align: center; font-weight: 600; }
.ed u { padding: 7px 8px; border-top: 1px solid var(--line); }
.ed u.on { background: var(--ink); color: var(--bg); border-top-color: var(--ink); }
.ed-right u.on { background: var(--step); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); border-top-color: var(--line); }
.ed-dots { display: flex; gap: 7px; }
.ed-dots i { position: relative; width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.2); outline: 2px solid transparent; outline-offset: 2px; }
.ed-dots .no { opacity: 0.45; }
.ed-dots .no::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; background: var(--ink); transform: rotate(-45deg); }
.ed-dots .a { animation: ed-ring-a 12s infinite; }
.ed-dots .b { animation: ed-ring-b 12s infinite; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ed-chips i { border: 1px solid var(--edge); padding: 5px 9px; font-weight: 600; }
.ed-chips .on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ed-canvas { position: relative; background: var(--step); display: grid; place-items: center; padding: clamp(18px, 3vw, 36px); overflow: hidden; }
.ed-canvas .post { width: min(100%, 320px); overflow: visible; }
.ed-canvas .post img { clip-path: inset(0); }
/* The demonstration, on a loop: the headline is picked up, dragged until it snaps to a guide, then recoloured. */
.ed-canvas .ph { outline: 2px solid transparent; outline-offset: 1.5cqw; animation: ed-move 12s infinite; }
.ed-guide { position: absolute; top: -6%; bottom: -6%; left: 15cqw; width: 1px; background: #ff3d7f; opacity: 0; animation: ed-guide 12s infinite; }
.ed-cursor { position: absolute; width: 22px; height: 22px; left: 0; top: 0; fill: var(--ink); stroke: #fff; stroke-width: 1.2; animation: ed-cursor 12s infinite; }
@keyframes ed-move {
  0%, 11% { transform: none; outline-color: transparent; color: var(--soil); }
  13%, 20% { transform: none; outline-color: #3d5afe; color: var(--soil); }
  34%, 60% { transform: translateX(7cqw); outline-color: #3d5afe; color: var(--soil); }
  64%, 86% { transform: translateX(7cqw); outline-color: #3d5afe; color: var(--fern); }
  90% { transform: translateX(7cqw); outline-color: transparent; color: var(--fern); }
  100% { transform: none; outline-color: transparent; color: var(--soil); }
}
@keyframes ed-guide { 0%, 27% { opacity: 0; } 31%, 42% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes ed-cursor {
  0% { transform: translate(260px, 380px); }
  11%, 20% { transform: translate(110px, 285px); }
  34%, 44% { transform: translate(132px, 285px); }
  58%, 100% { transform: translate(330px, 120px); }
}
@keyframes ed-ring-a { 0%, 61% { outline-color: var(--ink); } 63%, 96% { outline-color: transparent; } 100% { outline-color: var(--ink); } }
@keyframes ed-ring-b { 0%, 61% { outline-color: transparent; } 63%, 96% { outline-color: var(--ink); } 100% { outline-color: transparent; } }
@keyframes ed-ok { 0%, 64% { transform: none; } 68% { transform: scale(1.18); } 74%, 100% { transform: none; } }
@media (max-width: 1100px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-left, .ed-right, .ed-dl { display: none; }
}

/* The calendar: a picture of it on the left, what it does on the right. */
.sched { padding: clamp(64px, 9vw, 128px) var(--m); background: #fff; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--m); align-items: center; }
.sched-copy > p { margin-top: 20px; max-width: 38ch; font-size: var(--step-lead); line-height: 1.35; }
.sched-copy, .calm { min-width: 0; }
.calm { display: grid; grid-template-columns: 124px minmax(0, 1fr); background: var(--bg); box-shadow: 0 0 0 1px var(--edge); font-size: 13px; line-height: 1.3; }
.calm b { font-family: var(--display); font-weight: 900; }
.calm i, .calm em { font-style: normal; }
.calm-tray { padding: 14px; border-right: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.calm-tray b { font-size: 15px; line-height: 1.15; }
.calm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.calm-head b { grid-column: 1 / -1; font-size: 26px; padding: 12px 12px 10px; }
.calm-head span { padding: 6px 8px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calm-head span:nth-child(2) { border-left: 0; }
.calm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calm-day { min-height: 150px; padding: 6px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 6px; align-content: start; background: var(--panel, #fbf8f1); }
.calm-day:nth-child(7n + 1) { border-left: 0; }
.calm-day:nth-child(-n + 7) { border-top: 0; }
.calm-day > i { font-weight: 600; justify-self: start; }
.calm-day.today > i { background: var(--mustard); border-radius: 50%; min-width: 22px; height: 22px; display: grid; place-items: center; }
.calm-item { display: grid; gap: 4px; }
.calm-item span { display: grid; }
.calm-item b { font-family: inherit; font-weight: 600; }
.calm-item em { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--muted); }
.calm-item em::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--edge); flex: none; }
.calm-item.ready em, .calm-item em.now { color: var(--accent); }
.calm-item.ready em::before, .calm-item em.now::before { background: var(--accent); }
.calm-item.posted { opacity: 0.55; }
.calm-item.posted em::before { background: var(--ink); }
.calm .pb, .calm .pscript, .calm .psticker, .calm .pbadge { display: none; }
/* The demonstration, on a loop: a post leaves the tray, lands on a day as a draft, then is marked ready. */
.calm-fly { animation: calm-leave 10s infinite; }
.calm-new { animation: calm-land 10s infinite; }
.calm-new em { grid-area: 2 / 1; }
.calm-new .was { animation: calm-was 10s infinite; }
.calm-new .now { animation: calm-now 10s infinite; }
@keyframes calm-leave { 0%, 18% { opacity: 1; transform: none; } 30%, 90% { opacity: 0; transform: translate(70px, 40px) scale(0.7); } 100% { opacity: 1; transform: none; } }
@keyframes calm-land { 0%, 24% { opacity: 0; transform: scale(0.7); } 34%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.7); } }
@keyframes calm-was { 0%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes calm-now { 0%, 60% { opacity: 0; } 64%, 96% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 1100px) {
  .sched { grid-template-columns: minmax(0, 1fr); }
  .sched-copy { order: -1; }
}
@media (max-width: 700px) {
  .calm { grid-template-columns: minmax(0, 1fr); }
  .calm-tray { display: none; }
  .calm-day { min-height: 0; padding: 4px; }
  .calm-item span, .calm-head span { font-size: 0; }
  .calm-head span { padding: 0; height: 0; }
}

/* The rest: four more things the brand carries into, each with a small picture of it. */
.more { padding: clamp(64px, 9vw, 128px) var(--m); }
.more-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--m); align-items: end; }
.more-head p { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m); margin-top: clamp(32px, 5vw, 64px); }
.more-grid h3 { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; margin: 22px 0 10px; }
.more-pic { background: var(--step); aspect-ratio: 1; display: grid; place-items: center; padding: 12%; overflow: hidden; }
.more-pic .post { width: 78%; }
.more-pic u, .more-pic i { display: block; text-decoration: none; font-style: normal; }
/* A post whose pieces keep arriving, to stand for the video. */
.more-anim .pwm, .more-anim .plogo, .more-anim .pscript, .more-anim .ph, .more-anim .pb { animation: more-in 6s var(--ease) infinite both; }
.more-anim .plogo { animation-delay: 0.2s; }
.more-anim .pscript { animation-delay: 0.5s; }
.more-anim .ph { animation-delay: 0.75s; }
.more-anim .pb { animation-delay: 1.05s; }
@keyframes more-in { 0% { opacity: 0; translate: 0 18px; } 14%, 86% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }
/* Two business cards, back and front. */
.m-cards { position: relative; width: 100%; aspect-ratio: 1.3; }
.m-card { position: absolute; width: 78%; aspect-ratio: 85 / 55; box-shadow: 0 0 0 1px var(--line); }
.m-card .plogo { position: static; }
.m-card.back { right: 0; top: 0; background: #1f4d36; color: #f2f8f5; display: grid; place-items: center; transform: rotate(6deg); }
.m-card.back .plogo { width: 56%; }
.m-card.front { left: 0; bottom: 0; background: #f2f8f5; color: #1f4d36; display: grid; grid-template-columns: 40% 1px 1fr; grid-auto-rows: min-content; align-content: center; column-gap: 7%; row-gap: 7%; padding: 0 8%; transform: rotate(-3deg); }
.m-card.front .plogo { width: 100%; grid-row: 1 / 4; align-self: center; }
.m-card.front i { grid-row: 1 / 4; background: #1f4d36; height: 100%; min-height: 44px; }
.m-card.front u { height: 5px; background: #1f4d36; opacity: 0.75; }
.m-card.front u:first-of-type { height: 8px; width: 78%; opacity: 1; }
.m-card.front u:last-of-type { width: 64%; }
/* A profile header: the cover with the round picture overlapping it. */
.m-profile { position: relative; width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--line); padding-bottom: 12%; }
.m-cover { display: grid; place-items: center; aspect-ratio: 3; background: #1f4d36; color: #f2f8f5; }
.m-cover .plogo { position: static; width: 34%; }
.m-avatar { position: absolute; left: 7%; top: 38%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #c4633f; color: #f2f8f5; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff; }
.m-avatar .pmark { width: 34%; }
.m-profile u { height: 7px; background: var(--ink); margin: 0 7% 0 40%; width: 34%; }
.m-profile u:first-of-type { margin-top: 7%; }
.m-profile u:last-of-type { width: 22%; opacity: 0.4; margin-top: 4%; }
/* A brand check result: the score, two colours that pass and one that does not. */
.m-check { width: 100%; display: grid; gap: 9%; }
.m-check b { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 0.9; color: var(--accent); }
.m-check span { display: grid; grid-template-columns: 22% 1fr 14%; gap: 8%; align-items: center; }
.m-check i { aspect-ratio: 1; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.18); }
.m-check u { height: 7px; background: var(--ink); opacity: 0.6; }
.m-check span::after { content: ''; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.m-check .no u { background: var(--terra); opacity: 1; }
.m-check .no::after { background: var(--terra); border-radius: 0; transform: rotate(14deg); }
@media (max-width: 1000px) {
  .more-head { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .more-grid { grid-template-columns: 1fr; }
  .more-pic { aspect-ratio: 1.4; padding: 8% 22%; }
}

/* Guard rails: three plain columns, each with a small piece of the app above it. */
.rails { padding: clamp(64px, 9vw, 128px) var(--m); background: var(--mustard); }
.rails h2 { max-width: 14ch; }
.rails-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); margin-top: clamp(32px, 5vw, 64px); }
.rails-grid > div { border-top: 1px solid var(--edge); padding-top: 24px; }
.rails h3 { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; margin: 22px 0 10px; }
.mini { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.z-dots i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.14); }
.z-dots .on { outline: 2px solid var(--ink); outline-offset: 3px; }
.z-dots .no { opacity: 0.5; }
.z-dots .no::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); transform: rotate(-45deg); }
.z-chips span { font-size: var(--step-small); font-weight: 600; border: 1px solid var(--edge); padding: 8px 14px; }
.z-chips .on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.z-onbrand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: var(--step-lead); }
.tick { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-dasharray: 30; }
.js .rails [data-reveal].in .z-dots i { animation: pop 0.5s var(--ease) both; animation-delay: calc(var(--k, 0) * 90ms + 0.2s); }
.z-dots i:nth-child(2) { --k: 1; }
.z-dots i:nth-child(3) { --k: 2; }
.z-dots i:nth-child(4) { --k: 3; }
.z-dots i:nth-child(5) { --k: 4; }
.js .rails [data-reveal].in .tick { animation: draw 0.7s 0.5s both; }
@media (max-width: 900px) {
  .rails-grid { grid-template-columns: 1fr; }
}

/* What you get: a list, not a grid of tiles. */
.get { padding: clamp(64px, 9vw, 128px) var(--m); background: #fff; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--m); align-items: start; }
.get h2 { position: sticky; top: 96px; }
.get-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 32px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.get-list li:last-child { border-bottom: 1px solid var(--line); }
.get-list b { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; }
.get-list b::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.55em; background: var(--mustard); border-radius: 50%; }
.get-list li:nth-child(3n + 2) b::before { background: var(--terra); border-radius: 0; transform: rotate(14deg); }
.get-list li:nth-child(3n) b::before { background: var(--blue); border-radius: 99px 99px 0 0; }
@media (max-width: 900px) {
  .get { grid-template-columns: 1fr; }
  .get h2 { position: static; }
  .get-list li { grid-template-columns: 1fr; }
}

/* Pricing: three plans side by side, divided by lines. The middle one is marked with the accent. */
.pricing { padding: clamp(64px, 9vw, 128px) var(--m); }
.pricing-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--m); align-items: end; }
.pricing-head p { font-size: var(--step-lead); line-height: 1.3; max-width: 36ch; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 5vw, 64px); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 32px clamp(16px, 2.4vw, 36px) 36px; border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan.main { background: #fff; box-shadow: inset 0 4px 0 var(--accent); }
.plan h3 { font-size: var(--step-lead); line-height: 1.1; }
.plan-for { color: var(--muted); min-height: 3em; }
.price { margin: 10px 0 18px; }
.price b { font-family: var(--display); font-weight: 900; font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; }
.price span { font-weight: 500; }
.plan ul { display: grid; gap: 10px; margin-bottom: 28px; }
.plan li { display: grid; grid-template-columns: 1.1em 1fr; gap: 0.6em; }
.plan li::before { content: ''; width: 0.5em; height: 0.5em; margin-top: 0.5em; background: var(--mustard); border-radius: 50%; }
.plan:nth-child(2) li::before { background: var(--terra); border-radius: 0; transform: rotate(14deg); }
.plan:nth-child(3) li::before { background: var(--blue); border-radius: 99px 99px 0 0; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.btn.line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.btn.line:hover { background: none; box-shadow: inset 0 0 0 1px var(--ink); }
.pricing-note { margin-top: 24px; color: var(--muted); max-width: 60ch; }
@media (max-width: 900px) {
  .pricing-head { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan, .plan:first-child { border-left: 0; border-top: 1px solid var(--line); padding-left: clamp(16px, 2.4vw, 36px); }
  .plan:first-child { border-top: 0; }
  .plan-for { min-height: 0; }
}

/* Questions: lines, not boxes. */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--m); padding: clamp(64px, 9vw, 128px) var(--m); align-items: start; background: #fff; }
.faq h2 { position: sticky; top: 96px; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 0; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary i { position: relative; flex: none; width: 16px; height: 16px; }
summary i::before, summary i::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform 0.25s var(--ease); }
summary i::after { transform: rotate(90deg); }
details[open] summary i::after { transform: rotate(0deg); }
summary:hover { color: var(--accent); }
details p { padding: 0 0 26px; max-width: 58ch; }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
}

/* The close: one sentence, one field, one button, on the one full field of forest. */
.cta { background: var(--accent); color: var(--accent-ink); padding: clamp(72px, 10vw, 140px) var(--m); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--m); align-items: end; }
.cta ::selection { background: var(--mustard); color: var(--ink); }
.cta-copy p { margin-top: 20px; max-width: 34ch; font-size: var(--step-lead); line-height: 1.3; }
.cta form { display: grid; gap: 10px; }
.cta label { font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cta-row input { flex: 1 1 260px; min-height: 60px; padding: 0 18px; border: 0; background: var(--bg); color: var(--ink); font-size: var(--step-lead); font-weight: 500; }
.cta-row input::placeholder { color: var(--muted); opacity: 1; }
.cta-row button { min-height: 60px; padding: 0 26px; border: 0; background: var(--mustard); color: var(--ink); font-size: var(--step-lead); font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.cta-row button:hover { background: #f2c466; }
.cta-row button:active { transform: translateY(2px); }
.cta :focus-visible { outline-color: var(--mustard); }
.cta .form-note { font-weight: 500; }
@media (max-width: 900px) {
  .cta { grid-template-columns: 1fr; }
}

/* Footer: one quiet row. */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding: 36px var(--m) 44px; }
.foot-logo img { height: 26px; width: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 500; }
.foot small { margin-left: auto; font-size: var(--step-small); color: var(--muted); }

/* Things rise into place the first time they come into view. Without script, everything is simply visible. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none; transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .shuffle .alt-a, .shuffle .alt-b { opacity: 0; }
  .bar { display: none; }
  .steps span { display: block; }
}

/* Inner pages: the title on one of the logo's colours, then the content on white. */
.page-head { min-height: min(48svh, 420px); padding: 72px var(--m) 56px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--step); }
.page-head.c2 { background: var(--blue); }
.page-head.c3 { background: var(--mustard); }
.page-head h1 { margin-bottom: 0.38em; font-size: var(--step-display); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; animation: fade 0.7s var(--ease) both; }
.page-head p { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; max-width: 36ch; animation: fade 0.7s 0.12s var(--ease) both; }
.on-light .nav { border-bottom-color: transparent; }
.sheet { background: #fff; }
.sheet { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--m); padding: 96px var(--m) 140px; }
.sheet > h2 { grid-column: 1 / 5; }
.sheet > .sheet-body { grid-column: 5 / 13; }
.sheet.stack > h2, .sheet.stack > .sheet-body { grid-column: 1 / -1; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form > * { grid-column: 1 / -1; }
.form > .half { grid-column: auto; }
.form { gap: 4px 32px; max-width: 1000px; }
.form label { display: grid; gap: 6px; padding: 18px 0 12px; border-bottom: 1px solid var(--edge); font-weight: 600; transition: border-color 0.15s; }
.form input, .form textarea { width: 100%; border: 0; background: none; padding: 0; font-size: var(--step-lead); font-weight: 400; color: var(--ink); caret-color: var(--accent); resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form label:focus-within { border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.form input:focus-visible, .form textarea:focus-visible { outline: none; }
.form button { justify-self: start; margin-top: 28px; min-height: 60px; padding: 0 28px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: var(--step-lead); font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.form button:hover { background: var(--accent-deep); }
.form button:active { transform: translateY(2px); }
.form-note { margin-top: 12px; font-size: var(--step-lead); }
.form-note a, .prose a { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.prose { columns: 2 340px; column-gap: var(--m); }
.prose h2 { break-after: avoid; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.02em; margin: 48px 0 12px; }
.prose p, .prose ul { break-inside: avoid; margin: 0 0 16px; }
.prose ul { padding-left: 1.2em; list-style: disc; }
@media (max-width: 900px) {
  .page-head { min-height: min(40svh, 340px); padding-top: 56px; }
  .form { grid-template-columns: 1fr; }
  .sheet { grid-template-columns: 1fr; padding: 64px var(--m) 96px; }
  .sheet > h2, .sheet > .sheet-body { grid-column: 1; }
}

/* ---------- The several-page site ---------- */

/* Section backgrounds, chosen page by page so neighbours differ. */
.on-white { background: #fff; }

/* A feature: the words on one side, a picture of the thing on the other. */
.feature { padding: clamp(56px, 8vw, 112px) var(--m); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--m); align-items: center; }
.feature.flip .feature-copy { order: 2; }
.feature-copy > p { margin-top: 20px; max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.feature-copy, .feature-pic { min-width: 0; }
.feature-pic { background: var(--step); padding: clamp(20px, 4vw, 56px); display: grid; place-items: center; min-height: clamp(300px, 34vw, 520px); container-type: inline-size; }
.feature.on-white .feature-pic { background: var(--bg); }
.feature.narrow .feature-pic .post { width: min(62%, 320px); }
.feature-pic u, .feature-pic i, .chap-pic u, .chap-pic i { display: block; text-decoration: none; font-style: normal; }
@media (max-width: 1000px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-copy { order: 0; }
}

/* Home: the five jobs, each a row that opens its own page. */
.chapters { padding: clamp(64px, 9vw, 128px) var(--m); }
.chapters-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--m); align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.chapters-head p { font-size: var(--step-lead); line-height: 1.3; max-width: 32ch; }
.chap { display: grid; grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 4fr); gap: var(--m); align-items: center; padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--line); transition: background 0.2s; }
.chap:last-child { border-bottom: 1px solid var(--line); }
.chap:hover { text-decoration: none; background: var(--step); }
.chap-n { font-family: var(--display); font-weight: 900; font-size: var(--step-head); line-height: 0.9; color: var(--terra); padding-left: 0.1em; }
.chap-copy { display: grid; gap: 10px; }
.chap-copy b { font-family: var(--display); font-weight: 900; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; }
.chap-copy > span { font-size: var(--step-lead); line-height: 1.3; max-width: 38ch; }
.chap-copy em { font-style: normal; font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; }
.chap-copy em::after { content: ' \2192'; }
.chap-pic { justify-self: end; width: min(100%, 300px); container-type: inline-size; }
.chapters .chap:nth-child(2) .chap-n { color: var(--mustard); }
@media (max-width: 900px) {
  .chapters-head { grid-template-columns: 1fr; }
  .chap { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .chap-pic { display: none; }
}

/* Home: the three prices on one line. */
.price-strip { background: var(--mustard); padding: clamp(56px, 8vw, 112px) var(--m); display: grid; gap: clamp(24px, 3vw, 40px); --line: rgba(28, 26, 21, 0.24); }
.price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-row p { display: grid; gap: 6px; padding: 26px clamp(14px, 2vw, 32px) 28px; border-left: 1px solid var(--line); }
.price-row p:first-child { border-left: 0; padding-left: 0; }
.price-row b { font-family: var(--display); font-weight: 900; font-size: var(--step-head); line-height: 1; }
.price-strip .more { justify-self: start; font-size: var(--step-lead); }
.price-strip .more::after { content: ' \2192'; }
@media (max-width: 760px) {
  .price-row { grid-template-columns: 1fr; }
  .price-row p { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .price-row p:first-child { border-top: 0; }
}

/* Pricing: the full comparison. */
.pricing.on-white .plans { margin-top: 0; }
.pricing.on-white .plan.main { background: var(--bg); }
.compare { padding: clamp(56px, 8vw, 112px) var(--m); }
.compare-scroll { overflow-x: auto; margin-top: clamp(24px, 3vw, 40px); }
.compare table { width: 100%; min-width: 620px; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 14px 16px 14px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
.compare thead th { border-top: 0; font-family: var(--display); font-weight: 900; font-size: var(--step-lead); padding-bottom: 16px; }
.compare tbody th { font-weight: 500; width: 46%; }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.compare td { font-weight: 600; }
.compare td.yes { color: var(--accent); }
.compare td.no { color: var(--muted); font-weight: 400; }
.compare td.yes::before, .compare td.no::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; border-radius: 50%; background: var(--accent); }
.compare td.no::before { background: none; box-shadow: inset 0 0 0 1.5px var(--edge); }

/* A single line that points somewhere else. */
.note-band { background: var(--step); padding: 28px var(--m); font-size: var(--step-lead); font-weight: 500; }
.note-band .more::after { content: ' \2192'; }

/* Guard rails on its own page sits on the page colour. */
.rails.plain { background: var(--bg); --line: #d9d0bd; --edge: #bdb39d; --muted: #6f6a5e; }

/* Footer with two groups of links. */
.foot-links { max-width: 100%; }

/* ---------- Small pictures of the product ---------- */
.m-swatches { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.2cqw; font-size: max(13px, 2.4cqw); line-height: 1.25; }
.m-swatches div { display: grid; gap: 0.4cqw; min-width: 0; }
.m-swatches i { height: 46cqw; margin-bottom: 1.6cqw; box-shadow: inset 0 0 0 1px rgba(28, 26, 21, 0.12); }
.m-swatches b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-weight: 600; }
.m-swatches span { color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.chap-pic .m-swatches { grid-template-columns: repeat(6, 1fr); gap: 2cqw; }
.chap-pic .m-swatches i { height: 60cqw; margin: 0; }
.chap-pic .m-swatches b, .chap-pic .m-swatches span { display: none; }

.m-type { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4cqw 7cqw; align-items: center; }
.m-type .aa { font-size: 34cqw; line-height: 0.8; letter-spacing: -0.02em; color: #1f4d36; }
.m-type .roles { display: grid; font-size: max(13px, 2.5cqw); }
.m-type .roles li { display: grid; padding: 1.6cqw 0; border-top: 1px solid var(--edge); }
.m-type .roles span { color: var(--muted); }
.m-type .checks { grid-column: 1 / -1; display: grid; gap: 1.4cqw; font-size: max(13px, 2.5cqw); font-weight: 500; }
.m-type .checks li { display: flex; align-items: center; gap: 0.7em; }
.m-type svg { width: 1.1em; height: 1.1em; flex: none; color: var(--accent); }
.m-type svg path { fill: none; stroke: currentColor; stroke-width: 2.4; }
.m-type .checks .no { color: var(--muted); }
.m-type .checks .no svg { color: var(--terra); }

.m-voice { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw 6cqw; font-size: max(13px, 2.5cqw); line-height: 1.4; }
.m-traits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.m-traits span { background: var(--ink); color: var(--bg); padding: 1cqw 2.6cqw; font-weight: 600; }
.m-voice b { font-family: var(--display); font-weight: 900; font-size: 1.4em; }
.m-voice ul { margin-top: 1.4cqw; display: grid; gap: 1.4cqw; }
.m-voice li { padding-top: 1.4cqw; border-top: 1px solid var(--edge); }
.m-quote { grid-column: 1 / -1; font-family: var(--display); font-weight: 900; font-size: 5.4cqw; line-height: 1.05; color: #1f4d36; }

.m-book { position: relative; width: min(100%, 420px); aspect-ratio: 16 / 10; }
.m-book span { position: absolute; inset: 0; }
.m-page { background: #fff; box-shadow: 0 0 0 1px var(--line); transform: rotate(5deg) translate(4%, 3%); }
.m-page + .m-page { transform: rotate(2.5deg) translate(2%, 1.5%); }
.m-cover-page { background: #1f4d36; color: #f2f8f5; display: grid; align-content: space-between; padding: 9%; container-type: inline-size; }
.m-cover-page .plogo { position: static; width: 44%; }
.m-cover-page b { font-family: var(--display); font-weight: 900; font-size: 11cqw; line-height: 0.95; }

.m-set { width: 100%; display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto auto; gap: 5cqw; align-items: start; }
.m-set > span { box-shadow: 0 0 0 1px var(--line); display: grid; }
.m-set .plogo { position: static; }
.m-letter { grid-row: 1 / 3; aspect-ratio: 210 / 297; background: #f2f8f5; color: #1f4d36; padding: 9%; align-content: start; gap: 4%; }
.m-letter .plogo { width: 46%; margin-bottom: 14%; }
.m-letter u { height: 4px; background: #1f4d36; opacity: 0.35; }
.m-letter u:nth-of-type(2) { width: 86%; }
.m-letter u:nth-of-type(3) { width: 62%; }
.m-letter i { height: 1px; background: #1f4d36; margin-top: auto; align-self: end; }
.m-slide { aspect-ratio: 16 / 9; background: #1f4d36; color: #f2f8f5; padding: 8%; align-content: space-between; }
.m-slide .plogo { width: 30%; }
.m-slide b { height: 9px; background: currentColor; width: 70%; }
.m-slide b + b { width: 44%; margin-top: -6%; }
.m-sig { background: #fff; color: #1f4d36; grid-template-columns: 34% 1px 1fr; column-gap: 6%; row-gap: 12%; padding: 7% 6%; align-content: center; }
.m-sig .plogo { width: 100%; grid-row: 1 / 4; align-self: center; }
.m-sig i { grid-row: 1 / 4; background: #1f4d36; }
.m-sig u { height: 4px; background: #1f4d36; opacity: 0.7; }
.m-sig u:first-of-type { height: 7px; width: 70%; opacity: 1; }
.m-sig u:last-of-type { width: 56%; }

.m-fan { position: relative; width: 100%; aspect-ratio: 2.1; }
.m-fan .post { position: absolute; width: 31%; top: 8%; }
.m-fan .post:nth-child(1) { left: 1%; transform: rotate(-4deg); }
.m-fan .post:nth-child(2) { left: 34.5%; top: 2%; z-index: 1; }
.m-fan .post:nth-child(3) { right: 1%; transform: rotate(4deg); }
.m-fan .pb, .m-fan .psticker, .m-carousel .pb, .m-pack .pb, .m-pack .psticker, .m-sizes .pb { display: none; }

.m-carousel { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; }
.m-carousel .post:nth-child(1) { order: 3; opacity: 0.6; }
.m-carousel .post:nth-child(2) { order: 2; opacity: 0.85; }
.m-carousel .post:nth-child(3) { order: 1; }
.m-carousel p { order: 4; grid-column: 1 / -1; margin-top: 18px; display: flex; gap: 8px; }
.m-carousel p i { width: 9px; height: 9px; border-radius: 50%; background: var(--edge); }
.m-carousel p i.on { background: var(--ink); }

.m-write { width: 100%; display: grid; gap: 4cqw; font-size: max(13px, 2.5cqw); line-height: 1.4; }
.m-note { background: #fff; box-shadow: 0 0 0 1px var(--edge); padding: 3cqw 3.6cqw; font-size: 1.15em; }
.m-arrow { justify-self: center; width: 2px; height: 5cqw; background: var(--ink); position: relative; }
.m-arrow::after { content: ''; position: absolute; left: -5px; bottom: -1px; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.m-write dl { margin: 0; display: grid; }
.m-write dl div { display: grid; grid-template-columns: 9em 1fr; gap: 3cqw; padding: 1.8cqw 0; border-top: 1px solid var(--edge); }
.m-write dt { color: var(--muted); }
.m-write dd { margin: 0; font-weight: 600; }
.m-write dl div:nth-child(2) dd { font-family: var(--display); font-weight: 900; font-size: 1.5em; line-height: 1.1; }

.m-treat { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.m-treat figure { position: relative; margin: 0; }
.m-treat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.m-treat figcaption { margin-top: 10px; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.m-treat .duo, .m-treat .tint { isolation: isolate; }
.m-treat .duo img { filter: grayscale(1) contrast(1.2); }
.m-treat .duo::before, .m-treat .duo::after, .m-treat .tint::before { content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; z-index: 1; }
.m-treat .duo::before { background: #1f4d36; mix-blend-mode: lighten; }
.m-treat .duo::after { background: #d3e3db; mix-blend-mode: multiply; }
.m-treat .tint::before { background: #c4633f; mix-blend-mode: color; }

.m-pack { width: min(100%, 380px); background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 8%; display: grid; gap: 14px; }
.m-pack > b { font-family: var(--display); font-weight: 900; font-size: 1.1rem; line-height: 1.1; }
.m-pack-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-pack > u { height: 5px; background: var(--ink); opacity: 0.25; }
.m-pack > u + u { width: 70%; }
.m-pack p { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--step-small); font-weight: 600; }
.m-pack p span { display: flex; align-items: center; gap: 8px; }
.m-pack p i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.m-pack p span:first-child i { background: var(--accent); box-shadow: none; }

.m-cal { width: 100%; background: var(--bg); box-shadow: 0 0 0 1px var(--edge); display: grid; }
.m-cal b { font-family: var(--display); font-weight: 900; font-size: max(18px, 6cqw); padding: 3cqw 4cqw; border-bottom: 1px solid var(--line); }
.m-cal div { display: grid; grid-template-columns: repeat(7, 1fr); }
.m-cal i { aspect-ratio: 0.8; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: #fbf8f1; background-clip: content-box; padding: 14%; }
.m-cal i:nth-child(7n + 1) { border-left: 0; }
.m-cal i:nth-child(-n + 7) { border-top: 0; }
.m-cal i.a { background-color: #1f4d36; }
.m-cal i.b { background-color: #c4633f; }
.m-cal i.c { background-color: #45ac78; }
.m-cal i.d { background-color: #d3e3db; }

.m-sizes { width: 100%; display: grid; grid-template-columns: 4fr 4fr 2.6fr 5fr; gap: 3cqw; align-items: end; }
.m-sizes > span { background: #1f4d36; }
.m-sizes .s45 { aspect-ratio: 4 / 5; }
.m-sizes .s11 { aspect-ratio: 1; background: #45ac78; }
.m-sizes .s916 { aspect-ratio: 9 / 16; background: #c4633f; }
.m-sizes .s169 { aspect-ratio: 16 / 9; background: #d3e3db; }

.feature-pic .m-cards { width: min(100%, 460px); }
.feature-pic .m-profile { width: min(100%, 460px); }
.feature-pic .m-check { width: min(100%, 340px); }
.chap-pic .m-check { width: 70%; margin-left: auto; }
.chap-pic .m-check b { font-size: 3rem; }