/* Self-hosted fonts (SIL OFL) so the site renders identically on Windows, Linux,
   macOS and inside Docker containers with no fonts installed. */
/* Static instances instead of a variable font: Chromium's PDF engine embeds
   statics as compact CID TrueType subsets, while a variable font degrades to
   hundreds of Type 3 glyph-drawing fonts (huge PDFs, slow font enumeration). */
@font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('/fonts/RobotoMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('/fonts/RobotoMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}


  /* ---------- Tokens (derived from the EvoPdf Next logo) ---------- */
  :root{
    --html:#1E6FB8;        /* blue of the HTML document icon */
    --html-deep:#155A98;
    --pdf:#A33B35;         /* PDF red, toned down for large surfaces (logo keeps #CF1B12) */
    --pdf-deep:#88302B;
    --ink:#22303F;         /* slate of the "EvoPdf" wordmark */
    --ink-soft:#4B5A6B;
    --muted:#7B8794;
    --line:#E3E8EE;
    --bg:#FFFFFF;
    --bg-alt:#F4F7FA;
    --code-bg:#1B2431;
    --code-fg:#E6EDF3;
    --radius:10px;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:'Roboto Mono',ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
    --max:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:var(--html);text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:3px solid #FFB74D;outline-offset:2px}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
  h1,h2,h3{line-height:1.15;margin:0}
  h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em}
  h3{font-size:1.05rem}
  p{margin:0 0 1rem}
  code{font-family:var(--mono);font-size:.92em}
  .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pdf);margin-bottom:.6rem}
  .lede{color:var(--ink-soft);font-size:1.05rem;max-width:70ch}
  .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:8px;font-weight:600;font-size:.95rem;border:1px solid transparent;white-space:nowrap}
  .btn:hover{text-decoration:none}
  .btn-primary{background:var(--pdf);color:#fff}
  .btn-primary:hover{background:var(--pdf-deep)}
  .btn-secondary{background:var(--html);color:#fff}
  .btn-secondary:hover{background:var(--html-deep)}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink-soft)}

  /* ---------- Header / navigation ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
  .logo{display:flex;align-items:center;gap:.6rem}
  .logo img{height:38px;width:auto;display:block}
  .menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
  .menu>li{position:relative}
  .menu a,.menu summary{display:block;white-space:nowrap;padding:.5rem .65rem;border-radius:6px;color:var(--ink);font-weight:500;font-size:.93rem;cursor:pointer;list-style:none}
  .menu summary::-webkit-details-marker{display:none}
  .menu a:hover,.menu summary:hover{background:var(--bg-alt);text-decoration:none}
  .menu summary::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-.15em) rotate(45deg)}
  /* open state */
  .menu details[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
  .dropdown{position:absolute;left:0;top:calc(100% + 6px);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(34,48,63,.12);padding:.4rem;list-style:none;margin:0}
  .dropdown a{padding:.5rem .7rem;font-weight:500}
  .dropdown .current{color:var(--pdf);font-weight:700}
  .nav-cta{display:flex;gap:.5rem}
  .burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:.45rem .6rem;cursor:pointer}
  .burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

  /* ---------- Hero ---------- */
  .hero{padding:56px 0 40px;background:linear-gradient(180deg,#FBFCFD 0%,#fff 100%)}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
  .hero h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.02em}
  .hero h1 em{font-style:normal;color:var(--html)}
  .hero .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1rem}
  .install{margin-top:.2rem;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.85rem;background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;max-width:100%;overflow:auto}
  .install .k{color:var(--muted)}
  .install button{margin-left:auto;font:inherit;font-size:.75rem;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:5px;padding:.25rem .5rem;cursor:pointer;color:var(--ink)}
  .fineprint{font-size:.83rem;color:var(--muted);margin-top:.6rem}
  /* conversion card */
  .convert{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(34,48,63,.10);overflow:hidden}
  .convert .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg-alt)}
  .convert .bar i{width:10px;height:10px;border-radius:50%;background:#D5DBE2;display:block}
  .convert .bar i:first-child{background:var(--pdf)} .convert .bar i:nth-child(2){background:#F1B33C} .convert .bar i:nth-child(3){background:var(--html)}
  .convert .panes{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
  .convert pre{margin:0;padding:16px;font-family:var(--mono);font-size:.74rem;line-height:1.5;white-space:pre;overflow:hidden}
  .convert .src{background:#fff;color:var(--ink-soft)}
  .convert .src .t{color:var(--html)} .convert .src .a{color:#8A5A00}
  .convert .out{background:#FBFBFB;border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:8px}
  .convert .page{background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.06);padding:12px;font-size:.7rem;flex:1}
  .convert .page b{display:block;font-size:.85rem;margin-bottom:4px}
  .convert .page .ln{height:6px;background:#E9EDF1;border-radius:3px;margin:5px 0}
  .convert .page .ln.short{width:60%}
  .convert .page .foot{display:flex;justify-content:space-between;color:var(--muted);margin-top:10px;border-top:1px dashed var(--line);padding-top:6px}
  .convert .arrow{display:flex;align-items:center;justify-content:center;padding:0 6px;color:#3A97CC}
  .convert .swoosh{width:48px;height:auto}
  .convert .tags{margin-left:auto;display:flex;gap:4px}
  .tag{font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:.2rem .45rem;border-radius:4px;background:#FDECEB;color:var(--pdf-deep)}
  .tag.blue{background:#E6F0FA;color:var(--html-deep)}

  /* ---------- Platforms strip ---------- */
  .platforms{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}
  .platforms ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:14px 0;font-size:.88rem;color:var(--ink-soft);font-weight:500}
  .platforms li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--html);margin-right:.5rem;vertical-align:middle}
  .platforms li.pdf::before{background:var(--pdf)}

  /* ---------- Sections ---------- */
  section{padding:64px 0}
  section.text-body{padding-top:16px}
  .hero:has(+ section.text-body){padding-bottom:28px}
  .hero:has(+ section.text-body) .lede{max-width:96ch}
  section.text-body .legal, section.text-body .legacy-article{max-width:96ch}
  section.alt{background:var(--bg-alt)}
  .section-head{max-width:none;margin-bottom:2rem}
  .section-head > .lede{max-width:78ch}
  .wrap > .lede{max-width:none}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .grid-2>*,.grid-3>*,.hero-grid>*{min-width:0}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .card h3{margin-bottom:.5rem}
  .card ul{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:.93rem}
  .card li{margin:.3rem 0}
  .card .glyph{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;margin-bottom:.8rem;background:#E6F0FA;color:var(--html)}
  .card .glyph.red{background:#FDECEB;color:var(--pdf)}

  /* quick start */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
  .step{border-top:3px solid var(--html);padding-top:14px;min-width:0}
  .step:nth-child(3){border-color:var(--pdf)}
  .step h3::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem;margin-right:.5rem}
  pre.code{background:var(--code-bg);color:var(--code-fg);border-radius:var(--radius);padding:16px 18px;overflow:auto;font-family:var(--mono);font-size:.8rem;line-height:1.55;margin:.8rem 0 0;white-space:pre-wrap;word-break:break-word}
  pre.code .c{color:#8B98A8}
  pre.code .k{color:#7FB8F0}
  pre.code .s{color:#F5B266}
  pre.code .t{color:#9FD8A8}

  /* demo + docs pairing */
  .pairs{display:grid;grid-template-columns:1fr;gap:10px}
  .pair{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:.9rem}
  .pair .name{font-weight:600}
  .pill{font-size:.75rem;font-weight:700;padding:.3rem .55rem;border-radius:5px;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
  .pill.demo{border-color:#CFE0F3;color:var(--html-deep);background:#F1F7FD}
  .pill.docs{border-color:#F5D0CD;color:var(--pdf-deep);background:#FEF3F2}
  .pill:hover{text-decoration:none;filter:brightness(.96)}

  /* standards */
  .standards{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
  .standards span{font-family:var(--mono);font-weight:700;font-size:.85rem;padding:.4rem .7rem;border-radius:6px;background:#fff;border:1px solid var(--line)}
  .standards span.ua{border-color:#CFE0F3;color:var(--html-deep)}
  .standards span.a{border-color:#F5D0CD;color:var(--pdf-deep)}

  /* packages */
  table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
  th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-alt)}
  tr:last-child td{border-bottom:0}
  td code{background:var(--bg-alt);padding:.1rem .35rem;border-radius:4px;font-size:.84em}
  .table-wrap{overflow:auto}

  /* classic callout */
  .classic{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border:1px dashed #C9D2DC;border-radius:var(--radius);padding:20px 22px;background:#fff}
  .classic .glyph{width:44px;height:44px;border-radius:10px;background:var(--bg-alt);display:grid;place-items:center;color:var(--ink-soft)}
  .classic p{margin:0;font-size:.93rem;color:var(--ink-soft)}
  .classic strong{color:var(--ink)}

  /* final CTA */
  .cta{background:var(--ink);color:#fff;border-radius:16px;padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
  .cta h2{color:#fff}
  .cta p{color:#B9C4D0}
  .cta .actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
  .cta .btn-ghost{background:transparent;color:#fff;border-color:#4B5A6B}

  /* footer */
  footer{border-top:1px solid var(--line);padding:40px 0;font-size:.88rem;color:var(--ink-soft)}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px}
  footer .ft-h{margin:0 0 .6rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{margin:.35rem 0}
  footer a{color:var(--ink-soft)}
  .copy{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .hero-grid,.grid-3,.steps,.grid-2,.cta{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .cta .actions{justify-content:flex-start}
  }
  @media (max-width:990px){
    .burger{display:block}
    .nav-cta{display:none}
    #menu-toggle:not(:checked) ~ .menu{display:none}
    .menu{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.5rem 12px 1rem;box-shadow:0 14px 30px rgba(34,48,63,.12)}
    .dropdown{position:static;box-shadow:none;border:0;padding-left:.8rem;min-width:0}
    .menu .mobile-only{display:block}
    .convert .panes{grid-template-columns:1fr}
    .convert .arrow{padding:8px 0;transform:rotate(90deg)}
    .convert .out{border-left:0;border-top:1px solid var(--line)}
    .classic{grid-template-columns:1fr}
    section{padding:44px 0}
    .cta{padding:28px 22px}
  }
  @media (max-width:400px){.logo img{height:32px}}
  @media (min-width:991px){.mobile-only{display:none!important}}
  /* ---------- Home: extra sections ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-28px;position:relative}
  .stats div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 8px 24px rgba(34,48,63,.06)}
  .stats b{display:block;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
  .stats span{font-size:.85rem;color:var(--muted)}
  .customers{padding:36px 0 8px}
  .customers .lbl{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 40px}
  .logos img{height:30px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.65}
  .logos img:hover{filter:none;opacity:1}
  .customers .more{display:block;text-align:center;font-size:.85rem;margin-top:16px}
  .tabs{display:grid;grid-template-columns:260px 1fr;gap:20px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
  .tabs .list{background:var(--bg-alt);border-right:1px solid var(--line);padding:10px}
  .tabs label{display:block;padding:.6rem .8rem;border-radius:7px;font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-soft)}
  .tabs label small{display:block;font-weight:500;font-size:.78rem;color:var(--muted)}
  .tabs input{position:absolute;opacity:0;pointer-events:none}
  .tabs .panel{display:none;padding:18px 20px 20px 0}
  .tabs .panel pre.code{margin:0}
  .tabs .panel p{font-size:.9rem;color:var(--ink-soft);margin:.8rem 0 0}
  #t1:checked~.list label[for=t1],#t2:checked~.list label[for=t2],#t3:checked~.list label[for=t3],#t4:checked~.list label[for=t4]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  #t1:checked~.panels .p1,#t2:checked~.panels .p2,#t3:checked~.panels .p3,#t4:checked~.panels .p4{display:block}
  .deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .deploy a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;color:var(--ink)}
  .deploy a:hover{text-decoration:none;border-color:var(--html)}
  .deploy h3{font-size:1rem;margin-bottom:.3rem}
  .deploy p{margin:0;font-size:.88rem;color:var(--ink-soft)}
  .deploy .k{font-family:var(--mono);font-size:.75rem;color:var(--html);font-weight:700;margin-bottom:.5rem;display:block}
  .price{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
  .plan.company{border-color:#CFE0F3;box-shadow:0 12px 30px rgba(30,111,184,.08)}
  .plan h3{font-size:1.15rem}
  .plan .amount{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:.4rem 0 .2rem}
  .plan .amount small{font-size:.9rem;font-weight:600;color:var(--muted)}
  .plan .alt{font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
  .plan ul{margin:0 0 1.2rem;padding-left:1.1rem;color:var(--ink-soft);font-size:.92rem;flex:1}
  .plan li{margin:.3rem 0}
  .faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
  .faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--muted);font-weight:400}
  .faq details[open] summary::after{content:"–"}
  .faq p{margin:.6rem 0 0;color:var(--ink-soft);font-size:.93rem;max-width:70ch}
  @media (max-width:960px){.stats{grid-template-columns:1fr 1fr;margin-top:0}.deploy{grid-template-columns:1fr 1fr}.price{grid-template-columns:1fr}.tabs{grid-template-columns:1fr}.tabs .list{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:4px}.tabs .panel{padding:16px}}
  @media (max-width:600px){.stats,.deploy,.tabs .list{grid-template-columns:1fr}}

  .soon{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pdf);background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:.05rem .35rem;margin-left:.4rem;vertical-align:middle}
  .dd-head{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.5rem .7rem .3rem;white-space:nowrap}
  @media (max-width:1380px){.nav-cta .btn-ghost{display:none}}
  @media (max-width:1180px){.menu a,.menu summary{font-size:.86rem;padding:.5rem .45rem}.nav-cta .btn{padding:.6rem .8rem;font-size:.88rem}.nav{gap:.5rem}}
  @media (max-width:1080px){.menu a,.menu summary{font-size:.83rem;padding:.5rem .35rem}.logo-text{font-size:1.15rem}}
  .product-badge{display:block;height:56px;width:auto;margin-bottom:1.2rem}
  @media (max-width:600px){.product-badge{height:44px}}
  /* section head with lede: heading left, paragraph right */
  .section-head:has(> .lede){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;align-items:end;max-width:none}
  .section-head:has(> .lede) .eyebrow{grid-column:1}
  .section-head:has(> .lede) h2{grid-column:1}
  .section-head:has(> .lede) .lede{grid-column:2;grid-row:1/span 2;align-self:end;margin:0;max-width:none}
  @media (max-width:960px){.section-head:has(> .lede){display:block;max-width:none}.section-head:has(> .lede) .lede{margin-top:.8rem}}
  /* code block chrome: language label and copy button */
  pre.code{position:relative;padding-top:2.1rem}
  .code-lang{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.1rem .4rem;background:#fff}
  /* conversion arrow */
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-right .install{margin:0 0 .6rem;font-size:.78rem;padding-right:4.4rem !important}
  .hero-right .install .code-lang{display:none}
  .hero-right .pkg-note{margin:0 0 1rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
  .hero-right .pkg-note code{font-size:.74rem}
  .install-guides a.card{display:block;text-decoration:none;color:var(--ink)}
  .install-guides a.card:hover{border-color:var(--html)}
  .install-guides .card h3{margin:0 0 .35rem}
  .install-guides .card p{margin:0 0 .6rem;color:var(--muted);font-size:.92rem}
  .install-guides .more{color:var(--html);font-weight:600;font-size:.9rem}
  .publish-links{margin:1.2rem 0 0;font-size:.9rem;color:var(--muted)}
  /* code cards */
  .codecard .bar i{width:10px;height:10px;border-radius:50%;background:#D5DBE2;display:block}
  .codecard .bar i:first-child{background:var(--pdf)}
  .codecard .bar i:nth-child(2){background:#F1B33C}
  .codecard .bar i:nth-child(3){background:var(--html)}
  .codecard .bar span{margin-left:6px}
  .codecard .foot{padding:12px 16px;font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--line)}
  .codecard{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(34,48,63,.10);background:#fff}
  .codecard .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg-alt);font-family:var(--mono);font-size:.78rem;color:var(--muted)}
  .menu .dropdown .dd-sub a{padding-left:1.7rem;font-size:.9rem;color:var(--ink-soft)}
  [id]{scroll-margin-top:84px}
  svg.sw{width:18px;height:auto;flex:none;color:#3A97CC}
  
  .comp{position:relative}
  .comp .io{display:flex;align-items:center;gap:8px;margin-bottom:.7rem;font-family:var(--mono);font-size:.8rem;font-weight:700}
  .comp .io .in{color:var(--html-deep);background:#E6F0FA;padding:.2rem .5rem;border-radius:4px}
  .comp .io .out{color:var(--pdf-deep);background:#F7E9E8;padding:.2rem .5rem;border-radius:4px}
  .comp pre.code-mini{margin:.85rem 0 0;padding:30px 10px 10px;font-size:.66rem;line-height:1.5;border-radius:8px;white-space:pre;word-break:normal;overflow-x:auto}
  /* code card bar */
  .codecard .bar .code-lang{margin-left:auto}
  .codecard pre.code{line-height:1.5;white-space:pre;word-break:normal;overflow-x:auto}
  .code-tools{position:absolute;top:.45rem;right:.6rem;display:flex;align-items:center;gap:6px}
  pre.code .code-lang,.dockerfile .code-lang{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#AAB7C4}
  .code-copy{font-family:var(--sans);font-size:.72rem;font-weight:600;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:.25rem .55rem;cursor:pointer}
  .code-copy:hover{border-color:var(--ink-soft)}
  pre.code .code-copy,.dockerfile .code-copy{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#DCE4EC}
  pre.code .code-copy:hover,.dockerfile .code-copy:hover{border-color:rgba(255,255,255,.4)}
  .cmds div{position:relative;padding-right:4.2rem}
  .cmds .code-copy{position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}
  .dockerfile{position:relative}
  .dockerfile .code-tools{top:.4rem}
  .logo{display:flex;align-items:center;gap:9px;flex:none}
  .logo-text{white-space:nowrap}
  .logo .gear{height:40px;width:auto;flex:none}
  .logo-text{font-size:1.32rem;font-weight:500;letter-spacing:-.01em;color:#4888B9;line-height:1.05}
  .logo-text b{color:#1D2B33;font-weight:800}
  .logo-text small{display:block;font-size:.68rem;font-weight:700;color:#4888B9;letter-spacing:.02em}
  .logo-text small b{font-weight:700;color:#1D2B33}
  
  .hero-grid>*,.grid-2>*,.grid-3>*,.comp-grid>*,.price>*{min-width:0}
  /* command chips */
  .cmds > div, .install{background:#0F1B29 !important;border:1px solid rgba(255,255,255,.12) !important;color:#DCE4EC !important;border-radius:8px;position:relative;padding-right:7rem !important}
  /* command lines */
  .cmds > div{white-space:nowrap;overflow-x:auto;font-size:.8rem;padding-right:6.2rem !important}
  .install{white-space:nowrap;overflow-x:auto;font-size:.8rem;flex-wrap:nowrap}
  .install code{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .install .code-lang{margin-left:auto;flex:none}
  .install .code-copy{flex:none}
  .cmds .k, .install .k{color:#5B7A94}
  .install code, .cmds > div code{color:#DCE4EC;background:transparent}
  .cmds .code-tools, .install .code-tools{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);display:flex;align-items:center;gap:6px}
  .cmds .code-lang, .install .code-lang, .cmds .code-copy, .install .code-copy{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#AAB7C4}
  .cmds .code-copy, .install .code-copy{color:#DCE4EC;position:static;transform:none}
  .cmds .code-copy:hover, .install .code-copy:hover{border-color:rgba(255,255,255,.4)}
  .getpkg .cmds div{padding-top:.55rem;padding-bottom:.55rem}
/* narrow viewports */
@media (max-width:1080px){pre.code{font-size:.74rem} .cmds > div{font-size:.7rem;padding-right:3.6rem !important} .install{font-size:.72rem} .hero-right .install{font-size:.68rem;flex-wrap:wrap;row-gap:.3rem} .hero-right .install .k{display:none} .hero-right .install code{flex:1 1 100%;overflow:visible;text-overflow:clip} .install .code-lang,.cmds > div .code-lang{display:none}}