/* trickjar.com, the one stylesheet (redesign 2026-11, built from the approved mockups).
   Source: site/assets/site.css; bin/build-site.php copies it to public/css/site.css with a content-hash ?v=.
   Fonts are self-hosted Latin subsets (Google Fonts files): Bricolage Grotesque (headings), Inter (body),
   JetBrains Mono (code). No request goes to Google Fonts. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-opsz-500-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-400-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial Black scaled to Bricolage's metrics (kept from the previous site), so the font swap barely moves headings. */
@font-face{font-family:'Bricolage Grotesque Fallback';src:local('Arial Black'),local('Arial-Black');size-adjust:82.37%;ascent-override:112.91%;descent-override:32.78%;line-gap-override:0%}

:root{
  --ground:#EEECF6;  /* page background */
  --ink:#14121F;     /* text, borders, dark slabs */
  --hot:#FF2E88;     /* hot pink: buttons, highlights */
  --pink:#C2006A;    /* text pink: links, accents on light */
  --lime:#C8F04A;
  --yellow:#FFD23F;
  --violet:#B9A8FF;
  --muted:#4A4760;
  --rule:#E6E6E1;    /* soft table and section rules */
  --display:'Bricolage Grotesque','Bricolage Grotesque Fallback',Inter,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
/* The rotated marquee is wider than the page (as in the mockup): never let it cause sideways scrolling. */
@supports (overflow:clip){body{overflow-x:clip}}
a{color:var(--pink)}a:hover{color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
/* One layout rule (review 2026-11-11): every section sits in the 1200px .wrap, left-aligned at the logo line.
   Headlines max 900px, intros and long-form reading text max 720px, never centered. */
.measure{max-width:720px}
/* .split (About and Headless CRM, review 2026-11-11): heading left, text right. 5fr/7fr from 900px, one column below.
   A .split-eyebrow child spans both columns on its own row, so the right column starts level with the h1, not the eyebrow.
   Content in the right column has no reading cap of its own: the column is the cap. */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;row-gap:20px;align-items:start}
  .split>.split-eyebrow{grid-column:1/-1}
}
.intro{max-width:900px}
.intro p,.lede{max-width:720px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.03em;margin:0}
p{margin:0}
ul,ol{margin:0}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-family:inherit;transition:transform .1s,box-shadow .1s;color:var(--ink)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}
.btn-p{background:var(--hot);color:var(--ink)}.btn-p:hover{color:var(--ink)}
.btn-s{background:#fff;color:var(--ink)}.btn-s:hover{color:var(--ink)}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--lime)}.btn-ink:hover{color:#fff;box-shadow:5px 5px 0 var(--lime)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* Header (dark top nav) */
.site-header{border-bottom:2px solid var(--ink);background:var(--ink);position:relative;z-index:20}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:22px;font-family:var(--display);letter-spacing:-0.03em}
.logo:hover{color:#fff}
.links{display:flex;gap:28px}
.nl{color:var(--ground);text-decoration:none;font-size:15px;font-weight:500}.nl:hover{color:var(--lime)}
.nl[aria-current="page"]{color:var(--lime);font-weight:700}
.nl-m{display:none}
.hdr-actions{display:flex;gap:10px;align-items:center}
.site-header .btn{box-shadow:3px 3px 0 var(--lime)}.site-header .btn:hover{box-shadow:5px 5px 0 var(--lime)}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:2px solid var(--ground);background:transparent;color:var(--ground);cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
.menu-icon::before{top:-6px}.menu-icon::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-icon{background:transparent}
.menu-btn[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg)}

/* Shared pieces */
.eyebrow{display:inline-block;width:fit-content;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--lime);border:2px solid var(--ink);border-radius:999px;padding:5px 12px;transform:rotate(-2deg)}
.eyebrow-hot{background:var(--hot)}
.card{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:28px;box-shadow:6px 6px 0 var(--ink)}
.card-lg{padding:32px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sticker{display:inline-block;font-weight:800;font-family:var(--display);font-size:15px;letter-spacing:.04em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink)}
mark{background:var(--hot);color:var(--ink);padding:0 .12em;padding-block:0;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
input,select,button{font-family:inherit}
.stack{display:flex;flex-direction:column}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,300px)),1fr))}
.sec-white{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sec-soft{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.h2-main{font-size:52px;line-height:1.02}
.h2-sub{font-size:36px;line-height:1.1}
.h2-art{font-size:32px;line-height:1.15}
.arrow-link{font-weight:700}
.body p{font-size:18px;line-height:1.7;color:#2A2D35}

/* FAQ accordions */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::after{content:"+";font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--pink);flex:none}
.faq[open] summary::after{content:"\2212"}
.faq p{margin-top:10px;line-height:1.6}
.faq-main{border-bottom:2px solid var(--ink);padding:22px 0}
.faq-main summary{font-weight:700;font-size:18px}
.faq-soft{border-bottom:1px solid var(--rule);padding:20px 0}
.faq-soft summary{font-weight:600;font-size:17px}

/* Tables */
.table-box{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--rule);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:620px}
.table-wide table{min-width:680px}
th,td{text-align:left;padding:16px;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5;vertical-align:top}
.table-wide th,.table-wide td{padding:18px 20px}
tbody tr:last-child td{border-bottom:0}
th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
td.k{font-weight:600}
td.tool{font-family:var(--mono);color:var(--pink)}

/* Home: hero */
.hero{padding:88px 0 96px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:64px;align-items:center}
/* Headline line-height vs <mark> (fix 2026-11-11): an inline background fills the font's content area, which for
   Bricolage is 0.93em above the baseline and 0.27em below (1.2em, hhea/typo metrics; the metric-matched fallback has
   the same). The deepest descenders reach 0.164em below the baseline (y 0.156, j 0.164). A mark fragment on the next
   line starts at (line-height - 0.93)em below the previous baseline, so it clears every descender only when
   line-height >= 0.93 + 0.164 = 1.094. 1.12 leaves 0.026em (about 2px at 74px, 1px at 38px). Keep mark padding-block 0. */
.h1{font-size:52px;line-height:1.12;max-width:900px}
.h1-hero{font-size:74px;line-height:1.12}
.demo{background:var(--ink);color:var(--ground);border:2px solid var(--ink);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px;box-shadow:12px 12px 0 var(--hot);transform:rotate(1.2deg)}
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.demo-label{font-size:12px;color:#A9A6BD}
.demo-tag{font-size:11px;font-weight:700;color:var(--ink);background:var(--lime);border-radius:99px;padding:3px 10px;white-space:nowrap}
.bubble-q{background:var(--hot);color:var(--ink);border-radius:14px 14px 4px 14px;padding:14px 16px;font-size:16px;font-weight:600;line-height:1.45;align-self:flex-end;max-width:88%}
.demo-code{font-size:13px;line-height:1.7;color:#C9C6D9;white-space:pre-wrap;margin:0}
.demo-code .t{color:var(--lime)}
.demo-rows{border-top:1px dashed var(--muted);padding-top:12px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.demo-rows div{display:flex;justify-content:space-between;gap:12px}
.demo-rows .mono{color:#A9A6BD;white-space:nowrap}
.bubble-a{background:#2A2740;border-radius:14px 14px 14px 4px;padding:12px 16px;font-size:14px;color:var(--ground);max-width:88%}
.marquee{background:var(--ink);color:var(--lime);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding:18px 0;transform:rotate(-1deg);margin:0 -20px}
.marquee span{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-0.01em;text-transform:uppercase}
.step-num{width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:22px}
.sec-dark{background:var(--ink);color:var(--ground)}
.tile{background:#221F33;border:1px solid #3A3652;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
.tile h3{font-size:20px}
.tile p{font-size:15px;line-height:1.55;color:#C9C6D9}
.math{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--yellow);transform:rotate(-0.6deg)}
.math p{font-size:24px;font-weight:800;font-family:var(--display);letter-spacing:-0.02em}

/* Home: access form */
.access{padding:104px 0;background:var(--hot);border-top:2px solid var(--ink)}
.access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:56px;align-items:center}
.access h2{font-size:64px;line-height:.98}
.access-form{display:flex;flex-direction:column;gap:16px;box-shadow:10px 10px 0 var(--ink)}
.access-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.access-form input,.access-form select{min-height:48px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:0 14px;font-size:15px;width:100%}
.access-form select{padding:0 12px}
.access-form .btn{margin-top:6px}
.ts-box{min-height:65px}
.form-msg{font-size:15px;font-weight:600;min-height:1.5em}
.form-msg:empty{display:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Sub-pages */
.page-top{padding:88px 0 56px}
.cta-band{padding:80px 0;background:var(--hot);color:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:32px}
.dark-card{background:var(--ink);color:#fff;border-color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.dark-card p{color:#C9C6D9;line-height:1.6}
.num-card{display:flex;gap:14px}
.num{color:var(--pink);font-weight:500}
.layer{background:#fff;border:1px solid #D4D4CF;border-radius:10px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.layer-db{justify-content:center;background:#F3F3EF}
.down{text-align:center;color:#9A9DA6}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.steps li{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:18px}
ul.chk{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
ul.chk li{padding-left:24px;position:relative;line-height:1.5}
ul.chk li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
.price{font-family:var(--display);font-size:36px;font-weight:800}
.pill{font-size:12px;font-weight:600;background:var(--ink);color:#fff;border-radius:99px;padding:4px 10px;white-space:nowrap}

/* Privacy and 404 */
.legal{padding-top:72px;padding-bottom:96px}
.legal>*{max-width:720px}
.legal h1{font-size:52px;line-height:1.05;margin:20px 0 18px}
.legal h2{font-size:30px;line-height:1.1;margin:44px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.6;color:#2A2D35}
.legal p+p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:10px 0 0}
.legal li+li{margin-top:8px}
.legal .updated{font-family:var(--mono);font-size:13px;color:var(--muted)}
.legal code{font-family:var(--mono);font-size:14px;background:#fff;border:1px solid var(--ink);border-radius:6px;padding:0 5px}

/* Footer */
.site-footer{padding:64px 0 40px;background:var(--ink);color:var(--ground);border-top:2px solid var(--ink)}
.foot{display:flex;flex-direction:column;gap:48px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.foot-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-tag{font-size:14px;color:#C9C6D9}
.foot-h{font-weight:700;font-size:14px}
.fl{color:#C9C6D9;text-decoration:none;font-size:14px}.fl:hover{color:var(--lime)}
.cookie-link{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.big{font-family:var(--display);font-weight:800;font-size:180px;line-height:.85;letter-spacing:-0.05em;color:var(--hot)}
.foot-copy{font-size:13px;color:#A9A6BD}

/* Consent banner */
.consent{position:fixed;z-index:50;right:16px;bottom:16px;width:min(440px,calc(100vw - 32px));background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:18px 20px;font-size:15px;line-height:1.45}
.consent[hidden]{display:none}
.consent p{margin:0 0 14px}
.consent p b{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.consent-btns{display:flex;gap:12px;flex-wrap:wrap}

/* Phones. The mockup hides the nav links; here they move into a panel opened by the menu button
   (shown only when site.js runs; without JS every page is still linked from the footer). */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .hide-m{display:none !important}
  .hdr{height:68px;gap:12px}
  .hdr-actions .btn{min-height:42px;padding:0 16px;font-size:14px}
  .links{display:none}
  .js .menu-btn{display:inline-flex}
  .js .links.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:2px solid var(--ink);padding:8px 16px 16px;box-shadow:0 8px 0 rgba(20,18,31,.15)}
  .js .links.open .nl{padding:14px 0;font-size:17px;border-bottom:1px solid #3A3652}
  .js .links.open .nl:last-child{border-bottom:0}
  .nl-m{display:block}
  .h1{font-size:38px !important}
  .h1-hero{font-size:46px !important}
  .h2-main{font-size:38px}
  .access h2{font-size:48px}
  .access-form input,.access-form select{font-size:16px} /* 16px: iOS does not zoom into the field */
  .big{font-size:72px}
  .legal{padding-top:48px;padding-bottom:72px}
  .legal h1{font-size:38px}
  .consent{left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;border-width:2px 0 0;box-shadow:none;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .consent-btns .btn{flex:1}
}
@media (max-width:420px){
  .logo{font-size:20px}
  .hdr-actions{gap:8px}
}