/* Business pages: About, Contact, Terms, Privacy, Accessibility.
   Loads after tokens.css and styles.css from homepage-v7 and adds only what these pages need.
   Every colour is a semantic or component token: no raw colours in this file.
   Calmer than the homepage: no looping motion; the only motion is the homepage's reveal. */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* skip link: hidden until focused */
.skip{position:absolute;left:var(--layout-gutter);top:var(--space-2);z-index:calc(var(--z-nav) + 1);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--btn-primary-bg);color:var(--btn-primary-text);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus-visible{transform:none}

/* nav: current page. Same style as the Apps and AI page's active link */
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.menu ul a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;font-weight:600}
.nav-end .btn[aria-current="page"],.menu .btn[aria-current="page"]{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--btn-primary-bg)}

/* owner placeholders: amber, monospaced, boxed so none is missed */
.fill{font:400 var(--text-px-13)/1.5 var(--font-mono);color:var(--color-accent-text);border:1px dashed currentColor;border-radius:var(--radius-xs);padding:0 var(--space-1);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- page head ---------- */
.pg-hero{padding-block:clamp(24px,4vw,64px) clamp(8px,1.5vw,20px)}
.pg-hero h1{font-size:var(--text-display-sm);max-width:16ch}
.pg-hero h1 .hl{color:var(--color-accent-display)}
.pg-hero .lede{margin-top:clamp(16px,2vw,24px)}
@media (min-width:901px){
  .pg-hero h1{font-size:var(--text-display)}
}

/* ---------- about: who we are ---------- */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start;border-top:2px solid var(--color-text);padding-top:clamp(24px,3vw,40px)}
.intro h2{font-size:var(--text-h3)}
.intro p{font-size:var(--text-lede);color:var(--color-text-muted);max-width:52ch}
.intro p + p{margin-top:var(--space-4);color:var(--color-text)}

/* about: what we believe uses the homepage's outcome rows. A placeholder in a row follows the row's hover colour */
.row:hover .fill,.row:focus-within .fill{color:inherit}
.believe{background:var(--section-feature-bg)}

/* ---------- about: where we work. Four places, the home base filled ---------- */
.area-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-4) var(--space-8)}
.area-head p{color:var(--color-text-muted);max-width:44ch}
.area{list-style:none;padding:0;margin-top:var(--layout-head-gap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.area li{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8);min-height:clamp(140px,14vw,200px);padding:clamp(18px,2vw,28px);border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.area small{font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--color-text-muted)}
.area b{font:500 var(--text-h3)/1.1 var(--font-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.area li.home{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);box-shadow:none}
.area li.home small{color:var(--color-on-accent)}

/* ---------- about: what we build. Three compact links ---------- */
.build{list-style:none;padding:0;margin-top:var(--layout-head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.build a{position:relative;display:flex;flex-direction:column;height:100%;min-height:44px;padding:clamp(22px,2.4vw,32px);border-radius:var(--radius-lg);border:1px solid var(--card-outline-border);text-decoration:none;transition:border-color var(--duration-fast),transform var(--duration-fast)}
.build a:hover{border-color:var(--color-text);transform:translateY(-2px)}
.build b{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font:500 var(--text-h3)/1.15 var(--font-display);letter-spacing:-.03em}
.build b::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.build span{margin-top:var(--space-3);color:var(--color-text-muted);max-width:34ch}

/* closing band: the homepage's cta-band with a real heading inside */
.cta-band h2{font:700 var(--text-h3-lg)/1.05 var(--font-display);letter-spacing:-.04em}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
.contact-grid .cform,.contact-grid .calendly-wrapper{border-radius:16px;overflow:hidden;border:1px solid var(--card-border);box-shadow:var(--card-shadow);width:100%;max-width:100%}
.ccard{border-radius:var(--radius-lg);background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:clamp(22px,3vw,36px)}
.ccard dl{display:grid;gap:0}
.ccard div + div{border-top:1px solid var(--color-text-inverse-muted);margin-top:var(--space-4);padding-top:var(--space-4)}
.ccard dt{font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--color-text-inverse-muted)}
.ccard dd{margin-top:var(--space-1);font-size:var(--text-body)}
.ccard dd a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px;text-decoration-thickness:1px}
.ccard .big a{font:500 var(--text-h3)/1.1 var(--font-display);letter-spacing:-.02em;text-decoration-color:var(--color-accent);text-decoration-thickness:2px}
.ccard .txt-sub{margin-top:var(--space-1)}
.ccard .big .txt-sub a{font:500 var(--text-sm)/1.4 var(--font-sans);letter-spacing:normal;color:var(--color-accent);text-decoration:underline;text-underline-offset:4px;min-height:36px}
.ccard .hrs{list-style:none;padding:0}
.ccard :focus-visible{outline-color:var(--color-text-inverse)}

/* what happens next: three steps on a line, a timeline down the page on phones */
.next{list-style:none;padding:0;margin-top:var(--layout-head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);position:relative}
.next::before{content:"";position:absolute;left:16px;right:calc((100% - 2*var(--space-6))/3 - 16px);top:15px;height:2px;background:var(--color-border-strong)}
.next li{position:relative}
.next .num{margin-top:0;position:relative}
.next h3{font:600 var(--text-xl)/1.25 var(--font-body);letter-spacing:-.01em;margin-top:var(--space-4);max-width:22ch}
.next p{margin-top:var(--space-2);color:var(--color-text-muted);max-width:34ch}
.faq-band{border-top:1px solid var(--color-border)}

/* ---------- legal pages: a readable column with a contents list ---------- */
.draft{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-on-accent);font-weight:600;max-width:68ch}
.draft::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--radius-round);background:var(--color-on-accent)}
.legal-head h1{font-size:var(--text-h2)}
.updated{margin-top:var(--space-4);font:400 var(--text-xs)/1.5 var(--font-mono);color:var(--color-text-muted)}
.legal{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,68ch);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(28px,3.5vw,48px);padding-bottom:var(--layout-band)}
.toc{position:sticky;top:96px;border-top:2px solid var(--color-text);padding-top:var(--space-3)}
.toc p{font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--color-text-muted)}
.toc ol{list-style:none;padding:0;margin-top:var(--space-2);counter-reset:toc}
.toc a{display:flex;align-items:center;gap:var(--space-3);min-height:44px;font-size:var(--text-md);text-decoration:none;color:var(--color-text-soft);border-bottom:1px solid var(--color-border)}
.toc a::before{counter-increment:toc;content:counter(toc);flex:none;width:2ch;font:400 var(--text-xs)/1 var(--font-mono);color:var(--color-text-muted)}
.toc a:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:4px}
.prose{min-width:0}
.prose section{scroll-margin-top:96px}
.prose section + section{margin-top:clamp(32px,3.5vw,48px)}
.prose h2{font:500 var(--text-h3)/1.15 var(--font-display);letter-spacing:-.03em}
.prose p,.prose ul{margin-top:var(--space-4);max-width:68ch;color:var(--color-text-soft)}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:var(--space-2)}
.prose li::marker{color:var(--color-accent-display)}
.prose strong{color:var(--color-text);font-weight:600}
.reach{list-style:none;padding:0!important;margin-top:var(--space-4);border-top:1px solid var(--color-border)}
.reach li{margin:0!important;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-4);min-height:52px;border-bottom:1px solid var(--color-border)}
.reach li::marker{content:none}
.reach span{flex:none;width:14ch;font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--color-text-muted)}
.reach a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--color-text);text-underline-offset:4px}

/* ---------- footer: four columns, stacked on phones. Replaces the homepage footer layout ---------- */
.sf{background:var(--footer-bg);border-top:1px solid var(--color-border)}
footer.sf .wrap{display:block;padding-block:clamp(40px,5vw,64px) var(--space-6);color:var(--color-text-muted)}
.sf-cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--space-8) clamp(24px,4vw,56px)}
footer.sf nav{display:block}
.sf-brand p{margin-top:var(--space-4);max-width:34ch;font-size:var(--text-md)}
.sf h2{font:400 var(--text-xs)/1.4 var(--font-mono);letter-spacing:0;color:var(--color-text-muted)}
.sf ul{list-style:none;padding:0;margin-top:var(--space-2)}
.sf ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;color:var(--color-text);font-size:var(--text-md);text-decoration:none}
.sf ul a:hover{text-decoration:underline;text-underline-offset:4px}
.sf ul a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;font-weight:600}
.sf .hrs{margin-top:var(--space-2);font-size:var(--text-md);line-height:1.6}
.sf-base{margin-top:clamp(32px,4vw,56px);padding-top:var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-xs)}

/* ---------- reveal: the homepage's, driven without GSAP ---------- */
.js .reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}

/* ---------- widths ---------- */
@media (max-width:1079px){
  .legal{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .toc{position:static}
  .toc ol{columns:2;column-gap:var(--space-6)}
  .toc li{break-inside:avoid}
}
@media (max-width:900px){
  .intro,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .area{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build{grid-template-columns:minmax(0,1fr)}
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-brand{grid-column:1/-1}
}
@media (max-width:720px){
  /* no Book a call bar on these pages, so the footer needs no room for it */
  footer.sf{padding-bottom:0}
  .next{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .next::before{left:15px;right:auto;top:16px;bottom:16px;width:2px;height:auto}
  .next li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--space-4)}
  .next .num{grid-row:1/span 2}
  .next h3{margin-top:var(--space-1)}
  .next h3,.next p{grid-column:2}
}
@media (max-width:520px){
  .toc ol{columns:1}
  .sf-cols{grid-template-columns:minmax(0,1fr)}
  .area li{min-height:120px;gap:var(--space-5)}
  .draft{align-items:flex-start}
  .draft::before{margin-top:.55em}
}

/* ---------- landing pages (/lp/) ---------- */
.lp-badge{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--color-accent-subtle);color:var(--color-accent-display);border-radius:var(--radius-pill);font:600 var(--text-xs)/1 var(--font-mono);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:.05em}
.offer-card{margin-inline:auto;max-width:720px;text-align:center}
.offer-card h2{font:600 var(--text-h2)/1.2 var(--font-display);color:var(--color-accent)}
.offer-summary{margin-top:var(--space-3);font-size:var(--text-lg);line-height:1.6}
.offer-terms{margin-top:var(--space-2);color:var(--color-text-inverse-muted)}
.offer-ends{margin-top:var(--space-4);color:var(--color-accent);font-size:var(--text-sm)}