/* Creator Machine — marketing pages (/, /funktionen, /preise, /blog, /ueber).
   Brand: graphite base, silver for the main button, copper only as a spark. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0F1012;--surf:#16181B;--surf2:#1E2024;--bdr:#2C2F35;
  --text:#E9EAEC;--sub:#8A8F98;--dim:#4A4E56;
  --acc:#D0703C;--silver:#D4D8DE;--steel:#8E949C;
  --ig:#E1306C;--tt:#FF2050;--grn:#00D47A;--ylw:#FFAA00;--blu:#4A90FF;
  --font:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --w:1120px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── Header ───────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(15,16,18,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bdr)}
.hdr .wrap{height:64px;display:flex;align-items:center;gap:32px}
.logo{font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.12em;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.logo em{color:var(--acc);font-style:normal}
.nav{display:flex;gap:4px;flex:1}
.nav a{font-size:14px;font-weight:500;color:var(--sub);padding:8px 12px;border-radius:6px;transition:color .12s,background .12s}
.nav a:hover{color:var(--text);background:var(--surf2)}
.nav a[aria-current=page]{color:var(--text)}
.nav a[aria-current=page]::after{content:'';display:block;height:2px;background:var(--acc);margin-top:4px;border-radius:1px}
.hdr-cta{display:flex;gap:8px;align-items:center}
.lang{display:flex;gap:1px;background:var(--bdr);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em}
.lang a{padding:5px 8px;background:var(--surf2);color:var(--sub)}
.lang a:hover{color:var(--text)}
.lang a[aria-current=true]{background:var(--acc);color:var(--bg)}
.menu-tg,.menu-btn{display:none}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-size:14px;font-weight:700;padding:10px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:opacity .12s,border-color .12s,color .12s,background .12s}
.btn-p{background:var(--silver);color:var(--bg)}
.btn-p:hover{opacity:.88}
.btn-g{border-color:var(--bdr);color:var(--text)}
.btn-g:hover{border-color:var(--steel)}
.btn-lg{font-size:15px;padding:14px 24px}

/* ── Type ─────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);display:flex;align-items:center;gap:10px}
.eyebrow b{color:var(--acc);font-weight:800}
h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:800}
h1{font-size:clamp(40px,6.4vw,76px)}
h2{font-size:clamp(30px,4.2vw,48px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.3;font-weight:700}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--sub);max-width:620px;line-height:1.55}
.muted{color:var(--sub)}
.mono{font-family:var(--mono)}

/* ── Sections ─────────────────────────────────────────── */
.sec{padding:112px 0;border-top:1px solid var(--bdr)}
.sec-hd{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:720px}
.page-hd{padding:96px 0 72px}
.page-hd h1{font-size:clamp(38px,5.4vw,64px);margin:20px 0 22px;max-width:860px}

/* ── Hero ─────────────────────────────────────────────── */
.hero{padding:96px 0 0;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:56px 56px;opacity:.35;mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{margin:24px 0 24px;max-width:900px}
.hero h1 span{color:var(--steel)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hero-note{font-family:var(--mono);font-size:11px;color:var(--sub);letter-spacing:.06em;margin-top:18px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(208,112,60,.18)}

/* App mockup (pure HTML, no images) */
.mock{margin-top:72px;border:1px solid var(--bdr);border-bottom:0;border-radius:10px 10px 0 0;background:var(--surf);overflow:hidden}
.mock-bar{height:40px;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--bdr)}
.mock-dots{display:flex;gap:6px}.mock-dots i{width:9px;height:9px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr)}
.mock-bar .logo{font-size:10px}
.mock-bar .logo img{width:15px;height:15px}
.mock-tabs{display:flex;gap:1px;background:var(--bdr);margin-left:auto}
.mock-tabs span{font-size:10px;font-weight:700;padding:4px 10px;background:var(--surf2);color:var(--sub)}
.mock-tabs span.on{color:var(--text);background:var(--bdr)}
.mock-body{display:grid;grid-template-columns:180px 1fr}
.mock-side{border-right:1px solid var(--bdr);padding:14px 0}
.mock-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:6px 14px}
.mock-acc{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--sub)}
.mock-acc.on{color:var(--text);background:var(--surf2);box-shadow:inset 2px 0 0 var(--acc)}
.mock-acc i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:12px;background:var(--surf2);border:1px solid var(--bdr)}
.mock-main{padding:18px 20px 0}
.mock-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.mock-day{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--sub);padding-bottom:6px;display:flex;justify-content:space-between}
.mock-day.today{color:var(--text)}
.mock-day.today b{background:var(--acc);color:var(--bg);padding:0 4px;border-radius:2px}
.mock-col{display:flex;flex-direction:column;gap:6px;min-height:230px}
.mock-post{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}
.mock-post .t{font-size:10.5px;font-weight:600;line-height:1.3;color:var(--text)}
.mock-post .m{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:8px;color:var(--sub)}
.tag{font-family:var(--mono);font-size:8px;font-weight:800;padding:2px 5px;border-radius:3px;letter-spacing:.04em}
.tag.ig{background:rgba(225,48,108,.14);color:var(--ig)}
.tag.tt{background:rgba(255,32,80,.14);color:var(--tt)}
.st{display:inline-flex;align-items:center;gap:4px}
.st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.st.c{color:var(--ylw)}.st.s{color:var(--blu)}.st.p{color:var(--grn)}

/* ── Logos / proof strip ──────────────────────────────── */
.strip{border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:var(--surf)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-i{padding:28px 24px;border-left:1px solid var(--bdr)}
.strip-i:first-child{border-left:0;padding-left:0}
.strip-i b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em}
.strip-i span{font-size:13px;color:var(--sub)}

/* ── Grids / cards ────────────────────────────────────── */
.grid{display:grid;gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:10px;overflow:hidden}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--bg);padding:36px 32px;display:flex;flex-direction:column;gap:12px}
.cell .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.08em}
.cell p{color:var(--sub);font-size:15px}
.ico{width:40px;height:40px;border-radius:10px;border:1px solid var(--bdr);background:var(--surf);display:grid;place-items:center;color:var(--silver);margin-bottom:6px}
.ico svg{width:20px;height:20px}

/* Pipeline */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.pipe-s{border:1px solid var(--bdr);border-radius:10px;padding:24px;background:var(--surf);position:relative}
.pipe-s .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.pipe-s h3{margin:10px 0 6px}
.pipe-s p{color:var(--sub);font-size:14px}
.pipe-s:not(:last-child)::after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--dim);font-size:14px;z-index:1}

/* Split rows (feature detail) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px 0;border-top:1px solid var(--bdr)}
.split:first-child{border-top:0;padding-top:0}
.split.rev>:first-child{order:2}
.split h2{font-size:clamp(28px,3.4vw,40px);margin:16px 0 18px}
.split ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.split li{display:flex;gap:12px;color:var(--sub);font-size:15px}
.split li::before{content:'—';font-family:var(--mono);color:var(--acc);flex-shrink:0}
.panel{border:1px solid var(--bdr);border-radius:10px;background:var(--surf);padding:20px}

/* Mini panels used in feature detail */
.mini-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--bdr);font-size:13px}
.mini-row:first-child{border-top:0;padding-top:0}
.mini-row .d{font-family:var(--mono);font-size:10px;color:var(--sub);width:70px;flex-shrink:0}
.mini-row .x{flex:1;font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 12px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf2)}
.chip i{font-style:normal}
.dot{width:8px;height:8px;border-radius:50%}
.slides{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slide{aspect-ratio:4/5;border-radius:6px;border:1px solid var(--bdr);padding:12px;display:flex;flex-direction:column;justify-content:space-between;font-weight:800;font-size:13px;letter-spacing:-.02em;line-height:1.15}
.slide small{font-family:var(--mono);font-size:8px;letter-spacing:.1em;font-weight:700;color:var(--sub)}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:8px}
.bars i{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:3px 3px 0 0}
.bars i.on{background:var(--silver);border-color:var(--silver)}

/* ── Pricing ──────────────────────────────────────────── */
.beta{display:flex;gap:14px;align-items:center;border:1px solid var(--bdr);background:var(--surf);border-radius:10px;padding:16px 20px;font-size:14px;color:var(--sub);margin-bottom:32px}
.beta b{color:var(--text)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{border:1px solid var(--bdr);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.plan.hi{background:var(--surf);border-color:var(--steel);position:relative}
.plan.hi .badge{position:absolute;top:-11px;left:28px;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.1em;background:var(--silver);color:var(--bg);padding:3px 8px;border-radius:4px}
.plan-n{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price span{color:var(--sub);font-size:14px}
.plan p{color:var(--sub);font-size:14px;min-height:44px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;border-top:1px solid var(--bdr);padding-top:20px}
.plan li{display:flex;gap:10px;font-size:14px}
.plan li::before{content:'✓';color:var(--silver);font-weight:800;flex-shrink:0;width:12px}
.plan li b{font-weight:700}
.plan li.inc{color:var(--sub);font-size:13px}
.plan li.inc::before{content:'';width:0;margin-right:-10px}
.plan li.soon-hd{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-top:8px;padding-top:14px;border-top:1px dashed var(--bdr)}
.plan li.soon-hd::before{content:'';width:0;margin-right:-10px}
.plan li.soon{color:var(--sub)}
.plan li.soon::before{content:'○';color:var(--dim)}
.plan-note{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--sub);margin-top:-12px}
.plan-note.acc{color:var(--acc)}
.plan .btn{width:100%}
.plans-fine{font-size:13px;margin-top:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--bdr);border-radius:10px}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--bdr);text-align:center;font-weight:400}
.cmp th[scope=row]{text-align:left;color:var(--text)}
.cmp td{color:var(--sub);width:22%}
.cmp td b{color:var(--text);font-weight:700}
.cmp thead th{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text);padding:22px 16px 18px;vertical-align:bottom}
.cmp thead small{display:block;margin-top:6px;font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--sub)}
.cmp .hi{background:var(--surf)}
.cmp thead th.hi{box-shadow:inset 0 2px 0 var(--silver)}
.cmp tr.grp th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);padding:24px 16px 10px;background:var(--bg)}
.cmp td.y,.cmp td.n{font-size:0}
.cmp td.y::before{content:'✓';font-size:15px;font-weight:800;color:var(--silver)}
.cmp td.n::before{content:'—';font-size:14px;color:var(--dim)}
.cmp .bald{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);border:1px solid var(--bdr);padding:2px 6px;border-radius:3px}
.cmp tbody tr:not(.grp):hover th,.cmp tbody tr:not(.grp):hover td{background:var(--surf2)}
.cmp tfoot th,.cmp tfoot td{border-bottom:0;padding:20px 16px}
.cmp tfoot .btn{width:100%}
@media(max-width:640px){.cmp th[scope=row]{position:sticky;left:0;z-index:1;background:var(--bg);min-width:150px}}

/* FAQ */
.faq{border-top:1px solid var(--bdr)}
.faq details{border-bottom:1px solid var(--bdr)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--sub);font-weight:500}
.faq details[open] summary::after{content:'−';color:var(--acc)}
.faq details p{color:var(--sub);padding:0 0 22px;max-width:720px}

/* ── Blog ─────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{border:1px solid var(--bdr);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);transition:border-color .12s}
.post:hover{border-color:var(--steel)}
.post-cov{aspect-ratio:16/10;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:flex-end;padding:20px;font-family:var(--mono);font-size:44px;font-weight:800;color:var(--surf2);letter-spacing:-.04em;position:relative;overflow:hidden}
.post-cov::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:24px 24px;opacity:.5}
.post-cov span{position:relative;color:var(--steel)}
.post-b{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-b .meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);display:flex;gap:10px}
.post-b p{color:var(--sub);font-size:14px}
.soon-pill{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--acc)}
.notify{display:flex;gap:8px;margin-top:8px;max-width:440px}
.notify input{flex:1;min-width:0;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;color:var(--text);font-family:var(--font);font-size:14px;padding:10px 14px;outline:none}
.notify input:focus{border-color:var(--acc)}

/* ── About ────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:320px 1fr;gap:72px;align-items:start}
.portrait{aspect-ratio:4/5;border:1px solid var(--bdr);border-radius:10px;background:var(--surf);display:flex;flex-direction:column;justify-content:space-between;padding:22px;position:sticky;top:96px}
.portrait .big{font-family:var(--mono);font-size:84px;font-weight:800;letter-spacing:-.06em;color:var(--surf2);line-height:1}
.portrait .big em{color:var(--acc);font-style:normal}
.prose{display:flex;flex-direction:column;gap:20px;max-width:680px}
.prose p{color:var(--sub);font-size:17px;line-height:1.7}
.prose p strong{color:var(--text);font-weight:600}
.prose h2{font-size:28px;margin-top:28px}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.val{border:1px solid var(--bdr);border-radius:10px;padding:22px}
.val .n{font-family:var(--mono);font-size:11px;color:var(--acc);font-weight:800}
.val h3{margin:8px 0 6px;font-size:17px}
.val p{font-size:14px;line-height:1.6}

/* ── CTA band + footer ────────────────────────────────── */
.cta{padding:120px 0;border-top:1px solid var(--bdr);text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:56px 56px;opacity:.3;mask-image:radial-gradient(ellipse 50% 70% at 50% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 50%,#000 20%,transparent 75%)}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta .lead{margin:0 auto}
.ftr{border-top:1px solid var(--bdr);padding:56px 0 40px;font-size:14px}
.ftr-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.ftr h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:700}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ftr a{color:var(--sub)}
.ftr a:hover{color:var(--text)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--bdr);font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:960px){
  .g3,.plans,.posts{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev>:first-child{order:0}
  .about{grid-template-columns:1fr;gap:40px}
  .portrait{position:static;max-width:280px}
  .ftr-top{grid-template-columns:1fr 1fr}
  .mock-body{grid-template-columns:1fr}
  .mock-side{display:none}
}
@media(max-width:820px){
  .hdr .wrap{gap:12px}
  .nav,.hdr-cta .btn-g{display:none}
  .hdr-cta{margin-left:auto}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--bdr);border-radius:6px;cursor:pointer}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:16px;height:1.5px;background:var(--text);position:relative;content:''}
  .menu-btn span::before{position:absolute;top:-5px}
  .menu-btn span::after{position:absolute;top:5px}
  .menu-tg:checked~.nav{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--bdr);padding:12px 16px 20px;gap:2px}
  .menu-tg:checked~.nav a{padding:12px}
  .menu-tg:checked~.nav a[aria-current=page]::after{display:none}
  .nav .m-only{display:block}
}
@media(min-width:821px){.nav .m-only{display:none}}
@media(max-width:640px){
  .wrap{padding:0 16px}
  .sec{padding:80px 0}
  .g3,.g2,.plans,.posts,.pipe,.values{grid-template-columns:1fr}
  .pipe-s:not(:last-child)::after{content:'↓';right:50%;top:auto;bottom:-14px;transform:translateX(50%)}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip-i{border-left:0;padding:20px 0}
  .strip-i:nth-child(n+3){border-top:1px solid var(--bdr)}
  .mock-week{grid-template-columns:repeat(3,1fr)}
  .mock-week>:nth-child(n+4){display:none}
  .mock-tabs{display:none}
  .cell{padding:28px 22px}
  .ftr-top{grid-template-columns:1fr}
  .ftr-bot{flex-direction:column}
  .hdr-cta .btn-p{padding:8px 12px;font-size:13px}
  .hdr-cta .lang{display:none}
}

/* ── Editor screenshots ───────────────────────────────── */
.shot{border:1px solid var(--bdr);border-radius:10px;overflow:hidden;background:var(--surf)}
.shot-bar{height:36px;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid var(--bdr);font-family:var(--mono);font-size:10px;color:var(--sub);letter-spacing:.06em}
.shot img{width:100%;height:auto}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.shots figure{border:1px solid var(--bdr);border-radius:10px;overflow:hidden;background:var(--surf)}
.shots img{width:100%;height:auto;border-bottom:1px solid var(--bdr)}
.shots figcaption{padding:12px 14px;font-size:13px;color:var(--sub)}
.shots figcaption b{font-family:var(--mono);font-size:11px;color:var(--acc);margin-right:8px}
@media(max-width:640px){.shots{grid-template-columns:1fr}}

/* ── Billing toggle (pricing) ────────────────────────── */
.bill{display:inline-flex;gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;margin-bottom:32px}
.bill input{position:absolute;opacity:0;pointer-events:none}
.bill label{padding:10px 18px;font-size:14px;font-weight:600;color:var(--sub);background:var(--bg);cursor:pointer;display:flex;align-items:center;gap:10px}
.bill label em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--acc)}
.bill input:checked+label{background:var(--surf2);color:var(--text)}
.bill input:focus-visible+label{outline:2px solid var(--acc);outline-offset:-2px}
.pm-y{display:none}
body:has(#bill-y:checked) .pm-m{display:none}
body:has(#bill-y:checked) .price.pm-y{display:flex}
body:has(#bill-y:checked) .plan-note.pm-y,body:has(#bill-y:checked) small.pm-y{display:block}
.cmp thead small.pm-y{display:none}
.ent{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;border:1px solid var(--bdr);border-radius:10px;padding:24px 28px;background:var(--surf)}
.ent p{color:var(--sub);font-size:14px;margin-top:6px;max-width:620px}
@media(max-width:640px){.ent{flex-direction:column;align-items:flex-start}.ent .btn{width:100%}}