/* Nibra Studio 0.10.0 — the public site nibrastudio.app (spec «Nibra site» §3): one stylesheet for every page of the site — the frame
   (header, menu, footer), the eleven section types of the store, the legal pages' text (their inline <style> moved here: style-src 'self')
   and what the prices page takes from it. T33 built it; T35 finished it against the approved mockup (qa/fixtures/site-mockup.html): the
   program's identity (palette and IBM Plex of guide.css), one type scale, one spacing rhythm, light only (the mockup defines no dark look).
   Classes only: the server writes no style= attribute and no <style>. Order: tokens, base, frame, sections in page order, the drawings,
   the program's own pages, then one block per breakpoint group (the header ≤ 1023 px and its folded state; the page ≤ 860 px and ≤ 640 px), motion and print. */

/* ── tokens ── */
/* fonts by script (fix round 1): an Arabic face is fetched only for Arabic text — its letters and the spaces, digits and punctuation between
   them (final fix wave: an Arabic page no longer waits for a Latin face to draw its spaces, so the text does not re-wrap when it arrives) —
   and a Latin face only for Latin text. The family order follows the page's language (Arabic first on Arabic pages, Latin first on
   English ones), and the page preloads the two faces of its own language (siterender). */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+00AB,U+00BB,U+2013-2014,U+2022;src:url(/fonts/plex-arabic-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+00AB,U+00BB,U+2013-2014,U+2022;src:url(/fonts/plex-arabic-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+00AB,U+00BB,U+2013-2014,U+2022;src:url(/fonts/plex-arabic-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+00AB,U+00BB,U+2013-2014,U+2022;src:url(/fonts/plex-arabic-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/fonts/plex-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/fonts/plex-latin-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/fonts/plex-latin-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/fonts/plex-latin-700.woff2) format("woff2")}
/* a fallback the size of Plex (final fix wave C6): until the Latin faces arrive, Latin text is drawn in the system's Arial (or a metric twin)
   scaled to Plex's widths (measured: Plex/Arial 1.019 regular, 0.984 bold), so the text does not re-wrap when Plex takes over */
@font-face{font-family:"Plex Fallback";font-weight:400;size-adjust:101.9%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica"),local("Arimo")}
@font-face{font-family:"Plex Fallback";font-weight:600 700;size-adjust:98.4%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold"),local("Arimo Bold")}
/* weights in use: 400 (text), 600 (labels, links, buttons), 700 (headings) — three faces per script (fix round 1: the page stays light) */
:root{
 /* colours: ink on paper, the program's teal, one amber signal (the dot of the N mark) */
 --ink:#1d2830;--ink2:#3b4851;--mut:#5e676e;--paper:#f6f4ef;--paper2:#efebe3;--card:#fff;--ln:#e4ded3;--ln2:#d6cfc2;
 --p:#0b5563;--p2:#0f6b7b;--ph:#084552;--pl:#e4f0f1;--acc:#c9852a;--accl:#fbf1e1;--acc2:#8a5713;--ok:#047857;--on-p:#dcecef;
 --grad:linear-gradient(135deg,var(--p2),var(--ph));
 --f:"IBM Plex Sans Arabic","IBM Plex Sans","Plex Fallback",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
 color-scheme:light}
html[lang=en]{--f:"IBM Plex Sans","IBM Plex Sans Arabic","Plex Fallback",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
:root{
 /* the type scale, in rem: the reader's own font-size setting is honoured */--t-xs:.8125rem;--t-sm:.875rem;--t-md:.9375rem;--t-base:1rem;--t-lg:1.125rem;--t-h3:1.125rem;--t-h2:clamp(1.5rem,3vw,2rem);--t-h1:clamp(2rem,4.6vw,3.25rem);
 /* the spacing scale */--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--sec:56px;
 --r:18px;--r-sm:12px;--r-lg:22px;--sh:0 1px 2px rgba(29,40,48,.05),0 14px 34px -18px rgba(29,40,48,.28);
 color-scheme:light}

/* ── base ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block:12px}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-base)/1.85 var(--f);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
 min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}main:focus{outline:none}   /* a short page (404) keeps its footer at the bottom; main (tabindex -1, the skip link's target) is not a control */
body>.nb-top,body>.nb-foot,body>.nb-preview{flex:none}
/* the two languages: html[lang] shows one (site.js / ?lang=); a field written in one language only (.nb-any) shows in both */
html[lang=ar] [lang=en]:not(.nb-any):not(.nb-sw),html[lang=en] [lang=ar]:not(.nb-any):not(.nb-sw){display:none!important}
html[lang=ar] .nb-sw[lang=ar],html[lang=en] .nb-sw[lang=en]{display:none!important}
a{color:var(--p2)}a:hover{color:var(--ph)}
h1,h2,h3{margin:0;line-height:1.35;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--ph);outline-offset:3px;border-radius:8px}   /* ≥ 3:1 on paper and on white (fix round 1) */
.s-cta :focus-visible,.a-h :focus-visible{outline-color:#fff}                       /* on a teal fill: a white ring */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-80px;display:inline-flex;align-items:center;min-height:44px;background:var(--ink);color:#fff;padding:8px 16px;border-radius:10px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:#fff}
/* 1120 px: the column of every page; site.js (WRAP) reads the same number for the header's fold — keep the two in step */
.nb-wrap{width:min(1120px,100%);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.s-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* buttons (the prices page uses them too); a long label wraps inside the button, never past the page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;max-width:100%;padding:9px 20px;border-radius:var(--r-sm);border:1px solid var(--ln2);background:var(--card);color:var(--ink);font:600 var(--t-md)/1.4 var(--f);text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--paper2);color:var(--ink)}
.btn.pri{background:var(--p);border-color:var(--p);color:#fff}.btn.pri:hover{background:var(--ph);border-color:var(--ph);color:#fff}
.btn.sm{min-height:44px;padding:6px 14px;font-size:var(--t-sm)}
.btn.gho{background:transparent}.btn.gho:hover{background:var(--paper2)}
.btn.big,.big{width:100%;min-height:50px;font-size:var(--t-base)}

/* ── the frame ── */
.nb-preview{background:var(--acc);color:var(--ink);text-align:center;font-weight:600;font-size:var(--t-sm);padding:6px 16px}
.nb-top{background:rgba(246,244,239,.94);border-bottom:1px solid var(--ln);position:relative;z-index:10}
.nb-bar{display:flex;align-items:center;gap:var(--s3) 18px;padding-block:var(--s3);flex-wrap:wrap}
.nb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.1875rem;min-height:44px}
.nb-brand:hover{color:var(--ink)}.nb-logo{width:38px;height:38px;flex:none;border-radius:11px}
.nb-menu{display:flex;gap:var(--s1);flex-wrap:wrap;margin-inline-start:auto}
.nb-menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink2);padding:6px 12px;border-radius:10px;font-weight:400;font-size:var(--t-md)}
.nb-menu a:hover{background:var(--paper2);color:var(--ink)}
.nb-menu a[aria-current=page]{color:var(--ph);background:var(--pl);font-weight:600}
.nb-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.lang{min-width:96px}
.nb-menu-btn{display:none;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid var(--ln2);border-radius:10px;background:var(--card);color:var(--ink);font:600 var(--t-sm)/1.4 var(--f);cursor:pointer;margin-inline-start:auto}
.nb-menu-btn:hover{background:var(--paper2)}
.nb-menu-btn[aria-expanded=true]{background:var(--pl);border-color:var(--p);color:var(--ph)}
.nb-foot{border-top:1px solid var(--ln);color:var(--mut);font-size:var(--t-sm)}
.nb-foot-in{padding-block:var(--s5);display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap;align-items:center}
.nb-foot-name{font-weight:600;color:var(--ink2)}
.nb-foot-nav{display:flex;gap:0 var(--s4);flex-wrap:wrap;margin-inline-start:auto}
.nb-foot a{color:var(--mut);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.nb-foot a:hover{color:var(--ph);text-decoration:underline}
.nb-mail,.s-mail{direction:ltr;unicode-bidi:isolate}
.nb-404{padding-block:var(--s8)}.nb-404 .s-sub{margin-top:var(--s2)}

/* ── sections (in the order of the homepage) ── */
.s{padding-block:var(--sec);scroll-margin-top:0}
.s:focus{outline:none}                                                   /* a section focused by the menu (site.js) shows no ring: it is not a control */
.s-alt{background:var(--paper2)}
.s-h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.s-h2{font-size:var(--t-h2);font-weight:700}
.s-h3{font-size:var(--t-h3);font-weight:600;margin:var(--s3) 0 var(--s1)}
.s-sub{color:var(--ink2);margin-top:var(--s2);max-width:40em}
.s-lines{white-space:pre-line}
.s-head{margin-bottom:28px}
.s-text{color:var(--ink2);font-size:var(--t-md)}
.s-eyebrow{display:flex;align-items:center;gap:9px;color:var(--p);font-weight:600;font-size:var(--t-md);margin-bottom:14px}
.s-dot{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:none}
.s-acts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:26px}
.s-img{display:block;width:100%;border-radius:var(--r);border:1px solid var(--ln);background:var(--card)}
.s-ptitle{padding-block:var(--s7) 0}.s-ptitle+.s:not(.s-alt){padding-top:var(--s6)}
/* hero */
.s-hero{padding-block:var(--s8) var(--sec)}
.s-hero-in{display:grid;gap:var(--s7);align-items:center}
.s-hero.s-side .s-hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.s-hero-tx,.s-hero-pic{min-width:0}
.s-hero:not(.s-side) .s-hero-tx{text-align:center;max-width:46em;margin-inline:auto}.s-hero:not(.s-side) .s-acts,.s-hero:not(.s-side) .s-eyebrow{justify-content:center}
.s-hero:not(.s-side) .s-hero-pic{max-width:900px;margin-inline:auto;width:100%}
.s-lead{color:var(--ink2);font-size:var(--t-lg);margin-top:var(--s4);max-width:34em}.s-hero:not(.s-side) .s-lead{margin-inline:auto}
.s-hero-pic .s-img{box-shadow:var(--sh)}
/* a tall (portrait) picture never towers over its text */
.s-hero-pic .s-img,.s-shot .s-img,.s-split-pic .s-img{max-height:520px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
.s-hl{font-style:normal;color:var(--p)}
.s-note{color:var(--mut);font-size:var(--t-sm);margin-top:14px}
/* product */
.s-prod.s-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.s-prod-tx{min-width:0}
.s-prod.s-solo .s-prod-tx{max-width:52em}
.s-prod.s-solo .s-points{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
.s-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.s-points li{display:flex;gap:11px;align-items:flex-start}
.s-points li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc);margin-top:.72em;flex:none}
.s-shot{background:var(--card);border:1px solid var(--ln);border-radius:20px;box-shadow:var(--sh);padding:14px;min-width:0}.s-shot .s-img{border:0}
/* cards */
.s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.s-grid.s-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.s-grid.s-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.s-card .s-h3:first-child{margin-top:0}.s-card .s-h3,.s-card .s-text{max-width:100%}
.s-ico{width:42px;height:42px;border-radius:var(--r-sm);background:var(--pl);color:var(--p);display:grid;place-items:center;flex:none}
.s-arr::after{content:"→";margin-inline-start:6px}html[dir=rtl] .s-arr::after{content:"←"}
.s-more{color:var(--p);font-weight:600;text-decoration:none;margin-top:auto;padding-top:var(--s2);min-height:44px;display:inline-flex;align-items:center}.s-more:hover{color:var(--ph);text-decoration:underline}
/* steps */
.s-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s4);counter-reset:s;list-style:none;margin:0;padding:0}
.s-steps li{counter-increment:s;border-top:3px solid var(--p);padding-top:14px;min-width:0}
.s-steps li::before{content:counter(s);display:block;font:700 1.875rem/1 var(--f);color:var(--acc2);margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.s-steps .s-h3{margin-top:0}
/* text (the four marks) */
.s-md{max-width:46em;margin-top:var(--s3)}
.s-md p{margin:0 0 var(--s3);white-space:pre-line}.s-md ul{margin:0 0 var(--s3);padding-inline-start:22px}.s-md li{margin:var(--s1) 0}
.s-md>:last-child{margin-bottom:0}
.s-md a{color:var(--p2);font-weight:600}
/* split */
.s-split.s-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.s-split.s-end .s-split-pic{order:2}.s-split:not(.s-end) .s-split-pic{order:-1}
/* image */
.s-fig{margin:0;max-width:960px;margin-inline:auto}
.s-fig figcaption{color:var(--mut);font-size:var(--t-sm);margin-top:var(--s2);text-align:center}
/* stats */
.s-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s4)}
.s-stats li{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:20px;display:grid;gap:var(--s1)}
.s-num{font:700 2.125rem/1.2 var(--f);color:var(--ph);font-variant-numeric:tabular-nums}html[dir=rtl] .s-num{text-align:right}.s-label{color:var(--ink2)}
/* faq (<details>: works without script) */
.s-faq{display:grid;gap:10px;max-width:780px}
.s-faq details{background:var(--card);border:1px solid var(--ln);border-radius:14px;padding:4px 18px}
.s-faq details[open]{border-color:var(--ln2)}
.s-faq summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:var(--s3);min-height:44px;align-items:center;border-radius:8px}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";color:var(--p);font-weight:700;font-size:1.25rem;line-height:1;flex:none}
.s-faq details[open] summary::after{content:"–"}
.s-faq summary:hover{color:var(--ph)}
.s-faq .s-md{margin-top:0;color:var(--ink2);padding-bottom:14px}
/* cta: a coloured band */
.s-cta-sec+.s:not(.s-alt){padding-top:0}   /* the band carries its own space; a band that ends the page keeps it above the footer */
.s-cta{background:var(--grad);color:#fff;border-radius:26px;padding:38px 32px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.s-cta-tx{min-width:0;flex:1 1 20em}
.s-cta .s-h2{font-size:1.625rem}.s-cta .s-sub{color:var(--on-p);margin-top:var(--s1)}
.s-cta .s-acts{margin-top:0;max-width:100%}
.s-cta .btn{background:#fff;border-color:#fff;color:var(--ph)}.s-cta .btn:hover{background:var(--pl);border-color:var(--pl);color:var(--ph)}
.s-cta .btn+.btn{background:transparent;border-color:#fff;color:#fff}.s-cta .btn+.btn:hover{background:rgba(255,255,255,.14);color:#fff}   /* the second button on the band */
/* contact */
.s-mailp{display:flex;align-items:center;gap:10px;margin-top:var(--s4);color:var(--p)}
.s-mail{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:var(--t-lg);color:var(--p2)}
.s-links{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.s-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ── the drawings (siterender ART_HERO, ART_STUDIO): decoration made of the studio's blocks, when no picture was uploaded ── */
.s-art{position:relative;min-width:0;font-size:var(--t-sm);line-height:1.6;user-select:none}
.a-sheet{background:var(--card);border:1px solid var(--ln);border-radius:var(--r-lg);box-shadow:var(--sh);padding:18px;display:grid;gap:var(--s3)}
.a-bar{display:flex;align-items:center;gap:var(--s2);color:var(--mut);font-size:var(--t-xs)}
.a-bar i{width:9px;height:9px;border-radius:50%;background:var(--ln2)}
.a-tag{margin-inline-start:auto;background:var(--pl);color:var(--ph);border-radius:99px;padding:2px 12px;font-weight:600}
.a-blk{display:block;border:1px solid var(--ln);border-radius:14px;padding:12px 14px;background:var(--card)}
.a-blk.a-h{background:var(--grad);color:#fff;border:0}
.a-blk.a-h b{display:block;font-size:17px}.a-blk.a-h small{display:block;color:var(--on-p);font-size:var(--t-xs)}
.a-vid{display:grid;grid-template-columns:86px minmax(0,1fr);gap:var(--s3);align-items:center}
.a-th{aspect-ratio:16/10;border-radius:10px;background:var(--paper2);display:grid;place-items:center}
.a-th::after{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--p)}
.a-lines{display:block}
.a-ln{display:block;height:9px;border-radius:9px;background:var(--paper2);margin:7px 0}.a-ln.a-s{width:62%}
.a-q b{display:block;font-size:var(--t-sm);margin-bottom:var(--s2);color:var(--ink)}
.a-op{display:flex;align-items:center;gap:9px;border:1px solid var(--ln);border-radius:10px;padding:6px 10px;margin-top:6px;color:var(--ink)}
.a-op::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--ln2);flex:none}
.a-op.a-on{border-color:var(--p);background:var(--pl)}.a-op.a-on::before{border-color:var(--p);background:radial-gradient(var(--p) 45%,transparent 50%)}
.a-pub{position:absolute;inset-inline-start:-14px;bottom:-18px;background:var(--ink);color:#fff;border-radius:14px;padding:10px 16px;font-weight:600;display:flex;gap:9px;align-items:center;box-shadow:var(--sh)}
.a-tabs{display:flex;gap:6px;margin-bottom:var(--s3);overflow:hidden}
.a-tabs>span{white-space:nowrap;font-size:var(--t-xs);border-radius:9px;padding:3px 11px;background:var(--paper2);color:var(--ink2)}
.a-tabs>span.a-on{background:var(--p);color:#fff}
.a-grid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s3)}
.a-side{display:grid;gap:var(--s2);align-content:start}
.a-side i{display:block;height:34px;border-radius:9px;background:var(--paper2)}
.a-side i.a-on{background:var(--pl);outline:2px solid var(--p);outline-offset:-2px}
.a-canvas{border:1px dashed var(--ln2);border-radius:var(--r-sm);padding:var(--s3);display:grid;gap:9px;min-width:0}
.s-hero.s-drawn .s-hero-pic{padding-bottom:18px}

/* ── the program's own pages inside the frame: the legal texts (moved from their inline <style>) and the prices page ── */
.eula{width:min(820px,100%);margin:0 auto;padding:var(--s7) 20px var(--s8);line-height:1.95}
.eula h1{font-size:clamp(1.625rem,3.4vw,2rem);line-height:1.35;margin:0 0 var(--s2)}
.eula h2{font-size:var(--t-h3);margin:var(--s6) 0 var(--s2);padding-top:var(--s5);border-top:1px solid var(--ln)}
.eula h3{font-size:var(--t-base);margin:var(--s5) 0 var(--s1)}
.eula .meta{color:var(--mut);font-size:var(--t-xs);margin-bottom:var(--s5)}
.eula p{margin:0 0 var(--s3)}.eula ul{padding-inline-start:22px;margin:0 0 var(--s3)}.eula li{margin:var(--s1) 0}
.eula section{margin:0}
.eula a{color:var(--p2);font-weight:600}
/* the prices page lines up with the frame's column (pricing.css keeps its own 1080 px / 16 px; main.pr outranks .pr) */
main.pr{width:min(1120px,100%);padding:var(--s6) max(20px,env(safe-area-inset-right,0px)) var(--s8) max(20px,env(safe-area-inset-left,0px))}
/* the prices page asks before a language switch would lose typed text (pricing.js) */
.nb-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);background:var(--accl);color:var(--ink);border:1px solid #ecd3a8;border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.nb-ask span{flex:1 1 16em}
.pr details{border:1px solid var(--ln);border-radius:var(--r-sm);padding:0 14px;margin:var(--s2) 0;background:var(--card)}
.pr details summary{cursor:pointer;padding:var(--s3) 0;font-weight:600;list-style:none;min-height:44px;display:flex;align-items:center;gap:var(--s2)}
.pr details summary::-webkit-details-marker{display:none}
.pr details summary::before{content:"+";width:22px;height:22px;border-radius:6px;background:var(--paper2);display:grid;place-items:center;font-weight:700;flex:none}
.pr details[open] summary::before{content:"−"}.pr details>div{padding:0 0 var(--s3)}

/* ── the header below 1024 px: the menu folds (five entries, the language and the studio button no longer fit on one row) ── */
@media (max-width:1023px){
 .nb-menu{margin-inline-start:0;order:3;width:100%}       /* without JavaScript the links wrap onto their own row */
 .nb-acts{order:4}
}
/* ── the folded header (final fix wave C1/C3): html.nb-fold is set by site.js in <head> before the first paint — below 1024 px, or whenever
   the bar would take more than one row (pages added to the menu); the open menu sits right under its button, before the buttons ── */
.nb-fold .nb-menu{margin-inline-start:0;order:3;width:100%}
.nb-fold .nb-acts{order:4}
.nb-fold .nb-menu-btn{display:inline-flex}
.nb-fold .nb-few .nb-menu-btn{display:none}                 /* one or two entries: no button, the links stay in the bar */
.nb-fold .nb-few .nb-menu,.nb-fold .nb-few .nb-menu:not(.open){display:flex;order:0;width:auto;margin-inline-start:auto}
.nb-fold .nb-menu:not(.open){display:none}
.nb-fold .nb-menu.open{flex-direction:column;gap:2px;padding-block:var(--s1);border-block:1px solid var(--ln)}
.nb-fold .nb-menu.open a{width:100%}
/* ── tablets and phones ── */
@media (max-width:860px){
 :root{--sec:44px}
 .s-hero{padding-block:40px var(--s7)}
 .s-hero.s-side .s-hero-in,.s-prod.s-two,.s-split.s-two{grid-template-columns:minmax(0,1fr)}
 .s-hero.s-side .s-hero-in{gap:var(--s6)}
 .s-split .s-split-pic{order:-1}
 .s-grid.s-c4{grid-template-columns:repeat(2,minmax(0,1fr))}   /* three cards stay three across a tablet: no lone card on a row */
 .s-card{padding:18px}
 .s-hero.s-drawn .s-hero-pic{padding-bottom:0;max-width:560px;width:100%;margin-inline:auto}
 .s-prod .s-art{max-width:560px;width:100%;margin-inline:auto}
 .a-pub{position:static;margin-top:var(--s3);display:inline-flex}
}
@media (max-width:640px){
 .s-h1{font-size:1.75rem}.s-lead{font-size:1.0625rem}
 .s-grid,.s-grid.s-c2,.s-grid.s-c4{grid-template-columns:minmax(0,1fr)}
 .s-steps{gap:var(--s5)}
 .s-acts .btn{flex:1 1 12em}                            /* a pair shares the row evenly, or both stack at full width */
 .s-prod.s-solo .s-points{grid-template-columns:minmax(0,1fr)}
 .s-cta{padding:28px 20px;border-radius:var(--r-lg)}.s-cta .s-acts{width:100%}
 .a-grid{grid-template-columns:minmax(0,1fr)}.a-side{display:none}
 .nb-acts{width:100%}.nb-acts .btn{flex:1}
 .nb-foot-in{flex-direction:column;align-items:flex-start;gap:0;padding-block:var(--s4)}.nb-foot-name{margin-bottom:var(--s1)}
 .nb-foot-nav{margin-inline-start:0;margin-top:var(--s1)}
 .eula{padding-top:var(--s6)}
}

/* ── motion and print ── */
@media (prefers-reduced-motion:no-preference){.btn,.nb-menu a,.nb-menu-btn,.s-more,.s-faq summary{transition:background-color .15s,border-color .15s,color .15s,transform .15s}.btn:active{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors:active){.s-cta,.a-h,.a-pub{border:2px solid CanvasText}.s-hl{color:LinkText}}
@media print{.nb-top,.nb-foot,.skip,.nb-menu-btn{display:none!important}.s-alt{background:none}.s-art{display:none}}