/* Inazda Landing · one markup, three skins (paper · graphite · glass), each in light and dark.
   Skins only set tokens (--l-* light, --d-* dark, plus type and shape). Accent tints (--ac*) come from boot.js.
   Fonts: Geist (UI, all skins) + Instrument Serif (Paper display). */

/* ---------------- skin tokens ---------------- */
:root,:root[data-skin="paper"]{
  --l-bg:#F4EFE6; --l-bg2:#ECE5D9; --l-card:#FBF8F2; --l-fg:#1C1915; --l-muted:#5C554A; --l-line:rgba(28,25,21,.15); --l-veil:rgba(244,239,230,.86);
  --d-bg:#191714; --d-bg2:#1F1C18; --d-card:#24211D; --d-fg:#F2EDE4; --d-muted:#B3AA9B; --d-line:rgba(242,237,228,.15); --d-veil:rgba(25,23,20,.86);
  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif; --display-w:400; --display-track:-.012em; --display-lh:.94; --em-style:italic;
  --h1:clamp(52px,6.6vw,110px); --h2:clamp(40px,4.6vw,72px);
  --r:6px; --r-lg:12px; --plate-pad:10px; --plate-bg:var(--card);
  --grain:.5;
}
:root[data-skin="graphite"]{
  --l-bg:#ECEEF1; --l-bg2:#E3E6EA; --l-card:#F7F8FA; --l-fg:#14171C; --l-muted:#535A64; --l-line:rgba(20,23,28,.13); --l-veil:rgba(236,238,241,.86);
  --d-bg:#0F1114; --d-bg2:#13161A; --d-card:#181B20; --d-fg:#E9ECF0; --d-muted:#9CA4AF; --d-line:rgba(233,236,240,.12); --d-veil:rgba(15,17,20,.86);
  --display:"Geist", ui-sans-serif, system-ui, sans-serif; --display-w:600; --display-track:-.045em; --display-lh:.98; --em-style:normal;
  --h1:clamp(44px,5.6vw,92px); --h2:clamp(34px,3.8vw,60px);
  --r:10px; --r-lg:16px; --plate-pad:0px; --plate-bg:transparent;
  --grain:0;
}
:root[data-skin="glass"]{
  --l-bg:#EEEAE6; --l-bg2:#E7E2DC; --l-card:#FBFAF8; --l-fg:#17181B; --l-muted:#55585E; --l-line:rgba(23,24,27,.13); --l-veil:rgba(238,234,230,.8);
  --d-bg:#121316; --d-bg2:#17191D; --d-card:#1D1F23; --d-fg:#ECEDEF; --d-muted:#A3A7AE; --d-line:rgba(236,237,239,.12); --d-veil:rgba(18,19,22,.8);
  --display:"Geist", ui-sans-serif, system-ui, sans-serif; --display-w:600; --display-track:-.04em; --display-lh:.98; --em-style:normal;
  --h1:clamp(44px,5.4vw,88px); --h2:clamp(34px,3.8vw,60px);
  --r:14px; --r-lg:22px; --plate-pad:0px; --plate-bg:transparent;
  --grain:0;
}

/* ---------------- theme mapping (one place) ---------------- */
:root{
  --bg:var(--l-bg); --bg2:var(--l-bg2); --card:var(--l-card); --fg:var(--l-fg); --muted:var(--l-muted); --line:var(--l-line); --veil:var(--l-veil);
  color-scheme:light;
  --ac:#2E5BE6; --ac-fill:#2E5BE6; --ac-on:#fff; --ac-soft:#e6e9f5; --ac-soft-2:#d8ddf3; --ac-edge:transparent;
  --gut:clamp(16px,4.2vw,56px); --max:1320px;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.3,1.35,.5,1);
  --ui:"Geist", ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="dark"]{--bg:var(--d-bg); --bg2:var(--d-bg2); --card:var(--d-card); --fg:var(--d-fg); --muted:var(--d-muted); --line:var(--d-line); --veil:var(--d-veil); color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:var(--d-bg); --bg2:var(--d-bg2); --card:var(--d-card); --fg:var(--d-fg); --muted:var(--d-muted); --line:var(--d-line); --veil:var(--d-veil); color-scheme:dark}}

/* Inazda UI reads these */
:root,:root[data-theme="dark"]{
  --iz-bg:var(--bg); --iz-fg:var(--fg); --iz-card:var(--card); --iz-muted:var(--bg2); --iz-muted-fg:var(--muted); --iz-border:var(--line);
  --iz-primary:var(--ac-fill); --iz-primary-fg:var(--ac-on); --iz-ring:var(--ac); --iz-font:var(--ui);
  --iz-viz-surface:var(--card); --iz-viz-1:var(--ac); --iz-viz-2:color-mix(in srgb,var(--muted) 55%,var(--bg)); --iz-viz-ink:var(--muted);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--iz-bg:var(--bg); --iz-fg:var(--fg); --iz-card:var(--card); --iz-muted:var(--bg2); --iz-muted-fg:var(--muted); --iz-border:var(--line); --iz-primary:var(--ac-fill); --iz-primary-fg:var(--ac-on); --iz-ring:var(--ac)}}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:84px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16.5px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .4s var(--ease),color .4s var(--ease)}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.iz-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:500;padding:10px 14px;border-radius:8px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.iz-i{width:1em;height:1em;flex:none}
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:calc(var(--grain) * .5);mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-resolved-theme="dark"] body::after{mix-blend-mode:screen;opacity:calc(var(--grain) * .25)}

.display{font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--display-track);line-height:var(--display-lh);text-wrap:balance}
.display em{font-style:var(--em-style);color:var(--ac)}
:root[data-skin="graphite"] .display em,:root[data-skin="glass"] .display em{background:linear-gradient(transparent 82%,var(--ac-soft-2) 82%);padding:0 .04em}
.kicker{font:600 13px/1.2 var(--ui);letter-spacing:.02em;color:var(--muted);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--ac)}
.sec-h{font-size:var(--h2);margin-top:14px}
.sec-head{max-width:var(--max);width:calc(100% - 2 * var(--gut));margin:0 auto}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.sec-lede{color:var(--muted);max-width:46ch}
section{position:relative}

/* buttons: the accent fill with a derived label colour; an inner ring only if the fill is too close to the page */
.iz-btn.ld-btn{background:var(--ac-fill);color:var(--ac-on);box-shadow:inset 0 0 0 1.5px var(--ac-edge);transition:transform .25s var(--spring),filter .2s,background-color .3s}
.iz-btn.ld-btn:hover{filter:brightness(1.07)}
.iz-btn.ld-btn:active{transform:scale(.97)}
.iz-btn{font-family:var(--ui);border-radius:calc(var(--r) + 2px)}
:root[data-skin="glass"] .iz-btn{border-radius:999px}
.text-link{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.2 var(--ui);color:var(--fg);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding:6px 0;transition:background-size .35s var(--ease),color .2s}
.text-link:hover{color:var(--ac);background-size:0 1.5px;background-position:100% 100%}
.text-link.as-btn{border:0;background-color:transparent;cursor:pointer;font-size:15px}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:0;background:transparent;color:var(--fg);cursor:pointer;font-size:18px;transition:background-color .2s}
.icon-btn:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}

/* ---------------- loader (CSS fallback hides it even if JS never runs) ---------------- */
.ld{position:fixed;inset:0;z-index:400;display:none;place-items:center;align-content:center;gap:14px;background:var(--bg);color:var(--fg)}
.js.ld-pending .ld{display:grid;animation:ld-out .01s 2.4s forwards}
.ld-mark{width:64px;height:64px;color:var(--ac)}
.ld-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:ld-draw .9s var(--ease) .1s forwards}
.ld-name{font:600 15px/1 var(--ui);letter-spacing:.01em;opacity:0;animation:ld-fade .5s .45s forwards}
.ld.is-out{opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
@keyframes ld-draw{to{stroke-dashoffset:0}}
@keyframes ld-fade{to{opacity:1}}
@keyframes ld-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.js.ld-pending .ld{display:none}}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:50;background:var(--veil);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s,background-color .4s}
.top.is-stuck{border-bottom-color:var(--line)}
.top-in{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut);height:68px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:650 19px/1 var(--ui);letter-spacing:-.02em}
.brand-mark{width:28px;height:28px;color:var(--ac)}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font:500 14.5px/1.2 var(--ui);color:var(--muted);transition:color .2s,background-color .2s}
.nav a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.top-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-link{font:500 14.5px/1.2 var(--ui);text-decoration:none;padding:8px 6px}
.top-link:hover{color:var(--ac)}

/* ---------------- hero ---------------- */
.hero{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:clamp(28px,5vh,64px) var(--gut) clamp(56px,9vh,110px);display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:clamp(24px,3vw,48px);align-items:center;min-height:calc(100svh - 68px)}
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:2}
.hero-art{grid-column:2;grid-row:1;position:relative;z-index:1}
.eyebrow{font:600 14px/1.2 var(--ui);color:var(--ac);margin-bottom:22px}
.hero h1{font-size:var(--h1)}
.lede{margin-top:26px;max-width:44ch;font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.meta{margin-top:18px;font-size:14px;color:var(--muted)}
.plate{position:relative;border-radius:var(--r-lg);background:var(--plate-bg);padding:var(--plate-pad);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(30,20,10,.45)}
.plate img{width:100%;border-radius:calc(var(--r-lg) - var(--plate-pad) / 2);aspect-ratio:16/10;object-fit:cover}
.plate figcaption{display:flex;justify-content:flex-end;gap:12px;padding:10px 4px 2px;font:500 12.5px/1.3 var(--ui);color:var(--muted)}
:root[data-skin="graphite"] .plate{box-shadow:0 0 0 1px var(--line)}
:root[data-skin="graphite"] .plate figcaption{position:absolute;right:14px;bottom:12px;padding:6px 10px;border-radius:8px;background:var(--veil);color:var(--fg)}
:root[data-skin="graphite"] .hero-art::before{content:"";position:absolute;inset:-28px;z-index:-1;border-radius:var(--r-lg);
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 28px;mask-image:radial-gradient(closest-side,#000 55%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent)}

/* Glass: the render becomes the hero's ground; copy sits in a text-safe glass panel */
:root[data-skin="glass"] .hero{grid-template-columns:minmax(0,6fr) minmax(0,6fr);max-width:none;padding-left:max(var(--gut),calc((100vw - var(--max)) / 2));padding-right:max(var(--gut),calc((100vw - var(--max)) / 2));isolation:isolate}
:root[data-skin="glass"] .hero-art{position:absolute;inset:0;grid-column:auto;z-index:-1}
:root[data-skin="glass"] .plate{height:100%;border-radius:0;box-shadow:none}
:root[data-skin="glass"] .plate picture{display:block;height:100%}
:root[data-skin="glass"] .plate img{height:100%;aspect-ratio:auto;border-radius:0;object-position:68% 50%}
:root[data-skin="glass"] .plate figcaption{position:absolute;right:var(--gut);bottom:18px;padding:7px 12px;border-radius:999px;background:var(--iz-glass-thick);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--fg)}
:root[data-skin="glass"] .hero-copy{padding:clamp(26px,3vw,44px);border-radius:var(--r-lg);background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));box-shadow:inset 0 1px 0 var(--iz-glass-highlight),inset 0 0 0 1px var(--iz-glass-border),var(--iz-glass-shadow)}
:root[data-skin="glass"] .hero .lede{color:var(--fg);opacity:.86}
:root[data-skin="glass"] .hero .eyebrow{color:var(--fg);display:flex;align-items:center;gap:10px}
:root[data-skin="glass"] .hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--ac-fill);box-shadow:0 0 0 3px var(--ac-soft-2)}
:root[data-skin="glass"] .hero h1{font-size:clamp(40px,4.8vw,80px)}

/* the live window */
.demo-zone{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.demo{position:absolute;left:47%;top:58%;width:min(330px,82vw);border-radius:16px;color:var(--fg);pointer-events:auto;touch-action:none;background:color-mix(in srgb,var(--card) 90%,transparent)!important;
  -webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));
  box-shadow:inset 0 1px 0 var(--iz-glass-highlight),inset 0 0 0 1px var(--iz-glass-border),0 0 0 1px var(--iz-glass-edge),0 26px 50px -24px rgba(20,16,10,.5);will-change:transform}
.demo.is-drag{box-shadow:inset 0 1px 0 var(--iz-glass-highlight),inset 0 0 0 1px var(--iz-glass-border),0 0 0 1px var(--iz-glass-edge),0 44px 80px -28px rgba(20,16,10,.6)}
.demo-bar{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);cursor:grab;border-radius:16px 16px 0 0}
.demo-bar:active{cursor:grabbing}
.demo-bar:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.grab{opacity:.5;font-size:16px}
.demo-title{font:600 13.5px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ring{width:22px;height:22px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring-bg{stroke:color-mix(in srgb,var(--fg) 12%,transparent)}
.ring-fg{stroke:var(--ac);stroke-dasharray:100;stroke-dashoffset:50;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.demo-count{font:500 12.5px/1 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-list{padding:8px 8px 10px}
.demo-list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;font:500 14px/1.3 var(--ui);transition:background-color .2s}
.demo-list li:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.demo-list li em{font:500 12px/1 var(--ui);font-style:normal;color:color-mix(in srgb,var(--muted) 55%,var(--fg));padding:4px 7px;border-radius:6px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.demo-list li:has([aria-checked="true"]) span{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.demo-list .iz-check{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fg) 40%,transparent)}
.demo-list .iz-check[aria-checked="true"]{box-shadow:none}
.demo-done{margin:0 16px 14px;padding:10px 12px;border-radius:10px;background:var(--ac-soft);color:var(--fg);font:600 13.5px/1.3 var(--ui)}
.demo-hint{position:absolute;left:47%;top:calc(58% - 34px);font:500 12.5px/1 var(--ui);color:var(--muted);padding:6px 10px;border-radius:999px;background:var(--veil);transition:opacity .4s}
.demo-zone.is-used .demo-hint{opacity:0}
:root[data-skin="glass"] .demo{left:auto;right:max(var(--gut),calc((100vw - var(--max)) / 2 + 20px));top:22%}
:root[data-skin="glass"] .demo-hint{left:auto;right:max(var(--gut),calc((100vw - var(--max)) / 2 + 20px));top:calc(22% - 34px)}

/* ---------------- how it works ---------------- */
.how{padding:clamp(64px,10vh,120px) 0 0}
.how-pin{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut);min-height:100svh;display:grid;align-content:center;gap:clamp(24px,4vh,48px);padding-block:72px 48px}
.how-head .sec-h{max-width:16ch}
.how-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.how-plate{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg2);box-shadow:0 0 0 1px var(--line)}
.how-plate canvas,.how-still{display:block;width:100%;aspect-ratio:16/10}
.how-still{position:absolute;inset:0;height:auto;object-fit:cover}
.js .how-still{opacity:0}
.how-plate figcaption{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;gap:10px;font:500 12px/1 var(--ui);color:#2a2622}
.how-plate figcaption span{padding:6px 9px;border-radius:999px;background:rgba(251,248,242,.82)}
#how-frame{font-variant-numeric:tabular-nums}
.how-steps{display:grid;gap:8px;counter-reset:s}
.step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:20px 18px 22px;border-radius:var(--r);transition:background-color .4s var(--ease),opacity .4s var(--ease)}
.js .step{opacity:.5}
.js .step.is-on{opacity:1;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.step-n{font:600 14px/1.6 var(--ui);color:var(--ac);font-variant-numeric:tabular-nums}
.step h3{font:600 clamp(19px,1.5vw,22px)/1.25 var(--ui);letter-spacing:-.015em}
.step p{margin-top:6px;color:var(--muted);font-size:15.5px;max-width:40ch}
.step-bar{position:absolute;left:18px;right:18px;bottom:10px;height:2px;border-radius:2px;background:var(--ac);transform:scaleX(0);transform-origin:0 50%}
.stage-reduced .step{opacity:1}

/* ---------------- features ---------------- */
.features{padding:clamp(56px,9vh,110px) 0 clamp(60px,10vh,120px)}
.feat-lead,.feat-index,.feat-wide{max-width:var(--max);width:calc(100% - 2 * var(--gut));margin-left:auto;margin-right:auto;margin-top:clamp(40px,6vh,72px)}
.feat-lead{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.15fr);gap:20px 32px;align-items:start;padding-top:28px;border-top:1px solid var(--line)}
.feat-n{font:600 14px/1 var(--ui);color:var(--ac);font-variant-numeric:tabular-nums;align-self:start;padding-top:6px}
.feat-lead-copy{padding-top:clamp(0px,4vw,64px)}
.feat-lead h3{font:600 clamp(26px,2.4vw,38px)/1.12 var(--ui);letter-spacing:-.025em;max-width:16ch}
.feat-lead p{margin-top:14px;color:var(--muted);max-width:42ch;font-size:17px}
.feat-lead-art img{width:100%;max-width:600px;margin-left:auto}
.feat-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.feat-index li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 32px;padding:24px 0 28px;border-top:1px solid var(--line)}
.feat-index li .feat-n{grid-row:span 2}
.feat-index h3{font:600 19px/1.3 var(--ui);letter-spacing:-.01em}
.feat-index p{color:var(--muted);font-size:15.5px;max-width:40ch}
.feat-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 48px;align-items:center;padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
.feat-wide h3{font-size:clamp(34px,3.6vw,58px)}
.feat-wide p{margin-top:16px;color:var(--muted);max-width:48ch;font-size:17px}
.feat-wide-art img{max-width:320px;margin:0 auto}
:root[data-resolved-theme="dark"] .feat-lead-art img,:root[data-resolved-theme="dark"] .feat-wide-art img{filter:brightness(.92)}

/* ---------------- product ---------------- */
.product{padding:clamp(60px,10vh,120px) 0}
.app{max-width:var(--max);margin:clamp(32px,5vh,56px) auto 0;border-radius:var(--r-lg);background:var(--card);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(20,16,10,.45);overflow:hidden;width:calc(100% - 2 * var(--gut))}
.app-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.app-name{display:inline-flex;align-items:center;gap:8px;font:650 15px/1 var(--ui);margin-right:auto}
.app-name .brand-mark{width:22px;height:22px}
.app-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;padding:16px}
.kpis{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpis .iz-kpi{box-shadow:0 0 0 1px var(--line);background:var(--bg)}
.app-chart{padding:14px 16px;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);background:var(--bg);min-width:0}
.app-table{position:relative;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);overflow:auto;background:var(--bg)}
.app-table table{width:100%;border-collapse:collapse;font-size:14px}
.app-table th{text-align:left;font:500 12.5px/1.2 var(--ui);color:var(--muted);padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.app-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.app-table tr:last-child td{border-bottom:0}
.app-table td:first-child{font-weight:500}
.app-table td.day{color:var(--muted);font-variant-numeric:tabular-nums}
.row-open{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.row-open:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.who i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;font:600 10.5px/1 var(--ui);font-style:normal;background:var(--ac-soft-2);color:var(--fg)}

/* drawers (row detail + compare) */
.drawer-shell{position:fixed;inset:0;z-index:200;display:grid;justify-items:end;background:rgba(10,10,12,.32);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.drawer-shell[data-open]{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.drawer{width:min(440px,calc(100vw - 16px));margin:8px;border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:calc(100dvh - 16px);color:var(--fg);transform:translateX(30px);transition:transform .45s var(--ease);outline:none;
  -webkit-backdrop-filter:blur(var(--iz-blur));backdrop-filter:blur(var(--iz-blur));box-shadow:inset 0 0 0 1px var(--iz-glass-border),var(--iz-glass-shadow-active)}
.drawer.wide{width:min(760px,calc(100vw - 16px))}
.drawer-shell[data-open] .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px 20px;border-bottom:1px solid var(--line)}
.drawer-head h3{font:600 18px/1.2 var(--ui)}
.drawer-body{padding:16px 20px 22px;overflow:auto}
.drawer-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;font-size:14.5px}
.drawer-body dt{color:var(--muted)}
.drawer-body dd{margin:0}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left}
.cmp thead th{font:600 13.5px/1.2 var(--ui);position:sticky;top:-16px;background:var(--card)}
.cmp tbody th{font-weight:500}
.cmp .grp th{padding-top:20px;font:600 12.5px/1 var(--ui);color:var(--ac);letter-spacing:.02em}
.cmp td{font-variant-numeric:tabular-nums}
.cmp .yes{color:var(--fg)} .cmp .no{color:var(--muted)}
.cmp .col-pick{background:var(--ac-soft)}

/* ---------------- proof slot ---------------- */
.proof{max-width:var(--max);margin:0 auto;padding:clamp(40px,8vh,90px) var(--gut)}
.proof-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.proof blockquote{margin:0;padding:24px;border-left:2px solid var(--ac);font-size:18px}
.proof figcaption{margin-top:10px;color:var(--muted);font-size:14px}

/* ---------------- pricing ---------------- */
.pricing{padding:clamp(70px,11vh,130px) 0}
.bill{display:flex;align-items:center;gap:14px;justify-self:end;flex-wrap:wrap}
.bill-note{font:600 13px/1 var(--ui);color:var(--ac);padding:6px 10px;border-radius:999px;background:var(--ac-soft)}
.tiers{max-width:var(--max);margin:clamp(32px,5vh,56px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line);overflow:hidden;width:calc(100% - 2 * var(--gut))}
.tier{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px);background:var(--card)}
.tier + .tier{border-left:1px solid var(--line)}
.tier.is-pick{background:var(--ac-soft)}
.tier.is-pick::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ac)}
.tier h3{font:600 17px/1.2 var(--ui);display:flex;align-items:center;gap:10px}
.tier h3 .pick{font:600 12px/1 var(--ui);color:var(--ac-on);background:var(--ac-fill);padding:5px 8px;border-radius:999px}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font:600 clamp(40px,4vw,56px)/1 var(--display);letter-spacing:var(--display-track);font-variant-numeric:tabular-nums}
:root[data-skin="paper"] .price b{font-weight:400}
.price span{color:var(--muted);font-size:14px}
.tier-blurb{color:var(--muted);font-size:15px;min-height:3em}
.tier ul{display:grid;gap:8px;font-size:15px;margin-bottom:8px;flex:1}
.tier ul li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.tier ul li::before{content:"";width:14px;height:8px;margin-top:6px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg) scale(.8);transform-origin:40% 40%}
.tier .iz-btn{align-self:flex-start}
.compare-row{max-width:var(--max);margin:18px auto 0;width:calc(100% - 2 * var(--gut));display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cmp-foot{font-size:13.5px;color:var(--muted)}

/* ---------------- faq ---------------- */
.faq{max-width:var(--max);width:calc(100% - 2 * var(--gut));margin:0 auto;padding:clamp(60px,10vh,120px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px clamp(32px,5vw,80px);align-items:start}
.faq .sec-head{width:auto;margin:0;position:sticky;top:110px}
.faq-list{margin:0;width:100%;border-radius:var(--r-lg)!important;background:var(--card)!important;box-shadow:0 0 0 1px var(--line)!important}
.faq-list summary{font:600 17px/1.35 var(--ui)!important;padding:20px 22px!important}
.faq-list details > div{font-size:15.5px!important;padding:0 22px 20px!important}

/* ---------------- final CTA ---------------- */
.final{max-width:var(--max);margin:0 auto clamp(48px,8vh,96px);width:calc(100% - 2 * var(--gut));padding:clamp(36px,6vw,80px);border-radius:var(--r-lg);background:var(--ac-soft);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 40px}
.final h2{font-size:var(--h2);grid-column:1}
.final p{grid-column:1;color:var(--fg);opacity:.8;max-width:44ch}
.final .iz-btn{grid-column:2;grid-row:1 / span 2;align-self:end}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line)}
.foot-in{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:36px var(--gut) 44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 32px;align-items:center}
.foot-tag{color:var(--muted);font-size:14.5px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-nav a{font-size:14.5px;text-decoration:none;color:var(--muted)}
.foot-nav a:hover{color:var(--fg)}
.foot-note{grid-column:1 / -1;font-size:13px;color:var(--muted)}
.foot-note a{color:var(--fg)}

/* ---------------- template panel ---------------- */
.tpl{position:fixed;left:16px;bottom:16px;z-index:120;display:grid;gap:10px;justify-items:start}
.tpl-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:0;color:var(--fg);font:600 13.5px/1 var(--ui);cursor:pointer;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--iz-glass-border),0 0 0 1px var(--iz-glass-edge),var(--iz-glass-shadow)}
.tpl-panel{order:-1;width:min(300px,calc(100vw - 32px));padding:14px 14px 12px;border-radius:16px;color:var(--fg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--iz-glass-border),0 0 0 1px var(--iz-glass-edge),var(--iz-glass-shadow-active)}
.tpl-h{font:600 12px/1 var(--ui);color:var(--muted);margin:10px 0 7px}
.tpl-h:first-child{margin-top:0}
.tpl-panel .iz-seg{width:100%}
.tpl-panel .iz-seg-opt{flex:1}
.swatches{display:flex;gap:8px;align-items:center}
.swatches button,.sw-custom{width:30px;height:30px;border-radius:999px;border:0;background:var(--sw);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative}
.swatches button[aria-checked="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--fg)}
.sw-custom{overflow:hidden;background:conic-gradient(#e2552b,#e8c547,#1f7a5a,#2e5be6,#e2552b)}
.sw-custom input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer}
.sw-custom:focus-within{outline:2px solid var(--ac);outline-offset:2px}
.tpl-note{margin-top:10px;font-size:12px;line-height:1.45;color:var(--muted)}
.tpl-note code{font-size:11.5px}

/* ---------------- responsive ---------------- */
@media (max-width:1060px){
  .nav{display:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:28px}
  .hero-copy{grid-row:1}
  .hero-art{grid-column:1;grid-row:2}
  .demo{left:auto;right:var(--gut);top:auto;bottom:24px}
  .demo-hint{display:none}
  :root[data-skin="glass"] .hero{grid-template-columns:minmax(0,1fr);padding-top:max(28vh,200px)}
  :root[data-skin="glass"] .hero-art{grid-row:auto}
  :root[data-skin="glass"] .demo{top:auto;bottom:24px;right:var(--gut)}
  .feat-lead{grid-template-columns:44px minmax(0,1fr)}
  .feat-lead-art{grid-column:1 / -1}
  .feat-index li{grid-template-columns:44px minmax(0,1fr)}
}
@media (max-width:860px){
  .sec-head.split{grid-template-columns:minmax(0,1fr)}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq .sec-head{position:static}
  .bill{justify-self:start}
  .how-pin{min-height:0}
  .how-grid{grid-template-columns:minmax(0,1fr)}
  .how-plate{position:sticky;top:76px;z-index:2;box-shadow:0 0 0 1px var(--line),0 18px 30px -18px rgba(0,0,0,.35)}
  .how-plate canvas,.how-still{aspect-ratio:16/9}
  .how-steps{gap:0}
  .js:not(.stage-reduced) .step{min-height:34vh;align-content:start}
  .stage-reduced .how-steps{gap:10px}
  .feat-index{grid-template-columns:minmax(0,1fr)}
  .feat-wide{grid-template-columns:minmax(0,1fr)}
  .app-body{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:minmax(0,1fr)}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier + .tier{border-left:0;border-top:1px solid var(--line)}
  .final{grid-template-columns:minmax(0,1fr)}
  .final .iz-btn{grid-column:1;grid-row:auto;justify-self:start}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .top-link{display:none}
  .top-in{gap:12px}
  .hero{padding-top:20px;padding-bottom:40px}
  .how{padding-top:24px}
  .tpl-toggle span{display:none}
  .tpl-toggle{width:40px;padding:0;justify-content:center}
  .demo{position:relative;left:auto;right:auto;bottom:auto;margin:14px auto 0;width:100%}
  .demo-zone{position:relative;inset:auto;overflow:visible;grid-row:3}
  :root[data-skin="glass"] .demo-zone{grid-row:auto}
  :root[data-skin="glass"] .demo{margin-top:16px}
  .app-table th:nth-child(3),.app-table td:nth-child(3){display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-delay:0s!important}
  .js .how-still{opacity:1}
}

/* ---------------- Glass skin: an ambient, blurred render behind the whole page so panels read as glass ---------------- */
:root[data-skin="glass"] body::before{content:"";position:fixed;inset:-80px;z-index:-1;pointer-events:none;background:var(--ambient) center/cover no-repeat;filter:blur(70px) saturate(1.15);opacity:.55}
:root[data-skin="glass"]{--ambient:url("img/hero-diorama-light-960.webp")}
:root[data-skin="glass"][data-resolved-theme="dark"]{--ambient:url("img/hero-diorama-dark-960.webp")}
:root[data-skin="glass"] body{background:transparent}
:root[data-skin="glass"] .app,:root[data-skin="glass"] .tiers,:root[data-skin="glass"] .faq-list,:root[data-skin="glass"] .js .step.is-on,:root[data-skin="glass"] .final,:root[data-skin="glass"] .how-plate{
  -webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate))}
:root[data-skin="glass"] .app,:root[data-skin="glass"] .faq-list,:root[data-skin="glass"] .tier{background:var(--iz-glass-thick)!important}
:root[data-skin="glass"] .tier.is-pick{background:color-mix(in srgb,var(--ac-soft) 70%,var(--iz-glass-thick))!important}
:root[data-skin="glass"] .js .step.is-on{background:var(--iz-glass-thick)}
:root[data-skin="glass"] .app,:root[data-skin="glass"] .tiers,:root[data-skin="glass"] .faq-list{box-shadow:inset 0 1px 0 var(--iz-glass-highlight),inset 0 0 0 1px var(--iz-glass-border),var(--iz-glass-shadow)!important}
:root[data-skin="glass"] .kpis .iz-kpi,:root[data-skin="glass"] .app-chart,:root[data-skin="glass"] .app-table{background:color-mix(in srgb,var(--card) 70%,transparent)}
:root[data-skin="glass"] .final{background:color-mix(in srgb,var(--ac-soft) 78%,transparent)}
:root[data-skin="glass"] .top{background:var(--iz-glass-thick)}
@media (prefers-reduced-transparency: reduce){:root[data-skin="glass"] body::before{display:none}:root[data-skin="glass"] body{background:var(--bg)}}