/* Twins Proxy public site — dark-first (Jul 2026 redesign), light theme via
   :root[data-theme="light"] token overrides ONLY. Components must never fork
   per theme: every color they use is a token. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format('woff2')}
:root{
  color-scheme:dark;
  --bg:#0b0b10;--panel:#14141b;--panel2:#101016;--line:#26262f;--line2:#1e1e26;
  --ink:#f2f2f5;--sub:#a6a6b3;--mut:#70707c;
  --acc:#6366f1;--acc-hi:#818cf8;--accbg:rgba(99,102,241,.14);
  --fieldline:#34343f;
  --grad-a:#60a5fa;--grad-b:#a78bfa;
  --ok:#34d399;--okbg:rgba(52,211,153,.12);
  --teal:#2dd4bf;--tealbg:rgba(45,212,191,.12);
  --amber:#fbbf24;--amberbg:rgba(251,191,36,.12);
  --violet:#a78bfa;--violetbg:rgba(167,139,250,.14);
  --blue:#60a5fa;--bluebg:rgba(96,165,250,.14);
  --rust:#f87171;--rustbg:rgba(248,113,113,.12);
  --danger:#f87171;
  --btn-ink:#fff;
  --glow:0 6px 26px rgba(99,102,241,.38);
  --card-shadow:0 24px 60px rgba(0,0,0,.5);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fafaf9;--panel:#fff;--panel2:#f4f3f0;--line:#e9e7e2;--line2:#f0eee9;
  --ink:#1c1b19;--sub:#57544a;--mut:#8a877e;
  --acc:#3f3d8f;--acc-hi:#4f4dab;--accbg:#ecebf4;
  --fieldline:#d9d6cd;
  --grad-a:#3f3d8f;--grad-b:#7c5cbf;
  --ok:#1c6b34;--okbg:#eaf7ee;
  --teal:#21707d;--tealbg:#e7f3f5;
  --amber:#8a6116;--amberbg:#faf3df;
  --violet:#6d4a9e;--violetbg:#f1ecf8;
  --blue:#2456a8;--bluebg:#e9f0fa;
  --rust:#b4552d;--rustbg:#faeee7;
  --danger:#c0392b;
  --btn-ink:#fff;
  --glow:0 6px 22px rgba(63,61,143,.28);
  --card-shadow:0 24px 60px rgba(28,27,25,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Instrument Sans',sans-serif}
a{color:var(--acc-hi);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
h1,h2,p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:48px;padding-right:48px}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:30px;height:30px;object-fit:contain}
.brand strong{font-size:15px;color:var(--ink)}
.site-header{display:flex;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px}
.site-header nav{display:flex;gap:22px;font-size:13.5px;font-weight:500;color:var(--sub);margin-left:12px}
.site-header nav a{color:inherit}
.site-header .cta{margin-left:auto;display:flex;gap:12px;align-items:center}
.login-link{font-size:13.5px;font-weight:600;color:var(--ink)}
.theme-btn{background:none;border:1px solid var(--line);border-radius:8px;color:var(--sub);width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.theme-btn:hover{color:var(--ink);border-color:var(--fieldline)}
.btn-primary{background:var(--acc);color:var(--btn-ink);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;box-shadow:var(--glow);transition:transform .2s ease,filter .2s ease}
.btn-primary:hover{text-decoration:none;filter:brightness(1.12);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--fieldline);color:var(--ink);font-size:14.5px;font-weight:600;padding:12px 22px;border-radius:9px;background:var(--panel);transition:border-color .2s ease,background .2s ease}
.btn-outline:hover{text-decoration:none;background:var(--panel2);border-color:var(--mut)}

/* Gradient accent words inside headlines (Mailblust-style) */
.grad{background:linear-gradient(92deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--acc-hi)}

/* Mono uppercase section eyebrows, with an optional colored dot */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-hi);margin-bottom:14px}
/* .features/.pricing/.cta-final are grids with a large row gap; a direct-child
   eyebrow pulls its headline back up so the pair reads as one unit. */
.features>.eyebrow,.pricing>.eyebrow,.cta-final>.eyebrow{margin-bottom:-18px;justify-self:start}
.cta-final>.eyebrow{justify-self:center;margin-bottom:-6px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.eyebrow .dot.d-ok{background:var(--ok)}
.eyebrow .dot.d-teal{background:var(--teal)}
.eyebrow .dot.d-amber{background:var(--amber)}
.eyebrow .dot.d-violet{background:var(--violet)}
.eyebrow .dot.d-blue{background:var(--blue)}
.eyebrow .dot.d-rust{background:var(--rust)}

.hero{padding-top:64px;padding-bottom:72px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-copy{display:grid;gap:20px}
.badge{width:max-content;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-hi);background:var(--accbg);border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.hero h1{font-size:46px;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.hero .lede{font-size:16.5px;line-height:1.55;color:var(--sub);max-width:46ch}
.hero-ctas{display:flex;gap:12px;align-items:center}
.hero-ctas .btn-primary{font-size:14.5px;padding:12px 22px;border-radius:9px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.trust span{white-space:nowrap}

.browser{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow);overflow:hidden}
.browser-bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line2)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.browser-bar i:first-child{background:var(--rustbg)}
.browser-bar .url{margin-left:10px;font-size:11px;color:var(--mut);font-family:var(--mono);display:inline-flex;align-items:center;gap:5px}
.url .lock{width:10px;height:10px;color:var(--ok);flex:none}
.browser-body{padding:18px;display:grid;gap:10px}
.mock-title{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mock-title .step-chip{margin-left:auto;font-size:10.5px;color:var(--acc-hi);background:var(--accbg);border-radius:5px;padding:3px 8px;font-weight:700}
.mock-steps{display:grid;gap:7px;font-size:12px}
.mock-steps>div{display:flex;gap:8px;align-items:center}
.tick{width:16px;height:16px;border-radius:50%;background:var(--accbg);color:var(--acc-hi);display:grid;place-items:center;font-size:9px;font-weight:800}
.tick.solid{background:var(--acc);color:var(--btn-ink)}
.mock-result{background:var(--line2);border-radius:8px;padding:10px 12px;font-size:11.5px;font-family:var(--mono);color:var(--sub)}

.band{background:var(--panel2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.how{padding-top:72px;padding-bottom:72px;display:grid;gap:36px}
.how .intro{max-width:620px}
.how h2,.features h2{font-size:30px;letter-spacing:-.02em;margin-bottom:8px;text-wrap:balance}
.how .intro p{color:var(--sub);font-size:15px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps3>div{display:grid;gap:10px;align-content:start}
.step-num{width:30px;height:30px;border-radius:9px;background:var(--accbg);color:var(--acc-hi);display:grid;place-items:center;font-weight:700;font-size:13px;font-family:var(--mono)}
.steps3 strong{font-size:15.5px}
.steps3 p{font-size:13.5px;color:var(--sub);line-height:1.5}

.features{padding-top:72px;padding-bottom:72px;display:grid;gap:32px}

/* "How it works" request-flow diagram: three nodes on a dotted canvas joined by
   dashed connectors; a small dot travels each connector (packet in flight). */
.flow-panel{display:flex;align-items:stretch;gap:14px;background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:26px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.flow-node{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:6px;align-content:start;justify-items:start}
.flow-node-acc{border-color:var(--acc);box-shadow:0 10px 34px rgba(99,102,241,.18)}
.flow-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.flow-node strong{font-size:14px;letter-spacing:-.01em}
.flow-sub{font-size:12px;color:var(--sub);line-height:1.45}
.flow-link{position:relative;flex:0 0 92px;display:flex;align-items:center;justify-content:center}
.flow-link::before{content:"";position:absolute;left:2px;right:12px;top:50%;border-top:2px dashed var(--fieldline)}
.flow-link::after{content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left:7px solid var(--fieldline)}
.flow-link i{position:absolute;left:8%;top:50%;width:7px;height:7px;margin-top:-4.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);animation:packet-x 2.6s ease-in-out infinite}
.flow-link:nth-of-type(4) i{animation-delay:1.3s}
.flow-tag{position:relative;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--sub);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:3px 9px;white-space:nowrap;margin-top:-38px}
@keyframes packet-x{0%{left:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:86%;opacity:0}}
@keyframes packet-y{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:82%;opacity:0}}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:8px;align-content:start;transition:transform .2s ease,border-color .2s ease}
.feature-grid>div:hover{transform:translateY(-2px);border-color:var(--fieldline)}
.feature-grid strong{font-size:14.5px}
.feature-grid p{font-size:13px;color:var(--sub);line-height:1.5}

.pricing{padding-top:72px;padding-bottom:72px;display:grid;gap:36px}
.pricing .intro{max-width:620px}
.pricing h2{font-size:30px;letter-spacing:-.02em;margin-bottom:8px}
.pricing .intro p{color:var(--sub);font-size:15px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.price-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 20px;display:grid;gap:14px;align-content:start;transition:transform .2s ease,border-color .2s ease}
.price-card:hover{transform:translateY(-2px);border-color:var(--fieldline)}
.price-card.featured{border-color:var(--acc);box-shadow:0 16px 48px rgba(99,102,241,.22)}
.price-tag{position:absolute;top:-10px;left:20px;background:var(--acc);color:var(--btn-ink);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;border-radius:99px;padding:4px 10px}
.price-name{font-size:14px;font-weight:700}
.price-amount{font-size:34px;font-weight:700;letter-spacing:-.02em}
.price-amount span{font-size:13px;font-weight:500;color:var(--mut)}
.price-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;color:var(--sub)}
.price-card li::before{content:"✓ ";color:var(--ok);font-weight:700}
.price-card .btn-primary,.price-card .btn-outline{text-align:center;font-size:13.5px;padding:10px 14px}
.price-note{font-size:12.5px;color:var(--mut);max-width:640px}

.security{background:var(--panel2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.security-grid{padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.security h2{font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.security p{font-size:14.5px;line-height:1.6;color:var(--sub)}
.security-list{display:grid;gap:9px;font-size:12.5px;font-family:var(--mono);color:var(--sub)}
.security-list span::first-letter{color:var(--ok)}

.cta-final{padding-top:80px;padding-bottom:80px;text-align:center;display:grid;gap:18px;justify-items:center}
.cta-final h2{font-size:32px;letter-spacing:-.02em}
.cta-final p{color:var(--sub);font-size:15px}
.cta-final .btn-primary{font-size:15px;padding:13px 26px;border-radius:9px}

.site-footer{border-top:1px solid var(--line);background:var(--panel2)}
.site-footer .wrap{padding-top:24px;padding-bottom:24px;display:flex;gap:20px;align-items:center;font-size:12.5px;color:var(--mut)}
.site-footer .brand-mark{width:22px;height:22px}
.site-footer .brand{white-space:nowrap;flex:none}
.site-footer nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.site-footer nav a{color:inherit}

/* ---------- homepage: side-by-side "same site, two addresses" demo ---------- */
.split-demo{display:grid;gap:14px}
.demo-pane{display:grid;gap:7px}
.demo-label{font-size:12px;color:var(--mut);font-weight:600}
.demo-label em{font-style:normal;color:var(--acc-hi);font-weight:500}
.demo-pane .browser{box-shadow:0 14px 34px rgba(0,0,0,.35)}
.url-accent{color:var(--acc-hi);font-weight:600}
.demo-page{display:grid;gap:9px;padding:18px}
.demo-logo{width:64px;height:11px;border-radius:3px;background:var(--acc);opacity:.9}
.demo-line{height:8px;border-radius:3px;background:var(--line2);width:70%}
.demo-line.long{width:92%;height:11px;background:var(--line)}
.demo-cta{width:96px;height:22px;border-radius:6px;background:var(--accbg);border:1px solid var(--line)}
.demo-note{font-size:12.5px;color:var(--sub);line-height:1.55}
.demo-note strong{color:var(--ink)}

/* Hero live event strip — the control plane "running" on the page */
.live-strip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.live-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.live-row{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;color:var(--sub)}
.live-host{color:var(--ink);font-weight:600}
.live-what{margin-left:auto;color:var(--mut)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;animation:pulse 3s ease-in-out infinite}
.live-dot.d-ok{background:var(--ok)}
.live-dot.d-blue{background:var(--blue);animation-delay:1s}
.live-dot.d-violet{background:var(--violet);animation-delay:2s}

/* ---------- homepage: problem / benefit / audience cards ---------- */
.problem-grid,.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.audience-grid{grid-template-columns:repeat(4,1fr)}
.problem-grid>div,.audience-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:10px;align-content:start;transition:transform .2s ease,border-color .2s ease}
.problem-grid>div:hover,.audience-grid>div:hover{transform:translateY(-2px);border-color:var(--fieldline)}
.problem-grid strong,.audience-grid strong{font-size:15px;letter-spacing:-.01em}
.problem-grid p,.audience-grid p{font-size:13.5px;color:var(--sub);line-height:1.55;margin:0}
.section-lede{font-size:15px;color:var(--sub);line-height:1.6;max-width:760px;margin:-6px 0 6px}
.plan-explainer{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:grid;gap:8px}
.plan-explainer h3{margin:0;font-size:15.5px;letter-spacing:-.01em}
.plan-explainer p{font-size:13.5px;color:var(--sub);line-height:1.6;margin:0}

@media (max-width:900px){
  .wrap{padding-left:20px;padding-right:20px}
  .flow-panel{flex-direction:column;padding:18px}
  .flow-link{flex:0 0 56px}
  .flow-link::before{left:50%;right:auto;top:4px;bottom:14px;border-top:0;border-left:2px dashed var(--fieldline)}
  .flow-link::after{right:auto;left:50%;top:auto;bottom:4px;transform:translateX(-54%);border:5px solid transparent;border-top:7px solid var(--fieldline);border-bottom:0}
  .flow-link i{left:50%;margin-left:-3.5px;margin-top:0;top:8%;animation-name:packet-y}
  .flow-tag{margin-top:0;margin-left:64px}
  .hero,.security-grid{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:34px}
  .steps3,.feature-grid,.problem-grid,.audience-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .site-header nav{display:none}
}
@media (min-width:901px) and (max-width:1100px){
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .audience-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- legal pages ---------- */
.brand a.brand{color:inherit;text-decoration:none}
.legal{padding-top:48px;padding-bottom:72px;max-width:760px;display:grid;gap:16px}
.legal h1{font-size:34px;letter-spacing:-.02em}
.legal-updated{font-size:12.5px;color:var(--mut)}
.legal h2{font-size:18px;letter-spacing:-.01em;margin-top:16px}
.legal p{font-size:14px;line-height:1.65;color:var(--sub)}
.legal p strong{color:var(--ink)}
.legal code{font-family:var(--mono);font-size:12.5px;background:var(--line2);border-radius:5px;padding:1px 5px}
.feature-grid code{font-family:var(--mono);font-size:.86em;background:var(--line2);padding:1px 5px;border-radius:5px}

/* status page — same card/chip idiom as the landing cards */
.status-banner{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:16px 20px;background:var(--panel)}
.status-banner strong{font-size:15.5px;color:var(--ink)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--fieldline);flex:none}
.status-banner.up .status-dot{background:var(--ok);animation:pulse 3s ease-in-out infinite}
.status-banner.down .status-dot{background:var(--danger)}
.status-list{display:grid;gap:8px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 20px;background:var(--panel)}
.status-row strong{font-size:14.5px}
.status-row small{display:block;color:var(--sub);font-size:13px;line-height:1.5;margin-top:2px;font-weight:400}
.status-chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:3px 8px;background:var(--line2);color:var(--mut);white-space:nowrap}
.status-chip.up{background:var(--okbg);color:var(--ok)}
.status-chip.down{background:var(--rustbg);color:var(--danger)}

/* abuse report form */
.abuse-form{display:grid;gap:16px;max-width:640px;margin-top:8px}
.abuse-form label.f{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.abuse-form label.f small{font-weight:400;color:var(--mut)}
.abuse-form input,.abuse-form select,.abuse-form textarea{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--fieldline);border-radius:9px;background:var(--panel);color:var(--ink);width:100%}
.abuse-form textarea{resize:vertical;line-height:1.5}
.abuse-form input:focus,.abuse-form select:focus,.abuse-form textarea:focus{outline:2px solid var(--acc);border-color:var(--acc)}
.hidden{display:none!important}
.abuse-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.abuse-form input[type=file]{padding:9px 12px;background:var(--panel);cursor:pointer}
.abuse-file-note{font-weight:400;color:var(--mut)}
.abuse-turnstile{min-height:0}
.abuse-actions{display:flex;align-items:center;gap:14px}
.abuse-error{color:var(--danger);font-size:13px;font-weight:600}
.abuse-legal{font-size:12px;color:var(--mut);line-height:1.5}
.abuse-success{background:var(--okbg);border:1px solid var(--ok);border-radius:12px;padding:16px 18px;margin:16px 0;color:var(--ok)}
.abuse-success p{margin:6px 0 0;font-weight:400}
@media(max-width:640px){.abuse-two{grid-template-columns:1fr}}

/* Content/SEO article pages */
.article{max-width:820px}
.article h3{font-size:15px;letter-spacing:-.01em;margin-top:6px}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto}
.cmp-table th,.cmp-table td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;line-height:1.5;color:var(--sub);min-width:120px}
.cmp-table th{color:var(--ink);background:var(--line2);font-weight:600}
.cmp-table td:first-child{color:var(--ink);font-weight:500}

/* Icon chips: tinted rounded squares with a stroke icon. Default is the accent;
   hue modifiers are assigned by meaning (rust = problems, green = SSL/security,
   teal = monitoring/usage, violet = team/API, amber = quality/CA, blue = DNS). */
.f-icon{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--accbg);color:var(--acc-hi);display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.f-icon svg{width:16px;height:16px}
.f-icon.t-ok{background:var(--okbg);color:var(--ok)}
.f-icon.t-teal{background:var(--tealbg);color:var(--teal)}
.f-icon.t-amber{background:var(--amberbg);color:var(--amber)}
.f-icon.t-violet{background:var(--violetbg);color:var(--violet)}
.f-icon.t-blue{background:var(--bluebg);color:var(--blue)}
.f-icon.t-rust{background:var(--rustbg);color:var(--rust)}
.feature-grid>div:hover .f-icon,.problem-grid>div:hover .f-icon,.audience-grid>div:hover .f-icon{transform:scale(1.08)}

/* Footer "made in" note — its own centered row under the links */
.made-in-row{display:flex;justify-content:center;padding:0 0 20px;font-family:var(--mono);font-size:11px;color:var(--mut)}
.made-in{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.eu-flag{width:18px;height:12px;border-radius:2px;display:block}
.made-heart{color:#e25555}
.site-footer a.brand{color:inherit;text-decoration:none}
.site-footer a.brand:hover{color:var(--ink)}

/* FAQ accordion (native <details> — no JS, CSP-clean) */
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.faq-item summary{cursor:pointer;font-weight:600;font-size:14px;padding:13px 16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--mut);font-size:17px;font-weight:400;flex-shrink:0}
.faq-item[open] summary::after{content:"\2212"}
.faq-item[open] summary{border-bottom:1px solid var(--line2)}
.faq-a{padding:12px 16px 15px;display:grid;gap:10px}
.faq-a p{font-size:13.5px;line-height:1.62;color:var(--sub)}
.faq-a pre{background:var(--line2);border:1px solid var(--line);border-radius:8px;padding:11px 13px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink)}

/* ---------- motion: one play-once hero reveal + quiet pulses ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy{animation:rise .55s ease both}
.split-demo .demo-pane:first-child{animation:rise .55s ease .12s both}
.split-demo .demo-pane:nth-child(2){animation:rise .55s ease .24s both}
.split-demo .demo-note{animation:rise .55s ease .36s both}
.split-demo .live-strip{animation:rise .55s ease .48s both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}