/* Case study pages. Matches the homepage look (dark, Inter, gold accent). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink-2: rgb(var(--fg-rgb) / 0.62);
  --ink-3: rgb(var(--fg-rgb) / 0.48);
  --accent: var(--gold-text);
}
.app-fielddoc   { --accent: #60a5fa; --mock-accent: #60a5fa; }
.app-fieldstamp { --accent: #a5b4fc; --mock-accent: #a5b4fc; }
.app-fieldlink  { --accent: #5eead4; --mock-accent: #5eead4; }

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.sr { opacity:0; transform:translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.sr.in { opacity:1; transform:translateY(0); }

/* NAV (same as homepage) */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height:58px; display:flex; align-items:center;
  background: rgb(var(--bg-rgb) / 0.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width:100%; max-width:1140px; margin:0 auto; padding:0 36px;
  display:flex; align-items:center; justify-content:space-between;
}
.wm { text-decoration:none; display:flex; align-items:center; transition:opacity 0.15s; }
.wm:hover { opacity:0.7; }
.wm-logo { height:26px; width:auto; display:block; }
.nav-links { display:flex; gap:28px; list-style:none; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a { font-size:0.78rem; font-weight:500; color:rgb(var(--fg-rgb) / 0.42); text-decoration:none; transition:color 0.15s; }
.nav-links a:hover, .nav-links a.active { color:var(--fg); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-cta { font-size:0.78rem; font-weight:600; color:var(--gold-text); text-decoration:none;
  padding:8px 20px; background:rgba(255,192,0,0.12); border:1px solid rgba(255,192,0,0.4); border-radius:999px;
  transition:background 0.15s, border-color 0.15s, transform 0.15s; white-space:nowrap; }
.nav-cta:hover { background:rgba(255,192,0,0.2); border-color:rgba(255,192,0,0.6); transform:translateY(-1px); }
.nav-burger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:34px; height:34px; background:transparent; border:1px solid rgb(var(--fg-rgb) / 0.15); border-radius:8px;
  cursor:pointer; padding:0;
}
.nav-burger span { width:16px; height:1.5px; background:var(--fg); border-radius:2px; transition:transform 0.2s, opacity 0.2s; }
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display:none; flex-direction:column;
  position:fixed; top:58px; left:0; right:0; z-index:199;
  background:rgb(var(--bg-rgb) / 0.98); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height 0.25s ease;
}
.mobile-menu.open { max-height:280px; }
.mobile-menu a {
  padding:16px 24px; font-size:0.9rem; font-weight:600; color:rgb(var(--fg-rgb) / 0.75);
  text-decoration:none; border-bottom:1px solid var(--line);
}

/* LAYOUT */
.wrap { max-width:1140px; margin:0 auto; padding:0 36px; }
.crumbs { font-size:0.72rem; color:var(--ink-3); display:flex; gap:8px; align-items:center; margin-bottom:22px; }
.crumbs a { text-decoration:none; color:var(--ink-3); }
.crumbs a:hover { color:var(--fg); }
.eyebrow {
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section-h {
  font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-0.04em; line-height:1.08;
  margin-bottom:16px;
}
.lead { font-size:1.02rem; line-height:1.75; color:var(--ink-2); max-width:62ch; }
section { padding:88px 0; }
section + section { border-top:1px solid var(--line); }

/* HERO */
.cs-hero { position:relative; padding:130px 0 80px; overflow:hidden; }
.cs-hero::before {
  content:''; position:absolute; top:-10%; left:50%; width:1100px; height:760px; transform:translateX(-50%);
  background:radial-gradient(ellipse 55% 50% at 50% 45%, rgba(26,44,90,0.85) 0%, rgba(10,18,50,0.35) 55%, transparent 75%);
  pointer-events:none;
}
.cs-hero .wrap { position:relative; }
.cs-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.cs-hero h1 {
  font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; letter-spacing:-0.05em; line-height:1.02;
  margin-bottom:18px; animation:fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.cs-hero h1 em { font-style:italic; font-weight:300; color:rgb(var(--fg-rgb) / 0.5); }
.cs-hero .lead { animation:fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
.cs-hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; animation:fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.26s both; }
.cs-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; animation:fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.32s both; }
.chip {
  font-size:0.7rem; font-weight:600; color:var(--ink-2);
  background:var(--card-2); border:1px solid var(--card-border); border-radius:999px; padding:6px 12px;
}
.status { display:inline-flex; align-items:center; gap:6px; font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#22a35a; margin-bottom:14px; }
.status::before { display:none; }
.status.dev { color:var(--gold-text); }

/* BUTTONS */
.btn-w { display:inline-flex; align-items:center; gap:6px; font-size:0.84rem; font-weight:700;
  color:var(--gold-text); background:rgba(255,192,0,0.12); border:1px solid rgba(255,192,0,0.4); padding:12px 24px; border-radius:999px;
  text-decoration:none; transition:background 0.15s, border-color 0.15s, transform 0.15s; }
.btn-w:hover { background:rgba(255,192,0,0.2); border-color:rgba(255,192,0,0.6); transform:translateY(-1px); }
.btn-o { display:inline-flex; align-items:center; gap:6px; font-size:0.84rem; font-weight:600;
  color:var(--fg); background:var(--btn2-bg); border:1px solid var(--btn2-border); padding:12px 24px; border-radius:999px;
  text-decoration:none; transition:background 0.15s, border-color 0.15s; }
.btn-o:hover { background:var(--btn2-bg-hover); border-color:var(--btn2-border-hover); }

/* PROBLEM */
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  transition:border-color 0.2s, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.card:hover { border-color:rgb(var(--fg-rgb) / 0.13); transform:translateY(-3px); }
.card-n { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; color:var(--ink-3); margin-bottom:14px; }
.card h3 { font-size:1rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.card p { font-size:0.84rem; color:var(--ink-3); line-height:1.7; }

/* FEATURE ROWS (alternating) */
.feature { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:56px 0; }
.feature + .feature { border-top:1px solid var(--line); }
.feature:nth-child(even) .feature-text { order:2; }
.feature-tag { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.feature h3 { font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; letter-spacing:-0.04em; line-height:1.12; margin-bottom:14px; }
.feature p { font-size:0.95rem; line-height:1.75; color:var(--ink-2); }
.ticks { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.ticks li { position:relative; padding-left:26px; font-size:0.88rem; color:var(--ink-2); line-height:1.6; }
.ticks li::before {
  content:''; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
  background:rgb(var(--fg-rgb) / 0.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path d='M2 6l3 3 5-5' stroke='%23ffc000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
}

/* STORY / EXAMPLE */
.story { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.timeline { list-style:none; position:relative; }
.timeline::before { content:''; position:absolute; left:52px; top:6px; bottom:6px; width:1px; background:var(--line); }
.timeline li { display:grid; grid-template-columns:52px 1fr; gap:24px; padding:0 0 26px; position:relative; }
.timeline .t { font-size:0.74rem; font-weight:700; color:var(--accent); padding-top:2px; font-variant-numeric:tabular-nums; }
.timeline li::after { content:''; position:absolute; left:49px; top:6px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.timeline h4 { font-size:0.95rem; font-weight:700; margin-bottom:4px; letter-spacing:-0.01em; }
.timeline p { font-size:0.85rem; color:var(--ink-3); line-height:1.65; }
.note { font-size:0.74rem; color:var(--ink-3); margin-top:18px; font-style:italic; }

/* OUTCOMES */
.outcomes { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px; }
.outcome { border-top:2px solid var(--accent); padding-top:18px; }
.outcome h3 { font-size:1rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em; }
.outcome p { font-size:0.84rem; color:var(--ink-3); line-height:1.7; }

/* FAQ */
.faq { max-width:820px; margin-top:28px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:1rem; font-weight:600; letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; font-weight:300; color:var(--ink-3); transition:transform 0.2s;
}
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { font-size:0.9rem; color:var(--ink-2); line-height:1.75; padding:0 0 22px; max-width:70ch; }

/* NEXT CASE STUDIES */
.next-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }

/* CASE STUDY CARDS (index + "more") */
.cs-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.cs-card {
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:border-color 0.22s, transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s;
}
.cs-card:hover { border-color:rgb(var(--fg-rgb) / 0.14); transform:translateY(-4px); box-shadow:0 24px 56px rgba(0,0,0,0.65); }
.cs-card .media { border:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line); height:230px; }
.cs-card-body { padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.cs-card .industry { font-size:0.64rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.cs-card h3 { font-size:1.2rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:8px; line-height:1.2; }
.cs-card p { font-size:0.86rem; color:var(--ink-3); line-height:1.65; flex:1; }
.cs-card .more { margin-top:18px; font-size:0.8rem; font-weight:700; color:var(--fg); display:inline-flex; align-items:center; gap:8px; }
.cs-card .more span { width:28px; height:28px; border-radius:50%; border:1px solid rgb(var(--fg-rgb) / 0.18); display:inline-flex; align-items:center; justify-content:center; transition:background 0.18s, color 0.18s; }
.cs-card:hover .more span { background:var(--gold-fill); color:var(--navy); border-color:var(--gold-text); }

/* CTA + FOOTER */
.cta-inner {
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-inner h2 { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; letter-spacing:-0.04em; line-height:1.1; }
.cta-inner h2 em { font-weight:300; font-style:italic; color:rgb(var(--fg-rgb) / 0.38); }
.cta-btns { display:flex; gap:10px; flex-wrap:wrap; }
.footer-wrap { border-top:1px solid var(--line); }
footer {
  max-width:1140px; margin:0 auto; padding:24px 36px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.f-copy { font-size:0.7rem; color:rgb(var(--fg-rgb) / 0.18); }
.f-links { display:flex; gap:20px; flex-wrap:wrap; }
.f-links a { font-size:0.7rem; color:rgb(var(--fg-rgb) / 0.18); text-decoration:none; transition:color 0.15s; }
.f-links a:hover { color:rgb(var(--fg-rgb) / 0.4); }


/* REFRESH: photo hero, accents, statement band */
.hero-photo { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; opacity:0.42; transform:scale(1.04); animation:heroZoom 18s ease-out both; }
.hero-photo::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / 0.96) 0%, rgb(var(--bg-rgb) / 0.75) 45%, rgb(var(--bg-rgb) / 0.35) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 60%, var(--bg) 100%);
}
.hero-photo.no-photo { display:none; }
@keyframes heroZoom { from { transform:scale(1.12); } to { transform:scale(1.02); } }
.cs-hero { min-height:min(92vh, 860px); display:flex; align-items:center; }
.cs-hero .wrap { width:100%; z-index:1; }
.cs-hero h1 em {
  font-style:italic; font-weight:300;
  background:linear-gradient(90deg, var(--fg) 0%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cs-hero::after {
  content:''; position:absolute; right:-10%; top:20%; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%);
  filter:blur(40px); pointer-events:none; z-index:0;
}
.problem-band { margin-top:36px; }
.story-photo { margin-top:28px; border-radius:18px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.story-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.story-photo.no-photo { display:none; }

.statement { padding:110px 0; text-align:left; overflow:hidden; position:relative; }
.statement::before {
  content:''; position:absolute; left:50%; top:50%; width:900px; height:400px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 65%);
  pointer-events:none;
}
.statement p {
  position:relative; font-size:clamp(2.2rem,6.4vw,5.4rem); font-weight:800; letter-spacing:-0.055em; line-height:1;
  max-width:16ch;
}
.statement p span { display:block; font-weight:300; font-style:italic; color:var(--accent); }

.feature-tag { padding:5px 12px; border-radius:999px; background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.card { position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; height:2px; width:0; background:var(--accent); transition:width 0.5s cubic-bezier(0.22,1,0.36,1); }
.card:hover::before { width:100%; }
.cs-card .media { height:auto; }
.cs-card .shot .photo-wrap { border-radius:0; border:0; box-shadow:none; aspect-ratio:16/10; }
.cs-card .shot > .media { right:14px; bottom:14px; width:62%; border-radius:14px; }
.cs-card .shot.no-photo > .media { right:auto; bottom:auto; width:100%; border-radius:0; }
@media (max-width:960px) and (min-width:641px) { .feature .shot { margin-right:16px; } }

/* RESPONSIVE */
@media (max-width:960px) {
  .cs-hero-grid, .feature, .story { grid-template-columns:1fr; gap:36px; }
  .feature:nth-child(even) .feature-text { order:0; }
  .problem-grid, .cs-cards { grid-template-columns:1fr; }
  .outcomes { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px) {
  .nav-inner, .wrap { padding:0 20px; }
  footer { padding:24px 20px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .mobile-menu { display:flex; }
  .cs-hero { padding:104px 0 56px; }
  section { padding:64px 0; }
  .feature { padding:40px 0; }
  .next-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .outcomes { grid-template-columns:1fr; }
  .nav-cta { padding:8px 14px; font-size:0.72rem; }
  .cs-hero-actions a { width:100%; justify-content:center; }
}

/* ════════ COMPACT LAYOUT (less scrolling, easier to scan) ════════ */
section { padding:64px 0; }
.section-h { font-size:clamp(1.5rem,2.8vw,2.15rem); margin-bottom:12px; }
.lead { font-size:0.96rem; line-height:1.7; }

/* Hero: shorter, smaller type */
.cs-hero { min-height:0; padding:108px 0 56px; }
.cs-hero h1 { font-size:clamp(2rem,4.2vw,3.25rem); margin-bottom:14px; }
.cs-hero-grid { gap:48px; }
.cs-hero-actions { margin-top:24px; }
.cs-meta { margin-top:20px; }

/* Sticky section menu */
.subnav {
  position:sticky; top:58px; z-index:150;
  background:rgb(var(--bg-rgb) / 0.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.subnav-inner { display:flex; align-items:center; gap:26px; height:48px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a { font-size:0.78rem; font-weight:500; color:var(--ink-3); text-decoration:none; white-space:nowrap; position:relative; padding:14px 0; transition:color 0.15s; }
.subnav a:hover { color:var(--fg); }
.subnav a.on { color:var(--fg); }
.subnav a.on::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); border-radius:2px; }
.subnav .subnav-name { font-weight:800; color:var(--fg); letter-spacing:-0.01em; margin-right:6px; }
.subnav .subnav-cta { margin-left:auto; color:var(--gold-text); font-weight:700; }
section[id], header[id] { scroll-margin-top:110px; }

/* Problem: text + list on the left, photo on the right */
.split { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.split-photo { border-radius:18px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); box-shadow:0 24px 60px var(--shadow); }
.split-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.split-photo.no-photo { display:none; }
.problem-list { display:flex; flex-direction:column; gap:0; margin-top:22px; border-top:1px solid var(--line); }
.problem-list .card { background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 0 14px 44px; position:relative; }
.problem-list .card:hover { transform:none; }
.problem-list .card::before { display:none; }
.problem-list .card-n { position:absolute; left:0; top:16px; margin:0; color:var(--accent); }
.problem-list .card h3 { font-size:0.95rem; margin-bottom:2px; }
.problem-list .card p { font-size:0.84rem; line-height:1.55; }

/* How it works: steps scroll on the left, visual pinned on the right */
.steps { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:12px; }
.step { padding:28px 0; }
.step + .step { border-top:1px solid var(--line); }
.step .feature-tag { margin-bottom:10px; }
.step h3 { font-size:clamp(1.15rem,1.8vw,1.45rem); font-weight:800; letter-spacing:-0.03em; line-height:1.2; margin-bottom:8px; }
.step p { font-size:0.9rem; line-height:1.65; color:var(--ink-2); }
.step .ticks { margin-top:12px; gap:6px; }
.step .ticks li { font-size:0.84rem; }
.step .shot, .step > .media { margin-top:22px; }
.steps-visual { display:none; }

.steps.pinned .step { min-height:56vh; display:flex; flex-direction:column; justify-content:center; opacity:0.38; transition:opacity 0.35s; }
.steps.pinned .step.on { opacity:1; }
.steps.pinned .step .shot, .steps.pinned .step > .media { display:none; }
.steps.pinned .steps-visual { display:block; position:sticky; top:136px; align-self:start; height:min(62vh, 520px); }
.sv-item { position:absolute; inset:0; display:flex; align-items:center; opacity:0; transform:translateY(14px) scale(0.98); transition:opacity 0.45s, transform 0.45s cubic-bezier(0.22,1,0.36,1); pointer-events:none; }
.sv-item.on { opacity:1; transform:none; pointer-events:auto; }
.sv-item > .shot, .sv-item > .media { width:100%; margin:0; }
.sv-item > .media { box-shadow:0 30px 70px var(--shadow); }
.sv-dots { position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); display:flex; gap:6px; }
.sv-dots span { width:6px; height:6px; border-radius:50%; background:rgb(var(--fg-rgb) / 0.2); transition:width 0.3s, background 0.3s; }
.sv-dots span.on { width:20px; border-radius:999px; background:var(--accent); }

/* Statement band: tighter */
.statement { padding:56px 0; }
.statement p { font-size:clamp(1.8rem,4.2vw,3.2rem); }

/* In practice + outcomes + FAQ: tighter */
.story { gap:48px; }
.story-photo { max-width:440px; }
.timeline li { padding-bottom:18px; }
.outcomes { margin-top:24px; gap:20px; }
.faq summary { padding:16px 40px 16px 0; font-size:0.95rem; }
.faq details p { padding-bottom:16px; font-size:0.88rem; }
.next-grid { margin-top:18px; }
.cs-card-body { padding:18px 20px 20px; }
.cs-card h3 { font-size:1.08rem; }
.cs-cards { margin-top:28px; }

/* Light mode touches */
:root[data-theme="light"] .media { box-shadow:0 24px 60px var(--shadow); }
:root[data-theme="light"] .cs-hero::before { opacity:0.25; }
:root[data-theme="light"] .hero-photo img { opacity:0.55; }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .cs-card:hover { box-shadow:0 18px 40px var(--shadow); }

@media (max-width:960px) {
  .split, .steps { grid-template-columns:1fr; gap:28px; }
  .split-photo { order:-1; aspect-ratio:16/9; }
}
@media (max-width:880px) {
  section { padding:48px 0; }
  .cs-hero { padding:96px 0 40px; }
  .subnav-inner { gap:20px; }
  .subnav .subnav-cta { display:none; }
}

/* Phone-frame screens (FieldStamp) */
.cs-hero-grid > .media.ui-phone { justify-self:center; }
.cs-card .shot { overflow:hidden; }
.cs-card .shot > .media, .cs-card .shot > .media.ui-phone { position:absolute; margin:0; width:380px; right:16px; bottom:16px; top:auto; transform:scale(0.6); transform-origin:bottom right; }
.cs-card .shot > .media.ui-phone { width:270px; right:22px; top:26px; bottom:auto; transform:scale(0.6); transform-origin:top right; }
.sv-item > .shot > .media.ui-phone { width:250px; right:-10px; }
.sv-item > .media.ui-phone, .step > .media.ui-phone { margin-left:auto; margin-right:auto; }

/* Client login page */
.login-hero { min-height:0; padding-bottom:72px; }
.login-hero h1 { margin-bottom:10px; }
.login-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
.login-tile {
  display:flex; flex-direction:column; gap:14px; padding:24px; text-decoration:none; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  transition:border-color 0.2s, transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
}
.login-tile:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 20px 44px var(--shadow); }
.login-tile .app-ic { width:44px; height:44px; border-radius:12px; font-size:0.85rem; }
.login-tile b { display:block; font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; }
.login-tile small { display:block; font-size:0.86rem; color:var(--ink-3); line-height:1.55; }
.login-tile-go { margin-top:auto; font-size:0.84rem; font-weight:700; color:var(--accent); }
.login-help { margin-top:26px; font-size:0.86rem; color:var(--ink-3); }
.login-help a { color:var(--gold-text); }
@media (max-width:760px) { .login-grid { grid-template-columns:1fr; } .login-tile { flex-direction:row; align-items:center; padding:18px; } .login-tile-go { margin:0 0 0 auto; white-space:nowrap; } .login-tile small { display:none; } }