/* ════════════════════════════════════════════════════════════════════════
   FieldLog marketing site — the ONE stylesheet.  ORANGE · BLACK · WHITE.

   Every page under apps/site links this file.

   ── WHERE THIS DESIGN LANGUAGE CAME FROM ─────────────────────────────────
   The owner supplied a purchased SaaS template (Themeservices "Saaso") and
   asked for the whole site to take its structure, in FieldLog's own colours:
   orange, black and white. What is adopted from it is the SYSTEM — the
   section anatomy, the card and tile shapes, the pill controls, the icon
   chips, the staggered step column, the grouped pricing card, the type
   scale, and its two faces, Sora for headings and DM Sans for body. What is
   NOT adopted is its palette (a green/purple/yellow set on #013228) or its
   runtime: bootstrap, fontawesome, animate.css, odometer, slick, jQuery,
   isotope and WOW, none of which this site needs and all of which would have
   to be self-hosted anyway, because scripts/site-check.mjs fails any page
   that contacts a third-party host. The two fonts ARE vendored, by
   scripts/vendor-fonts.mjs, for that same reason.

   The template's stock photography does not ship either, and that is a
   product decision rather than a licensing one: its people, dashboards,
   customer logos, star ratings and odometer counters are all social proof,
   and FieldLog has no customers yet. docs/WEBSITE_REQUIREMENTS.md bans
   invented testimonials, customer logos and outcome statistics outright. The
   slots keep their position and weight and carry something true instead —
   the ten trades where the logo wall was, four product invariants where the
   16K+/180/6K/35 counters were, and the sample report where the customer
   story and the testimonial carousel were.

   ── THE COLOURS ──────────────────────────────────────────────────────────
   Orange is the ACTION and nothing else: one orange control per screen, the
   second action is always an outline. Black is every dark surface and every
   secondary control. White and neutral greys carry the reading. There is no
   blue left anywhere in this file — the previous edition was built on navy
   #1F4E79, and a grey with blue in it reads as a third hue next to orange.

   Worth knowing: the product itself (apps/web, apps/mobile) is still navy
   plus amber, per packages/shared/src/brand.ts. #E65100 is now the only
   colour the site and the app share. That is a deliberate divergence the
   owner asked for, not drift — but docs/BRAND.md §0 is about exactly this
   hazard, so if the app is ever brought across, brand.ts is the file that
   moves first and this one follows it.

   Every foreground/background pair in the palette was measured rather than
   eyeballed. All clear WCAG AA except one, and the exception is designed
   around: white on #E65100 is 3.79:1, so buttons fill with --accent-deep
   #C24700 at 5.01:1 and the brighter orange is kept for washes, rules,
   glyphs and the stamps' amber-on-black.

   Cache note: apps/site/vercel.json serves /assets/* as immutable for a
   year. Pages link this file WITH a ?v= query. Bump it when you edit this.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ORANGE ── the one action colour. One orange control per screen; the
     second action anywhere is an outline. #E65100 is the product's accent in
     packages/shared/src/brand.ts and is the single colour the site and the
     app still share. Buttons fill with --accent-deep, not --accent: white on
     #E65100 measures 3.79:1 and fails AA for button text, white on #C24700
     measures 5.09:1 and passes. The brighter orange stays for washes, rules,
     glyphs and the amber-on-black register the stamps use. */
  --accent:#E65100; --accent-deep:#C24700; --accent-ink:#B34000;
  --accent-wash:#FFF4EC; --accent-line:#F6D9C3; --orange-light:#FFB870;

  /* ── BLACK ── every dark surface and every secondary control. Not #000:
     a true black at full-bleed vibrates against orange and shows every
     compression artefact. These are neutral, with no blue left in them. */
  --black:#101215; --black-2:#191C21; --black-deep:#08090B; --black-line:#2A2F36;

  /* ── WHITE, and the greys between ── neutral, so the orange is the only
     hue on the page. Text floor is --muted (6.31:1 on white); --faint is
     for glyphs and rules, never for a sentence. */
  --bg:#FFFFFF; --bg-2:#F6F7F8; --bg-3:#EDEEF0; --line:#E2E4E7; --line-2:#EDEEF0;
  --ink:#101215; --body:#3F444B; --muted:#5C636D; --faint:#8A929C;

  /* ── status only ── a filed report is green because "done" is green
     everywhere; syncing is grey because it is not an alarm. Never red. */
  --ok:#2E7D32; --ok-wash:#EAF4EA; --wait-wash:#EFF0F2; --wait-ink:#4A5058;

  /* ── type ── Sora and DM Sans are the supplied template's own faces,
     vendored locally by scripts/vendor-fonts.mjs. IBM Plex Mono stays: the
     stamp, the filed line and the timestamps are set in it, and that mono
     register is the report's voice rather than a style choice. */
  --fd:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1160px; --r:12px; --r-lg:20px; --r-pill:999px;

  /* ── VERTICAL RHYTHM ── one scale, and every section on the site is on it.
     Before this there were FIFTEEN distinct section padding pairs (0, 8, 24,
     28, 32, 40, 48, 56, 64, 76, 80, 88, 96, 104, 112), which is what "some
     sections look stretched and others squeezed" actually is: no rhythm, just
     accumulated one-offs. These are clamps rather than fixed pixels because
     only `.section` had a mobile override — everything else carried its full
     desktop padding onto a 390px phone, where 104px of air above a heading is
     a third of the screen. A clamp compresses continuously instead of falling
     off one breakpoint cliff. */
  --sec:clamp(64px,7vw,104px);      /* a band that stands on its own      */
  --sec-lg:clamp(84px,9vw,132px);   /* opens or closes a page             */
  --sec-sm:clamp(44px,4.6vw,68px);  /* a strip supporting the band above   */
  --stack:clamp(30px,3.4vw,52px);   /* section heading → its content       */
  --gap:clamp(18px,2vw,24px);       /* grid gutter                         */

  /* ── SHADOWS ── layered and soft. The old --sh-pop ended in
     `0 40px 80px -30px rgba(8,9,11,.5)`: one 50%-black pass at 80px blur
     pulled in 30px, which under a wide surface like the home page's dashboard
     reads as a hard dark band rather than as depth. A real shadow is several
     passes, each larger and each WEAKER, and no single one heavy. Nothing
     here exceeds 18% black. */
  --sh-sm:0 1px 2px rgba(16,18,21,.05),0 2px 6px -2px rgba(16,18,21,.06);
  --sh:0 1px 3px rgba(16,18,21,.045),0 6px 16px -8px rgba(16,18,21,.10),
       0 18px 40px -22px rgba(16,18,21,.13);
  --sh-pop:0 2px 4px rgba(16,18,21,.04),0 10px 26px -12px rgba(16,18,21,.09),
       0 30px 64px -30px rgba(16,18,21,.15),0 64px 120px -60px rgba(16,18,21,.17);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-wash);color:var(--ink)}

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-n{max-width:760px}
.section{padding-block:var(--sec)}
.section-tight{padding-block:var(--sec-sm)}
/* Two sections on the same ground have nothing between them but air, so the
   full rhythm on both sides opens a hole — 208px at desktop, which is the
   "stretched" half of the complaint. A change of ground colour separates by
   itself and keeps its full padding. */
.section:not(.band):not(.band-dark):not(.s-why) + .section:not(.band):not(.band-dark):not(.s-why){padding-top:calc(var(--sec) * .55)}
.band{background:var(--bg-2)}
.band-dark{background:var(--black);color:#fff}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .sub,.band-dark p{color:rgba(255,255,255,.76)}
.band-dark .eyebrow{color:var(--orange-light)}
.head{max-width:68ch;margin-bottom:var(--stack)}
.head-c{text-align:center;margin-left:auto;margin-right:auto}
.head .sub{margin-top:16px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

/* ── type ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);margin:0;letter-spacing:-.022em;line-height:1.1}
h1{font-size:clamp(2.8rem,6vw,4.9rem);font-weight:800;letter-spacing:-.04em;line-height:.98}
h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.014em;line-height:1.3}
h4{font-size:.95rem;font-weight:700}
.eyebrow{display:inline-block;font-family:var(--fm);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.sub{color:var(--muted);font-size:1.12rem;line-height:1.6}
.lede{font-size:1.3rem;line-height:1.5;color:var(--body)}
.fine{font-size:.85rem;color:var(--muted)}
.mono{font-family:var(--fm)}
.stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:.76rem;letter-spacing:.02em;background:var(--ink);color:#fff;border-radius:6px;padding:6px 10px;white-space:nowrap}
.stamp b{color:var(--orange-light);font-weight:500}
.tag{display:inline-block;font-family:var(--fd);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px;background:var(--bg-3);color:var(--muted)}
.tag-ok{background:var(--ok-wash);color:var(--ok)}
.tag-wait{background:var(--wait-wash);color:var(--wait-ink)}
.tag-accent{background:var(--accent-wash);color:var(--accent-ink)}
.tag-dark{background:#FFF4EC;color:var(--black)}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fd);font-size:1.02rem;font-weight:700;padding:15px 26px;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;border:1.5px solid transparent;line-height:1.2;transition:background .16s,border-color .16s,color .16s,transform .16s;min-height:50px}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent-deep);color:#fff}
.btn-accent:hover{background:var(--accent-ink)}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:var(--black-deep)}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover{background:var(--black-deep)}
.btn-quiet{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{border-color:var(--accent-deep);color:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-sm{padding:9px 18px;font-size:.9rem;min-height:40px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.link{color:var(--black);font-weight:600;text-decoration:none;border-bottom:1.5px solid transparent}
.link:hover{border-bottom-color:var(--black)}
.link-arrow::after{content:" →"}
.band-dark .link,.hero-dark .link{color:#fff}

/* ── nav ────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;gap:36px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--fd);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.band-dark .brand,.foot .brand,.hero-dark .brand{color:#fff}
.mark{width:30px;height:30px;border-radius:29%;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:18px;height:18px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--body);text-decoration:none;padding:6px 0}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent-deep)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-r .signin{font-size:.95rem;font-weight:500;color:var(--body);text-decoration:none}
.nav-r .signin:hover{color:var(--ink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.menu[open] summary{background:var(--bg-2)}
.menu-panel{position:absolute;right:0;top:52px;width:min(320px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-pop);padding:10px;display:grid;gap:2px}
.menu-panel a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:500;color:var(--ink)}
.menu-panel a:hover{background:var(--bg-2)}
.menu-panel hr{border:0;border-top:1px solid var(--line-2);margin:6px 0}

/* ── dark hero ──────────────────────────────────────────────────────── */
.hero-dark{background:var(--black);color:#fff;position:relative;overflow:hidden;padding:96px 0 0}
.hero-dark::before{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 60% at 80% 0%,rgba(230,81,0,.30),transparent 60%),
  radial-gradient(40% 40% at 0% 100%,rgba(255,255,255,.07),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px);pointer-events:none}
.hero-dark > *{position:relative}
.hero-dark .eyebrow{color:var(--orange-light)}
.hero-dark h1{color:#fff;max-width:12ch}
.hero-dark .lede{color:rgba(255,255,255,.78);max-width:46ch;margin-top:26px;font-size:1.25rem}
.hero-dark .btns{margin-top:36px}
.hero-dark .fine{color:rgba(255,255,255,.5);margin-top:20px}
.hero-dark .split{align-items:end;gap:48px}
.hero-dark .split > div:first-child{padding-bottom:88px}
.hero-obj{position:relative;padding-bottom:0;margin-bottom:-2px}
.hero-obj .frag{border-radius:14px 14px 0 0;box-shadow:0 -20px 80px -20px rgba(0,0,0,.5)}
.hero-obj .float{position:absolute;right:-18px;top:-22px;transform:rotate(2deg);box-shadow:var(--sh-pop);font-size:.84rem;padding:10px 14px;z-index:2}

/* Claims ticker under the hero */
.ticker{background:var(--black-deep);color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.08)}
.ticker .wrap{display:flex;flex-wrap:wrap;gap:12px 0;justify-content:space-between;padding-top:16px;padding-bottom:16px;font-family:var(--fm);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.ticker span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:12px;vertical-align:middle}

/* Light page hero */
.page-hero{padding-block:var(--sec) var(--sec-sm);border-bottom:1px solid var(--line-2)}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:18ch}
.page-hero .lede{max-width:56ch;margin-top:22px}
.page-hero-c{text-align:center}
.page-hero-c h1,.page-hero-c .lede{margin-left:auto;margin-right:auto}
.page-hero-c .btns{justify-content:center}
.page-hero.dark{background:var(--black);color:#fff;border-bottom:0;position:relative;overflow:hidden}
.page-hero.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,rgba(230,81,0,.30),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px);pointer-events:none}
.page-hero.dark > *{position:relative}
.page-hero.dark h1{color:#fff}
.page-hero.dark .lede{color:rgba(255,255,255,.78)}
.page-hero.dark .eyebrow,.page-hero.dark .label{color:var(--orange-light)}
.page-hero.dark .fine{color:rgba(255,255,255,.5)}
.page-hero.dark .btn-quiet{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.page-hero.dark .btn-quiet:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── evidence tile (the "photo") ────────────────────────────────────── */
.ev{margin:0;position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;color:rgba(255,255,255,.9);background:
  radial-gradient(90% 70% at 30% 20%,rgba(255,255,255,.08),transparent 60%),linear-gradient(160deg,#23262B,#141619 70%,#0B0C0E)}
.ev svg{position:absolute;inset:14% 18% 22% 18%;width:64%;height:auto;margin:auto;opacity:.95}
.ev .cap{position:absolute;left:0;right:0;bottom:0;font-family:var(--fm);font-size:.66rem;letter-spacing:.02em;background:rgba(8,9,11,.86);color:#fff;padding:7px 10px;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .cap b{color:var(--orange-light);font-weight:500}
.ev .lbl{position:absolute;top:10px;left:10px;font-family:var(--fd);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:3px 8px}
.ev.wide{aspect-ratio:16/9}
.ev.big svg{inset:10% 25% 18% 25%;width:50%}
/* legacy gradient tiles (report document) — keep for the sample report's mock */
.ph{aspect-ratio:4/3;border-radius:6px;position:relative;overflow:hidden;border:1px solid var(--line-2);margin:0}
.ph .cap{position:absolute;left:0;right:0;bottom:0;font-family:var(--fm);font-size:.6rem;letter-spacing:.02em;background:rgba(16,18,21,.84);color:#fff;padding:6px 9px;display:flex;gap:7px;align-items:center}
.ph .cap b{color:var(--orange-light);font-weight:500}
.ph .lbl{position:absolute;top:8px;left:8px;font-size:.62rem;font-weight:600;color:#fff;background:rgba(16,18,21,.6);border-radius:5px;padding:3px 8px}
.p1{background:radial-gradient(120% 90% at 75% 8%,rgba(255,255,255,.16),transparent 55%),linear-gradient(10deg,#232323 0%,#3A3A3A 55%,#6B6B6B 100%)}
.p2{background:linear-gradient(160deg,#6E6257,#332E27)}
.p3{background:linear-gradient(150deg,#5A5A5A,#2C2C2C)}
.p4{background:linear-gradient(150deg,#615A4E,#2E2A22)}
.p5{background:linear-gradient(150deg,#575757,#2A2A2A)}
.p6{background:linear-gradient(150deg,#606060,#333333)}

/* ── feature rows ───────────────────────────────────────────────────── */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center;padding-block:var(--sec-sm)}
.feat + .feat{border-top:1px solid var(--line-2)}
.feat.rev .feat-vis{order:2}
.feat h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:18px}
.feat .sub{max-width:48ch}
.feat .list{margin-top:26px}
.feat-vis{position:relative}
.feat-vis .panel{background:var(--black);border-radius:var(--r-lg);padding:28px;display:grid;gap:14px;color:#fff;box-shadow:var(--sh)}
.feat-vis .panel .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feat-vis .panel .note{font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.7);padding-top:6px}
.feat-vis .panel .note b{color:var(--orange-light);font-weight:500}
.feat-vis .frag{box-shadow:var(--sh)}

/* ── cards ──────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.card h3{margin-bottom:8px}
.card p{font-size:.97rem;color:var(--body)}
.card .ico{width:40px;height:40px;border-radius:12px;background:var(--accent-wash);display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:20px;height:20px;stroke:var(--accent-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card .fig{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.list{list-style:none;display:grid;gap:12px}
.list li{position:relative;padding-left:30px;font-size:1rem}
/* Same rule as .ticks: the tick is neutral so that green keeps meaning FILED. */
.list li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101215' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/11px no-repeat}
.list li b{color:var(--ink);font-weight:600}
.band-dark .list li,.hero-dark .list li{color:rgba(255,255,255,.85)}
.band-dark .list li b,.hero-dark .list li b{color:#fff}
.band-dark .list li::before,.hero-dark .list li::before,.s-why .list li::before,.tile-dark .list li::before{background-color:rgba(255,255,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB870' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E")}

.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;padding:28px 0;border-bottom:1px solid var(--line)}
.row h3{font-size:1.1rem}
.row p{color:var(--body);font-size:1.02rem}

/* Steps: a timeline, not four cards */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--line)}
.step{counter-increment:s;position:relative;padding-top:38px}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--fm);font-size:.78rem;color:var(--accent-ink);letter-spacing:.08em;position:absolute;top:0;left:0;background:var(--bg);padding-right:12px;line-height:24px}
.step::after{content:"";position:absolute;top:6px;left:36px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.band .step::before{background:var(--bg-2)}
.band .step::after{box-shadow:0 0 0 4px var(--bg-2)}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.98rem}

/* Lifecycle strip */
.life{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.life > div{padding:26px 22px;border-right:1px solid var(--line-2);position:relative}
.life > div:last-child{border-right:0}
.life .n{font-family:var(--fm);font-size:.72rem;color:var(--accent-ink);letter-spacing:.08em;margin-bottom:14px;display:block}
.life b{display:block;font-family:var(--fd);font-size:1.15rem;color:var(--ink);letter-spacing:-.015em;font-weight:800}
.life span.d{font-size:.9rem;color:var(--muted);display:block;margin-top:6px}

/* Old way vs FieldLog */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.vs .col{padding:40px}
.vs .col:first-child{background:#fff}
.vs .col.is{background:var(--black);color:#fff}
.vs .col.is h3,.vs .col.is li{color:#fff}
.vs h3{margin-bottom:22px;font-size:1.05rem;font-family:var(--fm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs .col.is h3{color:var(--orange-light)}
.vs ul{list-style:none;display:grid;gap:16px}
.vs li{padding-left:30px;position:relative;font-size:1.05rem;line-height:1.5}
.vs .col:not(.is) li{color:var(--muted)}
.vs .col:not(.is) li::before{content:"";position:absolute;left:0;top:.75em;width:16px;height:2px;background:var(--faint)}
.vs .col.is li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB870' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/11px no-repeat}

/* Stat tiles — product FACTS, never usage metrics */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px}
.fact .n{font-family:var(--fd);font-weight:800;font-size:2.6rem;letter-spacing:-.04em;line-height:1;color:var(--black);margin-bottom:12px}
.fact .l{font-size:.95rem;color:var(--body);line-height:1.5}

.callout{background:var(--accent-wash);border:1px solid #F6D9C3;border-radius:var(--r);padding:20px 24px;color:var(--body);font-size:1rem}
.callout b{color:var(--ink)}
.callout-accent{background:#FFF4EC;border-color:#F6D9C3}

/* Big statement */
.statement{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink);max-width:28ch}
.band-dark .statement{color:#fff}
.statement em{font-style:normal;color:var(--accent-ink)}
.band-dark .statement em{color:var(--orange-light)}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-family:var(--fd);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-weight:400;font-size:1.5rem;color:var(--muted);flex:none;line-height:1;font-family:var(--fb)}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 4px 24px;color:var(--body);max-width:66ch;line-height:1.65;font-size:1.02rem}
.qa .a p+p{margin-top:10px}

/* ── tables ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.98rem;min-width:520px}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-2)}
.tbl th{font-family:var(--fm);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.us{font-family:var(--fd);font-weight:800;color:var(--black);font-size:1.1rem}
.tbl td.them{color:var(--muted)}

/* ── pricing ────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;display:flex;flex-direction:column;position:relative}
.plan.pop{border-color:var(--black);box-shadow:var(--sh)}
.plan .pop-tag{position:absolute;top:-13px;left:30px}
.plan h3{font-size:1.4rem}
.plan .who{font-size:1rem;color:var(--muted);margin-top:4px}
.plan .price{margin:26px 0 4px;display:flex;align-items:baseline;gap:8px}
.plan .price .n{font-family:var(--fd);font-weight:800;font-size:3.6rem;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.plan .price .per{font-size:1rem;color:var(--muted)}
.plan .bill{font-size:.88rem;color:var(--muted);margin-bottom:24px}
.plan .list{margin-bottom:28px}
.plan .btn{margin-top:auto;width:100%}
.plan-free{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--black);color:#fff;border-radius:var(--r-lg);padding:30px 34px;margin-top:20px}
.plan-free h3{font-size:1.3rem;margin-bottom:8px;color:#fff}
.plan-free p{color:rgba(255,255,255,.78)}

/* ── report document (the real artefact) ────────────────────────────── */
.report-stage{padding:56px 0 32px}
.rdoc{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-pop);overflow:hidden;color:var(--body)}
.rdoc + .rdoc{margin-top:34px}
.pg-tag{max-width:760px;margin:0 auto 10px;font-family:var(--fm);font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.rdoc + .pg-tag{margin-top:40px}
.d-hd{display:flex;align-items:center;gap:14px;padding:26px 34px 20px;border-bottom:2px solid var(--ink)}
.d-logo{width:46px;height:46px;border-radius:10px;background:var(--black);display:grid;place-items:center;color:#fff;font-family:var(--fd);font-weight:800;font-size:1rem;flex:none}
.d-hd .co b{display:block;font-family:var(--fd);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.d-hd .co span{font-size:.8rem;color:var(--muted)}
.d-hd .kind{margin-left:auto;text-align:right}
.d-hd .kind b{display:block;font-family:var(--fd);font-weight:700;font-size:.95rem;color:var(--ink)}
.d-hd .kind span{font-size:.78rem;color:var(--muted)}
.d-meta{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-2);margin:0}
.d-meta > div{padding:13px 20px;border-right:1px solid var(--line-2)}
.d-meta > div:first-child{padding-left:34px}
.d-meta > div:last-child{border-right:0;padding-right:34px}
.d-meta dt{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.d-meta dd{margin:0;font-size:.88rem;font-weight:600;color:var(--ink)}
.d-bd{padding:24px 34px 30px}
.d-sec{font-family:var(--fm);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.d-sec:not(:first-child){margin-top:26px}
.d-note{font-size:.92rem;color:var(--body);line-height:1.65}
.d-note b{color:var(--ink);font-weight:600}
.d-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d-tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.d-tbl th,.d-tbl td{padding:9px 0;border-bottom:1px solid var(--line-2);text-align:left}
.d-tbl th{font-family:var(--fm);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.d-tbl td:last-child,.d-tbl th:last-child{text-align:right}
.d-tbl tr:last-child td{border-bottom:0;font-weight:600;color:var(--ink)}
.d-filed{margin-top:28px;border-top:1px solid var(--line-2);padding-top:18px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.filed-block{font-family:var(--fm);font-size:.7rem;color:var(--body);line-height:1.7}
.filed-block b{color:var(--ink)}
.sig{min-width:220px}
.sig .line{border-bottom:1.5px solid var(--ink);height:40px;position:relative}
.sig .line svg{position:absolute;left:6px;bottom:4px;height:30px;width:auto}
.sig .who{font-size:.68rem;color:var(--muted);margin-top:6px}
.d-ft{display:flex;justify-content:space-between;padding:12px 34px;border-top:1px solid var(--line-2);font-family:var(--fm);font-size:.64rem;color:var(--muted);letter-spacing:.04em}

/* Report fragment */
.frag{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);overflow:hidden;color:var(--body)}
.frag .f-hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:2px solid var(--ink)}
.frag .f-hd .d-logo{width:36px;height:36px;font-size:.85rem}
.frag .f-hd b{display:block;font-family:var(--fd);color:var(--ink);font-size:.98rem;line-height:1.2}
.frag .f-hd span{font-size:.76rem;color:var(--muted)}
.frag .f-bd{padding:18px 20px}
.frag .f-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.frag .d-note{font-size:.88rem}
.frag .f-ft{padding:12px 20px;border-top:1px solid var(--line-2);font-family:var(--fm);font-size:.66rem;color:var(--body);line-height:1.8}
.frag .f-ft b{color:var(--ink)}
.frag .f-ft .sent{color:var(--ok)}

/* Office mock */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow:hidden;display:grid;grid-template-columns:168px minmax(0,1fr);font-size:.82rem}
.mock .side{background:var(--bg-2);border-right:1px solid var(--line-2);padding:18px 14px}
.mock .side .co{font-family:var(--fd);font-weight:700;color:var(--ink);font-size:.86rem;padding:0 8px 14px}
.mock .side .co small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.mock .side a{display:block;padding:7px 10px;border-radius:8px;color:var(--body);text-decoration:none}
.mock .side a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,18,21,.06)}
.mock .main{padding:20px 22px}
.mock .m-title{font-family:var(--fd);font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:4px}
.mock .m-sub{color:var(--muted);font-size:.76rem;margin-bottom:16px}
.mock .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mock .kpi{border:1px solid var(--line-2);border-radius:10px;padding:12px}
.mock .kpi .v{font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--ink);letter-spacing:-.02em}
.mock .kpi .k{color:var(--muted);font-size:.7rem;margin-top:2px}
.mock .rows-m{border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.mock .rm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2);align-items:center}
.mock .rm:last-child{border-bottom:0}
.mock .rm b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock .rm small{color:var(--muted);font-size:.72rem}
.mock .tag{font-size:.64rem;padding:3px 8px}

/* Phone mock */
.phone{width:250px;background:var(--ink);border-radius:34px;padding:12px;box-shadow:var(--sh-pop);margin:0 auto}
.phone .scr{background:#fff;border-radius:24px;overflow:hidden;font-size:.76rem}
.phone .p-top{padding:14px 16px 10px;border-bottom:1px solid var(--line-2)}
.phone .p-top b{display:block;font-family:var(--fd);color:var(--ink);font-size:.9rem}
.phone .p-top span{color:var(--muted);font-size:.7rem}
.phone .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.phone .p-grid .ev{aspect-ratio:1;border-radius:8px}
.phone .p-grid .ev .cap{font-size:.5rem;padding:4px 6px}
.phone .p-grid .ev .lbl{display:none}
.phone .p-bar{margin:4px 10px 12px;background:var(--wait-wash);color:var(--wait-ink);border-radius:8px;padding:8px 10px;font-weight:600;font-size:.7rem;display:flex;gap:8px;align-items:center}
.phone .p-bar i{width:8px;height:8px;border-radius:50%;background:var(--wait-ink);display:inline-block}
.phone .p-cta{margin:0 10px 12px;background:var(--accent);color:#fff;border-radius:12px;padding:12px;text-align:center;font-family:var(--fd);font-weight:700;font-size:.85rem}

/* ── prose (blog, about) ────────────────────────────────────────────── */
/* THE ARTICLE RHYTHM WAS DEAD, AND SPECIFICITY IS WHY. `.prose p{margin:0}`
   scores (0,1,1); `.prose > *+*{margin-top:1.15em}` scores (0,1,0). So the
   reset won and every paragraph in every blog post and on /about ran flush
   into the next one, with each heading sitting directly on the text below it.
   The rule that was supposed to create the rhythm had never applied once.
   Everything below is scored (0,1,0) on `> *`, so source order decides and no
   rule can silently outrank its neighbour again. */
.prose{max-width:70ch;margin-inline:auto;color:var(--body);font-size:1.08rem;line-height:1.75}
.prose > *{margin:0}
.prose > * + *{margin-top:1.15em}
.prose > * + h2{margin-top:2.2em}
.prose > * + h3{margin-top:1.8em}
.prose > h2 + *{margin-top:.7em}
.prose > h3 + *{margin-top:.6em}
.prose h2{font-size:1.6rem;letter-spacing:-.022em;font-weight:800}
.prose h3{font-size:1.18rem}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-top:.45em}
.prose li::marker{color:var(--accent-ink)}
.prose a{color:var(--black);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(230,81,0,.4)}
.prose a:hover{text-decoration-color:var(--accent-deep)}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{margin:0;padding:22px 28px;border-left:3px solid var(--accent);background:var(--accent-wash);border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-family:var(--fd);font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.prose .mono{font-size:.9em;background:var(--bg-2);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--fm);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
.prose .aside{background:var(--black);color:rgba(255,255,255,.82);border-radius:var(--r);padding:22px 26px;font-size:1rem}
.prose .aside b{display:block;margin-bottom:8px;color:var(--orange-light);font-family:var(--fm);font-weight:500;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}

.art-head{padding-block:var(--sec) var(--sec-sm);border-bottom:1px solid var(--line-2)}
.art-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:22ch;letter-spacing:-.035em}
.art-head .lede{max-width:60ch;margin-top:20px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--fm);font-size:.76rem;color:var(--muted);letter-spacing:.04em;margin-bottom:24px}
.meta .tag{font-family:var(--fd)}
.art-body{padding-block:var(--sec-sm) var(--sec-lg)}
.art-foot{border-top:1px solid var(--line);margin-top:56px;padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.posts{display:grid;gap:0;border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:32px;padding:36px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.post:hover h3{color:var(--black)}
.post .when{font-family:var(--fm);font-size:.76rem;color:var(--muted);letter-spacing:.04em;padding-top:8px;line-height:1.8}
.post h3{font-size:1.5rem;margin-bottom:10px;transition:color .16s;letter-spacing:-.02em}
.post p{color:var(--body);max-width:62ch;font-size:1.02rem}
.post .go{align-self:center;color:var(--black);font-weight:600;white-space:nowrap}
.post-feat{background:var(--black);color:#fff;border-radius:var(--r-lg);padding:44px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;text-decoration:none;margin-bottom:56px;align-items:center}
.post-feat h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);margin:12px 0 16px}
.post-feat p{color:rgba(255,255,255,.78);font-size:1.08rem}
.post-feat .when{color:var(--orange-light);font-family:var(--fm);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.post-feat .go{color:#fff;font-weight:600;margin-top:24px;display:inline-block}
/* The .frag is a white document component, and a dark card must not paint its
   insides. `.post-feat p` (0,1,1) beat `.d-note` (0,1,0), so the note under the
   two photos rendered white on white — the sentence was there and unreadable.
   Pre-dates the orange/black pass; found by rendering the page, which is the
   only thing that could have found it. */
.post-feat .frag p{color:var(--body);font-size:.92rem}
.post-feat .frag .d-note b{color:var(--ink)}

/* ── final CTA ──────────────────────────────────────────────────────── */
/* Was 40 top / 112 bottom — squeezed against the section above and floating
   above a footer that brings its own 72px. */
.cta{padding-block:var(--sec)}
.cta-card{background:var(--black);border-radius:28px;padding:80px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 120%,rgba(230,81,0,.34),transparent 70%)}
.cta-card > *{position:relative}
.cta-card h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.cta-card .sub{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto}
.cta-card .btns{justify-content:center;margin-top:32px}
.cta-card .fine{color:rgba(255,255,255,.5);margin-top:22px}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--black-deep);color:rgba(255,255,255,.78);padding:72px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px}
.foot h4{font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 18px}
.foot ul{list-style:none}
.foot li{margin-bottom:10px}
.foot a{font-size:.94rem;color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-blurb{font-size:.94rem;max-width:30ch;margin-top:16px;color:rgba(255,255,255,.7)}
.foot-trades{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:.86rem;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.foot-trades span{color:rgba(255,255,255,.45);margin-right:6px;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.foot-btm{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.5)}
.foot-btm a{color:rgba(255,255,255,.6);font-size:.8rem}

/* ── use-case pages (build-use-pages.mjs anchors on these class names) ─ */
.label{display:inline-block;font-family:var(--fm);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.label + h2 + .sub{max-width:60ch;margin:16px 0 44px}
.moments-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.moment{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.moment .q{font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:14px;line-height:1.25}
.moment p:not(.q){font-size:.98rem;color:var(--body)}
.plays-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.play{padding:22px 0 0;border-top:2px solid var(--ink)}
.play h3{font-size:1.1rem;margin-bottom:8px}
.play p{font-size:.98rem}
.final-card{background:var(--black);border-radius:28px;padding:80px 40px;text-align:center;color:#fff}
.final-card h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.final-card .sub{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto}
.final-card .btns{justify-content:center;margin-top:32px}
.final-card .fine{color:rgba(255,255,255,.5);margin-top:22px}

/* ── CMS-generated pages (scripts/cms/layout.mjs + blocks.mjs) ──────── */
.cms-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cms-fine{font-size:.85rem;color:var(--muted);margin-top:16px}
.cms-hero{padding-block:var(--sec) var(--sec-sm);text-align:center;border-bottom:1px solid var(--line-2)}
.cms-hero .label{display:block;margin-bottom:14px}
.cms-hero h1{max-width:18ch;margin:0 auto 16px;font-size:clamp(2.4rem,5vw,4rem)}
.cms-hero .sub{max-width:52ch;margin:0 auto}
.cms-hero .cms-btns{justify-content:center}
.cms-prose{padding-block:var(--sec-sm) 0}
.cms-prose .wrap{max-width:760px}
.cms-prose h2{font-size:1.35rem;margin:0 0 12px;letter-spacing:-.015em}
.cms-prose p{margin:0 0 14px;color:var(--body);font-size:1.02rem}
.cms-prose ul{margin:0 0 14px;padding-left:22px;color:var(--body);font-size:1.02rem}
.cms-prose li{margin-bottom:8px}
.cms-prose b{color:var(--ink);font-weight:600}
.cms-prose a{color:var(--black);text-underline-offset:3px}
.cms-cards{padding:72px 0}
.cms-cards h2{text-align:center;margin-bottom:10px}
.cms-cards .sub{text-align:center;max-width:56ch;margin:0 auto 38px}
.cms-card-grid{display:grid;gap:16px}
.cms-card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cms-card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.cms-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px}
.cms-card-ico{width:20px;height:20px;stroke:var(--accent-ink);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.cms-card h3{margin-bottom:6px}
.cms-card p{font-size:.95rem;color:var(--body)}
.cms-card-link{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--black);text-decoration:none}
.cms-card-link:hover{text-decoration:underline;text-underline-offset:3px}
.cms-facts{padding:72px 0;text-align:center}
.cms-facts h2{margin-bottom:10px}
.cms-facts .sub{max-width:52ch;margin:0 auto 38px}
.cms-fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cms-fact{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 18px}
.cms-fact .n{font-family:var(--fd);font-weight:800;font-size:2.1rem;letter-spacing:-.03em;line-height:1;color:var(--black);margin-bottom:8px}
.cms-fact .l{font-size:.86rem;color:var(--body);line-height:1.5}
.cms-facts .cms-fine{max-width:64ch;margin:22px auto 0}
.cms-steps{padding:72px 0}
.cms-steps h2{margin-bottom:28px}
.cms-step-list{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:20px;max-width:760px}
.cms-step-list li{counter-increment:s;position:relative;padding-left:52px}
.cms-step-list li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:99px;background:var(--accent-wash);color:var(--accent-ink);font-family:var(--fd);font-weight:700;display:grid;place-items:center}
.cms-step-list h3{margin-bottom:4px}
.cms-step-list p{font-size:.95rem;color:var(--body)}
.cms-faq{padding:0 0 72px}
.cms-faq h2{margin-bottom:28px}
.cms-faq-list{max-width:760px}
.cms-image{padding:44px 0}
.cms-image figure{margin:0}
.cms-image img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.cms-image figcaption{margin-top:12px;font-size:.85rem;color:var(--muted);text-align:center}
.cms-download{padding:32px 0}
.cms-dl{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;text-decoration:none}
.cms-dl:hover{border-color:var(--black)}
.cms-dl-ico{width:22px;height:22px;stroke:var(--accent-ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cms-dl-t{display:flex;flex-direction:column}
.cms-dl-t b{font-family:var(--fd);font-size:.98rem;color:var(--ink)}
.cms-dl-t span{font-size:.85rem;color:var(--muted)}
.cms-cta{padding-block:var(--sec)}
.cms-cta-card{background:var(--black);border-radius:28px;padding:72px 32px;text-align:center;color:#fff}
.cms-cta-card h2{color:#fff;margin-bottom:14px}
.cms-cta-card .sub{color:rgba(255,255,255,.78);max-width:46ch;margin:0 auto}
.cms-cta-card .cms-btns{justify-content:center}
.cms-cta-card .btn-quiet{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.cms-cta-card .btn-quiet:hover{background:rgba(255,255,255,.14)}
.cms-cta-fine{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:20px}
.cms-callout{padding-block:var(--sec-sm) 0}
.cms-callout .wrap{max-width:760px}
.cms-callout-box{background:var(--accent-wash);border:1px solid #F6D9C3;border-left:4px solid var(--accent);border-radius:var(--r);padding:18px 22px;color:var(--body);font-size:1rem}
.cms-callout-box b{color:var(--ink);font-weight:600}
body.doc .cms-hero{padding-block:var(--sec) 0;text-align:left;border-bottom:0}
body.doc .cms-hero .wrap,body.doc .cms-prose .wrap,body.doc .cms-faq .wrap{max-width:760px}
body.doc .cms-hero h1{font-size:2.6rem;max-width:none;margin:0 0 12px}
body.doc .cms-hero .sub{font-size:.82rem;font-family:var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
/* Clause-to-clause rhythm on a legal page: tighter than a marketing band,
   because each block is a numbered clause rather than a section. */
body.doc .cms-prose{padding-block:clamp(26px,3vw,40px) 0}
body.doc .cms-prose h2{margin-top:12px}
body.doc .cms-prose:last-of-type{padding-bottom:var(--sec)}
body.doc .cms-cta{padding-block:var(--sec)}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .grid-4,.facts,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before{display:none}
  .life{grid-template-columns:repeat(3,minmax(0,1fr))}
  .life > div:nth-child(3){border-right:0}
  .life > div:nth-child(-n+3){border-bottom:1px solid var(--line-2)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .feat{gap:44px}
}
@media (max-width:860px){
  .nav-links,.nav-r .signin{display:none}
  .menu{display:block}
  .nav-in{gap:16px}
  .split{grid-template-columns:1fr;gap:40px}
  .hero-dark{padding-top:64px}
  .hero-dark .split > div:first-child{padding-bottom:40px}
  .hero-obj .float{position:static;display:inline-flex;transform:none;margin-bottom:14px}
  .feat,.feat.rev{grid-template-columns:1fr}
  .feat.rev .feat-vis{order:0}
  .grid-3,.grid-2,.vs,.plans,.moments-grid,.plays-grid{grid-template-columns:1fr}
  .plan-free{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:8px}
  .post{grid-template-columns:1fr;gap:10px}
  .post .go{display:none}
  .post-feat{grid-template-columns:1fr;padding:30px}
  .mock{grid-template-columns:1fr}
  .mock .side{display:none}
  .d-meta{grid-template-columns:1fr 1fr}
  .d-meta > div{padding:12px 20px}
  .d-hd{padding:20px 20px 16px;flex-wrap:wrap}
  .d-hd .kind{margin-left:0;text-align:left;width:100%}
  .d-bd{padding:20px 20px 24px}
  .d-ft{padding:11px 20px}
  .cms-card-grid.cols-3,.cms-card-grid.cols-2{grid-template-columns:1fr}
  .cms-fact-grid{grid-template-columns:1fr 1fr}
  .ticker .wrap{justify-content:flex-start;gap:10px 28px}
}
@media (max-width:560px){
  .grid-4,.facts,.steps,.life{grid-template-columns:1fr}
  .life > div{border-right:0;border-bottom:1px solid var(--line-2)}
  .life > div:last-child{border-bottom:0}
  .d-photos{grid-template-columns:1fr}
  .cta-card,.final-card,.cms-cta-card{padding:56px 24px;border-radius:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .btns .btn{width:100%}
  h1{font-size:2.6rem}
  .cms-fact-grid{grid-template-columns:1fr}
  .vs .col{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}
@media print{.nav,.foot,.cta,.menu{display:none}body{background:#fff}}

/* ════════════════════════════════════════════════════════════════════════
   HOME PAGE — the supplied "Saaso" home-v2 layout, in FieldLog's tokens.

   The owner handed over a purchased SaaS template (Themeservices "Saaso",
   home-v2.html) and asked for it as the home page. The HTML arrived without
   its assets: bootstrap, fontawesome, animate.css, odometer, slick, its own
   style.css, ~40 images and six JS files, none of which are in this repo.
   Loading them from a CDN is not an option — scripts/site-check.mjs fails any
   page that contacts a third-party host, for the legal reason recorded in
   scripts/vendor-fonts.mjs. So what is adopted here is the LAYOUT: section
   order, proportions, the card and tile anatomy, the overlapping banner, the
   dark feature tile, the grouped pricing card, the accent footer rhythm —
   rebuilt on the tokens above with no new dependency and no JavaScript.

   FOUR OF THE TEMPLATE'S SECTIONS COULD NOT SHIP AS DRAWN, and the reason is
   the same for all four: they are social proof this business does not have.
   "Trusted by 100,000+ teams" over a logo wall, an odometer band reading
   16K+ projects / 180 staff / 6K clients / 35 awards, a customer-story panel
   badged "Happy Customer 3.5 (10k Review)", and a two-slide testimonial
   carousel with invented people. FieldLog has no customers yet, and
   docs/WEBSITE_REQUIREMENTS.md bans testimonials, customer logos and outcome
   statistics outright. Each slot keeps its position and visual weight and is
   filled with something true instead:
     · logo wall      → the ten trades, linking to the ten trade pages
     · counter band   → the four guarantees, which are product invariants
     · customer story → the sample report, the strongest artefact we own
     · testimonials   → merged into that, with a line saying why it is empty
   Putting the numbers back would be the fastest way to lose the argument the
   product exists to win.

   ALSO DROPPED, all for the same reason — this site ships zero JavaScript:
   the preloader, the WOW scroll animations, the odometer count-up, the slick
   carousels (blog and testimonial), and the scroll-to-top button. The
   carousels became static grids, which show more at once anyway. The
   monthly/yearly pricing toggle went too, and that one is a product fact
   rather than a technical one: there is no annual price to toggle to
   (CLAUDE.md §4 lists annual billing as still open), so a switch offering
   "Save 20%" would have invented a plan.
   ════════════════════════════════════════════════════════════════════════ */

/* ── home hero (template: cs_hero cs_style_2, centred, light) ────────── */
.s-hero{position:relative;overflow:hidden;background:
  radial-gradient(60% 50% at 50% -10%,#FFF4EC,transparent 70%),
  radial-gradient(50% 40% at 100% 0%,#FFF4EC,transparent 70%),
  linear-gradient(180deg,var(--bg-2),var(--bg));padding-block:var(--sec) 0;text-align:center}
.s-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(0deg,rgba(16,18,21,.028) 0 1px,transparent 1px 44px),
  repeating-linear-gradient(90deg,rgba(16,18,21,.028) 0 1px,transparent 1px 44px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.s-hero > *{position:relative}
.s-hero h1{max-width:16ch;margin:0 auto}
.s-hero .lede{max-width:60ch;margin:26px auto 0;color:var(--muted)}
.s-hero .btns{justify-content:center;margin-top:34px}
.s-hero .fine{margin-top:20px}
/* the eyebrow pill, with the template's flanking marks */
.spark{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 18px;box-shadow:var(--sh);margin-bottom:26px;
  font-family:var(--fm);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.spark svg{width:13px;height:13px;fill:var(--accent);flex:none}

/* ── overlapping banner (template: cs_banner — dashboard + phone) ────── */
/* text-align:left is load-bearing — .s-hero centres its own copy, and without
   this the inbox rows and the phone inherit that and centre their columns. */
/* THE HARD EDGE UNDER THE DASHBOARD WAS A PAINTED RECTANGLE, not a shadow.
   This used to carry `::after` — a solid var(--bg) block over the bottom 46%,
   sat behind the artwork to make its lower half stand on white. It drew a
   dead-straight seam right across the hero's gradient, and it was never
   needed: .s-hero's own linear-gradient already resolves to var(--bg) by the
   time it reaches here, so the ground was white anyway. Removed, and the
   gradient runs uninterrupted. */
.s-banner{position:relative;margin-top:clamp(36px,5vw,64px);padding-bottom:var(--sec-sm);text-align:left}
.s-banner .wrap{position:relative;z-index:1}
/* TWO OBJECTS, TWO SPACES. The template overlaps a phone onto the dashboard's
   corner. Done literally here it buried something every time: on the right it
   sat on the Filed / Syncing / Ready column, which is the whole argument the
   picture makes; moved left it covered the sidebar and the dashboard read as
   broken rather than layered. So the dashboard is inset from the right and the
   phone occupies that inset, overlapping only the edge — the layering survives
   and neither object loses anything. The inset collapses to nothing before the
   phone is hidden at 860, so there is no width where the two collide. */
.s-banner-in{position:relative;border-radius:var(--r-lg);padding-right:clamp(0px,13vw,166px)}
.s-banner .mock{box-shadow:var(--sh-pop);border-radius:var(--r-lg)}
.s-banner .phone{position:absolute;right:0;bottom:calc(var(--sec-sm) * -.55);width:clamp(150px,15vw,200px);z-index:2;box-shadow:var(--sh-pop)}
.s-banner .float{position:absolute;left:24px;top:-34px;z-index:3;box-shadow:var(--sh-pop);transform:rotate(-1.5deg)}

/* ── trades strip (template: cs_brands — the logo wall) ──────────────── */
.s-trades{padding-block:var(--sec) 0}
.s-trades h2{font-family:var(--fb);font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0;text-align:center;margin-bottom:26px}
.trade-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.trade-row a{font-family:var(--fd);font-weight:700;font-size:.94rem;color:var(--ink);text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 20px;transition:border-color .16s,color .16s,transform .16s}
.trade-row a:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px)}

/* ── feature tiles (template: cs_features_items_wrapper, first tile dark) */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column}
.tile h3{font-size:1.24rem;margin-bottom:8px}
.tile > p{color:var(--muted);font-size:.96rem}
.tile .go{margin-top:auto;padding-top:20px;font-family:var(--fd);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--black);text-decoration:none}
.tile .go::after{content:" →"}
.tile:hover .go{color:var(--accent-ink)}
.chip{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;flex:none;background:var(--bg-3)}
.chip svg{width:24px;height:24px;fill:none;stroke:var(--black);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip-a{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-line)} .chip-a svg{stroke:var(--accent-ink)}
.chip-n{background:var(--black)} .chip-n svg{stroke:#fff}
.ticks{list-style:none;margin:14px 0 0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:24px;font-size:.94rem;color:var(--body)}
/* Black, not green. Green is reserved for a FILED status, and sixteen green
   ticks on one screen would make the one green that means something invisible.
   Orange was the other candidate and lost to the CTA: a tick cannot be pressed,
   but sixteen orange marks around one orange button is still sixteen. */
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;border-radius:50%;
  background:var(--bg-3);box-shadow:inset 0 0 0 1.5px var(--faint)}
.ticks li::after{content:"";position:absolute;left:4px;top:.62em;width:5px;height:2.5px;border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
/* the dark lead tile the template opens the grid with */
.tile-dark{grid-column:span 2;grid-row:span 2;background:var(--black);border-color:transparent;color:#fff;position:relative;overflow:hidden;justify-content:space-between}
.tile-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 70% at 100% 0%,rgba(230,81,0,.34),transparent 60%),
  radial-gradient(50% 50% at 0% 100%,rgba(255,255,255,.07),transparent 60%)}
.tile-dark > *{position:relative}
.tile-dark h3{color:#fff;font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.02em;line-height:1.14;max-width:16ch}
.tile-dark p{color:rgba(255,255,255,.74);margin-top:12px;max-width:38ch}
.tile-dark .btns{margin-top:26px}
.tile-dark .ev{margin:26px 0;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.tile-dark .d-line{font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;line-height:1.9;
  color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.tile-dark .d-line b{color:var(--orange-light);font-weight:500}

/* ── how it works (template: cs_workink_process, grey band) ─────────── */
.s-how .split{gap:56px;align-items:center}
.steps-n{display:grid;gap:18px}
.step-n{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.step-n:nth-child(2){margin-left:32px}
.step-n:nth-child(3){margin-left:64px}
.step-n h3{margin-bottom:5px}
.step-n p{color:var(--muted);font-size:.95rem}

/* ── the analytics card (template: cs_card cs_style_1 cs_type_3) ─────── */
.s-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:26px;padding:52px}
.s-card .split{gap:56px}
.iconrows{display:grid;gap:20px;margin-top:30px}
.iconrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.iconrow h3{font-size:1.06rem;margin-bottom:3px}
.iconrow p{color:var(--muted);font-size:.94rem}
.iconrow .chip{width:46px;height:46px;border-radius:12px;margin:0}
.iconrow .chip svg{width:21px;height:21px}

/* ── why choose us (template: cs_card cs_type_4, full-bleed accent) ──── */
/* Navy, not amber. brand.ts keeps amber for the ONE control on a screen, and
   white on #E65100 measures ~3.8:1 — under AA for the body text this carries. */
.s-why{background:var(--black);color:#fff;position:relative;overflow:hidden}
.s-why::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 60% at 90% 10%,rgba(230,81,0,.34),transparent 60%),
  radial-gradient(40% 50% at 0% 90%,rgba(255,255,255,.06),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 48px)}
.s-why > *{position:relative}
.s-why h2{color:#fff} .s-why .sub{color:rgba(255,255,255,.76)} .s-why .eyebrow{color:var(--orange-light)}
.s-why .ticks li{color:rgba(255,255,255,.88);font-size:1.02rem;padding-left:30px}
.s-why .ticks{gap:14px;margin-top:26px}
.s-why .ticks li::before{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--orange-light);width:16px;height:16px}
.s-why .ticks li::after{left:5px;top:.6em;border-color:var(--orange-light)}
.s-why .phone{margin:0 auto}

/* ── guarantee band (template: cs_counter — the odometer stats) ──────── */
.s-guar{background:var(--black-deep);color:#fff;padding-block:var(--sec-sm)}
.guar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.guar > div{padding-left:20px;border-left:2px solid rgba(255,255,255,.14)}
.guar b{display:block;font-family:var(--fd);font-size:1.16rem;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.guar span{font-size:.92rem;color:rgba(255,255,255,.62);line-height:1.55}

/* ── the sample-report panel (template: customer story + testimonials) ─ */
.s-story{background:var(--bg-2);border:1px solid var(--line-2);border-radius:26px;padding:52px}
.s-story .split{gap:56px;align-items:center}
.s-story .empty{font-family:var(--fm);font-size:.8rem;line-height:1.7;color:var(--muted);
  border-left:2px solid var(--accent);padding-left:16px;margin-top:26px}

/* ── integration tiles (template: cs_toolset — the logo grid) ────────── */
/* Text tiles, not vendor logos: site-check blocks third-party hosts, and a
   competitor's trademark is not ours to put on a wall. */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:left}
.tool b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.tool span{font-size:.9rem;color:var(--muted)}

/* ── blog cards (template: cs_post cs_style_1 — was a slick carousel) ── */
.s-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.s-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;transition:border-color .16s,transform .16s}
.s-post:hover{border-color:var(--black);transform:translateY(-2px)}
.s-post .thumb{position:relative;aspect-ratio:16/9;background:
  radial-gradient(90% 70% at 30% 20%,rgba(255,255,255,.08),transparent 60%),linear-gradient(160deg,#23262B,#141619 70%,#0B0C0E)}
.s-post .thumb svg{position:absolute;inset:0;margin:auto;width:46%;height:auto;fill:none;stroke:rgba(255,255,255,.9);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-post .cat{position:absolute;left:12px;top:12px;font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(8,9,11,.72);border-radius:5px;padding:4px 9px}
.s-post-bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.s-post .when{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.s-post h3{font-size:1.1rem;line-height:1.32}
.s-post .go{margin-top:auto;padding-top:18px;font-family:var(--fd);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--black)}
.s-post .go::after{content:" →"}

/* ── home responsive ────────────────────────────────────────────────── */
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-dark{grid-column:span 2;grid-row:auto}
  .guar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-posts{grid-template-columns:1fr}
  .s-card,.s-story{padding:36px}
  .s-banner-in{padding-right:0}
  .s-banner .phone{position:static;margin:22px auto 0;width:170px}
}
@media (max-width:860px){
  .s-hero{padding-top:52px}
  .s-banner{margin-top:44px}
  .s-banner .phone,.s-banner .float{display:none}
  .s-trades{padding-top:72px}
  .step-n:nth-child(2),.step-n:nth-child(3){margin-left:0}
  .s-how .split,.s-card .split,.s-story .split,.s-why .split{grid-template-columns:minmax(0,1fr);gap:36px}
  .s-why .phone{max-width:240px}
}
@media (max-width:620px){
  .tiles,.guar,.tools{grid-template-columns:minmax(0,1fr)}
  .tile-dark{grid-column:span 1;grid-row:auto}
  .s-card,.s-story{padding:26px;border-radius:18px}
  .guar > div{padding-left:16px}
}