/* UNCODE inner pages. Same tokens as the scroll home page: paper, ink, navy pill, logo blue. */
:root{
  --fg:#142B3A;
  --fg-soft:rgba(20,43,58,.68);
  --fg-faint:rgba(20,43,58,.52);
  --shade:#f2f0ec;
  --rule:rgba(20,43,58,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pill-bg:#102E45;
  --pill-fg:#ffffff;
  --brand:#29B5E8;
  --gutter:clamp(18px, 4vw, 44px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--shade); color:var(--fg);
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:400;
  font-size:17px; line-height:1.6; letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-underline-offset:3px; }
a:focus-visible, summary:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gutter); top:10px; z-index:100; background:var(--shade); padding:8px 12px; }
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 var(--gutter); }

/* Header */
.chrome{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:12px 20px; flex-wrap:wrap;
  padding:max(14px, calc(env(safe-area-inset-top, 0px) + 12px)) var(--gutter) 14px;
  background:rgba(242,240,236,.94); border-bottom:1px solid var(--rule);
}
.mark{ display:flex; align-items:center; flex-shrink:0; }
.mark img{ height:28px; width:auto; }
.nav{ display:flex; align-items:center; gap:clamp(14px, 2.4vw, 32px); }
.nav a:not(.pill){
  color:var(--fg); text-decoration:none; font-size:14.5px; font-weight:500; opacity:.88;
  padding:10px 0; white-space:nowrap;
}
.nav a:not(.pill):hover{ opacity:1; }
.nav a[aria-current="page"]{ opacity:1; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:var(--brand); }

/* Pill button */
.pill{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 21px;
  border-radius:999px; background:var(--pill-bg); color:var(--pill-fg); -webkit-text-fill-color:var(--pill-fg);
  font-size:14.5px; font-weight:700; letter-spacing:-.008em; text-decoration:none; white-space:nowrap;
  border:1px solid rgba(16,46,69,.12);
}
.pill:hover, .pill:focus-visible{ background:#0875A2; color:#fff; -webkit-text-fill-color:#fff; }
.pill.is-large{ height:48px; padding:0 27px; font-size:15px; }
.pill.is-quiet{ background:transparent; color:var(--fg); -webkit-text-fill-color:var(--fg); border-color:var(--fg); }
.pill.is-quiet:hover, .pill.is-quiet:focus-visible{ background:var(--fg); color:#fff; -webkit-text-fill-color:#fff; }

/* Hero */
.hero{ padding:clamp(56px, 9vw, 120px) 0 clamp(36px, 5vw, 64px); }
.eyebrow{ margin:0 0 clamp(16px,2vw,22px); font-size:12.5px; font-weight:700; letter-spacing:.045em; color:var(--fg-soft); }
h1{ margin:0; font-weight:500; font-size:clamp(38px, 6.4vw, 88px); line-height:1; letter-spacing:-.036em; max-width:16ch; text-wrap:balance; }
.lede{ margin:clamp(20px,2.4vw,30px) 0 0; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--fg-soft); max-width:54ch; text-wrap:pretty; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,40px); }
.figure{ margin:0 0 clamp(8px,2vw,24px); }
.figure img{ width:100%; aspect-ratio:21/9; object-fit:cover; }

/* Sections: a hairline, a heading on the left, the body on the right */
.section{ border-top:1px solid var(--rule); padding:clamp(44px, 6vw, 88px) 0; }
.section > .wrap{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 5vw, 72px); align-items:start; }
.section.is-wide > .wrap{ display:block; }
h2{ margin:0; font-weight:500; font-size:clamp(26px, 3.2vw, 44px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }
h3{ margin:0 0 6px; font-weight:700; font-size:17px; line-height:1.35; letter-spacing:-.01em; }
.section p{ margin:0 0 1em; max-width:62ch; color:var(--fg-soft); }
.section p:last-child{ margin-bottom:0; }
.kicker{ display:block; margin-bottom:14px; font-size:12.5px; font-weight:700; letter-spacing:.045em; color:var(--fg-faint); }

/* Rows: term on the left, explanation on the right, ruled */
.rows{ margin:0; padding:0; list-style:none; }
.rows > li, .rows > div{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:8px 28px; padding:18px 0; border-top:1px solid var(--rule); }
.rows > :first-child{ border-top:0; padding-top:0; }
.rows dt, .rows strong{ font-weight:700; }
.rows dd{ margin:0; color:var(--fg-soft); }

/* Steps: numbered, ruled */
.steps{ margin:0; padding:0; list-style:none; }
.steps > li{ padding:20px 0; border-top:1px solid var(--rule); }
.steps > li:first-child{ border-top:0; padding-top:0; }
.steps p{ margin:0; }

/* Plain list with a short rule as the marker */
.list{ margin:0; padding:0; list-style:none; }
.list > li{ position:relative; padding:10px 0 10px 26px; color:var(--fg-soft); max-width:62ch; }
.list > li::before{ content:""; position:absolute; left:0; top:1.35em; width:14px; height:1px; background:var(--fg); }

/* Statement: one large sentence */
.statement{ margin:0; font-weight:500; font-size:clamp(26px, 3.6vw, 52px); line-height:1.08; letter-spacing:-.03em; max-width:22ch; text-wrap:balance; color:var(--fg); }

/* FAQ */
.faq details{ border-top:1px solid var(--rule); padding:16px 0; }
.faq details:first-child{ border-top:0; padding-top:0; }
.faq summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:16px; min-height:36px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; color:var(--fg-faint); }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ margin:10px 0 0; }

/* Next pages: ruled links to the other pillars */
.next{ margin:0; padding:0; list-style:none; }
.next a{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:18px 0; border-top:1px solid var(--rule); text-decoration:none; }
.next li:first-child a{ border-top:0; padding-top:0; }
.next a span:first-child{ font-weight:500; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.02em; }
.next a span:last-child{ color:var(--fg-soft); font-size:15px; text-align:right; }
.next a:hover span:first-child{ text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; }

/* Closing band */
.band{ background:var(--pill-bg); color:#fff; padding:clamp(56px, 8vw, 110px) 0; }
.band h2{ max-width:18ch; }
.band p{ margin:18px 0 0; max-width:52ch; color:rgba(255,255,255,.78); }
.band .pill{ background:#fff; color:var(--pill-bg); -webkit-text-fill-color:var(--pill-bg); border-color:#fff; }
.band .pill:hover, .band .pill:focus-visible{ background:var(--brand); color:var(--pill-bg); -webkit-text-fill-color:var(--pill-bg); border-color:var(--brand); }
.band a:focus-visible{ outline-color:#fff; }

/* Long-form text (legal pages) */
.prose{ max-width:70ch; padding-bottom:clamp(56px, 8vw, 110px); }
.prose h2{ font-size:clamp(22px, 2.2vw, 30px); margin:2em 0 .5em; }
.prose p, .prose li{ color:var(--fg-soft); }
.prose ul{ padding-left:1.2em; }
.note{ border:1px solid var(--rule); padding:14px 18px; margin:0 0 2em; color:var(--fg-soft); font-size:15px; }

/* Scroll deck. Without JS each slide is a normal full-height section. With JS (html.js-deck,
   added by slides.js) the stage pins and the slides cross-fade as you scroll. */
.deck{ position:relative; }
.slide{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:var(--shade); }
.slide-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; will-change:transform; }
/* Wash under the text so dark type stays legible on a bright picture. */
.slide::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(242,240,236,.96) 0%, rgba(242,240,236,.86) 38%, rgba(242,240,236,.18) 72%, rgba(242,240,236,.10) 100%); }
.slide.is-right::after{ background:linear-gradient(to left, rgba(242,240,236,.96) 0%, rgba(242,240,236,.86) 38%, rgba(242,240,236,.18) 72%, rgba(242,240,236,.10) 100%); }
.slide-body{ position:relative; z-index:2; width:100%; max-width:1160px; margin:0 auto; padding:clamp(96px,14vh,150px) var(--gutter) clamp(56px,10vh,96px); will-change:opacity,transform; }
.slide-body > *{ max-width:min(30rem, 100%); }
.slide.is-right .slide-body > *{ margin-left:auto; }
.slide-num{ display:none; } /* owner does not want numbered slides */
.slide h1, .slide h2{ font-size:clamp(34px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.034em; max-width:14ch; }
.slide.is-right h1, .slide.is-right h2{ max-width:min(30rem, 100%); }
.slide p{ margin:20px 0 0; color:var(--fg-soft); font-size:clamp(16px,1.3vw,19px); line-height:1.5; }
.slide-points{ margin:22px 0 0; padding:0; list-style:none; }
.slide-points li{ padding:11px 0; border-top:1px solid var(--rule); font-weight:500; font-size:15.5px; }
.slide-points li:last-child{ border-bottom:1px solid var(--rule); }
.deck-dots{ display:none; }
html.js-deck .deck{ height:calc(var(--n, 1) * 100vh); height:calc(var(--n, 1) * 100svh); }
html.js-deck .deck-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
html.js-deck .slide{ position:absolute; inset:0; min-height:0; opacity:0; }
html.js-deck .slide:first-child{ opacity:1; }
html.js-deck .deck-dots{ display:none; flex-direction:column; gap:10px; position:absolute; z-index:3; right:clamp(12px,2vw,28px); top:50%; transform:translateY(-50%); }
.deck-dots i{ display:block; width:2px; height:22px; background:var(--rule); }
.deck-dots i.is-on{ background:var(--fg); }
/* A header that sits over the deck instead of pushing it down. */
.chrome.is-over{ position:fixed; left:0; right:0; }

/* Logo and badge strips (platform recognition, ecosystem) */
.strip{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,44px) clamp(24px,4vw,56px); margin:0; padding:0; list-style:none; }
.strip img{ height:clamp(30px,3.4vw,44px); width:auto; max-width:160px; object-fit:contain; }
.strip.is-badges img{ height:clamp(64px,7vw,96px); max-width:none; }
.caption{ margin-top:18px; font-size:13.5px; color:var(--fg-faint); max-width:62ch; }
.section.is-dark{ background:var(--pill-bg); color:#fff; border-top:0; }
.section.is-dark p, .section.is-dark .caption, .section.is-dark dd{ color:rgba(255,255,255,.76); }
.section.is-dark .kicker{ color:rgba(255,255,255,.6); }
.section.is-dark .rows > *, .section.is-dark .steps > li{ border-color:rgba(255,255,255,.16); }
/* Footer: brand column plus link columns, then the legal line */
.foot{ background:var(--pill-bg); color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.5; padding:clamp(48px,6vw,80px) 0 max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px)); }
.band + .foot{ border-top:1px solid rgba(255,255,255,.14); }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap:36px clamp(24px,4vw,56px); }
.foot-brand img{ height:28px; width:auto; }
.foot-brand p{ margin:16px 0 0; max-width:30ch; }
.foot h2{ margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:#fff; }
.foot ul{ margin:0; padding:0; list-style:none; }
.foot a{ display:inline-block; padding:6px 0; color:inherit; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--brand); }
.foot a:focus-visible{ outline-color:#fff; }
.foot-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:clamp(36px,5vw,64px); padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:rgba(255,255,255,.56); }
.foot-legal nav{ display:flex; flex-wrap:wrap; gap:4px 18px; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:720px){
  .slide::after, .slide.is-right::after{ background:linear-gradient(to bottom, rgba(242,240,236,.94) 0%, rgba(242,240,236,.88) 78%, rgba(242,240,236,.45) 100%); }
  .slide.is-right .slide-body > *{ margin-left:0; }
  .slide-body{ padding-top:136px; padding-bottom:40px; } /* clears the two-row mobile header */
  .slide h1, .slide h2{ font-size:clamp(30px, 8.6vw, 44px); }
  html.js-deck .deck-dots{ display:none; }
}

/* The header holds two contact pills: one inside .nav (desktop) and one beside the logo (mobile). */
.chrome > .pill{ display:none; }

@media (max-width:860px){
  .section > .wrap{ grid-template-columns:1fr; }
  .rows > li, .rows > div{ grid-template-columns:1fr; }
  .figure img{ aspect-ratio:16/9; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .mark img{ height:24px; }
  h1 br{ display:none; } /* forced breaks make ragged headings on narrow screens */
  .chrome > .pill{ display:inline-flex; height:38px; padding:0 16px; font-size:13.5px; }
  /* Pillar links drop to a second row that scrolls sideways, so every page stays reachable. */
  .nav{ order:3; flex-basis:100%; overflow-x:auto; gap:22px; }
  .nav .pill{ display:none; }
  .next a{ flex-direction:column; gap:4px; }
  .next a span:last-child{ text-align:left; }
}

/* ---------------------------------------------------------------------------
   Version 3: inner pages take the home page's look. Centred display type over a
   full-bleed picture, one idea per screen, generous space. These rules come last
   and override the left/right layout above.
   --------------------------------------------------------------------------- */
body{ font-size:18px; }
.slide{ justify-content:center; text-align:center; }
/* Paper wash that is strongest behind the type and thins toward the edges, so the picture
   stays visible around the words and dark type stays readable on any photo. */
.slide::after, .slide.is-right::after{
  background:
    linear-gradient(to bottom, rgba(242,240,236,.70) 0%, rgba(242,240,236,0) 26%, rgba(242,240,236,0) 80%, rgba(242,240,236,.55) 100%),
    radial-gradient(70% 62% at 50% 52%, rgba(242,240,236,.93) 0%, rgba(242,240,236,.84) 52%, rgba(242,240,236,.34) 100%);
}
.slide-body{ display:flex; flex-direction:column; align-items:center; padding:max(104px, calc(env(safe-area-inset-top, 0px) + 88px)) clamp(20px,5vw,60px) clamp(56px,9vh,96px); }
.slide-body > *, .slide.is-right .slide-body > *{ max-width:min(46ch, 100%); margin-left:auto; margin-right:auto; }
.slide h1, .slide h2, .slide.is-right h1, .slide.is-right h2{ font-size:clamp(34px, 7.1vw, 104px); line-height:.98; letter-spacing:-.036em; max-width:15ch; }
.slide p{ margin-top:clamp(18px,2.2vw,28px); font-size:clamp(16px,1.28vw,19px); }
.slide-points{ margin-top:clamp(20px,2.4vw,30px); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; max-width:min(60ch, 100%) !important; }
.slide-points li, .slide-points li:last-child{ border:0; padding:0; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--fg-soft); }
.slide .actions, .band .actions, .hero .actions{ justify-content:center; }

/* Sections below the deck: one centred column */
.section{ padding:clamp(64px, 9vw, 132px) 0; }
.section > .wrap, .section.is-wide > .wrap{ display:block; max-width:900px; text-align:center; }
.section > .wrap > div:first-child{ margin-bottom:clamp(28px,4vw,52px); }
h2{ font-size:clamp(30px, 5vw, 68px); line-height:1; letter-spacing:-.034em; margin-left:auto; margin-right:auto; max-width:16ch; }
h3{ font-weight:500; font-size:clamp(19px,1.6vw,23px); letter-spacing:-.018em; }
.kicker{ color:var(--fg-soft); }
.section p{ margin-left:auto; margin-right:auto; max-width:52ch; font-size:clamp(17px,1.35vw,20px); line-height:1.5; }
.rows, .steps, .faq, .next, .list{ text-align:left; max-width:760px; margin-left:auto; margin-right:auto; }
.rows dt, .rows strong{ font-weight:500; font-size:clamp(19px,1.6vw,23px); letter-spacing:-.018em; line-height:1.25; }
.rows > li, .rows > div, .steps > li{ padding:24px 0; }
.faq summary{ font-weight:500; font-size:clamp(18px,1.5vw,21px); letter-spacing:-.015em; }
.faq details{ padding:20px 0; }
.statement{ margin-left:auto; margin-right:auto; font-size:clamp(30px, 5vw, 68px); max-width:18ch; }
.strip{ justify-content:center; }
.caption{ margin-left:auto; margin-right:auto; }
.hero{ text-align:center; }
.hero h1{ margin-left:auto; margin-right:auto; font-size:clamp(34px, 7.1vw, 104px); line-height:.98; max-width:15ch; }
.hero .lede{ margin-left:auto; margin-right:auto; }
.prose{ margin-left:auto; margin-right:auto; }
.band{ text-align:center; }
.band h2, .band p{ margin-left:auto; margin-right:auto; }
@media (max-width:720px){
  body{ font-size:17px; }
  .slide h1, .slide h2, .slide.is-right h1, .slide.is-right h2, .hero h1{ font-size:clamp(30px, 9.8vw, 52px); max-width:12ch; }
  .slide::after, .slide.is-right::after{ background:rgba(242,240,236,.86); }
  .slide-body{ padding-top:136px; }
}

/* Logo lockup: wordmark + tagline inside brand square brackets */
.lockup{ position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; gap:5px; padding:7px 13px; color:inherit; text-decoration:none; }
.lockup::before, .lockup::after{ content:""; position:absolute; top:0; bottom:0; width:7px; border:2px solid var(--brand); }
.lockup::before{ left:0; border-right:0; }
.lockup::after{ right:0; border-left:0; }
.lockup img, .foot-brand .lockup img, .site-foot .foot-brand .lockup img{ display:block; height:21px; width:auto; }
.lockup span{ font-size:10px; font-weight:500; letter-spacing:.04em; line-height:1; white-space:nowrap; }
@media (max-width:700px){ .lockup img{ height:18px; } .lockup span{ font-size:9px; } }
.foot .lockup, .site-foot .lockup{ color:#fff; }

/* Contact form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:22px clamp(20px,3vw,40px); margin-top:clamp(28px,3vw,40px); text-align:left; }
.form .is-wide{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--fg-soft); }
.field input, .field select, .field textarea{ font:inherit; font-size:16px; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--rule, rgba(20,43,58,.16)); border-radius:0; padding:10px 0; }
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:none; border-bottom-color:var(--fg); }
.field.is-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--fg-soft); }
.consent input{ margin-top:4px; width:18px; height:18px; accent-color:var(--pill-bg); }
.consent a{ color:var(--fg); }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.form-status{ margin:0; font-size:14.5px; color:var(--fg); text-align:left; }
.form button[disabled]{ opacity:.6; cursor:progress; }
@media (max-width:700px){ .form{ grid-template-columns:1fr; } }
.strip.is-mono img{ filter:brightness(0); opacity:.78; } /* white partner logos on light sections */