/* ==========================================================================
   OAK POS — oakpos.com (v2)
   Positioning: "Get Your Business Moving" — active, outdoor, confident.
   Deliberately not the clean-blue SaaS look of v1.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Brand — the acorn cyan, unchanged from the mark */
  --cyan:       #33CCFF;
  --cyan-600:   #12A6E0;
  --cyan-700:   #0B7FB0;      /* AA on white — for type and links */
  --cyan-050:   #E8F8FF;

  /* Energy — sunset. Carries "moving". */
  --sun:        #FF6B35;
  --sun-600:    #E6521C;
  --sun-700:    #B33C10;      /* AA on white */
  --sun-050:    #FFF0EA;

  /* Ink — deep outdoor night, a touch of green */
  --ink:        #0B1B21;
  --ink-2:      #122A33;
  --ink-3:      #1D3B45;
  --body:       #3D5661;
  --muted:      #6A838E;

  /* Warm surfaces — the "grounded, human" half of the brief */
  --sand:       #FBF6EF;
  --sand-2:     #F4EBDE;
  --line:       #E3DACD;
  --line-cool:  #DCE7EB;
  --white:      #FFFFFF;

  --good:       #12866A;

  /* Type */
  --display: "Outfit", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --container: 1280px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(11,27,33,.06), 0 3px 8px rgba(11,27,33,.05);
  --sh:    0 4px 10px rgba(11,27,33,.06), 0 18px 40px -14px rgba(11,27,33,.22);
  --sh-lg: 0 8px 18px rgba(11,27,33,.08), 0 44px 80px -28px rgba(11,27,33,.42);
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. Without it the HTML height attribute is used as
   the rendered height while max-width shrinks the width, which distorts every
   image on the page. */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Also load-bearing. The browser's own [hidden]{display:none} loses to any
   author rule that sets display (.btn, img above), so without this the
   gated signup buttons are VISIBLE before site.js runs or with JS off, and
   the unsupplied photos render as empty boxes. */
[hidden] { display: none !important; }
a { color: var(--cyan-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 800; letter-spacing: -0.042em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); letter-spacing: -0.035em; }
h3 { font-size: 1.28rem; letter-spacing: -0.02em; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 650; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --- 3. Layout ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 32px; }
@media (max-width: 560px) { .container { padding-inline: 20px; } }
.section { padding: clamp(68px, 8.5vw, 120px) 0; }
.section--tight { padding: clamp(44px, 5.5vw, 72px) 0; }
.section--sand { background: var(--sand); }
.section--ink  { background: var(--ink); color: #A9C3CC; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink strong { color: #fff; }

.measure    { max-width: 44rem; }
.measure-sm { max-width: 36rem; }
.center     { text-align: center; }
.center .measure, .center .measure-sm,
.center.measure, .center.measure-sm { margin-inline: auto; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__media { order: -1; } }

.stack { display: flex; flex-direction: column; gap: 20px; }
.cluster { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- 4. Type utilities -------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--text);
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-700); margin: 0 0 1.1rem;
}
.section--ink .eyebrow, .hero .eyebrow { color: var(--sun); }

.lead { font-size: clamp(1.1rem, 1.75vw, 1.34rem); line-height: 1.55; color: var(--body); }
.section--ink .lead, .hero .lead { color: #A9C3CC; }

.hl { color: var(--sun); }
.hl-cyan { color: var(--cyan); }

/* --- 5. Logo ------------------------------------------------------------ */
/* The mark is ONE TONE — here the white version from OAK-UX's brand
   guidelines, inlined by build.py with its own #FFFFFF fill. Nothing in this
   stylesheet recolours it; every surface it sits on (header, footer, mobile
   menu) is dark. For a light surface, use the cyan file instead — don't tint
   this one. */
.logo { height: 42px; width: auto; }
.brand--footer .logo { height: 40px; }
@media (max-width: 480px) { .logo, .brand--footer .logo { height: 28px; } }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; }

/* --- 6. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--text); font-weight: 650; font-size: .98rem; letter-spacing: -0.006em;
  padding: .92em 1.6em; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--go { background: var(--sun); color: #fff; box-shadow: 0 6px 18px -6px rgba(255,107,53,.7); }
.btn--go:hover { background: var(--sun-600); box-shadow: 0 10px 26px -8px rgba(255,107,53,.8); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--ink); background: var(--sand); }

/* Every dark surface — including the header, which is dark on all pages now. */
.site-header .btn--line, .hero .btn--line, .section--ink .btn--line, .cta .btn--line, .cookie-banner .btn--line {
  color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.05);
}
.site-header .btn--line:hover, .hero .btn--line:hover, .section--ink .btn--line:hover, .cta .btn--line:hover, .cookie-banner .btn--line:hover {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6);
}

.btn--lg { font-size: 1.06rem; padding: 1.02em 1.9em; }
.btn--sm { font-size: .88rem; padding: .62em 1.15em; border-width: 1.5px; }
.btn--block { width: 100%; }

.arrow { font-weight: 650; display: inline-flex; align-items: center; gap: .45em; }
.arrow::after { content: "→"; transition: transform .16s ease; }
.arrow:hover { text-decoration: none; }
.arrow:hover::after { transform: translateX(4px); }

/* --- 7. Header ---------------------------------------------------------- */
/* Dark on every page. On the homepage it sits fixed and transparent over the
   hero, then fades the dark bar in once the page scrolls (.is-scrolled, set in
   site.js). */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(11,27,33,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header__inner { display: flex; align-items: center; gap: 26px; height: 88px; }

body.is-home .site-header {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
}
body.is-home .site-header.is-scrolled {
  background: rgba(11,27,33,.92);
  border-bottom-color: rgba(255,255,255,.12);
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  font-weight: 550; font-size: 15px; color: #fff;
  padding: 10px 14px; border-radius: var(--r-pill);
}
.nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.nav a[aria-current="page"] { font-weight: 700; }

.header-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; margin-left: auto; background: none;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 10px;
  padding: 9px; cursor: pointer; color: #fff;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; height: auto; min-height: 74px; gap: 0; padding-block: 14px; }
  .nav-toggle { display: inline-flex; }
  .nav, .header-cta { display: none; }
  /* The open panel needs the dark bar even before the page has scrolled. */
  .site-header.is-open,
  body.is-home .site-header.is-open {
    background: rgba(11,27,33,.97); border-bottom-color: rgba(255,255,255,.12);
  }
  .site-header.is-open .nav,
  .site-header.is-open .header-cta {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; width: 100%; margin-left: 0;
  }
  .site-header.is-open .nav { gap: 2px; padding-top: 14px; }
  .site-header.is-open .header-cta {
    gap: 10px; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .nav a { padding: .72rem .55rem; font-size: 1.05rem; }
  .header-cta .btn { width: 100%; }
}

/* Inner pages start under a dark bar, so their light page-head needs room. */
body:not(.is-home) .page-head { padding-top: clamp(40px, 5vw, 68px); }

/* --- 8. Hero ------------------------------------------------------------ */
/* Full-height, photo-backed, devices beside the headline. The photo is optional:
   until assets/img/hero.webp exists the ink + topo fallback shows and the
   <img> stays hidden (site.js reveals it only on a successful load). */
.hero {
  position: relative; overflow: hidden;
  min-height: min(100vh, 920px);
  display: flex; align-items: center;
  background: var(--ink);
  color: #A9C3CC;
}
/* Fallback texture — hidden once a real photo loads. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url("../img/topo.svg") center/cover no-repeat;
  opacity: .30;
  mask-image: linear-gradient(180deg, #000 8%, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 76%);
}
.hero.has-photo::before { opacity: .12; }

.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
/* Readability wash over the photo, heaviest behind the copy. */
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11,27,33,.94) 0%, rgba(11,27,33,.78) 38%,
    rgba(11,27,33,.2) 72%, rgba(11,27,33,.05) 100%);
}
.hero__veil::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px;
  background: linear-gradient(180deg, rgba(11,27,33,.7), transparent);
}
@media (max-width: 860px) {
  /* One column: the wash has to cover the whole frame, not just the left. */
  .hero__veil { background: linear-gradient(180deg, rgba(11,27,33,.92), rgba(11,27,33,.82)); }
}

.hero > .container { position: relative; z-index: 3; padding-block: 140px 96px; }
@media (max-width: 860px) { .hero > .container { padding-block: 116px 72px; } }
/* Phones: the header is 74px, so this leaves ~22px of air under it. Every
   pixel here is a pixel of device pushed below the fold. */
@media (max-width: 620px) { .hero > .container { padding-block: 96px 56px; } }

.hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: .94; letter-spacing: -.045em;
  text-wrap: balance;
}
.hero .lead { font-size: clamp(18px, 1.6vw, 21px); color: #C9DCE2; margin-top: 28px; }

.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__copy { max-width: 600px; }
.hero__eyebrow {
  display: block; font-family: var(--text);
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun); margin: 0 0 22px;
}
.hero .cluster { margin-top: 36px; gap: 14px; }
.hero .btn--line { background: rgba(11,27,33,.25); }

.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 15px; color: #A9C3CC; }
.hero__proof span { display: inline-flex; align-items: center; gap: .45em; }
.hero__proof svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }

/* Page-head pills (inner pages). These lived in the old hero block; the
   homepage now uses .hero__eyebrow instead, but Platform and Pricing still
   open with a pill. */
.pill {
  display: inline-flex; align-items: center; gap: .6em;
  background: rgba(255,107,53,.15); border: 1px solid rgba(255,107,53,.42);
  color: #FFB394; font-size: .81rem; font-weight: 620;
  padding: .45em .95em; border-radius: var(--r-pill); margin-bottom: 1.5rem;
}
.pill svg { flex: none; }
.pill--light { background: var(--sun-050); border-color: #FFD2BF; color: var(--sun-700); }
.pill--cyan  { background: var(--cyan-050); border-color: #BFE9FA; color: var(--cyan-700); }

/* Devices: the iPad bleeds off the right edge, the phone overlaps its lower
   left. Both stay on the first screen at laptop widths and above. */
.hero__devices { position: relative; min-height: 360px; }
.hero__devices .device--pad {
  width: 118%; max-width: 780px; margin: 0;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.7);
}
.hero__devices .device--phone {
  position: absolute; left: -7%; bottom: -54px; z-index: 2;
  width: clamp(150px, 17vw, 210px); max-width: none;
  padding: 7px; border-radius: 36px;
}
.hero__devices .device--phone .device__screen { border-radius: 30px; }

/* Single column (tablet portrait and phones): both devices must be visible
   before scrolling. So the devices move up to sit directly under the headline,
   ahead of the lead, buttons and proof points. .hero__copy becomes
   display:contents so its children can be reordered around the devices; the
   DOM order — and so the reading order for screen readers — is unchanged
   except that the product image now comes before the lead. The composition
   mirrors desktop: iPad to the right, iPhone overlapping its lower left. */
@media (max-width: 860px) {
  .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__copy { display: contents; }
  .hero__eyebrow   { order: 1; }
  .hero h1         { order: 2; margin-bottom: 26px; }
  .hero__devices   { order: 3; min-height: 0; margin: 0 0 58px; }
  .hero .lead      { order: 4; margin-top: 0; }
  .hero .cluster   { order: 5; }
  .hero__proof     { order: 6; }

  .hero__devices .device--pad { width: 84%; max-width: 600px; margin-left: auto; }
  .hero__devices .device--phone {
    left: 0; right: auto; bottom: -34px;
    width: 27%; max-width: 190px; padding: 6px; border-radius: 30px;
  }
  .hero__devices .device--phone .device__screen { border-radius: 25px; }
}
@media (max-width: 620px) {
  .hero__eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 14px; }
  .hero h1 { margin-bottom: 22px; }
  .hero__devices { margin-bottom: 36px; }
  .hero__devices .device--pad { width: 84%; padding: 1.4%; border-radius: 14px; }
  .hero__devices .device--pad .device__screen { border-radius: 9px; }
  /* Overhang kept small: at 375x548 (iPhone SE with Safari's bars showing)
     anything deeper puts the bottom of the phone below the fold. */
  .hero__devices .device--phone {
    width: 31%; bottom: -14px; padding: 4px; border-radius: 20px;
  }
  .hero__devices .device--phone .device__screen { border-radius: 16px; }
}

/* --- 9. Marquee — the "moving" device ----------------------------------- */
.marquee {
  overflow: hidden; background: var(--sun);
  padding: 18px 0; position: relative; z-index: 3;
}
.marquee__track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee span {
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  color: var(--ink); padding: 0 28px; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.marquee span::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); opacity: .5; margin-left: 28px;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Reduce-motion (an OS setting — on Windows, Accessibility > Visual effects >
   Animation effects off): the strip stops. The JS-made duplicate exists only to
   make the loop seamless, so it must not show when nothing loops. And the list
   is wider than any screen, so it must not wrap either — either way it reads
   as two strips. It freezes as one row, exactly where the moving version
   starts; screen readers still get the whole list from the first group. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* Ink sections that carry the topo texture behind their content. */
.section--topo { position: relative; overflow: hidden; }
.section--topo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/topo.svg") center/cover no-repeat; opacity: .18;
}
.section--topo > .container { position: relative; z-index: 1; }

/* --- 9b. Activity tiles -------------------------------------------------- */
/* Photo tiles the client hasn't supplied yet. Until act-*.webp exist the tile
   is ink + topo with the label on top, which reads as deliberate rather than
   as a missing image. */
.acts { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(40px, 5vw, 64px); }
.acts__head { max-width: 14em; margin-bottom: 40px; }
.acts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.act {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 18px;
  background: var(--ink-2) url("../img/topo.svg") center/cover no-repeat;
  display: flex; align-items: flex-end;
}
.act__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, transparent, rgba(11,27,33,.72));
}
.act__label {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 24px; color: #fff;
  padding: 48px 20px 18px; letter-spacing: -.02em;
}
/* Phones: the spec's minmax(200px) gives one column at 375px — five
   near-full-screen tiles. Two columns instead, the odd fifth spanning the row. */
@media (max-width: 560px) {
  .acts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .act { border-radius: 14px; }
  .act:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .act__label { font-size: 18px; padding: 36px 14px 12px; }
}
/* Operations continues on the same sand field, so it loses its top padding. */
.acts + .section--sand { padding-top: clamp(40px, 5vw, 64px); }

/* --- 10. Cards ---------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line-cool); border-radius: var(--r);
  padding: 28px; box-shadow: var(--sh-sm);
}
.card p { color: var(--body); font-size: .97rem; }
.card h3 { margin-bottom: .42em; }
.section--sand .card { border-color: var(--line); }
.section--ink .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); box-shadow: none; }
.section--ink .card p { color: #9FBEC9; }

.card--flat { border: 0; box-shadow: none; background: transparent; padding: 0; }

.ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--cyan-050); color: var(--cyan-700); margin-bottom: 18px;
}
.ico svg { width: 23px; height: 23px; }
.ico--sun { background: var(--sun-050); color: var(--sun-700); }
.section--ink .ico { background: rgba(51,204,255,.15); color: var(--cyan); }
.section--ink .ico--sun { background: rgba(255,107,53,.18); color: #FFB394; }

/* --- 11. Segment tiles -------------------------------------------------- */
.segs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .segs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .segs { grid-template-columns: 1fr; } }
.seg {
  display: flex; align-items: center; gap: .8rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.05rem 1.2rem; font-weight: 600; color: var(--ink); font-size: .98rem;
}
.seg svg { width: 21px; height: 21px; color: var(--sun-700); flex: none; }

/* --- 12. Capability list (the "operating system" idea) ------------------ */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line-cool); border: 1px solid var(--line-cool); border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .caps { grid-template-columns: 1fr; } }
.cap { background: var(--white); padding: 26px 24px; }
.cap__n { font-family: var(--display); font-size: .8rem; font-weight: 700; color: var(--sun); letter-spacing: .04em; }
.cap h3 { font-size: 1.1rem; margin: .5rem 0 .35rem; }
.cap p { font-size: .92rem; color: var(--body); margin: 0; }
.cap--all { background: var(--ink); text-decoration: none; display: block; }
.cap--all .cap__n { color: var(--cyan); }
.cap--all h3 { color: #fff; }
.cap--all p { color: #9FBEC9; }
.cap--all:hover { background: var(--ink-2); text-decoration: none; }

/* --- 13. Product shots — real device frames ---------------------------- */
/* Screenshots are presented inside drawn device bezels so they read as the
   product rather than as images dropped on the page. Aspect ratios are locked
   to the source artwork: 4:3 for iPad, 0.4603 for iPhone 17 Pro Max. */

.device { position: relative; margin-inline: auto; }
.device img { width: 100%; height: auto; display: block; }

/* iPad ---------------------------------------------------------------- */
.device--pad {
  background: linear-gradient(150deg, #2B3A40, #131E23 52%, #26343A);
  padding: 1.05%;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 2px 5px rgba(11,27,33,.10),
    0 30px 64px -22px rgba(11,27,33,.48);
}
.device--pad .device__screen {
  border-radius: 14px; overflow: hidden; background: #000;
  aspect-ratio: 4 / 3;
}
.device--pad .device__screen img { height: 100%; object-fit: cover; object-position: top center; }

/* iPhone -------------------------------------------------------------- */
.device--phone {
  max-width: 270px;
  background: linear-gradient(155deg, #33434A, #131E23 46%, #2A383E);
  padding: 9px;
  border-radius: 46px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 2px 6px rgba(11,27,33,.12),
    0 34px 70px -24px rgba(11,27,33,.55);
}
.device--phone .device__screen {
  border-radius: 38px; overflow: hidden; background: #000; position: relative;
  aspect-ratio: 660 / 1434;
}
.device--phone .device__screen img { height: 100%; object-fit: cover; object-position: top center; }

.phones { display: flex; gap: clamp(18px, 3vw, 34px); justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.phone-fig { text-align: center; max-width: 270px; margin: 0; }
.phone-fig figcaption { font-size: .9rem; color: var(--muted); margin-top: 1.15rem; line-height: 1.45; }
.section--ink .phone-fig figcaption { color: #8BA8B3; }

.tick { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 13px; }
.tick li { display: flex; gap: .75em; align-items: flex-start; font-size: .98rem; }
.tick svg { width: 19px; height: 19px; color: var(--sun); flex: none; margin-top: .26em; }

/* --- 14. Pricing -------------------------------------------------------- */
.rate {
  background: linear-gradient(150deg, var(--ink) 0%, #16323C 62%, #0E242C 100%);
  border-radius: var(--r-lg); padding: clamp(34px, 5vw, 58px); color: #A9C3CC;
  text-align: center; position: relative; overflow: hidden;
}
.rate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/topo.svg") center/cover no-repeat; opacity: .22;
}
.rate > * { position: relative; z-index: 2; }
.rate__big {
  font-family: var(--display); font-size: clamp(110px, 14vw, 176px); font-weight: 800;
  line-height: .85; letter-spacing: -0.05em; color: #fff;
}
/* Was <sup>$</sup>2<sup>%</sup>, which read as "$2%". There is no dollar sign
   in this price — it's a percentage. */
.rate__pct { font-size: .5em; color: var(--sun); vertical-align: top; }
.rate__sub { font-family: var(--display); font-size: clamp(1.05rem,2vw,1.35rem); font-weight: 600; color: var(--cyan); letter-spacing: -0.01em; }

.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.incl li { display: flex; gap: .7em; align-items: flex-start; font-size: 1rem; }
.incl svg { width: 19px; height: 19px; color: var(--good); flex: none; margin-top: .28em; }
.section--ink .incl svg { color: var(--cyan); }

.note {
  border-left: 3px solid var(--cyan); background: var(--cyan-050);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .95rem;
}
.note--sun { border-left-color: var(--sun); background: var(--sun-050); }

/* --- 15. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 21px 46px 21px 0; position: relative;
  font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1.08rem; letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--sun); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 46px 24px 0; color: var(--body); font-size: .99rem; }

/* --- 16. CTA ------------------------------------------------------------ */
/* Left-aligned, photo-backed when assets/img/cta.webp arrives; ink + topo until
   then. Same reveal-on-load pattern as the hero. */
.cta {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-radius: 28px; padding: clamp(40px, 6vw, 76px);
  min-height: 460px; display: flex; flex-direction: column; justify-content: center;
  color: #A9C3CC;
}
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url("../img/topo.svg") center/cover no-repeat; opacity: .20;
}
.cta.has-photo::before { opacity: .10; }
.cta__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,27,33,.92) 0%, rgba(11,27,33,.72) 50%, rgba(11,27,33,.25) 100%);
}
@media (max-width: 760px) {
  .cta { min-height: 0; }
  .cta__veil { background: linear-gradient(180deg, rgba(11,27,33,.9), rgba(11,27,33,.8)); }
}
.cta__body { position: relative; z-index: 3; max-width: 680px; }
/* .lead carries its own body-grey colour, which disappears on ink. */
.cta .lead { color: #C9DCE2; }
.cta h2 {
  color: #fff; font-weight: 800;
  font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -.035em;
}

/* --- 17. Forms ---------------------------------------------------------- */
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field label { font-size: .88rem; font-weight: 640; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  padding: .78em .9em; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sun); outline: none; box-shadow: 0 0 0 3px var(--sun-050);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .84rem; color: var(--muted); }

/* --- 17b. Lead form ----------------------------------------------------- */
.lead-card {
  background: var(--white); border: 1px solid var(--line-cool); border-radius: var(--r-lg);
  box-shadow: var(--sh); overflow: hidden;
}
.lead-card__body, .lead-card__done { padding: clamp(26px, 3.6vw, 42px); }
.lead-card h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-bottom: .45em; }
.lead-card__sub { color: var(--body); margin-bottom: 1.9rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; margin-bottom: 18px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend {
  font-size: .89rem; font-weight: 650; color: var(--ink); padding: 0;
}
.req { color: var(--sun-700); font-weight: 700; }
.opt { color: var(--muted); font-weight: 500; font-size: .84em; }
.field__hint { font-size: .82rem; color: var(--muted); margin: .1rem 0 0; }
.field__err { font-size: .82rem; color: #C0392B; margin: 0; display: none; font-weight: 550; }
.field.is-bad .field__err { display: block; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #C0392B; }
.field.is-bad .chips { outline: 1px solid #C0392B; outline-offset: 6px; border-radius: 8px; }

/* Selectable chips beat a multi-select for "what do you rent" — one tap, and
   it doubles as a reminder of who OAK is for. */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: .3rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: .52em 1.05em; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--white);
  font-size: .9rem; font-weight: 600; color: var(--ink-3);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip input:hover + span { border-color: var(--ink-3); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  margin: 1rem 0 0; padding: .85rem 1.05rem; border-radius: var(--r-sm);
  background: #FCEEEC; color: #96271A; font-size: .92rem; font-weight: 550;
  border-left: 3px solid #C0392B;
}
[data-submit].is-busy { opacity: .72; pointer-events: none; }

.lead-card__done { text-align: center; }
.lead-card__tick {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 1.5rem;
  display: grid; place-items: center; background: var(--sun-050); color: var(--sun-600);
}
.lead-card__tick svg { width: 32px; height: 32px; }

/* --- 18. Footer --------------------------------------------------------- */
.site-footer { background: var(--ink); color: #8BA8B3; padding: 66px 0 34px; font-size: .94rem; }
.site-footer a { color: #B6CED7; }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid; gap: 36px;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff; font-family: var(--text); font-size: .76rem; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 1.05rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer__tag { font-family: var(--display); font-weight: 600; color: var(--cyan); margin-top: 1.1rem; }
.site-footer__bottom {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .86rem;
}

/* --- 19. Misc ----------------------------------------------------------- */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-head { padding: clamp(54px, 6.5vw, 92px) 0 clamp(30px, 4vw, 46px); background: linear-gradient(180deg, var(--sand), #fff); }
.stat__v { font-family: var(--display); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.section--ink .stat__v { color: #fff; }
.stat__l { font-size: .93rem; color: var(--muted); margin-top: .55rem; }
.section--ink .stat__l { color: #9FBEC9; }

/* --- 20. Cookie consent -------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--ink); color: #fff;
  padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
}
.cookie-banner p { margin: 0; max-width: 60ch; font-size: .92rem; color: #A9C3CC; }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }
@media (max-width: 560px) { .cookie-banner { padding: 16px 20px; } }