/* Website art-direction proposal. Brand authority remains brand/DESIGN.md.
   The real product iframe, status colours and 3D motion are deliberately untouched. */
:root{--co-paper:#FAF8F4;--co-ink:#1F2A22;--co-stone:#F1EEE7;--co-line:#D1CEC4;--co-dim:#B8C0B7;}
html{background:var(--co-paper);color:var(--co-ink)}body{font-family:Archivo,Arial,sans-serif}
.stage{color:var(--co-paper);background:radial-gradient(ellipse at 68% 65%,#253029 0%,#1B231E 43%,#141B17 78%)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6FA98A;outline-offset:5px}
.site-nav{position:absolute;z-index:4;top:0;left:0;width:100%;padding:28px 4%;display:flex;align-items:center;justify-content:space-between;font-size:13px;transition:opacity 240ms ease}
.site-nav a{text-decoration:none}.nav-wordmark{font:24px/1 CentreDisplay,Georgia,serif}.site-nav>div{display:flex;gap:32px;align-items:center}.site-nav .nav-contact{padding:12px 0 12px 22px;border-left:1px solid #FAF8F42B}.nav-contact span{margin-left:14px}
.intro-pending .site-nav{opacity:0;visibility:hidden;pointer-events:none}.hero-copy h1{color:var(--co-paper)}.hero-copy p{line-height:1.6}.hero-copy .support{color:#C5CEC4;max-width:31ch;font-size:14px}.hero-copy>a{text-decoration:underline;text-decoration-color:#95AC9B;text-decoration-thickness:1px;text-underline-offset:7px;padding-bottom:12px!important;font-size:14px}
.hint{font-family:Archivo,Arial,sans-serif;color:var(--co-dim);letter-spacing:.03em}.intro-replay{font-family:Archivo,Arial,sans-serif;color:var(--co-dim)}
.tour-copy{color:var(--co-paper)}.tour-copy .tour-eyebrow{color:var(--co-dim);font-size:10px;letter-spacing:.08em}.tour-copy .tour-role{font-size:12px;color:#D5E4D8;letter-spacing:.01em;border-left:2px solid #6FA98A;padding-left:10px}
.tour-copy h2{color:var(--co-paper);font-weight:400}.tour-explanation{color:#D0D5CC;line-height:1.6}.tour-chapters button{color:#B8C0B7;border-bottom:2px solid #6A786D;min-width:34px}.tour-chapters button[aria-current=step]{color:var(--co-paper);border-color:#8ABC9B;background:transparent}.tour-chapters button:hover{color:white;border-color:#D5E4D8}.tour-skip{color:#D0D5CC}.tour-disclaimer{color:#B8C0B7}
.finish-copy{left:calc(var(--tour-phone-left,55vw) - 318px);top:29%;width:270px}.finish-copy h2{font:400 clamp(28px,2.6vw,40px)/1.15 CentreDisplay,Georgia,serif;letter-spacing:-.02em;margin:0 0 22px}.finish-copy p{font-size:16px;line-height:1.6;color:#D0D5CC}
.section-kicker{font:600 12px/1.5 Archivo,Arial,sans-serif;letter-spacing:.015em;max-width:none;margin:0 0 30px;color:var(--co-green)}
.tour-end{min-height:0;padding:52px max(6%,calc((100% - 1200px)/2));display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--co-stone);color:var(--co-ink);border-top:0;border-bottom:1px solid var(--co-line)}
.tour-end .section-kicker{margin-bottom:12px;color:var(--co-green);font-size:12px}.tour-end h2{font:400 clamp(27px,3vw,40px)/1.15 CentreDisplay,Georgia,serif;margin:0}.tour-end-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start;flex-shrink:0}.tour-end-actions a,.tour-end .compact-demo{display:inline-block;color:var(--co-green);font-size:13px;margin:0;text-decoration:none}.tour-end-actions a:first-child{font-weight:600;border-bottom:1px solid var(--co-green);padding-bottom:8px}.tour-end-actions span{margin-left:14px}
.centre-story,.centre-purpose,.contact-section{padding:112px max(6%,calc((100% - 1200px)/2));background:var(--co-paper);color:var(--co-ink)}
.story-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(40px,9vw,140px);align-items:start}.centre-story h2{font:400 clamp(40px,5.4vw,76px)/1.08 CentreDisplay,Georgia,serif;letter-spacing:-.025em;max-width:12ch;margin:0}.story-copy p{font-size:17px;line-height:1.7;max-width:37ch;margin:0 0 24px;color:#4E5B51}.story-copy .story-lead{font-size:24px;line-height:1.4;color:var(--co-ink);margin-bottom:24px}.story-copy .story-outcome{color:var(--co-ink);border-top:1px solid var(--co-line);padding-top:26px;margin-top:36px;margin-bottom:0}
.centre-purpose{padding-top:0;display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(40px,9vw,140px)}.purpose-intro{border-top:1px solid var(--co-line);padding-top:32px}.purpose-intro h2{font:400 clamp(32px,3.8vw,49px)/1.13 CentreDisplay,Georgia,serif;letter-spacing:-.025em;max-width:15ch;margin:0 0 24px}.purpose-intro>p:last-child{font-size:16px;line-height:1.65;color:#4E5B51;max-width:29ch}.purpose-list article{border-top:1px solid var(--co-line);padding:30px 0}.purpose-list h3{font:600 20px/1.3 Archivo,Arial,sans-serif;margin:0 0 13px}.purpose-list p{font-size:16px;line-height:1.6;max-width:43ch;color:#4E5B51;margin:0}
.contact-section{background:var(--co-green);color:var(--co-paper);display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;padding-top:82px;padding-bottom:82px}.contact-section .section-kicker{color:#D7E4DA}.contact-section h2{font:400 clamp(38px,4.4vw,62px)/1.12 CentreDisplay,Georgia,serif;letter-spacing:-.02em;margin:0}.contact-action p{font-size:18px;line-height:1.6;color:#E0E9E1;max-width:30ch;margin:0 0 28px}.primary-contact{display:inline-flex;align-items:center;gap:36px;padding:18px 24px;background:var(--co-paper);color:var(--co-ink);border-radius:9px;font:600 14px/1.4 Archivo,Arial,sans-serif;text-decoration:none}.primary-contact:hover{background:white}.contact-note{display:block;font-size:11px;color:#D7E4DA;margin-top:14px}
.site-footer{background:var(--co-paper);color:var(--co-ink);padding:40px 6%;display:flex;gap:30px;align-items:center;justify-content:space-between}.footer-wordmark{font:28px/1 CentreDisplay,Georgia,serif;text-decoration:none}.site-footer p,.site-footer>a:last-child{font:12px/1.6 Archivo,Arial,sans-serif;color:#4E5B51;margin:0;max-width:none}
@media(max-width:1050px){.site-nav{padding:25px 5%}.story-layout,.centre-purpose{gap:50px}.contact-section{gap:35px}.finish-copy{width:230px;left:calc(var(--tour-phone-left,55vw) - 278px)}}
@media(max-width:819px){.site-nav{padding:20px 7%;font-size:12px}.site-nav>div{gap:18px}.site-nav a[href="#centre-story"]{display:none}.nav-wordmark{font-size:21px}.site-nav .nav-contact{padding:8px 0;border:0}.hero-copy{top:15%}.hero-copy h1{font-size:48px}.hero-copy p{max-width:29ch}.hero-copy>a{font-size:13px}.finish-copy{left:7%;top:5%;width:86%}.tour-end{padding:36px 7%;display:block}.tour-end-actions{margin-top:26px;gap:20px}.centre-story,.centre-purpose,.contact-section{padding:65px 7%;display:block}.story-layout{display:block}.centre-story h2{font-size:47px;max-width:14ch;margin-bottom:34px}.story-copy p{font-size:16px}.story-copy .story-lead{font-size:21px}.centre-purpose{padding-top:0}.purpose-intro{margin-bottom:32px}.purpose-intro h2{font-size:38px}.purpose-list article{padding:24px 0}.contact-section h2{font-size:42px}.contact-action{margin-top:34px}.primary-contact{gap:24px}.site-footer{padding:32px 7%;align-items:flex-start;flex-direction:column;gap:18px}}
@media(max-width:819px),(prefers-reduced-motion:reduce){.tour-mobile{background:var(--co-paper);color:var(--co-ink)}.tour-mobile>header p:not(.tour-eyebrow),.mobile-step-copy>p:last-child{color:#4E5B51}.tour-mobile .tour-eyebrow,.tour-mobile .tour-role{color:var(--co-green)}.tour-mobile article{border-color:var(--co-line)}.mobile-actions button{color:var(--co-green);border-color:#7E9384}.mobile-actions button[aria-pressed=true]{background:var(--co-green);color:var(--co-paper)}.mobile-product{box-shadow:none;border-color:var(--co-line)}.tour-mobile>header a{color:var(--co-green)}}
@media(prefers-reduced-motion:reduce){.site-nav{display:none;transition:none}}

.site-nav a{min-height:44px;display:inline-flex;align-items:center}.contact-section a:focus-visible{outline-color:var(--co-paper)}

/* Content pass: one outcome before the demonstration, then proof and buying questions. */
.hero-copy .support{max-width:40ch;font-size:15px;line-height:1.6;margin:22px 0 28px}
.tour-end h2{font-size:clamp(24px,2.7vw,36px)}.tour-end .centre-location{font-size:13px;color:var(--co-green);margin:14px 0 0}
.centre-faq{background:var(--co-paper);color:var(--co-ink);padding:96px 6%}
/* Old-site FAQ look restored wholesale (Max, 24 Sep 2026: "maybe just change it to how we had it
   before"), ported from site/archive/marketing-before-redesign-2026-09-14/site/style.css lines
   1220-1228. --co-line/--co-ink/--co-paper/--co-green are literally the same values the old file
   called --hairline/--ink/--paper/--eucalyptus, so they're reused as-is; #FDFCF8 is the one old
   token (--stone-white) this file never carried, so it's inlined rather than added as a new custom
   property for a single use. */
.faq-intro{max-width:40em;margin:0 auto 40px}
.faq-intro h2{font:400 clamp(32px,3.5vw,48px)/1.15 CentreDisplay,Georgia,serif;margin:0}
.faq-intro .section-kicker{margin-bottom:20px}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:52em;margin:0 auto}
.faq-list details{border:1px solid var(--co-line);border-radius:9px;padding-inline:24px;background:#FDFCF8}
.faq-list summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;cursor:pointer;font:600 1.05rem/1.5 Archivo,Arial,sans-serif;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:600 1.4rem/1 Archivo,Arial,sans-serif;flex-shrink:0;color:var(--co-ink)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list summary:hover{color:var(--co-green)}
.faq-list summary:focus-visible{outline:2px solid var(--co-green);outline-offset:2px}
.faq-list p{font:16px/1.65 Archivo,Arial,sans-serif;color:#3a3a3a;max-width:34em;margin:0 0 22px}
.faq-list a{color:var(--co-green)}
@media(max-width:819px){.hero-copy{top:12%}.hero-copy .support{display:block;font-size:13px;line-height:1.5;margin:12px 0;max-width:39ch}.hero-copy>p:first-of-type{font-size:18px;line-height:1.35;margin:0}.hero-copy>a{margin-top:0}.site-nav a[href="#questions"]{display:none}.centre-faq{padding:56px 6%}.faq-intro{margin-bottom:28px}.faq-list summary{font-size:16px;padding-block:16px}.faq-list details{padding-inline:18px}.faq-list p{font-size:15px;margin-bottom:18px}.tour-end h2{font-size:27px}}

.legal-links{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#4E5B51}.site-footer{flex-wrap:wrap}

/* One compact conversion block. Native fields, no modal or additional chapter. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lead-section{align-items:start;gap:64px;padding-top:65px;padding-bottom:65px}.lead-section h2{font-size:clamp(36px,4.4vw,60px)}.lead-intro{font-size:16px;color:#E0E9E1;margin:22px 0 0}
#lead-form{min-width:0;background:var(--co-paper);color:var(--co-ink);border-radius:16px;padding:36px 36px 32px;box-shadow:0 1px 2px rgba(18,18,18,.06),0 10px 28px rgba(18,18,18,.16)}#lead-form fieldset{border:0;padding:0;margin:0;min-width:0}#lead-form [hidden]{display:none!important}#lead-form a:focus-visible{outline-color:var(--co-green)}.lead-progress{font-size:12px;margin:0 0 20px;color:#4E5B51}
.lead-step legend{font-size:23px;font-weight:600;line-height:1.3}#lead-form label{display:block;font-size:13px;line-height:1.4}#lead-form input:not([name=botcheck]){display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #D1CEC4;border-radius:8px;background:#FFFFFF;color:#1F2A22;font:16px/1.4 Archivo,Arial,sans-serif;min-width:0}
.lead-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.lead-pills button{min-height:46px;padding:10px 20px;border:1px solid var(--co-line);border-radius:999px;background:transparent;color:var(--co-ink);font:600 14px/1.3 Archivo,Arial,sans-serif;cursor:pointer}.lead-pills button:hover{border-color:var(--co-green)}.lead-pills button[aria-pressed=true]{background:var(--co-green);color:var(--co-paper);border-color:var(--co-green)}
.lead-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px}.lead-actions button{min-height:46px;padding:12px 20px;font:600 14px/1.4 Archivo,Arial,sans-serif;cursor:pointer;border:0;border-radius:9px}.lead-back{color:var(--co-ink);background:transparent;padding-left:0}.lead-next{background:var(--co-green);color:var(--co-paper);padding:12px;min-width:46px}.lead-next:hover{background:#234a35}#lead-send{background:var(--co-green);color:var(--co-paper)}#lead-send:hover{background:#234a35}.lead-actions button:disabled{opacity:.65;cursor:wait}.lead-note{font-size:13px;color:#4E5B51;margin-top:14px;max-width:40ch}.lead-privacy{font-size:11px;line-height:1.5;max-width:45ch;color:#5C6B60;margin-top:10px}#lead-message{font-size:17px;line-height:1.5;max-width:35ch}
/* margin-top 20px, not 4px (4 Oct round 5, Max: the Professional CTA is cramped under its last
   bullet). .price-card's grid-template-rows:subgrid shares row heights across all 3 cards, so
   row 5 (.price-more) is always sized to whichever card's open content is tallest -- that card's
   own content then fills the row with no slack, leaving only the literal margin-top as the gap
   above its CTA, while the other two (shorter) cards already had generous leftover space in that
   row. 4px read fine for the generous cards and cramped for the tall one; 20px (matching
   .price-lede's own margin-bottom, same internal rhythm) gives every card a real minimum gap
   regardless of which one defines the row -- checked open/closed, all 3 cards, 1440 and 390. */
.price-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;width:100%;margin-top:20px;padding:12px 20px;border:0;border-radius:9px;background:#2D5A42;color:#FAF8F4;font:600 14px/1.4 Archivo,Arial,sans-serif;text-decoration:none;text-align:center;cursor:pointer}.price-cta:hover{background:#234a35}
.next-steps{grid-column:1/-1;margin-top:48px;background:#14422C;border-radius:16px;padding:44px 48px}.next-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;row-gap:28px;margin-top:4px;list-style:none;padding:0}.next-step{display:flex;flex-direction:column;gap:10px;position:relative}.next-step-num{display:inline-block;position:relative;font:400 clamp(30px,3.6vw,46px)/1 CentreDisplay,Georgia,serif;color:#FAF8F4}.next-step:not(:last-child) .next-step-num::after{content:"";position:absolute;top:50%;left:100%;width:32px;border-top:1px solid #4A6657;transform:translateY(-50%)}.next-step h3{margin:0;font:600 15px/1.35 Archivo,Arial,sans-serif;color:#FAF8F4}.next-step p{margin:0;font-size:14px;line-height:1.6;color:#D7E4DA}
.second-option{grid-column:1/-1;font-size:13px;color:#D7E4DA;margin-top:4px}.second-option a{color:#FAF8F4;text-underline-offset:3px}
@media(max-width:819px){.next-steps{padding:32px 24px;margin-top:32px}.next-steps-grid{grid-template-columns:1fr;gap:20px}.next-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:center}.next-step-num{font-size:26px;grid-column:1;grid-row:1}.next-step:not(:last-child) .next-step-num::after{display:none}.next-step h3{grid-column:2;grid-row:1}.next-step p{grid-column:1/-1;grid-row:2}}
.lead-footer{display:block;padding:28px 6% 0;overflow:hidden}.footer-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#4E5B51}.footer-signoff{font:400 18.5vw/.9 CentreDisplay,Georgia,serif;letter-spacing:-.055em;white-space:nowrap;color:#1F2A22;height:12.8vw;margin:35px 0 0;overflow:hidden}
@media(max-width:819px){.lead-section{padding:45px 7%}.lead-heading{margin-bottom:30px}.lead-section h2{font-size:40px}#lead-form{padding:28px 24px}.lead-footer{padding:25px 7% 0}.footer-signoff{font-size:18vw;height:12.5vw;margin-top:30px}.footer-meta{font-size:11px}}

/* Shared responsive walkthrough: one physical phone and one interaction timeline. */
@media(prefers-reduced-motion:no-preference){
 .tour-copy{left:auto;right:calc(100% - var(--tour-phone-left,55vw) + 32px);width:250px;max-width:28vw;top:27%}
 .tour-copy h2{font-size:clamp(25px,2.4vw,36px)}
 .tour-portrait:has(.tour-copy:not([hidden])) .site-nav{opacity:0;pointer-events:none}
 .tour-portrait .tour-copy{left:6%;right:6%;top:24px;width:auto;max-width:none;height:calc(100% - 24px);pointer-events:none}
 .tour-portrait .tour-copy .tour-eyebrow,.tour-portrait .tour-disclaimer{display:none}
 .tour-portrait .tour-caption{min-height:0}.tour-portrait .tour-role{font-size:11px;margin:0 0 6px;border:0;padding:0}
 .tour-portrait .tour-copy h2{font-size:22px;line-height:1.1;max-width:none;margin:0 0 6px}
 .tour-portrait .tour-explanation{font-size:12px;line-height:1.35;max-width:46ch;margin:0}
 .tour-portrait .tour-chapters{position:absolute;bottom:12px;left:0;margin:0;gap:2px;pointer-events:auto}.tour-portrait .tour-chapters button{min-width:28px;padding:8px 3px;min-height:40px}
 .tour-portrait .tour-skip{position:absolute;bottom:25px;right:0;font-size:11px;pointer-events:auto}.tour-portrait .tour-skip span{margin-left:4px}
 .tour-portrait .finish-copy{left:6%;top:55px;width:88%}.tour-portrait .finish-copy h2{font-size:23px;margin:0 0 8px}.tour-portrait .finish-copy p{font-size:13px;margin:0}
}

@media(max-height:739px) and (prefers-reduced-motion:no-preference){.tour-portrait .tour-copy{top:12px;height:calc(100% - 12px)}.tour-portrait .tour-copy h2{font-size:19px}.tour-portrait .tour-explanation{font-size:11px}}

/* Short windows keep the primary hero action clear. */


/* SVG arrows remain monochrome on iOS instead of selecting emoji glyphs. */
.arrow-icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* Replay belongs to the page footer. Skip stays with the active walkthrough. */
.lead-footer .intro-replay{position:static;display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:8px 0;color:var(--co-green);font-size:12px}
.tour-portrait .tour-skip{display:inline-flex;align-items:center;min-height:44px;bottom:12px}
.support-mobile{display:none}
@media(max-width:819px){
 .support-desktop{display:none}.support-mobile{display:inline}
 .hero-copy{top:calc(76px + env(safe-area-inset-top,0px))}
 .hero-copy h1{font-size:40px;margin-bottom:10px}
 .hero-copy .support{max-width:34ch;margin:10px 0 12px;font-size:13px;line-height:1.45}
 .hero-copy>a{min-height:38px}
 .hint{bottom:max(12px,env(safe-area-inset-bottom,0px));margin-bottom:0}
}

/* Final interactive state uses the same header home as the guided captions. */
html{background:var(--browser-chrome)}
@media(prefers-reduced-motion:no-preference){
 .tour-portrait .finish-copy{top:24px}
 .tour-portrait .finish-copy h2{font-size:22px;line-height:1.15;margin-bottom:8px}
 .tour-portrait .finish-copy h2 br{display:none}
 .tour-portrait .finish-copy p{font-size:12px;line-height:1.4;max-width:42ch}
}
@media(max-height:739px) and (prefers-reduced-motion:no-preference){
 .tour-portrait .finish-copy{top:10px}
 .tour-portrait .finish-copy h2{font-size:18px;margin-bottom:5px}
 .tour-portrait .finish-copy p{font-size:11px;line-height:1.3;margin:0}
 .tour-portrait .finish-copy .demo-explainer{display:none}
 .tour-portrait .finish-copy .expand-demo{margin-top:8px}
}
@media(max-width:819px){.demo-explainer{display:none}}
/* Crop the glyphs themselves to roughly their upper half, not just their descenders. */
.footer-signoff{height:11vw;padding-top:0}
@media(max-width:819px){.footer-signoff{height:10.7vw}}

/* Reserve the journey before loading; reveal only the correctly rendered first scene. */
:root{--tour-screens:27.6}
@media(max-width:899px),(max-aspect-ratio:11/10){:root{--tour-screens:20.3875}}
.hero-loading{overflow:auto}

.hero-load-status,.tour-loading{position:absolute;z-index:5;left:6%;bottom:22px;margin:0;font:12px/1.5 Archivo,Arial,sans-serif;color:#D0D5CC;max-width:85%}
.tour-loading{top:28px;bottom:auto}.hero-load-status button,.tour-loading button,.fallback-note button{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;padding:8px;min-height:44px}
.hero-load-status[hidden],.tour-loading[hidden]{display:none}
.mobile-product iframe:not([data-ready]){visibility:hidden}
.mobile-product:not(:has(iframe[data-ready]))::after{content:'Preparing preview…';position:absolute;inset:45% 12% auto;text-align:center;font:14px/1.5 Archivo,Arial,sans-serif;color:#545454}
.fallback .hero-copy{display:block;visibility:visible;opacity:1}.fallback .poster{opacity:.55}.fallback .fallback-note{display:block;z-index:5;bottom:18px}

/* Perspective controls belong to the released phone, not the guided sequence. */
.demo-roles{display:flex;gap:6px;margin-top:20px}.demo-roles button{min-height:40px;padding:8px 18px;border:1px solid #789180;border-radius:999px;background:transparent;color:var(--co-paper);font:12px/1.3 Archivo,Arial,sans-serif}
.demo-roles button[aria-pressed=true]{background:var(--co-paper);color:var(--co-ink);border-color:var(--co-paper)}
@media(prefers-reduced-motion:no-preference){.tour-portrait .demo-roles{position:absolute;top:calc(100svh - 72px - env(safe-area-inset-bottom,0px));left:0;width:100%;justify-content:center;margin:0}}
@media(max-height:739px) and (prefers-reduced-motion:no-preference){.tour-portrait .demo-roles{top:calc(100svh - 68px - env(safe-area-inset-bottom,0px))}}

/* Reserve a readable footer lane, including the device safe area. */
.hint{bottom:max(20px,env(safe-area-inset-bottom,0px));margin:0;max-width:calc(100% - 48px);font-size:12px;line-height:20px}

/* 2026-09-23: Pricing nav link + filled CTA pill (same paper/ink pair as .primary-contact). */
.nav-contact.nav-cta{border-left:0;padding:10px 20px;background:var(--co-paper);color:var(--co-ink);border-radius:999px;font-weight:600}
.nav-contact.nav-cta:hover{background:#fff}
.nav-contact.nav-cta span{margin-left:10px}
@media(max-width:819px){.site-nav .nav-pricing{display:none}}

/* 2026-09-23: hero tagline + intro paragraph carry more weight on wide screens. Position/width of
   .hero-copy and the 3D scene are untouched. */
@media(min-width:1050px){
 .hero-copy p:not(.support){font-size:clamp(22px,1.7vw,28px);line-height:1.5;max-width:30ch}
 .hero-copy .support{font-size:17px;line-height:1.65;max-width:38ch}
}

/* 2026-09-23: About section — fills .centre-story/.story-layout, unused until now. List and
   sign-off match .story-copy p's own type and ink token; no rules/dividers added. */
.centre-story ul{margin:0 0 26px;padding-left:1.1em;max-width:37ch}
.centre-story li{font-size:17px;line-height:1.7;color:#4E5B51;margin:0 0 12px}
.centre-story li:last-child{margin-bottom:0}
.centre-story li strong{color:var(--co-ink)}
.about-signoff{font:32px/1 CentreDisplay,Georgia,serif;color:var(--co-ink);margin:0 0 8px}
.centre-story .story-copy>a{color:var(--co-green);font:14px/1.4 Archivo,Arial,sans-serif;text-decoration:none}
.centre-story .story-copy>a:hover{text-decoration:underline}

/* On mobile, the hero title hands the brand to the reserved nav slot as it fades. */
@media(max-width:819px){
 .site-nav .nav-wordmark{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 240ms ease,visibility 0s 240ms}
 .site-nav .nav-wordmark.hero-brand-passed{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 240ms ease,visibility 0s}
}
@media(max-width:819px) and (prefers-reduced-motion:reduce){.site-nav .nav-wordmark,.site-nav .nav-wordmark.hero-brand-passed{transition:none}}
/* The existing intro state becomes a short chapter above the product, not a step caption. */
.brand-morph{display:none}
@media(max-width:819px) and (prefers-reduced-motion:no-preference){
 .tour-portrait .tour-copy:has(.tour-intro:not([hidden])){top:0;left:0;right:0;width:100%;max-width:none;height:100%;padding:calc(36px + env(safe-area-inset-top,0px)) 6% 0;background:linear-gradient(180deg,#141B17 0%,#141B17 21%,transparent 39%)}
 .tour-portrait .tour-copy:has(.tour-intro:not([hidden])) .tour-eyebrow{display:block;margin:0 0 12px;font-size:10px;letter-spacing:.12em}
 .tour-portrait .tour-copy:has(.tour-intro:not([hidden])) .tour-intro{font:400 clamp(23px,6vw,27px)/1.15 CentreDisplay,Georgia,serif;max-width:27ch;margin:0;color:var(--co-paper)}
}

@media(max-width:819px) and (prefers-reduced-motion:no-preference){
 .site-nav{padding-inline:6%}
 /* 6 Oct 2026: .site-nav>div's left edge still rides --brand-lane (needed so the scroll-linked
    brand clone, which animates toward the nav-wordmark slot, never crosses the link group
    mid-scroll), but it now groups the links at the RIGHT of that box (flex-end) instead of
    spreading them edge-to-edge (space-between). space-between read the --brand-lane:0 resting
    state at the top of the page as "spread across the full nav width", which is the uneven gap
    Max saw in iphone-top-logo-hidden-spread.png. Pinning right:6% (unchanged) keeps the pill's
    right edge matching the rest of the page's margin; flex-end keeps the three links clustered
    at one constant gap next to it, in the same place whether the logo is faded or shown
    (iphone-logo-shown-cramped.png was 10px of hardcoded clearance from the morph math, not this
    group's own spacing). */
 .site-nav>div{position:absolute;top:20px;left:calc(6% + var(--brand-lane,0px));right:6%;justify-content:flex-end}
 .brand-morph{display:none;position:absolute;z-index:5;left:0;top:0;transform-origin:0 0;font-family:CentreDisplay,Georgia,serif;color:var(--co-paper);white-space:nowrap;pointer-events:none}
 .brand-morph-active .brand-morph{display:block}
 .brand-morph-active .hero-copy h1{color:transparent}
 .brand-morph-active .site-nav .nav-wordmark.hero-brand-passed{opacity:1;color:transparent;transition:none}
 .tour-portrait:has(.tour-copy:not([hidden])) .brand-morph{opacity:0;transition:opacity 240ms ease}
}
@media(max-width:600px){
 .footer-meta nav[aria-label="Guides"]{display:grid;grid-template-columns:1fr;width:100%;gap:8px}
 .footer-meta nav[aria-label="Guides"] a{display:flex;align-items:center;min-height:44px}
}