/* hookforge.nl v2 — tokens, surfaces, motion, layout. Ported from the Claude Design
   handoff (Design System Hookforge Site v2 handoff/README-design.md). Layout values
   live inline on the elements (handoff convention); this file holds tokens, shared
   components, the motion vocabulary and the responsive overrides. */

/* ---- tokens ---- */
:root,[data-theme="dark"]{--hf-ground:#16130F;--hf-panel:#1E1A15;--hf-panel-hover:#1B1712;--hf-seam:#383226;--hf-seam-60:rgba(56,50,38,.6);--hf-text:#E8E2D6;--hf-muted:#A89D89;--hf-ghost:#6B6250;--hf-ember:#E1622F;--hf-ember-hover:#E86A38;--hf-ember-text:#F2A65A;--hf-ember-deep:#8C2F0D;--hf-glass:rgba(30,26,21,.72);--hf-glass-hl:rgba(232,226,214,.06);--hf-glass-shadow:0 12px 32px rgba(0,0,0,.45);--hf-curve:.10;--hf-on-ember:#16130F;--hf-mono:'Cascadia Mono',Consolas,ui-monospace,monospace;--hf-ui:'Segoe UI',system-ui,-apple-system,sans-serif;--gx:48px;--sy:88px;color-scheme:dark}
[data-theme="light"]{--hf-ground:#F4F1EA;--hf-panel:#FBF9F5;--hf-panel-hover:#F0ECE3;--hf-seam:#D9D3C5;--hf-seam-60:rgba(217,211,197,.6);--hf-text:#16130F;--hf-muted:#6B6250;--hf-ghost:#A89D89;--hf-ember-text:#B8461A;--hf-glass:rgba(251,249,245,.72);--hf-glass-hl:rgba(255,255,255,.6);--hf-glass-shadow:0 12px 32px rgba(22,19,15,.12);--hf-curve:.14;color-scheme:light}

/* ---- base ---- */
html,body{margin:0;background:var(--hf-ground);color:var(--hf-text);font-family:var(--hf-ui);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
code{font-family:var(--hf-mono);font-variant-numeric:tabular-nums}
a{color:var(--hf-ember-text);text-decoration:none}a:hover{color:var(--hf-ember)}
button,input,select{font-family:inherit}
img,video{max-width:100%}
::selection{background:#E1622F;color:#16130F}
:focus-visible{outline:2px solid var(--hf-ember-text);outline-offset:2px}
input::placeholder{color:var(--hf-ghost)}
select option{background:var(--hf-panel);color:var(--hf-text)}
[hidden]{display:none!important}
.only-light{display:none}
[data-theme="light"] .only-light{display:inline-block}
[data-theme="light"] .only-dark{display:none}
.hf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.hf-form-err{font-family:var(--hf-mono);font-size:10.5px;letter-spacing:.06em;color:var(--hf-ember);line-height:1.5}

/* Home only: below-fold sections skip layout and paint until they approach the viewport. Measured: -250 ms TBT on Home, +250 ms on Pricing (the matrix re-lays out on reveal), so opt-in per page. */
main.hf-cv > section + section{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---- surfaces: L2 frosted iron ---- */
[data-glass]{background:var(--hf-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--hf-seam-60);box-shadow:inset 0 1px 0 var(--hf-glass-hl),var(--hf-glass-shadow)}
@supports not (backdrop-filter:blur(1px)){[data-glass]{background:var(--hf-panel)!important}}

/* ---- motion vocabulary ---- */
@property --hf-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes hf-trace{to{--hf-a:360deg}}
@keyframes hf-draw{to{stroke-dashoffset:0}}
@keyframes hf-dot{0%{offset-distance:0%;opacity:0}5%{opacity:1}95%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes hf-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-beam]{position:relative;isolation:isolate}
[data-beam]::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--hf-a),transparent 0 70%,#F2A65A 85%,#E1622F 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none}
[data-beam]:hover::after,[data-beam]:focus-visible::after,[data-beam="on"]::after{opacity:1;animation:hf-trace 2.2s linear infinite}
@keyframes hf-beam{0%{left:-260px;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
[data-hf-sep]{position:relative;overflow-x:clip}
[data-hf-sep]::after{content:"";position:absolute;top:-1px;left:-260px;width:260px;height:1px;background:linear-gradient(90deg,transparent,#F2A65A,#E1622F,transparent);box-shadow:0 0 12px rgba(225,98,47,.6);animation:hf-beam 8s linear infinite;pointer-events:none}
[data-hf-sep="2"]::after{animation-delay:-1.7s}[data-hf-sep="3"]::after{animation-delay:-3.4s}[data-hf-sep="4"]::after{animation-delay:-5.1s}[data-hf-sep="5"]::after{animation-delay:-6.8s}
@keyframes hf-dotx{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}
@keyframes hf-doty{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}
[data-hf-flow]{position:relative}
[data-hf-flow] > [data-hf-dot]{position:absolute;width:6px;height:6px;border-radius:50%;background:#F2A65A;box-shadow:0 0 10px rgba(225,98,47,.9)}
[data-hf-flow="h"] > [data-hf-dot]{top:50%;margin-top:-3px;left:0;animation:hf-dotx 2.4s ease-in-out infinite}
[data-hf-flow="v"] > [data-hf-dot]{left:50%;margin-left:-3px;top:0;animation:hf-doty 2.4s ease-in-out infinite}
[data-hf-lift]{transition:transform .38s ease,border-color .38s ease,box-shadow .38s ease}
[data-hf-lift]:hover{transform:translateY(-3px);border-color:#E1622F!important;box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 24px rgba(225,98,47,.12)}
/* draw-in: paths carry pathLength=1 + dashoffset 1 in markup; the animation starts once .in lands (IntersectionObserver in site.js) */
.hf-draw{animation:hf-draw .9s ease-out forwards;animation-play-state:paused}
.in .hf-draw,.hf-draw.in{animation-play-state:running}
/* the once-only traveling dot on "The loop" seam track */
.hf-track-dot{position:absolute;left:12.5%;top:-20px;width:6px;height:6px;border-radius:50%;background:#F2A65A;box-shadow:0 0 8px rgba(242,166,90,.7);offset-path:path('M0 0H1008');opacity:0}
.in > .hf-track-dot{animation:hf-dot 2.4s ease-in-out 1s 1 forwards}
.hf-reveal{animation:hf-reveal .2s ease}
.hf-rows{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.hf-rows.open{grid-template-rows:1fr}
.hf-rows > div{overflow:hidden;min-height:0}
.hf-chev{transition:transform .35s ease}
[aria-expanded="true"] > .hf-chev,[aria-expanded="true"] > span > .hf-chev{transform:rotate(180deg)}

/* ---- nav (72px, transparent at top, frosted after 40px) ---- */
.hf-nav{position:sticky;top:0;z-index:20;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;border-bottom:1px solid transparent}
.hf-nav.scrolled{background:var(--hf-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hf-seam-60);box-shadow:inset 0 1px 0 var(--hf-glass-hl),var(--hf-glass-shadow)}
@supports not (backdrop-filter:blur(1px)){.hf-nav.scrolled{background:var(--hf-panel)}}
.hf-nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--gx);max-width:1440px;margin:0 auto;gap:16px}
.hf-lockup{display:flex;align-items:center;gap:12px;color:var(--hf-text)}
.hf-nav-links{display:flex;gap:26px;font-size:14px}
.hf-nav-links a{color:var(--hf-text);transition:color .35s ease;padding-bottom:2px}
.hf-nav-links a:hover{color:var(--hf-ember-text)}
.hf-nav-links a[aria-current="page"]{color:var(--hf-ember-text);box-shadow:inset 0 -2px 0 var(--hf-ember)}
.hf-nav-right{display:flex;align-items:center;gap:18px}
.hf-signin{font-size:13px;color:var(--hf-muted);transition:color .35s ease}.hf-signin:hover{color:var(--hf-text)}
.hf-btn{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:4px;background:var(--hf-ember);color:var(--hf-on-ember);font-weight:600;font-size:15px;transition:background .35s ease;border:none;cursor:pointer}
.hf-btn:hover{background:var(--hf-ember-hover);color:var(--hf-on-ember)}
.hf-btn-nav{height:38px;padding:0 16px;font-size:14px;white-space:nowrap}
.hf-cta-short{display:none}
.hf-burger{display:none;width:44px;height:44px;background:none;border:none;color:var(--hf-text);cursor:pointer;align-items:center;justify-content:center;padding:0}
.hf-sheet{position:absolute;left:0;right:0;top:100%;z-index:8;border-radius:0;border-left:0;border-right:0;padding:12px 16px 20px;display:flex;flex-direction:column;gap:2px;animation:hf-reveal .2s ease}
.hf-sheet a{padding:12px 8px;font-size:16px;color:var(--hf-text)}
.hf-sheet a[aria-current="page"]{color:var(--hf-ember-text)}
.hf-sheet .hf-signin{font-size:14px;color:var(--hf-muted)}
.hf-footer-links a{color:var(--hf-muted);transition:color .35s ease}.hf-footer-links a:hover{color:var(--hf-ember-text)}

/* ---- hero video (shipped position) ---- */
.hf-hero-bg video{position:absolute;top:40px;left:52%;width:820px;aspect-ratio:16/9;object-fit:cover;opacity:.6;display:block;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 46% 56%,#000 32%,rgba(0,0,0,.6) 55%,transparent 78%);mask-image:radial-gradient(ellipse 58% 62% at 46% 56%,#000 32%,rgba(0,0,0,.6) 55%,transparent 78%)}
.hf-hero-bg .hf-hero-poster{display:none}
.hf-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--hf-ground) 0%,rgba(22,19,15,.7) 38%,rgba(22,19,15,.15) 58%,rgba(22,19,15,0) 100%),linear-gradient(180deg,rgba(22,19,15,.5) 0%,rgba(22,19,15,0) 22%,rgba(22,19,15,0) 62%,var(--hf-ground) 100%)}
[data-theme="light"] .hf-hero-fade{background:linear-gradient(90deg,var(--hf-ground) 0%,rgba(244,241,234,.7) 38%,rgba(244,241,234,.15) 58%,rgba(244,241,234,0) 100%),linear-gradient(180deg,rgba(244,241,234,.5) 0%,rgba(244,241,234,0) 22%,rgba(244,241,234,0) 62%,var(--hf-ground) 100%)}
[data-theme="light"] .hf-hero-bg video{opacity:.55}

/* ---- pricing: sticky bars ---- */
.hf-sticky{position:fixed;left:0;right:0;top:0;z-index:19;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gx);border-radius:0;border-left:0;border-right:0;border-top:0;transform:translateY(-100%);transition:transform .35s ease}
.hf-sticky.on{transform:none}
.hf-sticky-m{position:fixed;left:0;right:0;bottom:0;z-index:19;height:64px;display:none;align-items:center;justify-content:space-between;padding:0 16px;border-radius:0;border-left:0;border-right:0;border-bottom:0}
.hf-matrix-head{position:sticky;top:72px;z-index:2}
.hf-theme{width:44px;height:24px;border-radius:12px;border:1px solid var(--hf-seam);background:var(--hf-panel);position:relative;cursor:pointer;padding:0}
.hf-theme span{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--hf-ember);transition:left .35s ease}
[data-theme="light"] .hf-theme span{left:22px}
.hf-theme-label::after{content:'IRON'}
[data-theme="light"] .hf-theme-label::after{content:'PAPER'}

/* ---- Klaro consent, repainted as frosted iron ---- */
.klaro{--font-family:var(--hf-ui);--title-font-family:var(--hf-ui);--font-size:14px;--border-radius:4px;--border-width:1px;--dark1:#16130F;--dark2:#1E1A15;--dark3:#383226;--light1:#E8E2D6;--light2:#A89D89;--light3:#A89D89;--white2:#E8E2D6;--white3:#A89D89;--green1:#E1622F;--green2:#E86A38;--green3:#F2A65A;--blue1:#E1622F;--blue2:#E86A38;--button-text-color:#16130F;--notice-max-width:460px}
.klaro .cookie-notice:not(.cookie-modal-notice){background:var(--hf-glass)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--hf-seam-60);box-shadow:inset 0 1px 0 var(--hf-glass-hl),var(--hf-glass-shadow);border-radius:6px}
[data-theme="light"] .klaro{--dark1:#F4F1EA;--dark2:#FBF9F5;--dark3:#D9D3C5;--light1:#16130F;--light2:#6B6250;--light3:#6B6250;--white2:#16130F;--white3:#6B6250;--green3:#B8461A}
.klaro .cookie-notice a,.klaro .cookie-modal a{color:var(--hf-ember-text)}
.klaro .cn-decline{color:var(--hf-muted)!important}

/* the schematic block is drawn for a 640px column; site.js scales it down in narrower columns above 1020px */
.hf-schematic{width:640px;max-width:100%;transform-origin:top left;margin:0 auto}

/* ---- responsive ---- */
@media (max-width:1100px){.hf-legal-grid{grid-template-columns:1fr!important}.hf-legal-rail{display:none}}
@media (max-width:1020px){
  .gc5,.gc4{grid-template-columns:1fr 1fr!important}
  .gc3,.gc2{grid-template-columns:1fr!important}
  .gc2>*,.gc3>*,.gc4>*,.gc5>*{min-width:0}
  .hf-demo{grid-template-columns:1fr!important;gap:16px}
  .hf-demo [data-hf-flow="h"]{display:none}
  .hf-schematic{height:auto!important;min-height:0;width:auto!important;transform:none!important;margin:0!important}
  .hf-schematic img{position:static!important;transform:none!important;height:auto!important;width:100%!important;max-width:100%!important;max-height:520px;object-fit:contain}
  .hf-schematic .hf-co,.hf-schematic svg{display:none!important}
  .hf-track-line,.hf-track-dot{display:none}
  .hf-nav-links{display:none}
  .hf-burger{display:flex}
  .hf-sticky{display:none}
  .hf-loop-labels code{font-size:9px!important}
}
@media (max-width:720px){
  :root,[data-theme="dark"],[data-theme="light"]{--gx:20px;--sy:48px}
  .gc5,.gc4{grid-template-columns:1fr!important}
  h1[style*="font-size:52px"]{font-size:36px!important}
  h2[style*="font-size:34px"]{font-size:26px!important}
  h2[style*="font-size:40px"]{font-size:30px!important}
  .hf-nav-in{height:56px}
  .hf-nav-right .hf-signin,.hf-by,.hf-cta-long{display:none}
  .hf-cta-short{display:inline}
  .hf-lockup img{height:22px!important}
  .hf-btn-nav{height:36px;padding:0 12px;font-size:13px}
  .hf-hero-bg video{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;object-position:40% 60%;opacity:.45;-webkit-mask-image:none;mask-image:none}
  .hf-hero-fade{background:linear-gradient(180deg,rgba(22,19,15,.35) 0%,rgba(22,19,15,.62) 45%,var(--hf-ground) 100%)}
  [data-theme="light"] .hf-hero-fade{background:linear-gradient(180deg,rgba(244,241,234,.35) 0%,rgba(244,241,234,.62) 45%,var(--hf-ground) 100%)}
  .hf-matrix{overflow-x:auto!important}.hf-matrix > div{min-width:860px}.hf-matrix-head{top:56px}
  .hf-shift-table,.hf-calc{overflow-x:auto!important}.hf-shift-table > div{min-width:560px}
  .hf-sticky-m{display:flex}
  .hf-sticky-pad{padding-bottom:80px}
  .hf-act1{height:auto!important;min-height:520px}
  .hf-act1 img{opacity:.55}
  .hf-act1 > div:last-child{margin-left:0!important;max-width:none!important}
  .hf-band{flex-direction:column;align-items:flex-start!important}
  .hf-band > div:last-child{flex-wrap:wrap}
  .hf-popover{left:0!important;right:0!important;top:auto!important;bottom:-8px!important;width:auto!important}
  .hf-strip-card{padding:24px 18px 18px!important}
  .hf-founder-form{grid-template-columns:1fr!important}
  .hf-footer{padding:32px 20px!important}
  .hf-footer > div{flex-direction:column;align-items:flex-start!important;gap:20px}
  .hf-loop-caption{display:none}
}

/* ---- mobile friendliness (<=720): readable mono, 44px targets, no iOS focus zoom, poster instead of video ---- */
@media (max-width:720px){
  [style*="font-size:6.5px"],[style*="font-size:7.5px"],[style*="font-size:8px"],[style*="font-size:8.5px"]{font-size:10px!important}
  [style*="font-size:9px"],[style*="font-size:9.5px"]{font-size:11px!important}
  [style*="font-size:10px"],[style*="font-size:10.5px"]{font-size:11.5px!important}
  [style*="font-size:11px"],[style*="font-size:11.5px"]{font-size:12px!important}
  [style*="font-size:12px"],[style*="font-size:12.5px"],[style*="font-size:13px"],[style*="font-size:13.5px"]{font-size:14px!important}
  [style*="font-size:14px"],[style*="font-size:14.5px"]{font-size:15px!important}
  input,select,textarea{font-size:16px!important}
  p a,li a{display:inline-block;padding:6px 0}
  .hf-footer-links{gap:4px 18px!important}.hf-footer-links a{padding:10px 0;display:inline-block}
  .hf-legal-rail{display:none}
  [data-billing]{height:44px!important}
  input[type=range]{height:32px}
  .hf-theme-wrap{padding:10px 0}
  .hf-hero-bg video{display:none}
  .hf-hero-bg .hf-hero-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 60%;opacity:.45}
  .hf-strip-card code[style*="font-size:30px"]{font-size:26px!important}
  /* matrix: one tier at a time, picked with the segmented control */
  .hf-tierpick{display:grid!important}
  .hf-matrix .hf-mrow{grid-template-columns:1fr auto!important;gap:10px}
  .hf-matrix .hf-mrow > :not(:first-child){display:none!important}
  .hf-matrix[data-tier="0"] .hf-mrow > :nth-child(2),.hf-matrix[data-tier="1"] .hf-mrow > :nth-child(3),.hf-matrix[data-tier="2"] .hf-mrow > :nth-child(4),.hf-matrix[data-tier="3"] .hf-mrow > :nth-child(5){display:flex!important;justify-content:flex-end;text-align:right}
  /* calculator rows: name + total on one line, bar and per-account underneath */
  .hf-calc [data-calc]{grid-template-columns:1fr auto!important;min-width:0!important;gap:6px 12px!important}
  .hf-calc [data-calc] > :nth-child(1){order:1}.hf-calc [data-calc] > :nth-child(3){order:2}.hf-calc [data-calc] > :nth-child(2){order:3;grid-column:1/-1}.hf-calc [data-calc] > :nth-child(4){order:4;grid-column:1/-1}
  .hf-calc{overflow:visible!important}
  /* the 23:00 table: time | tool over what | cost, no sideways scroll */
  .hf-shift-table{overflow:hidden!important}.hf-shift-table > div{min-width:0!important}
  .hf-shift-table .nogc:first-child{display:none!important}
  .hf-shift-table .nogc{grid-template-columns:52px 1fr 56px!important;gap:2px 8px}
  .hf-shift-table .nogc > :nth-child(1){grid-row:1;grid-column:1}.hf-shift-table .nogc > :nth-child(2){grid-row:1;grid-column:2}.hf-shift-table .nogc > :nth-child(3){grid-row:2;grid-column:2}.hf-shift-table .nogc > :nth-child(4){grid-row:1;grid-column:3}
  /* step-up line stacks: arrows point down */
  .gc5[style*="1fr 40px 1fr 40px 1fr"] svg{transform:rotate(90deg);justify-self:start;margin:6px 0 6px 14px}
  /* text links in copy get a thumb-sized hit area */
  main div > a:not(.hf-btn):not([data-beam]){display:inline-block;padding:8px 0}
  .hf-matrix{overflow:visible!important}.hf-matrix > div{min-width:0!important}
  .hf-matrix-head > :first-child{display:none}
}
.hf-tierpick{display:none;grid-template-columns:repeat(4,1fr);border:1px solid var(--hf-seam);border-radius:4px;padding:3px;background:var(--hf-ground);gap:2px}
.hf-tierpick button{height:40px;border-radius:3px;border:none;cursor:pointer;font-family:var(--hf-mono);font-size:9px;letter-spacing:.06em;background:transparent;color:var(--hf-muted)}
.hf-tierpick button[aria-pressed="true"]{background:var(--hf-ember);color:#16130F}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-beam="on"]::after{background:none;border:1px solid #F2A65A;padding:0;opacity:1}
  [data-hf-sep]::after,[data-hf-dot],.hf-track-dot,.hf-loop-dot{display:none}
  .hf-hero-bg video{display:none}
  .hf-hero-bg .hf-hero-poster{display:block;position:absolute;top:40px;left:52%;width:820px;aspect-ratio:16/9;object-fit:cover;opacity:.6;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 46% 56%,#000 32%,rgba(0,0,0,.6) 55%,transparent 78%);mask-image:radial-gradient(ellipse 58% 62% at 46% 56%,#000 32%,rgba(0,0,0,.6) 55%,transparent 78%)}
  .hf-draw{stroke-dashoffset:0!important}
  html{scroll-behavior:auto}
}

/* ---- template hooks (added after the page pass) ---- */
@media (max-width:1020px){
  .hf-studio-row{grid-template-columns:1fr!important}
  .hf-tiles{grid-template-columns:repeat(4,1fr)!important}
}
@media (max-width:720px){
  .hf-creations{grid-template-columns:1fr!important}
  .hf-creations > div:first-child{display:none}
  .hf-tiles{grid-template-columns:repeat(3,1fr)!important}
  .hf-where{grid-template-columns:1fr!important;gap:4px}
  .hf-oneoff{grid-template-columns:44px 1fr!important}
  .hf-oneoff > code:last-child{grid-column:2;text-align:left!important}
}