/* ============================================================
   Maica Docs · marketing site
   Shares the Maica brand with Forms (colour tokens, Poppins,
   button shapes, soft teal material language) but is its own
   document-native layout: pages, merge tokens, a record-to-PDF
   pipeline, a signer timeline, page-thumbnail gallery.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens (the shared Maica brand kit) ---------- */
:root {
  --teal:        #196061;
  --teal-deep:   #134d4e;
  --teal-soft:   #2c7c7d;
  --mid:         #7da0a0;
  --navy:        #152c36;
  --live:        #25b18a;

  --teal-tint:   #e9f1f1;
  --teal-line:   #cfe0e0;

  --bg:          #f7f9f9;
  --band:        #eeeeee;
  --surface:     #ffffff;

  --ink:         #1c2b2b;
  --ink-soft:    #3a4a4a;
  --ink-muted:   #5a7070;
  --line:        #e4ebeb;
  --line-soft:   #eef2f2;

  --on-dark:       #ffffff;
  --on-dark-soft:  #c2d6d6;
  --on-dark-muted: #8fb0b0;
  --hair-dark:     rgba(255,255,255,.14);

  --paper:       #fcfdfd;   /* document sheet face */

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', monospace;

  --maxw: 1180px;
  --gutter: 28px;
  --close-rad: clamp(32px, 5vw, 60px);   /* soft curve where the CTA closes into the footer */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.68,.18,1);
  --shadow-card:  0 2px 12px rgba(25,96,97,.08);
  --shadow-hover: 0 6px 24px rgba(25,96,97,.15);
  --shadow-float: 0 30px 60px -32px rgba(21,44,54,.34);
  --shadow-page:  0 22px 48px -28px rgba(21,44,54,.4);

  --z-header: 100;
  --z-menu: 120;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  font-family: var(--font); font-weight: 400; color: var(--ink-soft);
  background: var(--surface); line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--teal-tint); color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(60px, 8.5vw, 108px) 0; position: relative; }
.band { background: linear-gradient(180deg, var(--surface) 0%, #edf2f1 16%, #edf2f1 84%, var(--surface) 100%); }
.ink-band { background: var(--navy); color: var(--on-dark-soft); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.mark { color: var(--teal); font-style: italic; font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); text-wrap: balance; }
h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--ink-soft); }

.sec-head { max-width: 640px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 + p { margin-top: 15px; color: var(--ink-soft); font-size: 1.06rem; }

/* small pill eyebrow (used sparingly: hero + a couple of section heads) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--teal-deep);
  background: var(--teal-tint); border: 1px solid var(--teal-line);
  padding: 6px 13px 6px 11px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(37,177,138,.18); }
.eyebrow.on-dark { color: var(--on-dark); background: rgba(255,255,255,.08); border-color: var(--hair-dark); }

/* ---------- Buttons (carried over from the Maica brand) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; font-weight: 500; font-size: .95rem;
  border-radius: var(--r-pill); line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-down:hover svg { transform: translateY(3px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { color: var(--teal); }
.btn-invert { background: #fff; color: var(--teal); border: 1.5px solid var(--teal-line); box-shadow: var(--shadow-card); }
.btn-invert:hover { border-color: var(--teal); background: var(--teal-tint); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-on-dark { background: #fff; color: var(--teal-deep); }
.btn-on-dark:hover { background: var(--teal-tint); transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); }

/* ============================================================
   Header (shared brand furniture)
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--line); box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(21,44,54,.4);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }
.brand-mark svg { width: 25px; height: 25px; }
.brand img { height: 21px; width: auto; }
.brand .sub { padding-left: 12px; border-left: 1px solid var(--line); font-size: .8rem; font-weight: 500; color: var(--ink-muted); letter-spacing: .01em; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { font-size: .94rem; font-weight: 500; padding: 9px 14px; color: var(--ink-soft); border-radius: var(--r-pill); transition: color .2s var(--ease), background .2s var(--ease); }
.nav-links a:hover { color: var(--teal); background: var(--teal-tint); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ============================================================
   Hero — asymmetric: copy left, a document being assembled right
   (deliberately not the Forms centred floating-form hero)
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: calc(76px + clamp(40px, 6vw, 76px)) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(640px 480px at 86% 20%, rgba(25,96,97,.10), transparent 60%),
    radial-gradient(560px 520px at 8% 70%, rgba(125,160,160,.14), transparent 64%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; color: var(--ink); }
.hero-sub { margin: 22px 0 0; max-width: 500px; font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.hero-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; color: var(--ink-muted); }
.hero-meta svg { width: 16px; height: 16px; color: var(--teal); }

/* ---- the assembly scene ---- */
.assembly { position: relative; justify-self: center; width: 100%; max-width: 420px; aspect-ratio: 5 / 6; }
.assembly .glow {
  position: absolute; inset: 8% 4%; border-radius: 40% 40% 44% 44%;
  background: radial-gradient(ellipse at 40% 32%, rgba(25,96,97,.16), transparent 62%),
              radial-gradient(ellipse at 70% 72%, rgba(125,160,160,.2), transparent 66%);
  filter: blur(14px);
}
/* the document sheet */
.sheet {
  position: absolute; left: 8%; top: 6%; width: 76%; height: 88%;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-page);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 13px;
  animation: floatSheet 7s var(--ease) infinite;
}
.sheet-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.sheet-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--teal-tint); border: 1px solid var(--teal-line); flex-shrink: 0; }
.sheet-ttl { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sheet-ttl i { height: 8px; border-radius: var(--r-pill); background: var(--line); display: block; }
.sheet-ttl i:first-child { width: 64%; background: #c6d4d4; }
.sheet-ttl i:last-child { width: 40%; }
.sheet-mark { flex-shrink: 0; color: var(--teal); display: flex; }
.sheet-mark svg { width: 20px; height: 20px; }
.ln { height: 7px; border-radius: var(--r-pill); background: var(--line-soft); display: block; }
.ln.a { width: 100%; } .ln.b { width: 92%; } .ln.c { width: 78%; } .ln.d { width: 86%; }
.sheet-token {
  align-self: flex-start; position: relative; height: 1.5em; min-width: 138px;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  display: inline-flex; align-items: center;
}
.sheet-token .tok, .sheet-token .val { position: absolute; left: 0; white-space: nowrap; }
.sheet-token .tok { color: var(--teal-deep); animation: ctokOut 5s ease-in-out infinite; }
.sheet-token .val { color: var(--ink); font-family: var(--font); opacity: 0; animation: cvalIn 5s ease-in-out infinite; }
/* signature sits on a line in the bottom-right, drawing itself on as it's signed */
.sheet-sign { margin-top: auto; display: flex; justify-content: flex-end; }
.sig-slot { width: 56%; display: flex; flex-direction: column; align-items: center; }
.sheet-sign svg { width: 84px; height: auto; color: var(--teal); opacity: .85; overflow: visible; margin-bottom: -3px; }
.sheet-sign svg path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: signDraw 5s ease-in-out infinite; }
.sheet-sign .sigbase { width: 100%; height: 0; border-bottom: 1.5px solid var(--line); }

/* the goals Salesforce pill hovers in from the left, same size as the contact pill */
.rec-chip.rec-chip-goals { top: 40%; animation: floatChip 6.2s var(--ease) infinite .9s; }
/* goals table: each goal resolves from a merge token */
.gtable { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.gt-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 11px; border-top: 1px solid var(--line-soft); }
.gt-row:first-child { border-top: 0; }
.gt-head { background: var(--teal-tint); }
.gt-head span { font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-deep); }
/* status checkbox that ticks as the goal resolves */
.gcheck { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--teal-line); background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: gboxFill 5s ease-in-out infinite; }
.gcheck svg { width: 11px; height: 11px; color: #fff; opacity: 0; animation: gboxTick 5s ease-in-out infinite; }
@keyframes gboxFill { 0%, 52% { background: var(--surface); border-color: var(--teal-line); } 64%, 88% { background: var(--teal); border-color: var(--teal); } 96%, 100% { background: var(--surface); border-color: var(--teal-line); } }
@keyframes gboxTick { 0%, 54% { opacity: 0; transform: scale(.5); } 66%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.5); } }
.gtok { position: relative; display: inline-block; height: 1.3em; min-width: 124px; font-family: var(--mono); font-size: .64rem; font-weight: 600; }
.gtok .tok, .gtok .val { position: absolute; left: 0; top: 0; white-space: nowrap; }
.gtok .tok { color: var(--teal-deep); animation: gtokOut 5s ease-in-out infinite; }
.gtok .val { color: var(--ink); font-family: var(--font); opacity: 0; animation: gvalIn 5s ease-in-out infinite; }
/* the Salesforce record feeding the sheet */
.rec-chip {
  position: absolute; left: -2%; top: 12%; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px;
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 14px; font-size: .76rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 16px 32px -16px rgba(21,44,54,.4), inset 0 1px 0 rgba(255,255,255,.9);
  animation: floatChip 6.4s var(--ease) infinite .3s;
}
.rec-chip svg { box-sizing: content-box; width: 14px; height: 14px; padding: 6px; border-radius: 9px; color: var(--teal); background: rgba(25,96,97,.1); border: 1px solid rgba(255,255,255,.5); }

@keyframes floatSheet { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes floatChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* fill is staggered (contact, then goals, then signature); the revert at 88-96%
   happens to every element at once, for a smooth simultaneous reset */
/* quick crossfade with the token leading the value, so they don't linger visible together */
@keyframes ctokOut { 0%, 40% { opacity: 1; transform: translateY(0); } 47%, 88% { opacity: 0; transform: translateY(-3px); } 95%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes cvalIn  { 0%, 45% { opacity: 0; transform: translateY(3px); } 52%, 88% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(3px); } }
@keyframes gtokOut { 0%, 50% { opacity: 1; transform: translateY(0); } 57%, 88% { opacity: 0; transform: translateY(-3px); } 95%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes gvalIn  { 0%, 55% { opacity: 0; transform: translateY(3px); } 62%, 88% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(3px); } }
@keyframes signDraw { 0%, 64% { stroke-dashoffset: 200; } 84%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 200; } }

/* ============================================================
   Pipeline — record to signed PDF, a horizontal process spine
   ============================================================ */
.pipe { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 18px); margin-top: clamp(36px, 4.5vw, 52px); }
.pstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
/* one continuous rail across the icon row, level with the icon centres; the icons
   sit on top (white fill, higher z-index) so the rail and dot pass behind them */
.pipe::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: var(--teal-line); transform: translateY(-50%); z-index: 0; }
/* a single dot that travels the whole rail, from step 1 through to behind step 4 */
.pipe::after { content: ""; position: absolute; top: 28px; left: 12.5%; width: 10px; height: 10px; border-radius: 50%; background: var(--live); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(37,177,138,.16); z-index: 0; animation: railDot 5s linear infinite; }
.pico {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--teal-line); color: var(--teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.pico svg { width: 26px; height: 26px; }
.pstep-n { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.pstep h3 { font-size: 1.04rem; margin-bottom: 6px; }
.pstep p { font-size: .9rem; color: var(--ink-soft); max-width: 22ch; }
@keyframes railDot { 0% { left: 12.5%; opacity: 0; } 7% { opacity: 1; } 92% { opacity: 1; } 100% { left: 87.5%; opacity: 1; } }

/* ============================================================
   Anatomy of a template — an exploded page with side labels
   ============================================================ */
.anatomy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: clamp(36px, 4.5vw, 52px); }
.anatomy-copy { max-width: 460px; }
.anatomy-copy .lead { margin-top: 16px; }
.legend { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.legend li { display: flex; gap: 14px; align-items: flex-start; }
.legend .ldot { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.legend .ldot svg { width: 16px; height: 16px; }
.legend b { color: var(--ink); font-weight: 600; }
.legend p { font-size: .92rem; color: var(--ink-soft); margin-top: 2px; }

/* the document with labelled blocks */
.tpl { position: relative; justify-self: center; width: 100%; max-width: 336px; }
.tpl-page {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-page); padding: 22px 20px 0; display: flex; flex-direction: column;
}
.tpl-pagehdr { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.tpl-pagehdr .mk { width: 24px; height: 24px; border-radius: 7px; background: var(--teal-tint); border: 1px solid var(--teal-line); }
.tpl-pagehdr .pg { font-size: .58rem; font-weight: 700; color: var(--ink-muted); letter-spacing: .04em; }
.blk { position: relative; padding: 11px 0; }
.blk + .blk { border-top: 1px dashed var(--line); }
.blk-h { height: 12px; width: 56%; border-radius: var(--r-pill); background: #c6d4d4; }
.blk .ln + .ln { margin-top: 8px; }
.blk-merge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .64rem; font-weight: 600; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-sm); padding: 4px 8px; }
.blk-table { display: flex; flex-direction: column; gap: 6px; }
.blk-trow { display: flex; gap: 8px; align-items: center; }
.blk-trow .tc { height: 8px; border-radius: var(--r-pill); background: var(--line-soft); }
.blk-trow .tc.k { width: 38%; background: var(--line); } .blk-trow .tc.v { flex: 1; } .blk-trow .tc.n { width: 30px; background: var(--teal-line); }
.blk-sign { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 14px; }
.blk-sign svg { width: 70px; height: auto; color: var(--teal); opacity: .85; }
.blk-sign .base { flex: 1; height: 0; border-bottom: 1.5px solid var(--line); margin-bottom: 5px; }
.tpl-pagefoot { margin: 12px -20px 0; padding: 9px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; }
.tpl-pagefoot i { height: 6px; border-radius: var(--r-pill); background: var(--line); display: block; }
.tpl-pagefoot i:first-child { width: 70px; } .tpl-pagefoot i:last-child { width: 26px; }
/* floating block label tags pinned to the page edge */
.tag {
  position: absolute; z-index: 2; left: calc(100% + 12px); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  background: var(--surface); border: 1px solid var(--teal-line); border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 600; color: var(--teal-deep); box-shadow: var(--shadow-card);
}
.tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1.5px; background: var(--teal-line); }
.tag svg { width: 14px; height: 14px; color: var(--teal); }
.tag.t-h { top: 64px; } .tag.t-merge { top: 132px; } .tag.t-table { top: 214px; } .tag.t-sign { top: 312px; }

/* ============================================================
   Merge fields in action — record card resolves into a paragraph
   ============================================================ */
.merge-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 360px; margin-inline: auto; }
.rec-card, .out-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 22px; }
.rec-card { border-color: var(--teal-line); }
.rec-card-hd, .out-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.rec-card-hd .sf, .out-card-hd .pf { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec-card-hd .sf { background: rgba(25,96,97,.1); color: var(--teal); border: 1px solid var(--teal-line); }
.out-card-hd .pf { background: var(--teal-tint); color: var(--teal); }
.rec-card-hd .sf svg, .out-card-hd .pf svg { width: 17px; height: 17px; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.frow:first-of-type { border-top: 0; }
.frow .fk { font-family: var(--mono); font-size: .72rem; color: var(--ink-muted); }
.frow .fv { font-size: .82rem; font-weight: 600; color: var(--ink); }
.merge-arrow { display: flex; align-items: center; justify-content: center; color: var(--teal); transform: rotate(90deg); }
.merge-arrow svg { width: 26px; height: 26px; }
.out-card { background: var(--paper); }
.out-doc p { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }
.out-doc .hl { color: var(--teal-deep); font-weight: 600; background: var(--teal-tint); border-radius: 4px; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.out-doc .ln { margin: 12px 0; }

/* ============================================================
   Signing — a horizontal signer timeline ending in a certificate
   ============================================================ */
.sign-flow { display: flex; align-items: stretch; gap: 0; margin-top: clamp(36px, 4.5vw, 52px); }
.signer { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.signer:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 50%; right: -50%; height: 2px; background: var(--teal-line); z-index: 0; }
.savatar { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin-bottom: 14px; flex-shrink: 0; }
.savatar.done { background: var(--teal); color: #fff; box-shadow: 0 0 0 5px rgba(25,96,97,.12); }
.savatar.now { background: var(--surface); color: var(--teal); border: 2px solid var(--teal); box-shadow: 0 0 0 5px rgba(37,177,138,.16); animation: nowPulse 2.6s var(--ease) infinite; }
.savatar.wait { background: var(--surface); color: var(--ink-muted); border: 2px dashed var(--line); }
.savatar .tick { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--live); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.savatar .tick svg { width: 11px; height: 11px; }
.signer h4 { font-size: .94rem; color: var(--ink); }
.signer .role { font-size: .78rem; color: var(--ink-muted); margin-top: 2px; }
.signer .st { margin-top: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
.st.s-done { color: var(--teal-deep); background: var(--teal-tint); }
.st.s-now { color: #fff; background: var(--live); }
.st.s-wait { color: var(--ink-muted); background: var(--bg); border: 1px solid var(--line); }
.cert { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: 12px; }
.cert .seal-sm { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #2c7c7d, var(--teal) 60%, var(--teal-deep)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 14px 26px -12px rgba(19,77,78,.6); border: 2px solid rgba(255,255,255,.25); }
.cert .seal-sm svg { width: 24px; height: 24px; }
.cert h4 { font-size: .94rem; color: var(--ink); }
.cert p { font-size: .78rem; color: var(--ink-muted); margin-top: 2px; }
.sign-note { margin-top: clamp(28px, 3.4vw, 40px); display: flex; align-items: center; gap: 12px; justify-content: center; text-align: center; max-width: 640px; margin-inline: auto; padding: 16px 22px; background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-md); font-size: .94rem; color: var(--teal-deep); }
.sign-note svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }
@keyframes nowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,177,138,.4); } 50% { box-shadow: 0 0 0 8px rgba(37,177,138,0); } }

/* ============================================================
   Template gallery — portrait page thumbnails
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(40px, 5vw, 56px); }
.thumb { --acc: var(--teal); display: flex; flex-direction: column; }
.thumb-page {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display: flex; flex-direction: column;
}
.thumb:hover .thumb-page { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: var(--teal-line); }
.thumb-band { height: 64px; background: var(--acc); padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.thumb-band .kind { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.thumb-band .name { font-size: .98rem; font-weight: 600; color: #fff; }
/* a richer mini-document inside each thumbnail */
.thumb-doc { flex: 1; padding: 15px 16px 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.td-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.td-logo { width: 20px; height: 20px; border-radius: 5px; background: var(--teal-tint); border: 1px solid var(--teal-line); flex-shrink: 0; }
.td-title { height: 8px; width: 48%; border-radius: var(--r-pill); background: #c6d4d4; }
.td-meta { height: 6px; width: 34%; border-radius: var(--r-pill); background: var(--line); display: block; }
.td-para { display: flex; flex-direction: column; gap: 5px; }
.td-para .ln { height: 5px; border-radius: var(--r-pill); background: var(--line-soft); display: block; }
.td-para .ln.s { width: 66%; }
.td-merge { align-self: flex-start; font-family: var(--mono); font-size: .56rem; font-weight: 600; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: 5px; padding: 3px 7px; }
.td-list { display: flex; flex-direction: column; gap: 7px; }
.td-list .li { display: flex; align-items: center; gap: 8px; }
.td-list .li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); flex-shrink: 0; }
.td-list .li i { height: 5px; border-radius: var(--r-pill); background: var(--line-soft); flex: 1; }
.td-table { display: flex; flex-direction: column; gap: 6px; }
.td-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-trow .k { height: 5px; border-radius: var(--r-pill); background: var(--line-soft); flex: 1; }
.td-trow .v { height: 5px; width: 26px; border-radius: var(--r-pill); background: var(--line); flex-shrink: 0; }
.td-trow.total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.td-trow.total .k { background: var(--teal-line); flex: 0 0 40px; }
.td-trow.total .v { background: var(--acc); width: 34px; height: 6px; }
.td-tail { margin-top: auto; display: flex; flex-direction: column; gap: 11px; }
.td-sign { display: flex; align-items: flex-end; gap: 8px; }
.td-sign svg { width: 54px; height: auto; color: var(--acc); opacity: .85; flex-shrink: 0; }
.td-sign .sigline { flex: 1; border-bottom: 1.5px solid var(--line); margin-bottom: 4px; }
.td-foot { margin: 0 -16px; padding: 9px 16px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.td-foot span { height: 5px; border-radius: var(--r-pill); background: var(--line); display: block; }
.td-foot span:first-child { width: 46px; }
.td-foot span:last-child { width: 16px; }
.thumb h3 { margin-top: 18px; font-size: 1.12rem; }
.thumb p { margin-top: 6px; font-size: .94rem; color: var(--ink-soft); }
.templates-cta { display: flex; justify-content: center; margin-top: clamp(36px, 4.5vw, 52px); }

/* templates section: a fanned deck of document types (one builder, every use case).
   the front card is a detailed Service Agreement; the two behind fan out to show
   other document types. reuses the .blk document styling from the Blocks tab */
.tpl-fan { position: relative; width: 100%; max-width: 388px; margin-inline: auto; animation: floatSheet 7.5s var(--ease) infinite; }
.fcard {
  width: 240px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-page); overflow: hidden;
  display: flex; flex-direction: column;
}
.fcap { flex-shrink: 0; background: var(--acc); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.fcap .fk { font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.fcap .fn { font-size: .92rem; font-weight: 600; color: #fff; }
.fbody { flex: 1; padding: 15px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.fbody .td-foot { margin-top: 13px; }
/* a deck of document types fanned out behind the detailed front card: the front
   card is in normal flow and defines the height (so it never has empty space); the
   two behind are absolute, lifted and spread to the sides so their labels stay visible */
.fc-agr { position: relative; z-index: 3; margin-inline: auto; box-shadow: var(--shadow-float); }
.fc-care, .fc-stmt { position: absolute; top: 0; height: 100%; left: 50%; margin-left: -120px; }
.fc-care { transform: translate(-50px, -44px) rotate(-7deg); z-index: 1; }
.fc-stmt { transform: translate(50px, -44px) rotate(7deg); z-index: 2; }
/* CTA sits left-aligned beneath the dot points in the copy column */
.split-grid .templates-cta { justify-content: flex-start; margin-top: 30px; }

/* ============================================================
   Control / security — compact bordered grid
   ============================================================ */
.ctrl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(36px, 4.5vw, 52px); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ctrl-item { background: var(--surface); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: background .25s var(--ease); }
.ctrl-item:hover { background: var(--bg); }
.cico { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.cico svg { width: 21px; height: 21px; }
.ctrl-item h4 { font-size: .98rem; color: var(--ink); }
.ctrl-item p { font-size: .9rem; color: var(--ink-soft); }

/* ============================================================
   FAQ — underlined-list accordion (matches the Forms site)
   ============================================================ */
.faq { margin-top: clamp(36px, 5vw, 52px); max-width: 820px; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 26px 4px; text-align: left; }
.faq-q .qt { font-weight: 600; font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: var(--ink); letter-spacing: -.01em; transition: color .25s var(--ease); }
.faq-item:hover .faq-q .qt, .faq-item.open .faq-q .qt { color: var(--teal); }
.faq-q .ic { flex-shrink: 0; width: 26px; height: 26px; color: var(--teal); transition: transform .35s var(--ease); }
.faq-q .ic svg { width: 26px; height: 26px; }
.faq-item.open .faq-q .ic { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-in { padding: 0 4px 28px; color: var(--ink-soft); font-size: 1rem; max-width: 680px; }

/* ============================================================
   Powered by Maica — Maica cloud energising the Docs bulb
   (ported from the Forms site; scene math is in % of a 4:3 canvas)
   ============================================================ */
.pwr-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.pwr-content { max-width: 480px; }
.pwr-content p { margin: 18px 0 30px; color: var(--ink-soft); font-size: 1.04rem; }
.pwr-media { display: flex; justify-content: center; }
.pwr-scene { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; }
.pwr-cloud { position: absolute; z-index: 0; color: rgba(125,160,160,.16); pointer-events: none; }
.pwr-cloud svg { width: 100%; height: 100%; display: block; }
.pwr-cloud-a { width: 13%; aspect-ratio: 1; top: 10%; left: 8%; animation: pwrDrift 17s var(--ease) infinite; }
.pwr-cloud-b { width: 9%; aspect-ratio: 1; top: 24%; left: 47%; color: rgba(125,160,160,.13); animation: pwrDrift 23s var(--ease) infinite reverse; }
.pwr-cloud-c { width: 15%; aspect-ratio: 1; top: 74%; left: 14%; color: rgba(125,160,160,.1); animation: pwrDrift 29s var(--ease) infinite 2s; }
.pwr-cloud-d { width: 12%; aspect-ratio: 1; top: 5%; left: 79%; color: rgba(125,160,160,.12); animation: pwrDrift 20s var(--ease) infinite 1s; }
@keyframes pwrDrift { 0%, 100% { transform: translateX(-15px); } 50% { transform: translateX(15px); } }
.pwr-glow { position: absolute; left: 75.9%; top: 39.3%; transform: translate(-50%, -50%); width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(37,177,138,.22), rgba(25,96,97,.1) 50%, transparent 72%); filter: blur(12px); animation: pwrGlowPulse 2.6s var(--ease) infinite; }
.pwr-rig { position: absolute; inset: 0; animation: floatSheet 8s var(--ease) infinite; }
.pwr-cable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.pwr-spark { fill: var(--live); filter: drop-shadow(0 0 5px rgba(37,177,138,.7)); animation: pwrSparkFade 2.6s linear infinite; }
.pwr-cloudcard { position: absolute; z-index: 2; left: 9.1%; top: 35.2%; width: 34%; }
.pwr-cloud-shape { width: 100%; height: auto; display: block; fill: rgba(125,160,160,.18); }
.pwr-logo { position: absolute; left: 49.5%; top: 56.8%; transform: translate(-50%, -50%); width: 56%; height: auto; }
.pwr-bulb { position: absolute; z-index: 2; left: 60.9%; top: 19.3%; width: 30%; height: 47%; }
.pwr-bulb-glass {
  position: absolute; z-index: 1; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(255,255,255,.5) 58%, rgba(255,255,255,.34));
  border: 1px solid rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 28px 50px -26px rgba(21,44,54,.4), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -16px 28px rgba(125,160,160,.16);
  display: flex; align-items: center; justify-content: center;
}
.pwr-ring { position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(37,177,138,.55); box-shadow: 0 0 18px rgba(37,177,138,.35), inset 0 0 14px rgba(37,177,138,.18); opacity: 0; animation: pwrRing 2.6s var(--ease) infinite; }
.pwr-bulb-ico { position: relative; z-index: 2; width: 31%; color: var(--teal); display: flex; animation: pwrIco 2.6s var(--ease) infinite; }
.pwr-bulb-ico svg { width: 100%; height: auto; }
.pwr-stem { position: absolute; z-index: 0; left: 50%; top: 81%; transform: translateX(-50%); width: 27%; height: 17%; border-radius: 0 0 12px 12px; background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(255,255,255,.66)); border: 1px solid rgba(231,240,240,.95); box-shadow: 0 10px 16px -8px rgba(21,44,54,.32); }
.pwr-stem::before, .pwr-stem::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1.5px; border-radius: 1px; background: var(--teal-line); }
.pwr-stem::before { top: 52%; }
.pwr-stem::after { top: 74%; }
.pwr-bulb-glow { position: absolute; left: 50%; top: 42.6%; transform: translate(-50%, -50%); width: 140%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(37,177,138,.5), rgba(25,96,97,.18) 52%, transparent 72%); opacity: .3; animation: pwrTargetGlow 2.6s var(--ease) infinite; }
.pwr-ripple { position: absolute; z-index: 0; left: 50%; top: 42.6%; transform: translate(-50%, -50%) scale(.95); width: 110%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(37,177,138,.45); opacity: 0; }
.pwr-ripple-1 { animation: pwrRipple1 2.6s var(--ease) infinite; }
.pwr-ripple-2 { animation: pwrRipple2 2.6s var(--ease) infinite; }
@keyframes pwrSparkFade { 0% { opacity: 0; } 6% { opacity: 1; } 64% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes pwrTargetGlow { 0%, 72% { opacity: .28; } 82% { opacity: .8; } 100% { opacity: .4; } }
@keyframes pwrGlowPulse { 0%, 72% { opacity: .28; } 82% { opacity: .62; } 100% { opacity: .4; } }
@keyframes pwrRing { 0%, 72% { opacity: 0; } 80% { opacity: .9; } 100% { opacity: .25; } }
@keyframes pwrIco { 0%, 72% { filter: none; } 82% { filter: drop-shadow(0 0 7px rgba(37,177,138,.55)); } 100% { filter: drop-shadow(0 0 3px rgba(37,177,138,.2)); } }
@keyframes pwrRipple1 { 0%, 74% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } 82% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); } }
@keyframes pwrRipple2 { 0%, 80% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } 88% { opacity: .45; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); } }
@media (prefers-reduced-motion: reduce) {
  .pwr-cloud, .pwr-rig, .pwr-spark, .pwr-bulb-glow, .pwr-glow, .pwr-ring, .pwr-ripple, .pwr-bulb-ico { animation: none; }
  .pwr-bulb-glow { opacity: .7; }
  .pwr-glow { opacity: .6; }
  .pwr-ring { opacity: .5; }
  .pwr-spark, .pwr-ripple { opacity: 0; }
}

/* ============================================================
   CTA close-out + footer (ported from the Forms site: the CTA
   rounds off and the dark footer is pulled up behind the curve)
   ============================================================ */
.cta {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  text-align: center; position: relative; z-index: 2;
  padding: clamp(72px, 9vw, 120px) 0 clamp(104px, 12vw, 156px);
  border-bottom-left-radius: var(--close-rad);
  border-bottom-right-radius: var(--close-rad);
}
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; margin-inline: auto; }
.cta p { margin: 20px auto 0; max-width: 520px; color: var(--ink-soft); font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 36px; }

.foot {
  background: var(--teal); color: rgba(255,255,255,.85);
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--close-rad));
  padding: calc(clamp(56px, 7vw, 78px) + var(--close-rad)) 0 34px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 52px); }
.foot-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.foot-logo .brand-mark { color: #fff; }
.foot-logo .brand-mark svg { width: 25px; height: 25px; }
.foot-logo img { height: 21px; width: auto; filter: brightness(0) invert(1); }
.foot-logo .sub { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.34); font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.82); }
.foot-brand p { font-size: .92rem; max-width: 300px; color: rgba(255,255,255,.82); }
.foot-col h5 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 15px; }
.foot-col a { display: block; padding: 6px 0; font-size: .94rem; color: rgba(255,255,255,.85); transition: color .2s var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-bottom { margin-top: clamp(44px, 5vw, 56px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; color: rgba(255,255,255,.7); }

/* ============================================================
   Entrance + reveal-on-scroll
   ============================================================ */
.rise { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .18s; } .rise.d3 { animation-delay: .3s; } .rise.d4 { animation-delay: .42s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: none; }
  .assembly { max-width: 360px; order: 2; }
  .anatomy-grid { grid-template-columns: 1fr; gap: 48px; }
  .anatomy-copy { max-width: none; order: 1; }
  .tpl { order: 2; }
  /* the legend already names each block; drop the page-edge tags once stacked */
  .tag { display: none; }
  .gallery { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .ctrl { grid-template-columns: repeat(2, 1fr); }
  .pwr-split { grid-template-columns: 1fr; gap: 36px; }
  .pwr-content { max-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* the full nav needs room for four links plus two buttons; collapse to the
   hamburger earlier so labels never wrap into the logo */
@media (max-width: 900px) {
  .nav-links, .nav-right .btn-primary, .nav-right .btn-invert { display: none; }
  .nav-toggle { display: flex; }
  .site-header.open .nav-links {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 18px; z-index: var(--z-menu); box-shadow: var(--shadow-hover);
  }
  .site-header.open .nav-links a { padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 768px) {
  .hero-actions .btn { flex: 1; justify-content: center; }
  .pipe { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .pipe::before, .pipe::after { display: none; }
  /* signer timeline becomes vertical */
  .sign-flow { flex-direction: column; gap: 26px; align-items: stretch; }
  .signer { flex-direction: row; text-align: left; gap: 16px; align-items: center; padding: 0; }
  .signer:not(:last-child)::after { display: none; }
  .savatar { margin-bottom: 0; }
  .signer .st { margin-top: 0; margin-left: auto; }
  .cert { width: auto; flex-direction: row; align-items: center; gap: 16px; padding-left: 0; text-align: left; border-top: 1px solid var(--line); padding-top: 24px; }
  .cert .seal-sm { margin-bottom: 0; }
  .merge-grid { grid-template-columns: 1fr; gap: 20px; }
  .merge-arrow { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .ctrl { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  :root { --gutter: 18px; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  /* hold the document scene resolved and signed */
  .sheet-token .tok, .gtok .tok { opacity: 0 !important; }
  .sheet-token .val, .gtok .val { opacity: 1 !important; }
  .gcheck { background: var(--teal) !important; border-color: var(--teal) !important; }
  .gcheck svg { opacity: 1 !important; transform: none !important; }
  .sheet-sign svg path { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   PHASE 2 additions — relationship manager, conditional content,
   generate-from-Salesforce, audit/certificate, styling & brand.
   Shared two-column split used by several of these sections.
   ============================================================ */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 76px); align-items: center; margin-top: clamp(36px, 4.5vw, 52px); }
.split-grid .copy { order: 1; max-width: 480px; }
.split-grid .visual { order: 2; justify-self: center; width: 100%; }
.split-grid.rev .copy { order: 2; }
.split-grid.rev .visual { order: 1; }
.split-grid .copy .lead { margin-top: 16px; }

/* ---- Relationship manager: a radial tree, core in the centre with a parent above
   and two children below, connectors radiating out from the core ---- */
.tree-radial { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 0.92; margin: clamp(10px, 2vw, 20px) auto; }
.tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.tree-lines line { stroke: var(--teal-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tree-core-glow { position: absolute; left: 50%; top: 50%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(25,96,97,.16), transparent 68%); z-index: 0; pointer-events: none; transform: translate(-50%, -50%); animation: corePulse 3.6s var(--ease) infinite; }
.tree-radial .tree-node { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.tree-radial .tree-node.core { z-index: 2; }
.r-parent { left: 50%; top: 14%; }
.r-core { left: 50%; top: 50%; }
.r-c1 { left: 23%; top: 84%; }
.r-c2 { left: 77%; top: 84%; }
@keyframes corePulse { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.04); } }
.tree-node {
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-card); white-space: nowrap;
}
.tree-node .ti { width: 30px; height: 30px; border-radius: 8px; background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tree-node .ti svg { width: 16px; height: 16px; }
.tree-node .tn { display: flex; flex-direction: column; line-height: 1.25; }
.tree-node .tn b { font-size: .9rem; font-weight: 600; color: var(--ink); }
.tree-node .tn small { font-size: .68rem; font-weight: 500; color: var(--ink-muted); }
.tree-node .dir { margin-left: 4px; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); padding: 3px 7px; border-radius: var(--r-pill); }
.tree-node.core { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 16px 30px -16px rgba(19,77,78,.55); }
.tree-node.core .ti { background: rgba(255,255,255,.18); color: #fff; }
.tree-node.core .tn b { color: #fff; }
.tree-node.core .tn small { color: rgba(255,255,255,.82); }

/* ---- Conditional content: a rule, then a block that is kept or dropped ---- */
.cond-card { width: 100%; max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cond-rule { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 7px 13px; }
.cond-rule svg { width: 15px; height: 15px; color: var(--teal); }
.cond-block { position: relative; border: 1px solid var(--teal-line); border-left: 3px solid var(--teal); border-radius: var(--r-sm); background: var(--paper); padding: 14px 14px 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.cond-block .cb-tag { position: absolute; top: -10px; right: 12px; font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: var(--teal-deep); background: var(--surface); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.cond-block .cb-tag svg { width: 11px; height: 11px; color: var(--live); }
.cond-block.off { border-color: var(--line); border-left-color: var(--mid); background: var(--bg); opacity: .55; }
.cond-block.off .cb-tag { color: var(--ink-muted); border-color: var(--line); }
.cond-block.off .cb-tag svg { color: var(--ink-muted); }
.cond-block .ln { background: var(--line); }

/* ---- Generate from Salesforce: a record bar with a button, then a PDF ---- */
.sfgen-flow { display: grid; grid-template-columns: 1fr auto auto; gap: clamp(16px, 2.6vw, 36px); align-items: center; margin-top: clamp(36px, 4.5vw, 52px); max-width: 860px; margin-inline: auto; }
.sf-rec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.sf-recbar { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--teal-tint); border-bottom: 1px solid var(--teal-line); }
.sf-recbar .sf { width: 30px; height: 30px; border-radius: 8px; background: rgba(25,96,97,.12); color: var(--teal); border: 1px solid var(--teal-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-recbar .sf svg { width: 17px; height: 17px; }
.sf-recbar .rn { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sf-recbar .rn b { font-size: .9rem; font-weight: 600; color: var(--ink); }
.sf-recbar .rn small { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.sf-gen-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; color: #fff; background: var(--teal); border-radius: var(--r-pill); padding: 8px 14px; box-shadow: 0 8px 18px -8px rgba(19,77,78,.5); animation: sfPulse 3.2s var(--ease) infinite; }
.sf-gen-btn svg { width: 14px; height: 14px; }
.sf-recbody { padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.sf-frow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sf-frow .k { font-family: var(--mono); font-size: .7rem; color: var(--ink-muted); }
.sf-frow .v { height: 8px; border-radius: var(--r-pill); background: var(--line); }
.sf-frow .v.w1 { width: 96px; } .sf-frow .v.w2 { width: 64px; } .sf-frow .v.w3 { width: 80px; }
.sfgen-arrow { color: var(--teal); }
.sfgen-arrow svg { width: 28px; height: 28px; }
.sf-pdf { width: 132px; aspect-ratio: 3 / 4; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-page); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.sf-pdf .ph { height: 9px; width: 58%; border-radius: var(--r-pill); background: #c6d4d4; }
.sf-pdf .ln { background: var(--line-soft); }
.sf-pdf .badge { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: .58rem; font-weight: 700; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 3px 8px; }
.sf-pdf .badge svg { width: 10px; height: 10px; color: var(--live); }
@keyframes sfPulse { 0%, 100% { box-shadow: 0 8px 18px -8px rgba(19,77,78,.5); } 50% { box-shadow: 0 8px 18px -8px rgba(19,77,78,.5), 0 0 0 6px rgba(37,177,138,.14); } }

/* ---- Related data + Generate: one vertical flow (tree -> generate -> PDF) ---- */
.data-flow { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: clamp(36px, 4.5vw, 52px) auto 0; }
.data-flow .tree-radial { max-width: 340px; margin: 0; }
.df-arrow { color: var(--teal); display: flex; }
.df-arrow svg { width: 24px; height: 24px; }
.df-btn { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #fff; background: var(--teal); border-radius: var(--r-pill); padding: 11px 20px; box-shadow: 0 10px 22px -10px rgba(19,77,78,.55); animation: sfPulse 3.2s var(--ease) infinite; }
.df-btn svg { width: 16px; height: 16px; }
.data-flow .sf-pdf { width: 168px; }
.df-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(20px, 3vw, 40px); max-width: 820px; margin: clamp(28px, 3.4vw, 40px) auto 0; }
.df-points li { display: flex; align-items: center; gap: 9px; font-size: .94rem; font-weight: 500; color: var(--ink-soft); }
.df-points li svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; }
@media (max-width: 560px) { .df-points { flex-direction: column; align-items: flex-start; max-width: 340px; } }

/* ---- Audit & certificate: a certificate card with a signing timeline ---- */
.cert-card { width: 100%; max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.cert-top { padding: 24px 22px; text-align: center; background: linear-gradient(160deg, var(--navy), #0f2129); color: #fff; position: relative; }
.cert-seal { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; background: radial-gradient(circle at 38% 32%, #2c7c7d, var(--teal) 60%, var(--teal-deep)); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.25); }
.cert-seal svg { width: 24px; height: 24px; color: #fff; }
.cert-top h4 { color: #fff; font-size: 1rem; }
.cert-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.cert-meta .ref { font-size: .72rem; color: var(--on-dark-soft); }
.cert-meta .hash { font-family: var(--mono); font-size: .62rem; color: var(--on-dark-muted); word-break: break-all; max-width: 280px; }
.cert-time { padding: 20px 22px; display: flex; flex-direction: column; gap: 0; }
.ae { position: relative; display: flex; align-items: center; gap: 13px; padding: 10px 0; }
.ae:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 30px; bottom: -10px; width: 2px; background: var(--teal-line); }
.ae .ad { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.ae .ad svg { width: 11px; height: 11px; }
.ae .al { flex: 1; font-size: .86rem; font-weight: 600; color: var(--ink); }
.ae .at { font-size: .72rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Styling & brand: a compact page-setup control panel ---- */
.setup { width: 100%; max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.setup-group { display: flex; flex-direction: column; gap: 9px; }
.setup-group .gl { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.spill { font-size: .76rem; font-weight: 500; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; }
.spill.on { color: var(--teal-deep); background: var(--teal-tint); border-color: var(--teal-line); font-weight: 600; }
.swatch-row { display: flex; gap: 9px; align-items: center; }
.swatch { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(21,44,54,.18); }
.swatch.on { outline: 2px solid var(--teal); outline-offset: 2px; }
.setup-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.setup-foot .hint { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--ink-soft); }
.setup-foot .hint svg { width: 15px; height: 15px; color: var(--teal); }

/* ---- responsive for the new sections ---- */
@media (max-width: 960px) {
  .split-grid { grid-template-columns: 1fr; gap: 44px; }
  .split-grid .copy { order: 1 !important; max-width: none; }
  .split-grid .visual { order: 2 !important; }
  .split-grid .templates-cta { justify-content: center; }
  /* the fan's back cards lift upward; once stacked, drop the fan so they clear
     the CTA above it instead of overlapping it */
  #templates .tpl-fan { margin-top: 48px; }
}
@media (max-width: 560px) {
  /* tighten the fan so the spread stays on-screen */
  .tpl-fan { max-width: 320px; }
  .fcard { width: 218px; }
  .fc-care, .fc-stmt { width: 218px; margin-left: -109px; }
  .fc-care { transform: translate(-38px, -40px) rotate(-6deg); }
  .fc-stmt { transform: translate(38px, -40px) rotate(6deg); }
}
@media (max-width: 720px) {
  .sfgen-flow { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .sfgen-arrow { transform: rotate(90deg); }
  .sf-rec { width: 100%; max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-gen-btn { animation: none !important; }
}

/* ============================================================
   "Everything you need in one builder" — tabs across the top over
   one content stage. All panels are stacked in a single grid cell
   so the stage height never changes between tabs (no jump); the
   active panel simply crossfades in.
   ============================================================ */
.builder { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 18px); margin-top: clamp(32px, 4vw, 48px); }
/* top switcher: equal-width white blocks, dimmed unless selected */
.builder-nav { display: flex; flex-direction: row; gap: clamp(10px, 1.4vw, 16px); }
.bnav {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); opacity: .5;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bnav:hover { opacity: .8; }
.bnav-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.bnav-ico svg { width: 20px; height: 20px; }
.bnav-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bnav-txt b { font-size: .96rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnav-txt small { font-size: .76rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnav.is-active { opacity: 1; border-color: var(--teal-line); box-shadow: var(--shadow-hover); }
.bnav.is-active .bnav-ico { background: var(--teal); border-color: var(--teal); color: #fff; }
.bnav.is-active .bnav-txt b { color: var(--teal-deep); }
/* content stage: one white block; panels stacked so the height is constant */
.builder-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: clamp(28px, 3.5vw, 48px); }
.js .builder-stage { display: grid; align-items: start; }
.bpanel { min-width: 0; }
/* with JS, every panel sits in the same grid cell (so the tallest sets the height);
   only the active one is visible, crossfading in. Without JS, panels flow normally. */
.js .bpanel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
/* the incoming panel waits for the outgoing one to fade out first, so they never overlap */
.js .bpanel.is-active { opacity: 1; visibility: visible; transition: opacity .25s var(--ease) .2s, visibility 0s; }
.bpanel-head { max-width: 600px; margin-bottom: clamp(22px, 2.8vw, 32px); }
.bpanel-head h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -.02em; }
.bpanel-head .lead { margin-top: 10px; }
.bpanel .split-grid, .bpanel .merge-grid { margin-top: 0; }
/* the page-edge annotation tags overflow the compact stage; the legend names the blocks */
.builder .tag { display: none; }

@media (max-width: 768px) {
  .builder-nav { flex-wrap: wrap; }
  .bnav { flex: 1 1 42%; padding: 14px 16px; }
  .bnav-txt small { display: none; }
}
@media (max-width: 420px) {
  /* one tab per row on narrow phones so labels never truncate */
  .bnav { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .bpanel, .js .bpanel.is-active { transition: opacity .01s, visibility 0s !important; }
}