/* =========================================================
   ThekaBook — explainer site
   Identity: "Measured ledger" — a field diary that finally does the maths.
   Palette:
     --ink     #12161C  near-black ledger ink (text)
     --accent  #2563EB  brief accent (blue)
     --accent-d#1D4FD8  darker accent for depth
     --paper   #F6F4EE  off-white site-diary paper (bg)
     --kraft   #EAE6DB  muted warm tint (manila / column dividers)
     --amber   #C2410C  overspend warning (kept for one job only)
   ========================================================= */

:root{
  --ink:#12161C;
  --ink-soft:#3D444E;
  --ink-faint:#6B7280;
  --accent:#2563EB;
  --accent-d:#1D4FD8;
  --accent-wash:#EAF0FE;
  --paper:#F6F4EE;
  --paper-2:#FFFFFF;
  --kraft:#EAE6DB;
  --kraft-line:#DAD3C4;
  --amber:#C2410C;
  --amber-wash:#FBEBE3;
  --ok:#0E7C57;
  --ok-wash:#E4F1EB;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;

  --wrap:1120px;
  --r:14px;
  --shadow:0 1px 2px rgba(18,22,28,.05), 0 18px 40px -22px rgba(18,22,28,.28);
  --shadow-lift:0 2px 4px rgba(18,22,28,.06), 0 32px 60px -28px rgba(37,99,235,.35);
}

/* ---------- reset-ish ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{line-height:1.08;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}

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

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:99}
.skip:focus{left:16px;top:16px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- buttons ---------- */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:650;font-size:.98rem;letter-spacing:-.01em;
  padding:.72em 1.15em;border-radius:10px;
  background:var(--b);color:#fff;
  border:1px solid transparent;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px rgba(37,99,235,.65);
  cursor:pointer;
}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn--lg{font-size:1.05rem;padding:.9em 1.4em}
.btn--sm{padding:.55em .9em;font-size:.9rem;border-radius:9px}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--kraft-line);box-shadow:none}
.btn--ghost:hover{background:var(--paper-2);border-color:var(--ink);transform:translateY(-1px)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{
  border-bottom-color:var(--kraft-line);
  box-shadow:0 8px 24px -20px rgba(18,22,28,.5);
}
.nav__inner{display:flex;align-items:center;gap:22px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}
.brand__mark{display:inline-flex}
.brand__name{font-size:1.22rem}
.nav__links{display:flex;gap:22px;margin-left:auto;font-size:.95rem;font-weight:550;color:var(--ink-soft)}
.nav__links a{position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .22s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav .btn--sm{margin-left:0}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__inner{gap:12px}
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{position:relative;padding:64px 0 8px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-d);
  background:var(--accent-wash);
  padding:6px 12px;border-radius:100px;
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%, transparent)}
.hero__title{
  font-size:clamp(2.5rem,6.2vw,4.15rem);
  font-weight:820;
  margin:22px 0 20px;
  letter-spacing:-.035em;
}
.hl{color:var(--accent);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.16em;background:color-mix(in srgb,var(--accent) 22%, transparent);z-index:-1;border-radius:2px}
.hero__pain{font-size:1.14rem;color:var(--ink-soft);max-width:34ch;margin-bottom:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:0;font-size:.92rem;color:var(--ink-faint)}
.hero__trust li{position:relative;padding-left:16px}
.hero__trust li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero__trust strong{color:var(--ink);font-weight:700}

/* signature site-card */
.hero__card{perspective:1200px}
.sitecard{
  background:var(--paper-2);
  border:1px solid var(--kraft-line);
  border-radius:var(--r);
  padding:22px 22px 18px;
  box-shadow:var(--shadow-lift);
  position:relative;
  transform:rotate(-1.1deg);
}
.sitecard::before{
  /* ledger spine */
  content:"";position:absolute;left:14px;top:14px;bottom:14px;width:2px;
  background:repeating-linear-gradient(var(--kraft-line) 0 6px, transparent 6px 12px);
  opacity:.7;
}
.sitecard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-left:14px}
.sitecard__label{font-size:.68rem;letter-spacing:.14em;font-weight:700;color:var(--ink-faint);text-transform:uppercase}
.sitecard__name{font-weight:750;font-size:1.02rem;letter-spacing:-.02em;margin-top:2px}
.pill{font-size:.72rem;font-weight:750;padding:4px 9px;border-radius:100px;white-space:nowrap;letter-spacing:.01em}
.pill--warn{background:var(--amber-wash);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 30%, transparent)}
.pill--ok{background:var(--ok-wash);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 26%, transparent)}

.sitecard__bar{position:relative;height:12px;border-radius:100px;background:var(--kraft);margin:16px 0 6px 14px;overflow:hidden}
.sitecard__fill{position:absolute;inset:0;width:108%;background:linear-gradient(90deg,var(--accent),var(--amber));transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.sitecard__budgetline{position:absolute;left:92.6%;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.sitecard__budgetline span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap;text-transform:uppercase}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.sitecard__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:18px 0 8px;padding-left:14px;border-top:1px dashed var(--kraft-line);padding-top:14px}
.sitecard__grid dt{font-size:.74rem;color:var(--ink-faint);font-weight:600}
.sitecard__grid dd{margin:2px 0 12px;font-weight:750;font-size:1.02rem}
.sitecard__total{grid-column:1 / -1;border-top:1px solid var(--kraft-line);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.sitecard__total dt{font-size:.82rem;color:var(--ink);font-weight:700}
.sitecard__total dd{margin:0;color:var(--accent-d);font-size:1.2rem}
.sitecard__foot{padding-left:14px;font-size:.82rem;color:var(--ink-faint);font-weight:600}
.sitecard__foot-k{color:var(--ink-soft)}
.sitecard__delta{color:var(--amber);font-weight:700}

.hero__rule{height:1px;background:var(--kraft-line);max-width:var(--wrap);margin:56px auto 0;position:relative}
.hero__rule::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--kraft-line)}

/* =========================================================
   Shared section furniture
   ========================================================= */
.section{padding:84px 0}
.kicker{
  font-size:.8rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-d);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block}
.kicker--light{color:#9DBBFB}
.kicker--light::before{background:#9DBBFB}
.section__title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:790;letter-spacing:-.03em;max-width:20ch;
}

/* =========================================================
   2. PROBLEM
   ========================================================= */
.problem{background:var(--paper)}
.problem__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:34px;align-items:start}
.lead{font-size:1.24rem;line-height:1.5;color:var(--ink-soft);font-weight:450}
.lead::first-line{color:var(--ink)}
.break{background:var(--paper-2);border:1px solid var(--kraft-line);border-radius:var(--r);padding:26px 26px 20px;box-shadow:var(--shadow)}
.break h3{font-size:1.02rem;font-weight:750;margin-bottom:14px}
.break__list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.break__list li{position:relative;padding-left:30px;font-size:.98rem;color:var(--ink-soft)}
.break__list em{font-style:normal;color:var(--ink);font-weight:650}
.break__x{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;background:var(--amber-wash);color:var(--amber);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}

/* =========================================================
   3. INSIGHT (dark inversion — the one bold beat)
   ========================================================= */
.insight{background:var(--ink);color:var(--paper);border-radius:0;position:relative;overflow:hidden}
.insight::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(37,99,235,.28), transparent 60%),
    repeating-linear-gradient(transparent 0 33px, rgba(255,255,255,.035) 33px 34px);
  pointer-events:none;
}
.insight__inner{position:relative;max-width:900px}
.insight__quote{
  font-size:clamp(1.6rem,4vw,2.65rem);
  font-weight:730;line-height:1.18;letter-spacing:-.025em;
  margin-bottom:22px;
}
.insight__quote em{font-style:normal;color:#BFD2FD}
.insight .hl{color:#fff}
.insight .hl::after{background:var(--accent)}
.insight__sub{font-size:1.1rem;color:#B8BFC9;max-width:60ch}

/* =========================================================
   4. HOW IT WORKS
   ========================================================= */
.steps{list-style:none;padding:0;margin:38px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--kraft-line);border:1px solid var(--kraft-line);border-radius:var(--r);overflow:hidden}
.step{background:var(--paper-2);padding:26px 22px 30px;position:relative}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  background:var(--accent-wash);color:var(--accent-d);
  font-weight:800;font-size:1.05rem;margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--accent) 20%, transparent);
}
.step h3{font-size:1.08rem;font-weight:750;margin-bottom:8px;letter-spacing:-.02em}
.step p{font-size:.95rem;color:var(--ink-soft)}
.step strong{color:var(--ink);font-weight:700}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
}

/* =========================================================
   5. FEATURES
   ========================================================= */
.feat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.feat{
  background:var(--paper-2);border:1px solid var(--kraft-line);border-radius:var(--r);
  padding:24px 22px;position:relative;overflow:hidden;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 35%, var(--kraft-line))}
.feat:hover::before{transform:scaleY(1)}
.feat h3{font-size:1.06rem;font-weight:750;margin-bottom:8px;letter-spacing:-.02em}
.feat p{font-size:.95rem;color:var(--ink-soft)}
@media (max-width:820px){.feat__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feat__grid{grid-template-columns:1fr}}

/* =========================================================
   6. PRODUCT PREVIEW — the "screenshot"
   ========================================================= */
.preview{background:linear-gradient(180deg,var(--paper),var(--kraft))}
.preview__sub{margin-top:16px;font-size:1.08rem;color:var(--ink-soft);max-width:56ch}
.shot{
  margin-top:34px;
  background:var(--paper-2);
  border:1px solid var(--kraft-line);
  border-radius:16px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.shot__chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#EEEBE3;border-bottom:1px solid var(--kraft-line)}
.dot{width:11px;height:11px;border-radius:50%;background:#CFC8B8}
.dot:nth-child(1){background:#E88C7D}.dot:nth-child(2){background:#E9C46A}.dot:nth-child(3){background:#8FBF9F}
.shot__url{margin-left:12px;font-size:.8rem;color:var(--ink-faint);font-family:var(--mono);letter-spacing:-.02em}
.shot__body{padding:26px}
.shot__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.shot__hello{font-size:1.28rem;font-weight:790;letter-spacing:-.025em}
.shot__sub{font-size:.9rem;color:var(--ink-faint);margin-top:2px}
.shot__stats{display:flex;gap:12px}
.stat{background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 16%, transparent);border-radius:12px;padding:12px 16px;min-width:130px}
.stat--warn{background:var(--amber-wash);border-color:color-mix(in srgb,var(--amber) 24%, transparent)}
.stat__k{font-size:.74rem;color:var(--ink-faint);font-weight:600}
.stat--warn .stat__k{color:color-mix(in srgb,var(--amber) 80%, var(--ink))}
.stat__v{font-size:1.24rem;font-weight:800;margin-top:3px;color:var(--accent-d)}
.stat--warn .stat__v{color:var(--amber)}

/* the board (table-like) */
.board{border:1px solid var(--kraft-line);border-radius:12px;overflow:hidden}
.board__head,.row{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr .8fr;align-items:center;gap:14px;padding:12px 16px}
.board__head{background:var(--kraft);font-size:.72rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.row{border-top:1px solid var(--kraft-line);font-size:.92rem;background:var(--paper-2)}
.row:nth-child(odd){background:color-mix(in srgb,var(--kraft) 26%, var(--paper-2))}
.row__site{display:flex;flex-direction:column;line-height:1.25}
.row__site strong{font-weight:700}
.row__site em{font-style:normal;font-size:.78rem;color:var(--ink-faint)}
.ta-r{text-align:right;justify-self:end}
.row__bar{position:relative;height:9px;border-radius:100px;background:var(--kraft);overflow:hidden;width:100%}
.row__fill{position:absolute;inset:0;background:var(--accent);border-radius:100px}
.row__fill--over{background:linear-gradient(90deg,var(--accent),var(--amber))}

.shot__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.mini{background:var(--paper);border:1px solid var(--kraft-line);border-radius:12px;padding:14px 16px}
.mini__k{font-size:.74rem;color:var(--ink-faint);font-weight:600}
.mini__v{font-size:1.05rem;font-weight:750;margin-top:3px}
.preview__note{margin-top:16px;font-size:.82rem;color:var(--ink-faint);font-style:italic}

/* wide-content guard: let the board scroll inside itself on small screens */
@media (max-width:640px){
  .shot__body{padding:16px;overflow-x:auto}
  .board{min-width:560px}
  .shot__foot{min-width:560px}
}

/* =========================================================
   7. PRICING
   ========================================================= */
.pricing{background:var(--paper)}
.pricing__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.pricing__roi{font-size:1.14rem;color:var(--ink-soft);margin:20px 0 22px;max-width:44ch}
.pricing__roi strong{color:var(--ink)}
.pricing__list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pricing__list li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:1rem}
.pricing__list li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:5px;background:var(--accent-wash);border:1.5px solid var(--accent)}
.pricing__list li::after{content:"";position:absolute;left:5px;top:.5em;width:5px;height:8px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg)}

.price{
  background:var(--ink);color:#fff;border-radius:18px;padding:34px 30px;
  box-shadow:var(--shadow-lift);position:relative;overflow:hidden;
}
.price::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 100% 0,rgba(37,99,235,.4),transparent 60%);pointer-events:none}
.price__tag{position:relative;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#9DBBFB}
.price__amt{position:relative;font-size:3.6rem;font-weight:850;letter-spacing:-.04em;margin:6px 0 4px;line-height:1}
.price__cur{font-size:1.5rem;font-weight:700;vertical-align:.55em;margin-right:4px;color:#C7D5F7}
.price__per{font-size:1.1rem;font-weight:600;color:#9DA6B2;letter-spacing:-.01em}
.price__note{position:relative;font-size:.88rem;color:#AEB6C1;margin-bottom:20px}
.price__fine{position:relative;font-size:.72rem;color:#6E7683;margin-top:12px;text-align:center}
.price .btn{position:relative}

/* =========================================================
   8. AUDIENCE + FAQ
   ========================================================= */
.audience{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.audience__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.who__list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.who__list li{position:relative;padding-left:22px;font-size:1.05rem;color:var(--ink-soft)}
.who__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.who__list strong{color:var(--ink);font-weight:700}

.faq{padding-top:6px}
.q{border-bottom:1px solid var(--kraft-line);padding:4px 0}
.q summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:600;color:var(--accent);transition:transform .2s ease}
.q[open] summary::after{content:"–"}
.q p{padding:0 0 18px;color:var(--ink-soft);font-size:.98rem;max-width:52ch}
.q summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* =========================================================
   9. FOOTER
   ========================================================= */
.foot{background:var(--ink);color:#C4CBD4;padding:44px 0}
.foot__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.brand__name--foot{color:#fff;font-size:1.35rem}
.foot__tag{color:#8B93A0;margin-top:6px;font-size:.95rem}
.foot__meta{text-align:right}
.foot__studio{font-size:.95rem}
.foot__studio strong{color:#fff;letter-spacing:.06em}
.foot__meta a{color:#9DBBFB;font-weight:600}
.foot__meta a:hover{text-decoration:underline}
@media (max-width:560px){
  .foot__meta{text-align:left}
}

/* =========================================================
   Responsive: collapse the two big grids
   ========================================================= */
@media (max-width:900px){
  .hero{padding-top:44px}
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero__card{order:2;max-width:440px}
  .problem__grid,
  .pricing__inner,
  .audience__grid{grid-template-columns:1fr;gap:32px}
  .section{padding:64px 0}
  .sitecard{transform:rotate(-.6deg)}
}
@media (max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hero__cta .btn{width:100%}
  .shot__stats{width:100%}
  .stat{flex:1}
}