/* CleanLytics ID Badge Designer pages - www.4mec.co.uk/products/id-badge-designer/ - v1.0.0 2026-10-12
   The 4MEC site's look (tokens, header, buttons, sections, cards, FAQ, footer) plus the product's own parts. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:#F5F8FB; --surface:#FFFFFF; --surface-2:#EDF3F9; --surface-3:#E4EDF7;
  --ink:#0C1826; --ink-2:#33465C; --muted:#64768C;
  --line:#DDE6F0; --line-strong:#C4D3E4;
  --brand:#0F6FE8; --brand-deep:#0A4FA8; --brand-soft:#E7F0FE;
  --sw:#5646D6; --sw-soft:#ECEAFB;
  --ok:#0F7A4A; --ok-soft:#E3F5EC;
  --shadow:0 1px 2px rgba(12,24,38,.05), 0 12px 32px -18px rgba(12,24,38,.28);
  --shadow-lift:0 2px 4px rgba(12,24,38,.06), 0 26px 54px -26px rgba(12,24,38,.36);
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --r:14px; --r-lg:20px; --maxw:1180px;
  --accent:var(--sw); --accent-soft:var(--sw-soft);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A111C; --surface:#101B2A; --surface-2:#162335; --surface-3:#1C2C41;
    --ink:#E9EFF7; --ink-2:#BCCADB; --muted:#8B9DB4;
    --line:#223146; --line-strong:#31445E;
    --brand:#4E9BFF; --brand-deep:#8CBEFF; --brand-soft:#132741;
    --sw:#9A8CFF; --sw-soft:#1E1B3A;
    --ok:#4ADE96; --ok-soft:#10291F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 54px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0A111C; --surface:#101B2A; --surface-2:#162335; --surface-3:#1C2C41;
  --ink:#E9EFF7; --ink-2:#BCCADB; --muted:#8B9DB4;
  --line:#223146; --line-strong:#31445E;
  --brand:#4E9BFF; --brand-deep:#8CBEFF; --brand-soft:#132741;
  --sw:#9A8CFF; --sw-soft:#1E1B3A;
  --ok:#4ADE96; --ok-soft:#10291F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 54px -26px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.08; margin:0; text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.7rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.6rem)}
h3{font-size:1.16rem; line-height:1.3; letter-spacing:-.012em}
p{margin:0}
[hidden]{display:none!important}

.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}
.narrow{width:min(100% - 40px, 820px)}
.lede{font-size:clamp(1.06rem,1.5vw,1.22rem); line-height:1.6; color:var(--ink-2); max-width:60ch}
.eyebrow{font-family:var(--mono); font-size:.735rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); flex:none}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s}
.hdr.stuck{border-bottom-color:var(--line); background:color-mix(in srgb, var(--paper) 95%, transparent)}
.hdr-in{display:flex; align-items:center; gap:18px; height:74px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:34px; width:auto; display:block}
.prod{display:flex; align-items:center; gap:9px; padding-left:18px; border-left:1px solid var(--line-strong); color:var(--ink); font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.01em; white-space:nowrap}
.prod:hover{text-decoration:none; color:var(--accent)}
.prod img{width:26px; height:26px; border-radius:6px}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{font-size:.925rem; font-weight:500; color:var(--ink-2); padding:9px 13px; border-radius:9px; text-decoration:none; position:relative; transition:color .16s, background .16s}
.nav a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
.nav a.active{color:var(--ink)}
.nav a.active::after{content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px; background:var(--accent); border-radius:2px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body); font-size:.95rem; font-weight:600; padding:13px 22px; border-radius:11px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .14s, box-shadow .16s, background .16s, border-color .16s}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -10px color-mix(in srgb, var(--brand) 80%, transparent)}
.btn-primary:hover{background:var(--brand-deep)}
:root[data-theme="dark"] .btn-primary{color:#08101C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#08101C}}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-lg{padding:15px 26px; font-size:1rem}
.hdr .btn{padding:10px 18px; font-size:.9rem; margin-left:6px}
.nav a.btn-primary{color:#fff}
.nav a.btn-primary:hover{color:#fff; background:var(--brand-deep)}
:root[data-theme="dark"] .nav a.btn-primary{color:#08101C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav a.btn-primary{color:#08101C}}
.navtoggle{display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:9px 12px; cursor:pointer; color:var(--ink); font-family:var(--body); font-weight:600; font-size:.9rem}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(48px,7vw,92px) 0 clamp(48px,6vw,80px)}
.hero::before{content:""; position:absolute; inset:-30% -10% auto 45%; height:120%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:center}
.hero h1{margin-top:18px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lede{margin-top:20px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-note{margin-top:14px; font-size:.88rem; color:var(--muted)}
.trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-2)}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust svg{width:17px; height:17px; color:var(--ok); flex:none}

/* the badge illustration */
.cards-art{position:relative; height:clamp(380px,42vw,470px); display:grid; place-items:center}
.idcard{position:absolute; border-radius:18px; background:#fff; color:#0C1826; box-shadow:0 2px 4px rgba(12,24,38,.08), 0 30px 60px -24px rgba(12,24,38,.45); overflow:hidden}
.idcard.front{width:clamp(220px,22vw,262px); aspect-ratio:54/85.6; transform:rotate(-4deg) translate(-14%, 0); z-index:2}
.idcard.back{width:clamp(220px,22vw,262px); aspect-ratio:54/85.6; transform:rotate(7deg) translate(30%, 4%); background:#F3F5F8; z-index:1}
.idcard .band{height:30%; background:linear-gradient(135deg,#0A3468 0%,#2081B1 70%,#45AEC3 100%); position:relative}
.idcard .band::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:34px; background:#fff; border-radius:60% 60% 0 0 / 100% 100% 0 0}
.idcard .org{position:absolute; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.02em}
.idcard .org i{width:18px; height:18px; border-radius:5px; background:rgba(255,255,255,.9); display:block}
.idcard .photo{position:absolute; top:17%; left:50%; transform:translateX(-50%); width:44%; aspect-ratio:1; border-radius:50%; border:4px solid #fff; background:linear-gradient(180deg,#DCE8F5,#B9CFE6); overflow:hidden; box-shadow:0 6px 14px -8px rgba(12,24,38,.5)}
.idcard .photo svg{width:100%; height:100%; display:block}
.idcard .who{position:absolute; top:52%; left:0; right:0; text-align:center; padding:0 14px}
.idcard .who b{display:block; font-family:var(--display); font-size:1.12rem; letter-spacing:-.01em}
.idcard .who span{display:block; font-size:.74rem; color:#4C5D72; margin-top:2px}
.idcard .meta{position:absolute; left:16px; right:16px; bottom:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.idcard .meta dl{margin:0; font-size:.62rem; line-height:1.35; color:#4C5D72}
.idcard .meta dt{font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:#8496AA}
.idcard .meta dd{margin:0 0 4px; font-family:var(--mono); color:#0C1826; font-weight:600}
.idcard .qr{width:31%; aspect-ratio:1; display:block}
.idcard .stripe{position:absolute; top:12%; left:0; right:0; height:15%; background:#20262E}
.idcard .chip{position:absolute; top:34%; left:14%; width:20%; aspect-ratio:1.25; border-radius:6px; background:linear-gradient(135deg,#E9C46A,#C9963A); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.idcard .backtext{position:absolute; left:14%; right:14%; top:52%; display:grid; gap:7px}
.idcard .backtext i{display:block; height:6px; border-radius:3px; background:#D5DDE7}
.idcard .backtext i:nth-child(2){width:80%} .idcard .backtext i:nth-child(3){width:60%}
.idcard .barcode{position:absolute; left:14%; right:14%; bottom:9%; height:12%; background:repeating-linear-gradient(90deg,#20262E 0 2px,transparent 2px 4px,#20262E 4px 5px,transparent 5px 8px,#20262E 8px 11px,transparent 11px 12px)}
.art-tag{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.8rem; font-weight:600; color:var(--ink-2); white-space:nowrap}
.art-tag svg{width:16px; height:16px; color:var(--accent)}
.art-tag.t1{left:0; top:-1%} .art-tag.t2{right:-2%; top:44%} .art-tag.t3{left:0; top:62%}

/* ---------- sections ---------- */
.sect{padding:clamp(60px,8vw,104px) 0; border-top:1px solid var(--line)}
.sect.alt{background:var(--surface-2)}
.sect-head{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(32px,4vw,52px)}
.sect-head h2{margin-top:16px}
.grid{display:grid; gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column; gap:9px; transition:border-color .18s, transform .18s, box-shadow .2s}
.card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow)}
.card p{font-size:.945rem; color:var(--muted); line-height:1.58}
.card .ico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:4px; flex:none}
.card .ico svg{width:20px; height:20px}

.steps{counter-reset:s; display:grid; margin:0; padding:0; border-top:1px solid var(--line)}
.steps li{counter-increment:s; list-style:none; display:grid; grid-template-columns:64px minmax(180px,.62fr) 1.55fr; gap:clamp(14px,2.5vw,36px); align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.08em; color:var(--accent)}
.steps h3{font-size:1.08rem; font-weight:600}
.steps p{font-size:.955rem; color:var(--muted); line-height:1.58}

/* pricing */
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}
.price-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:var(--r-lg); padding:clamp(26px,3.2vw,40px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px}
.price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price b{font-family:var(--display); font-size:clamp(2.8rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1}
.price span{font-size:1.02rem; color:var(--ink-2); font-weight:600}
.price small{display:block; width:100%; color:var(--muted); font-size:.92rem}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.checks li{display:flex; gap:11px; align-items:flex-start; font-size:.955rem; color:var(--ink-2); line-height:1.5}
.checks svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px}
.price-card .btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:6px}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.2vw,40px); display:grid; gap:0; align-content:start}
.side-card h3{font-size:1.02rem; font-family:var(--mono); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.facts{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line)}
.facts li{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.94rem}
.facts b{font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.facts span{color:var(--ink-2)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative; font-family:var(--display); font-weight:600; font-size:1.04rem; letter-spacing:-.01em; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:26px; width:11px; height:11px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); top:31px}
.faq details p{padding:0 60px 22px 0; color:var(--muted); font-size:.965rem; line-height:1.62; max-width:76ch}

/* band call to action */
.cta-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(135deg,#0A3468,#2081B1); color:#fff; border-radius:var(--r-lg); padding:clamp(28px,4vw,48px)}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-band p{color:#D6E6F5; margin-top:8px}
.cta-band .btn-primary{background:#fff; color:#0A3468; box-shadow:none}
.cta-band .btn-primary:hover{background:#E7F0FE}
.cta-band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{border-color:#fff; color:#fff}

/* page head for the inner pages */
.page-head{padding:clamp(44px,6vw,76px) 0 clamp(26px,3vw,36px)}
.page-head h1{margin-top:16px; font-size:clamp(2rem,4.2vw,3rem)}
.page-head .lede{margin-top:16px}

/* downloads */
.dl-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.dl{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px}
.dl .os{display:flex; align-items:center; gap:12px}
.dl .os svg{width:34px; height:34px; color:var(--ink)}
.dl h2{font-size:1.5rem}
.dl p{color:var(--muted); font-size:.94rem}
.dl .btn{align-self:flex-start; margin-top:4px}
.dl .alt{font-size:.88rem; color:var(--muted)}
.ver{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent)}

/* forms + messages */
.form{display:grid; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow); max-width:560px}
.form>button{justify-self:start}
.field{display:grid; gap:7px}
label{font-size:.82rem; font-weight:600; color:var(--ink-2); letter-spacing:.01em}
input{font-family:var(--body); font-size:.98rem; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; width:100%}
input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.msg{padding:14px 16px; border-radius:12px; font-size:.95rem; line-height:1.55; border:1px solid}
.msg.good{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent)}
.msg.bad{background:#FDECEC; color:#9B1C1C; border-color:#F5C6C6}
:root[data-theme="dark"] .msg.bad{background:#2B1314; color:#FCA5A5; border-color:#4A1F21}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .msg.bad{background:#2B1314; color:#FCA5A5; border-color:#4A1F21}}
.msg a{color:inherit; text-decoration:underline}

/* legal pages */
.doc{padding:clamp(44px,6vw,76px) 0 clamp(60px,8vw,100px)}
.doc h1{margin-top:16px; font-size:clamp(2rem,4.2vw,2.9rem)}
.doc .updated{margin-top:12px; color:var(--muted); font-size:.92rem}
.doc .intro{margin-top:26px; padding:18px 20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent)}
.doc h2{font-size:1.32rem; margin-top:38px; letter-spacing:-.015em}
.doc p{margin-top:14px; color:var(--ink-2)}
.doc ul{margin:14px 0 0; padding-left:1.25em; color:var(--ink-2)}
.doc li{margin-top:6px}
.doc .facts{margin-top:18px}
.doc table{width:100%; border-collapse:collapse; margin-top:16px; font-size:.93rem}
.doc th,.doc td{text-align:left; vertical-align:top; padding:11px 12px 11px 0; border-bottom:1px solid var(--line); color:var(--ink-2)}
.doc th{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.doc .draft{margin-top:24px; font-size:.85rem; color:var(--muted)}

/* footer */
.ftr{background:#0A111C; color:#BCCADB; padding:56px 0 30px}
.ftr a{color:#BCCADB; font-size:.93rem}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.ftr img.logo{height:58px; width:auto}
.ftr h4{font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#68809C; margin-bottom:14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr .blurb{font-size:.9rem; color:#8B9DB4; margin-top:16px; max-width:36ch; line-height:1.6}
.ftr-btm{margin-top:44px; padding-top:22px; border-top:1px solid #1C2A3D; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.84rem; color:#68809C}
.ftr-btm a{font-size:.84rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}

/* responsive */
@media (max-width:1000px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.sect-head,.pricing{grid-template-columns:1fr}
  .cards-art{height:400px}
  .hero::before{display:none}
  .steps li{grid-template-columns:56px 1fr; row-gap:6px}
  .steps li p{grid-column:2}
}
@media (max-width:820px){
  .nav{position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--line); padding:14px 20px 22px; margin:0; box-shadow:var(--shadow-lift); display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 12px; font-size:1rem}
  .nav a.active::after{display:none}
  .nav a.active{color:var(--accent)}
  .navtoggle{display:block}
  .nav .btn{display:inline-flex; margin:10px 0 0}
}
@media (max-width:720px){
  body{font-size:16px}
  .brand img{height:28px}
  .hdr-in{gap:12px}
  .prod{padding-left:12px; font-size:.9rem}
  .prod span{display:none}
  .g-2,.g-3,.dl-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:30px}
  .cards-art{height:360px}
  .idcard.front{transform:rotate(-4deg) translate(-22%, 0)}
  .idcard.back{transform:rotate(7deg) translate(26%, 4%)}
  .art-tag.t1{left:0; top:0} .art-tag.t2{right:0; top:auto; bottom:2%} .art-tag.t3{display:none}
  .faq details p{padding-right:0}
  .facts li{grid-template-columns:1fr; gap:4px}
}

/* feature extras */
.stack{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.stack span{font-family:var(--mono); font-size:.79rem; font-weight:500; letter-spacing:.02em; padding:7px 13px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface)}
.doc .intro + p, .doc .intro + h2{margin-top:26px}
@media (max-width:720px){
  .doc table,.doc tbody,.doc tr,.doc td{display:block}
  .doc thead{display:none}
  .doc tr{padding:12px 0; border-bottom:1px solid var(--line)}
  .doc td{border:0; padding:3px 0}
  .doc td:first-child{font-weight:600; color:var(--ink)}
}

/* databases band (1.0.1) */
.db-band{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center}
.db-band h2{margin-top:16px}
.db-band .lede{margin-top:18px}
.db-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.db{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; display:grid; grid-template-columns:30px 1fr; column-gap:12px; row-gap:2px; align-items:center}
.db svg{grid-row:span 2; width:26px; height:26px; color:var(--accent)}
.db b{font-family:var(--display); font-size:1rem; letter-spacing:-.01em}
.db span{font-size:.82rem; color:var(--muted); line-height:1.4}
.ac-band{margin-top:clamp(56px,7vw,96px); padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--line)}
.ac-note{margin-top:18px; font-size:.84rem; color:var(--muted); line-height:1.5}
@media (max-width:1000px){ .db-band{grid-template-columns:1fr} }
@media (max-width:520px){ .db-grid{grid-template-columns:1fr} }