/* ==========================================================================
   Shared shell: design tokens, base typography, buttons, the sample-rig
   components, header and footer.

   Split out of index.html when the sample gallery became its own page. Page-
   specific rules stay inline in the page that needs them — this file holds
   only what more than one page uses, so a header or token change lands on
   every page at once instead of drifting between copies.
   ========================================================================== */

/* ==========================================================================
   Tokens. Colours live in tokens.css (light + dark). This block holds the
   non-colour tokens plus legacy colour aliases, so rules written before
   tokens.css keep working. New rules should use the semantic names in
   tokens.css directly (--heading, --surface, --accent, --tint-* ...).
   ========================================================================== */
:root{
  /* Legacy colour aliases, to be retired as sections migrate */
  --navy:        var(--heading);
  --navy-soft:   var(--navy-900);
  --indigo:      var(--accent);
  --indigo-dark: var(--accent-hover);
  --bg-lavender: var(--bg-subtle);
  --text-on-dark:       var(--band-text);
  --text-on-dark-muted: var(--band-text-muted);

  /* www.deepen.ai: 4px controls, 1rem cards */
  --radius-sm:   4px;
  --radius-md:   1rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;

  /* www.deepen.ai type: Fraunces display, Geist text, Geist Mono labels and code */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --container: 1180px;
  --header-h: 72px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--selection); }
img, svg{ display:block; max-width:100%; }
a{ color: inherit; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link{
  position: absolute;
  top: -48px; left: 12px;
  background: var(--band-bg);
  color: var(--band-heading);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top .15s ease;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus{ top: 12px; }

:focus-visible{
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Type scale ---- */
h1,h2,h3,h4{ margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
/* Display headings as on www.deepen.ai: Fraunces 400, tight tracking; emphasis is italic, not colour. */
h1,h2{ font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; }
h1{ font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.015em; }
h2{ font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.1; letter-spacing: -0.015em; }
h1 em, h2 em, .hl{ font-style: italic; font-weight: inherit; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
h3{ font-size: 1.15rem; line-height: 1.3; }
p{ margin: 0; text-wrap: pretty; }
/* Section label, as www.deepen.ai sets them: Geist Mono, uppercase, wide tracking, no pill. */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.section-head{
  max-width: 680px;
  margin-bottom: 56px;
}
.section-head p{ color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin-top: 16px; }
.section-head.centered{ margin-left: auto; margin-right: auto; text-align: center; }

section{ padding: 112px 0; }
@media (max-width: 640px){ section{ padding: 72px 0; } }

.bg-lavender{ background: var(--bg-lavender); box-shadow: inset 0 1px 0 var(--band-edge), inset 0 -1px 0 var(--band-edge); }
.bg-navy{ background: var(--band-bg); color: var(--band-text); box-shadow: inset 0 1px 0 var(--band-border), inset 0 -1px 0 var(--band-border); }
.bg-navy h2, .bg-navy h3{ color: var(--band-heading); }

/* ---- Buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
  white-space: nowrap;
  line-height: 1.2;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }
.btn-primary{
  background: var(--btn-primary-bg);
  color: var(--text-on-accent);
  border-color: var(--btn-primary-border);
  box-shadow: 0 8px 22px -10px rgb(var(--rgb-indigo) / .65);
}
.btn-primary:hover{ background: var(--btn-primary-bg-hover); box-shadow: 0 10px 26px -10px rgb(var(--rgb-indigo) / .7); }
.btn-outline{ background: var(--surface); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-xs); }
.btn-outline:hover{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Secondary, as www.deepen.ai: no fill, hairline border, ink text. */
.btn-ghost{ background: transparent; color: var(--heading); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--border-hover); background: var(--surface); }
.btn-on-navy{ background: var(--white); color: var(--navy-950); box-shadow: 0 1px 2px rgb(var(--rgb-black) / .2), 0 8px 24px -8px rgb(var(--rgb-white) / .25); }
.btn-on-navy:hover{ background: var(--band-text); }
.btn-on-navy-outline{ background: transparent; color: var(--band-heading); border-color: rgb(var(--rgb-white) / .35); }
.btn-on-navy-outline:hover{ border-color: rgb(var(--rgb-white) / .6); }
.btn-cta{
  background: var(--btn-cta-bg);
  color: var(--text-on-accent);
  border-color: var(--btn-cta-border);
  box-shadow: 0 8px 22px -10px rgb(var(--rgb-indigo) / .65);
}
.btn-cta:hover{ background: var(--btn-cta-bg-hover); box-shadow: 0 10px 26px -10px rgb(var(--rgb-indigo) / .7); }
.btn-cta .cta-free{
  background: rgb(var(--rgb-white) / .2);
  padding: 2px 8px;
  border-radius: 2px;
  margin: 0 1px;
}
.btn-block{ width: 100%; }
.btn-cta-outline{ background: transparent; color: var(--heading); border-color: var(--border-strong); }
.btn-cta-outline:hover{ background: var(--surface); border-color: var(--border-hover); }
.btn-lg{ padding: 16px 28px; font-size: 16px; }
.legacy-anchor{ display: block; position: relative; top: calc(-1 * var(--header-h)); visibility: hidden; height: 0; }
.get-started-actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.get-started-actions .btn{ min-width: 280px; }
.get-started-note{ text-align: center; color: var(--text-muted); font-size: 14.5px; margin: 18px auto 0; max-width: 62ch; }
@media (max-width: 640px){ .get-started-actions{ flex-direction: column; align-items: stretch; } .get-started-actions .btn{ min-width: 0; width: 100%; } }

/* ---- Sample rig picker ---- */
.sample-picker{ margin-top: 8px; }
.sample-picker[hidden]{ display: none; }
.sample-picker:not([hidden]) + .get-started-actions{ margin-top: 26px; }
.sample-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width:860px){ .sample-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .sample-grid{ grid-template-columns:1fr; } }
.sample-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sample-card:hover{ border-color: var(--accent-2); }
.sample-card[aria-checked="true"]{ border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 7%, transparent); box-shadow: var(--shadow-card); }
.sample-platform{ font-size:15.5px; font-weight: 600; color:var(--heading); }
.sample-title{ font-size:14px; color:var(--text-muted); }
.sample-meta{ font-size:13px; color:var(--text-faint); font-family: var(--font-mono); }
.sample-chip{ margin-top:6px; padding:3px 8px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent-2) 10%, transparent); color:var(--accent-2-text); font-size:11.5px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.12em; text-transform:uppercase; }
.sample-detail{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; margin-top:18px; text-align:left; }
.sample-detail p{ margin:0; }
.sample-detail p + p{ margin-top:8px; }
.sample-blurb{ font-size:15px; color:var(--text); }
.sample-attrib{ font-size:13px; color:var(--text-muted); }
.sample-detail-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; }
.sample-source-link{ font-size:14px; font-weight:600; color:var(--indigo); }
.sample-measured{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft); }
.sample-gallery{ padding:0; }
.sample-gallery-intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.sample-gallery-eyebrow{ color:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; }
.sample-gallery-intro h2{ margin:4px 0 6px; color:var(--heading); font-size:clamp(20px,2.2vw,27px); letter-spacing:-.025em; line-height:1.2; }
.sample-gallery-description{ color:var(--text-muted); font-size:14px; max-width:76ch; }
.sample-gallery-count{ flex:none; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); font-size:12px; font-weight: 600; }
.sample-view-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:20px; }
.sample-view-button{ min-width:0; padding:0; overflow:hidden; border:2px solid var(--border); border-radius:var(--radius-md); background:var(--surface-sunken); color:var(--text); text-align:left; cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.sample-view-button:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.sample-view-button:focus-visible,.sample-stage-link:focus-visible,.sample-result-button:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }
.sample-view-button[aria-pressed="true"]{ border-color:var(--accent-2); box-shadow:0 0 0 2px rgb(var(--rgb-accent-2) / .18), var(--shadow-card); }
.sample-view-button img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.76; }
.sample-view-button[aria-pressed="true"] img,.sample-view-button:hover img{ opacity:1; }
.sample-view-label{ display:flex; align-items:baseline; gap:8px; padding:8px 10px 9px; font-size:12px; line-height:1.25; }
.sample-view-number{ color:var(--accent-2-text); font:11px var(--font-mono); }
.sample-view-label strong{ font-weight: 600; }
.sample-view-button[aria-pressed="true"] .sample-view-label{ background:var(--navy-950); color:var(--white); }
.sample-view-button[aria-pressed="true"] .sample-view-number{ color:var(--indigo-300); }
.sample-view-caveat{ display:block; padding:0 10px 8px; color:var(--warn); font-size:10px; font-weight: 600; letter-spacing:.02em; }
.sample-view-button[aria-pressed="true"] .sample-view-caveat{ background:var(--navy-950); color:#ffd09a; }
.sample-comparison{ margin-top:16px; padding:20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(145deg,var(--navy-1000),var(--navy-950)); color:var(--white); }
.sample-comparison-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sample-comparison-head h3{ margin:0; color:var(--white); font-size:18px; font-weight: 600; letter-spacing:-.015em; }
.sample-comparison-notice{ margin:0 0 16px !important; padding:10px 12px; border-left:3px solid #ffd09a; background:rgba(255,255,255,.09); color:var(--white); font-size:13px; }
.sample-comparison-notice[hidden]{ display:none; }
.sample-legend{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; margin:16px 0 0; padding:0; list-style:none; color:var(--text-muted); font-size:13px; }
.sample-legend li{ display:flex; align-items:flex-start; gap:9px; }
.sample-legend-icon{ display:flex; width:28px; min-width:28px; height:18px; align-items:center; justify-content:center; color:var(--text-muted); }
.sample-legend-dot::before{ width:8px; height:8px; border-radius:50%; background:#fb7e21; content:""; }
.sample-legend-gradient::before{ width:36px; height:8px; border-radius:999px; background:linear-gradient(90deg,#7a0403,#d02f05,#fb7e21,#eecf3a,#a4fc3c,#32f298,#28bceb,#466be3,#30123b); content:""; }
.sample-legend-check::before{ color:var(--accent-2); content:"✓"; font-size:18px; font-weight: 600; line-height:1; }
.sample-legend-box::before{ width:14px; height:10px; border:2px solid currentColor; content:""; }
.sample-stage{ overflow:hidden; border-radius:var(--radius-md); background:var(--navy-950); }
.sample-stage-link{ position:relative; display:block; color:var(--white); text-decoration:none; }
.sample-stage-link img{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--navy-950); object-fit:cover; }
.sample-stage-open{ display:block; padding:8px 12px; color:var(--white); font-size:12px; font-weight: 600; text-align:right; }
.sample-stage-link:hover .sample-stage-open{ text-decoration:underline; }
.sample-result-switch{ display:flex; flex-wrap:wrap; gap:6px; width:fit-content; max-width:100%; margin:0 0 12px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); }
.sample-result-button{ display:inline-flex; align-items:center; padding:0; border:0; border-radius:999px; background:transparent; color:#d8dcf0; font:inherit; cursor:pointer; transition:background .16s ease, color .16s ease; }
.sample-result-button .sample-result-label{ padding:6px 14px 6px 7px; color:inherit; }
.sample-result-button:hover{ background:rgba(255,255,255,.1); color:var(--white); }
.sample-result-button[aria-pressed="true"]{ background:var(--white); color:var(--navy-950); }
.sample-result-label{ display:flex; align-items:center; gap:8px; padding:8px 9px; color:var(--white); font-size:13px; font-weight: 600; line-height:1.25; }
.sample-result-number{ display:inline-flex; width:20px; height:20px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:var(--indigo-400); color:var(--white); font-size:12px; }
.sample-closeups{ margin-top:14px; }
.sample-closeups[hidden]{ display:none; }
.sample-closeups-title{ margin:0 0 8px !important; color:var(--text-on-dark-muted); font-size:13px; font-weight: 600; }
.sample-closeup-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sample-closeup-grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sample-closeup{ min-width:0; margin:0; color:var(--text-on-dark-muted); }
.sample-closeup .sample-result-label{ padding:7px 2px 0; color:inherit; font-size:12px; font-weight:600; }
.sample-closeup-crop{ display:block; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm); background-color:var(--navy-950); background-repeat:no-repeat; background-size:300% 300%; }
.sample-evidence-notice{ font-size:12px; color:var(--text-faint); margin-top:12px !important; }
.sample-evidence-notice a{ color:var(--indigo); font-weight:600; }
@media (max-width:980px){ .sample-view-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .sample-legend{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .sample-detail-actions .btn{ width:100%; }
  .sample-gallery-intro{ display:block; }
  .sample-gallery-count{ display:inline-block; margin-top:12px; }
  .sample-view-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sample-comparison{ margin-left:-10px; margin-right:-10px; padding:12px; }
  .sample-comparison-head{ display:block; }
  .sample-result-switch{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:auto; border-radius:var(--radius-md); }
  .sample-result-button{ border-radius:var(--radius-sm); }
  .sample-result-button .sample-result-label{ flex-direction:column; align-items:flex-start; gap:4px; padding:6px 8px; font-size:12px; }
  .sample-closeup-grid,.sample-closeup-grid.two{ grid-template-columns:1fr; }
  .sample-stage-open{ padding:7px 10px; font-size:11px; }
}
.btn[disabled]{ opacity: .6; cursor: not-allowed; }
.btn svg{ width: 16px; height: 16px; flex: none; }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--indigo);
  text-decoration: none;
  font-size: 15px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size .25s var(--ease);
}
.link-arrow svg{ width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover{ background-size: calc(100% - 22px) 1.5px; }
.link-arrow:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
/* The official Deepen wordmark (served by www.deepen.ai), then the product name set like
   www.deepen.ai's product labels ("DEEPEN CALIBRATE": Geist Mono, wide tracking). */
.brand-logo{ display: block; height: 40px; width: auto; }
.brand-tag{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding-left: 12px;
  line-height: 1.6;
}
/* Nav in a white 4px container with a hairline border, as on www.deepen.ai. */
.main-nav{ display: flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 5px 6px; box-shadow: 0 4px 24px -10px rgb(15 23 42 / .2); }
.main-nav a{
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.main-nav a:hover{ color: var(--heading); background: color-mix(in srgb, var(--heading) 5%, transparent); }
.header-actions{ display: flex; align-items: center; gap: 10px; flex: none; }
.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; color: var(--navy); }

@media (max-width: 900px){
  .main-nav{
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
    box-shadow: var(--shadow-pop);
    border-radius: 0;
    border-width: 0 0 1px;
    display: none;
  }
  .main-nav.open{ display: flex; }
  .main-nav a{ padding: 12px 10px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border-soft); }
  .main-nav a:last-child{ border-bottom: 0; }
  .nav-toggle{ display: inline-flex; }
  .header-actions .btn-ghost{ display: none; }
}
@media (max-width: 480px){
  .container{ padding: 0 16px; }
  .brand-tag{ display: none; }
  .brand-logo{ height: 32px; }
  .header-actions{ gap: 8px; }
  .header-actions .btn-primary{ padding: 10px 14px; font-size: 14px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* As www.deepen.ai: a dark navy footer, the wordmark in white, mono column labels,
   muted links that brighten on hover, and a mono legal row. */
.site-footer{
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  background: var(--navy-1000);
  color: var(--band-text);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgb(var(--rgb-white) / .08);
}
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer-brand{ grid-column: 1 / -1; } }
.footer-logo{ display: inline-flex; align-items: center; gap: 12px; }
.footer-logo .brand-logo{ filter: brightness(0) invert(1); }
.footer-logo .brand-tag{ color: var(--band-text-muted); border-left-color: rgb(var(--rgb-white) / .16); }
.footer-brand p{ margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--band-text-muted); max-width: 360px; }
.footer-brand p strong{ color: var(--band-text); font-weight: 500; }
.footer-col h4{ font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-text-muted); margin-bottom: 16px; }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a{
  font-size: 14px; color: var(--band-text-muted); text-decoration: none;
  transition: color .2s var(--ease);
  overflow-wrap: anywhere;
}
.footer-col a:hover{ color: var(--band-text); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 24px 0 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--band-text-muted);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-bottom a{ color: var(--band-text-muted); text-decoration: none; transition: color .2s var(--ease); }
.footer-bottom a:hover{ color: var(--band-text); }

/* visually-hidden utility */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* Lead form fields and the contact modal: contact.css (shared with /start). */

/* ---- Floating "Get in touch" button ----
   An icon disc that expands leftward into "icon + Get in touch" on hover or keyboard focus.
   contact.js hides it on the first screen and while the in-page form is in view, lifts it above
   the consent banner, and opens the contact modal on click.
   Motion: opening widens the pill first and fades the label in after it; closing fades the
   label out first and then collapses. The hover gradient cross-fades through ::before, since
   gradients themselves cannot be transitioned. */
.contact-fab{
  --fab-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--fab-lift, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 17px;
  border-radius: 999px;
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--text-on-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 32px -10px rgb(var(--rgb-indigo) / .6), var(--shadow-pop);
  transition:
    padding .4s var(--fab-ease) .05s,
    transform .4s var(--fab-ease),
    box-shadow .4s var(--fab-ease),
    opacity .25s var(--ease),
    bottom .25s var(--ease),
    visibility 0s;
}
.contact-fab::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-primary-bg-hover);
  opacity: 0;
  transition: opacity .35s var(--fab-ease);
}
.contact-fab svg{
  width: 24px; height: 24px; flex: none;
  transition: transform .45s var(--fab-ease);
}
.contact-fab-label{
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  /* Closing: label fades out quickly, then the width collapses. */
  transition:
    opacity .15s ease,
    transform .2s ease,
    max-width .4s var(--fab-ease) .05s,
    margin-left .4s var(--fab-ease) .05s;
}
.contact-fab:hover,
.contact-fab:focus-visible{
  padding-right: 22px;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(var(--rgb-white) / .2), 0 18px 40px -12px rgb(var(--rgb-indigo) / .7), var(--shadow-pop);
  transition:
    padding .45s var(--fab-ease),
    transform .45s var(--fab-ease),
    box-shadow .45s var(--fab-ease),
    opacity .25s var(--ease),
    bottom .25s var(--ease),
    visibility 0s;
}
.contact-fab:hover::before,
.contact-fab:focus-visible::before{ opacity: 1; }
.contact-fab:hover svg,
.contact-fab:focus-visible svg{ transform: rotate(-8deg) scale(1.06); }
.contact-fab:hover .contact-fab-label,
.contact-fab:focus-visible .contact-fab-label{
  max-width: 120px;
  margin-left: 10px;
  opacity: 1;
  transform: none;
  /* Opening: width grows first, label fades and slides in once there is room. */
  transition:
    max-width .45s var(--fab-ease),
    margin-left .45s var(--fab-ease),
    opacity .3s ease .12s,
    transform .45s var(--fab-ease) .08s;
}
.contact-fab:focus-visible{ outline: none; box-shadow: var(--ring), var(--shadow-pop); }
.contact-fab:active{ transform: translateY(0) scale(.98); }
.contact-fab.is-hidden{
  opacity: 0;
  transform: translateY(12px) scale(.96);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
@media (max-width: 560px){
  .contact-fab{ right: 16px; bottom: calc(16px + var(--fab-lift, 0px)); height: 52px; padding: 0 15px; }
}
@media print{ .contact-fab{ display: none; } }


/* Header CTA: the full label (Sahil's review #16) does not fit a phone header; keep its first half there. */
@media (max-width: 560px){ .header-actions .cta-long{ display: none; } }
/* Trailing arrow on calls to action, as on www.deepen.ai ("Talk to us →"); dropped on phones for room. */
.btn .cta-arrow{ width: 15px; height: 15px; margin-left: -2px; }
@media (max-width: 560px){ .header-actions .cta-arrow{ display: none; } }