/* ============================================================
   BRIEFED - WARM HOSPITALITY DESIGN SYSTEM (shared)
   Plus Jakarta Sans only. Cream/paper base, Forest #1F6B47 accent,
   one sparing clay touch. Calm type scale, even 96/64/48 rhythm,
   1100px container. Linked by index-redesign, pricing, exit-valuation.
   Single source of truth - edit here, every warm page inherits.
   ============================================================ */

:root{
  /* Warm paper palette */
  --paper:        #F6F1E9;   /* base */
  --paper-soft:   #FAF7F1;   /* raised cards / lighter sections */
  --paper-deep:   #EFE7DA;   /* recessed sections */
  --linen:        #F1EADD;   /* subtle bands / highlight box */

  /* Ink */
  --ink:          #221E1A;   /* primary text */
  --ink-soft:     #4A443C;   /* secondary */
  --ink-mute:     #6E6557;   /* muted / captions (darkened for WCAG AA >=4.5:1 on paper) */

  /* Anchor + warm secondary (sparing) */
  --forest:       #1F6B47;
  --forest-deep:  #164E34;
  --forest-tint:  #E4EDE7;
  --clay:         #C0623A;   /* warm secondary, used VERY sparingly */
  --ochre:        #C99A3F;   /* eyebrow dot only */

  /* Lines */
  --line:         #E3D9C8;
  --line-soft:    #ECE3D4;

  /* Dark surface (founder / proof beat) */
  --espresso:     #211C16;
  --espresso-2:   #2B251E;

  /* Rhythm + shape */
  --maxw:         1100px;
  --pad-x:        28px;
  --sect-y:       96px;       /* desktop section padding */
  --radius:       14px;
  --radius-lg:    20px;
  --radius-xl:    26px;
  --card-pad:     30px;

  --shadow-sm:    0 1px 2px rgba(50,40,28,.05), 0 6px 16px rgba(50,40,28,.05);
  --shadow-md:    0 12px 30px rgba(50,40,28,.08), 0 3px 10px rgba(50,40,28,.05);
  --shadow-lg:    0 28px 64px rgba(40,32,22,.16), 0 8px 22px rgba(40,32,22,.08);

  --sans:         "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; color-scheme:light only; overflow-x:hidden; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--forest); }

/* tabular numbers everywhere numbers matter */
.num, .tnum, .stat-n, .a-row .v, .brief-cell .v, .price-amount .n,
.metric .n, .hero-stat .n, .ladder-step .wk, .stake-n, .ticker-num, .cmp-table td{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* paper grain, very subtle */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---------- Container + rhythm primitives ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); position:relative; z-index:1; }
section{ position:relative; z-index:1; }
.sect{ padding:var(--sect-y) 0; }
.sect-deep{ background:var(--paper-deep); }
.sect-soft{ background:var(--paper-soft); }

/* ---------- Type scale (CALM) ---------- */
.h1{ font-size:clamp(34px,4.4vw,60px); line-height:1.06; font-weight:800; letter-spacing:-.025em; text-wrap:balance; }
.h2{ font-size:clamp(28px,3vw,34px); line-height:1.14; font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.h3{ font-size:21px; line-height:1.25; font-weight:700; letter-spacing:-.015em; }
.lead{ font-size:clamp(16.5px,1.3vw,18px); color:var(--ink-soft); line-height:1.6; }

/* ---------- Wordmark ---------- */
.wordmark{ font-weight:800; font-size:21px; letter-spacing:-.03em; color:var(--ink); display:inline-flex; align-items:baseline; }
.wordmark .dot{ color:var(--forest); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--forest);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ochre); box-shadow:0 0 0 4px rgba(201,154,63,.16); }
.eyebrow.clay{ color:var(--clay); }
.eyebrow.clay::before{ background:var(--clay); box-shadow:0 0 0 4px rgba(192,98,58,.14); }

/* ---------- Section heading block ---------- */
.sect-head{ max-width:620px; }
.sect-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sect-head .h2{ margin:16px 0 14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:14px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .2s, border-color .2s;
}
.btn-primary{ background:var(--forest); color:#FBF8F1; box-shadow:0 8px 20px rgba(31,107,71,.24); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(31,107,71,.30); background:var(--forest-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink-soft); background:rgba(34,30,26,.03); }
.btn-lg{ padding:16px 30px; font-size:15.5px; }
.btn .arr{ transition:transform .22s; }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,233,.74); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:15px var(--pad-x); display:flex; align-items:center; justify-content:space-between; }
nav.scrolled{ border-bottom-color:var(--line); background:rgba(246,241,233,.92); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a.link{ font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .2s; }
.nav-links a.link:hover{ color:var(--forest); }
.nav-cta{ padding:10px 18px; font-size:13.5px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:10px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ============================================================
   LIVE STRIP + INTEGRATIONS TICKER
   ============================================================ */
.live-strip{ background:var(--paper-deep); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.live-strip-inner{ max-width:var(--maxw); margin:0 auto; padding:15px var(--pad-x); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); font-weight:500; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--forest); position:relative; }
.live-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--forest); opacity:.4; animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ transform:scale(.8); opacity:.5; } 100%{ transform:scale(2); opacity:0; } }
.live-strip b{ color:var(--ink); font-weight:700; }
.live-sep{ color:var(--line); }

/* integrations ticker (marquee) */
.ticker{ background:var(--paper-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; padding:14px 0; position:relative; }
.ticker::before, .ticker::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(90deg, var(--paper-soft), transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, var(--paper-soft), transparent); }
.ticker-track{ display:flex; align-items:center; gap:0; width:max-content; animation:ticker 36s linear infinite; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.ticker-item .ticker-num{ color:var(--forest); font-weight:800; }
.ticker-badge{ font-weight:700; color:var(--ink); }
.ticker-live{ width:8px; height:8px; border-radius:50%; background:var(--forest); }
.ticker-sep{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--line); margin:0 26px; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ============================================================
   DATA-ARTIFACT (real daily-brief screenshot, framed)
   ============================================================ */
.dash{ background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.dash img{ display:block; width:100%; height:auto; }

/* receipts */
.receipt-list{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.receipt{ background:var(--paper-soft); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
.receipt .src{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); margin-bottom:8px; }
.receipt p{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.receipt p b{ color:var(--ink); font-weight:700; }
.receipt .note{ font-size:11.5px; color:var(--ink-mute); margin-top:8px; }

/* ============================================================
   CARD TIERS (problem, value, generic)
   ============================================================ */
.card{ background:var(--paper-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--shadow-sm); }
.card-hover{ transition:transform .3s, box-shadow .3s; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.icon-tile{ width:48px; height:48px; border-radius:13px; background:var(--forest-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-weight:800; font-size:13px; color:var(--forest); letter-spacing:.02em; }

/* ============================================================
   COMPARISON TABLE ("not a dashboard") - WARM + MOBILE-FIXED
   Ports the council-passed mobile behaviour from styles.css:
   all 5 columns fit a 390px viewport, NO horizontal scroll,
   Briefed column always visible + Forest-washed.
   ============================================================ */
.cmp-wrap{ background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); }
.cmp-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:600px; }
.cmp-table caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.cmp-table th, .cmp-table td{ padding:15px 16px; text-align:center; }
.cmp-table thead th{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid var(--line); }
.cmp-table thead th:first-child, .cmp-table tbody th{ text-align:left; }
.cmp-table tbody th{ font-weight:700; color:var(--ink); font-size:14px; }
.cmp-table tbody tr{ border-bottom:1px solid var(--line-soft); }
.cmp-table tbody tr:last-child{ border-bottom:none; }
.cmp-table td{ color:var(--ink-mute); }
.cmp-table .x{ color:#b7654a; font-weight:700; }
.cmp-table .ok{ color:var(--forest); font-weight:800; font-size:15.5px; }
/* winner column: Forest wash + emphasis, on every viewport */
.cmp-table tr > *:last-child{ background:rgba(31,107,71,.07); }
.cmp-table thead th:last-child{ background:rgba(31,107,71,.13); color:var(--forest); border-bottom:2px solid var(--forest); }
.cmp-table tbody td:last-child{ color:var(--forest); font-weight:800; }
.cmp-foot{ text-align:center; margin-top:18px; font-size:14px; color:var(--ink-soft); }
.cmp-foot b{ color:var(--forest); }
.table-scroll-hint{ display:none; text-align:center; font-size:11px; color:var(--ink-mute); margin-top:8px; letter-spacing:.5px; }
@media (max-width:768px){
  .cmp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-scroll-hint{ display:block; }
}
@media (max-width:480px){
  .cmp-wrap{ overflow-x:hidden; }
  .cmp-table{ min-width:0; width:100%; table-layout:fixed; font-size:12px; }
  .cmp-table th, .cmp-table td{ padding:11px 3px; overflow:hidden; }
  .cmp-table thead th:first-child, .cmp-table tbody th{ width:32%; padding-left:11px; text-align:left; }
  .cmp-table thead th:nth-child(n+2), .cmp-table tbody td{ width:17%; }
  .cmp-table thead th:not(:first-child){ font-size:8.5px; letter-spacing:.2px; line-height:1.2; word-break:break-word; }
  .cmp-table td{ font-size:11px; word-break:break-word; }
  .cmp-table tbody th{ font-size:12px; }
  .table-scroll-hint{ display:none; }
}

/* ============================================================
   FOUNDER BAND (dark)
   ============================================================ */
.founder{ background:var(--espresso); color:#EAE3D6; }
.founder-inner{ display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center; }
.founder-photo{ width:100%; max-width:330px; aspect-ratio:1/1; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; background:#262017; }
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 22px 18px; background:linear-gradient(transparent, rgba(20,16,11,.85)); }
.founder-photo .cap .nm{ font-weight:700; font-size:15px; color:#fff; }
.founder-photo .cap .rl{ font-size:12.5px; color:#cabfac; margin-top:1px; }
.founder .eyebrow{ color:#d6936a; }
.founder .eyebrow::before{ background:#d6936a; box-shadow:0 0 0 4px rgba(214,147,106,.18); }
.founder blockquote{ margin:18px 0 0; }
.founder blockquote p{ font-size:clamp(20px,2.2vw,27px); line-height:1.4; color:#F4EEE2; font-weight:600; letter-spacing:-.015em; }
.founder blockquote p .hl{ color:#8fd9b0; }
.founder cite{ display:block; margin-top:22px; font-style:normal; font-size:14px; color:#b3a892; line-height:1.6; padding-top:20px; border-top:1px solid rgba(234,227,214,.14); }
.founder cite b{ color:#EAE3D6; font-weight:700; }
.founder-badges{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-top:22px; }
.f-badge{ font-size:12.5px; color:#b3a892; display:flex; align-items:center; gap:7px; }
.f-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#5bbd8a; }

/* ============================================================
   PRICING + GUARANTEE
   ============================================================ */
.pricing-wrap{ display:grid; grid-template-columns:1.08fr .92fr; gap:36px; align-items:start; margin-top:48px; }
.price-side{ display:flex; flex-direction:column; gap:22px; }
.price-card{ background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
.price-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--forest); }
.price-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--forest); background:var(--forest-tint); padding:5px 13px; border-radius:9px; }
.price-card .h3{ font-size:24px; margin:16px 0 12px; }
.price-amount{ display:flex; align-items:baseline; gap:7px; margin-bottom:7px; }
.price-amount .n{ font-size:50px; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.price-amount .per{ font-size:15px; color:var(--ink-mute); font-weight:600; }
.price-tag{ font-size:14px; color:var(--ink-soft); margin-bottom:22px; }
.price-feats{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0 0 26px; }
.price-feats li{ display:flex; gap:11px; font-size:14px; color:var(--ink-soft); line-height:1.45; }
.price-feats .tk{ flex:0 0 auto; width:19px; height:19px; border-radius:50%; background:var(--forest-tint); color:var(--forest); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; margin-top:2px; }
.price-card .btn{ width:100%; }
.price-fine{ font-size:12px; color:var(--ink-mute); margin-top:14px; text-align:center; line-height:1.5; }
.guarantee{ background:var(--linen); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:32px; }
.guarantee .h3{ font-size:19px; margin-bottom:16px; }
.g-item{ margin-bottom:15px; }
.g-item .t{ font-size:14px; font-weight:700; color:var(--ink); }
.g-item p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-top:2px; }
.g-foot{ font-size:12.5px; color:var(--ink-mute); }
.founding{ grid-column:1 / -1; background:var(--paper-soft); border:1px dashed #d59a72; border-radius:var(--radius); padding:20px 26px; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin-top:4px; }
.founding .tag{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); white-space:nowrap; }
.founding .body{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.founding .body b{ color:var(--ink); font-weight:700; }

/* final CTA block */
.final{ text-align:center; max-width:600px; margin:80px auto 0; }
.final .h2{ margin:16px 0 14px; }
.final .lead{ margin-bottom:30px; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list{ max-width:760px; margin:40px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--paper-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:15.5px; font-weight:700; color:var(--ink); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-q .ar{ flex:0 0 auto; color:var(--forest); font-size:18px; transition:transform .25s; }
.faq-item.open .faq-q .ar{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 24px 20px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.faq-a p a{ color:var(--forest); font-weight:600; }
.faq-item.open .faq-a{ max-height:340px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--espresso); color:#b3a892; padding:52px 0 32px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(234,227,214,.12); }
.footer-brand .wordmark{ color:#EAE3D6; }
.footer-brand .wordmark .dot{ color:#5bbd8a; }
.footer-brand p{ font-size:13px; margin-top:8px; max-width:230px; }
.footer-cols{ display:flex; gap:52px; flex-wrap:wrap; }
.footer-col h5{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8a8070; margin-bottom:13px; }
.footer-col a{ display:block; font-size:13.5px; color:#c2b8a4; margin-bottom:9px; transition:color .2s; }
.footer-col a:hover{ color:#EAE3D6; }
.footer-bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:24px; font-size:12.5px; color:#8a8070; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE (shared)
   ============================================================ */
@media (max-width:920px){
  :root{ --sect-y:64px; }
  .founder-inner, .pricing-wrap{ grid-template-columns:1fr; gap:36px; }
  .founder-photo{ max-width:300px; margin:0 auto; }
}
@media (max-width:640px){
  :root{ --sect-y:48px; --card-pad:24px; }
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .price-card, .guarantee{ padding:26px 22px; }
  .founding{ flex-direction:column; gap:7px; }
  /* footer: even 2-col on phones (no stranded "Trust" column) + roomier tap targets */
  .footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
  .footer-col a{ padding:5px 0; margin-bottom:3px; }
}