/* One stylesheet, two layouts.
   Flow (phones, tablets, short or portrait windows): every block is full width and stacks in normal flow.
   Desktop (landscape, at least 900px wide and 560px tall): the hero fills the viewport, the artwork covers it,
   and the overlays (flags, birds, captions) sit in artwork units (--u), so they stay on the art at any size. */

:root{--ink:#17302c;--dark:#0b4b3d;--red:#e11d2e;--red-d:#c4142a;--green:#0e7a3d;--muted:#3f5652}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;background:linear-gradient(180deg,#7ccbf2 0,#cdeefc 35%,#e8f7fd 100%);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
a{color:inherit}
:focus-visible{outline:3px solid #ffd34d;outline-offset:2px}
.page{width:100%;overflow:hidden}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--dark);padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero,.story,.band{position:relative;container-type:inline-size;--u:calc(100cqw / 1024)}
.plate{position:relative}
.plate-img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.plate-a{aspect-ratio:1024/812;overflow:hidden}
.plate-b{aspect-ratio:1024/400}
.plate-c{aspect-ratio:1024/180}

/* animated overlays: flags are design cutouts split into vertical strips; birds are split into two wings */
.flag,.dove{position:absolute;z-index:3;pointer-events:none;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.flag{filter:drop-shadow(0 3px 3px rgba(0,30,25,.25))}
.flag i{position:absolute;top:0;bottom:0;left:calc(var(--i)*12.5%);width:12.5%;background-repeat:no-repeat;background-size:800% 100%;background-position:calc(var(--i)*100%/7) 0;transform-origin:50% 0;animation:wave 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.22s);will-change:transform}
.flag-a i{background-image:url(assets/flag-a.webp)}
.flag-b i{background-image:url(assets/flag-b.webp)}
.dove{animation:drift 7.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.dove i{position:absolute;inset:0;background-image:var(--img);background-size:100% 100%;background-repeat:no-repeat;transform-origin:50% 72%;animation:flapl var(--fd,.7s) ease-in-out infinite alternate}
.dove i.l{clip-path:inset(0 50% 0 0);animation-name:flapl}
.dove i.r{clip-path:inset(0 0 0 50%);animation-name:flapr}
@keyframes wave{0%,100%{transform:translateY(0) skewY(0deg)}30%{transform:translateY(-3%) skewY(-1.2deg)}60%{transform:translateY(1.2%) skewY(.5deg)}80%{transform:translateY(2.6%) skewY(1deg)}}
@keyframes flapl{from{transform:rotate(-11deg)}to{transform:rotate(7deg)}}
@keyframes flapr{from{transform:rotate(11deg)}to{transform:rotate(-7deg)}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:6px -5px}}
@media (prefers-reduced-motion:reduce){.flag i,.dove,.dove i{animation:none!important}}

/* header: flow shows the brand and the download button on one row, the links on the next row */
.site-header{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0b1f1d;font-weight:800;font-size:17px;line-height:1.02}
.brand img{width:34px;height:auto}
.nav{order:3;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-size:15px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:#14231f;font-weight:500}
.nav a:hover{color:var(--red)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;border-radius:3px;background:var(--red)}
.ico-home{display:inline-block;width:14px;height:14px;margin-right:5px;fill:var(--red);vertical-align:-1px}
.pill-dl{min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:var(--red);color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 10px rgba(160,10,25,.25)}
.pill-dl:hover,.cta:hover,.foot-dl:hover{background:var(--red-d)}

/* hero copy: flow */
.hero-copy{position:relative;padding:8px clamp(20px,5vw,48px) 12px}
.hero-copy h1{margin:0;font-weight:800;line-height:1.02;color:var(--dark);font-size:clamp(40px,11vw,64px);letter-spacing:-.01em;text-wrap:balance}
.hero-copy .ln{display:block}
.hero-copy .h1-b{display:block;margin-top:8px;font-size:clamp(30px,8.6vw,50px);line-height:1.05;color:var(--red);white-space:nowrap}
.lead{margin:14px 0 0;max-width:34rem;font-size:clamp(16px,4.4vw,20px);line-height:1.4;color:#1e2e2c;text-wrap:balance}
.cta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:360px;min-height:52px;padding:0 20px;border:0;border-radius:26px;background:var(--red);color:#fff;font-weight:700;font-size:clamp(15px,4.2vw,17px);white-space:nowrap;cursor:pointer;box-shadow:0 8px 18px rgba(150,10,25,.25)}
.cta svg{width:22px;height:22px;flex:none}
.cta .chev{width:18px;height:18px}
.trust{margin:12px 0 0;font-size:14px;color:#2b3a39}

/* artwork captions */
.pride{position:absolute;left:calc(812*var(--u));top:calc(150*var(--u));width:calc(200*var(--u));margin:0;text-align:center;font-style:italic;font-weight:800;font-size:calc(38*var(--u));line-height:1.02;color:var(--dark)}
.swoosh{position:absolute;left:calc(874*var(--u));top:calc(230*var(--u));width:calc(124*var(--u));height:calc(22*var(--u))}

/* features: their own section below the hero */
.intro{position:relative}
.features{list-style:none;margin:0;padding:18px clamp(16px,4vw,40px) 8px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat{padding:16px;background:rgba(255,255,255,.85);border-radius:18px;box-shadow:0 8px 20px rgba(8,50,40,.10)}
.feat:last-child{grid-column:1/-1}
.fi{display:grid;place-items:center;width:42px;height:42px;margin:0 0 10px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(10,60,50,.14)}
.fi svg{width:22px;height:22px}
.feat h2{margin:0;font-size:16px;line-height:1.2;font-weight:700;color:#0b2e29}
.feat p{margin:4px 0 0;font-size:14px;line-height:1.3;color:var(--muted)}

/* story: flow */
.story{display:flex;flex-direction:column}
.story-copy{position:static;order:0;width:auto;padding:26px clamp(20px,5vw,40px) 14px}
.story h2{margin:0;font-size:clamp(30px,8vw,46px);line-height:1.1;font-weight:800;color:var(--dark);text-wrap:balance}
.story h2 span,.story h2 em{display:block}
.story h2 em{font-style:normal;color:var(--red)}
.story-text{margin:12px 0 0;max-width:40rem;font-size:16px;line-height:1.5;color:#213331}
.story-tag{margin:12px 0 0;max-width:40rem;font-size:16px;line-height:1.35;font-weight:700;color:#132624}
.plate-b{order:1}
.search{position:relative;order:2;z-index:4;margin:16px clamp(16px,4vw,40px) 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(8,50,40,.12)}
.search-ico{flex:none;width:26px;height:26px;color:var(--dark)}
.search-title{flex:1 1 100%}
.search-title h3{margin:0;font-size:18px;line-height:1.1;color:#0b2e29;font-weight:800}
.search-title p{margin:2px 0 0;font-size:13px;line-height:1.2;color:var(--muted)}
.search input{flex:1 1 180px;min-width:0;height:48px;padding:0 18px;border:1px solid #c9ded7;border-radius:24px;background:#fff;color:var(--ink);font-size:16px;outline:none}
.search input:focus-visible{box-shadow:0 0 0 3px #ffd34d}
.search button{flex:none;height:48px;padding:0 18px;border:0;border-radius:24px;background:var(--green);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.search button:hover{background:#0a6532}

/* band: flow */
.band{display:flex;flex-direction:column}
.band-copy{position:static;order:0;padding:28px clamp(20px,5vw,40px);background:#0b4a3e;text-align:center;color:#fff}
.band-l1{margin:0;font-size:clamp(20px,5.6vw,28px);line-height:1.2;font-style:italic;font-weight:600;text-wrap:balance}
.band-l2{margin:8px 0 0;font-size:clamp(15px,4.2vw,20px);line-height:1.3;font-style:italic}
.plate-c{order:1}

/* footer */
.footer{background:#06302a;color:#d5ebe6;padding:26px clamp(16px,4vw,40px) 30px}
.foot{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.foot-brand{display:flex;align-items:center;gap:12px;font-weight:800;color:#fff;font-size:18px}
.foot-brand img{width:40px;height:auto}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-size:15px}
.foot-nav a:hover{text-decoration:underline}
.foot-dl{min-height:44px;padding:8px 18px;border:1px solid #9bd9c8;border-radius:999px;background:transparent;color:#fff;font-weight:700;cursor:pointer}
.foot-copy{margin:0;width:100%;text-align:center;font-size:13px;color:#b8d6cf}

/* installer language dialog */
.dl{position:relative;width:min(340px,calc(100vw - 32px));padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(4,37,31,.35)}
.dl::backdrop{background:rgba(6,35,29,.72)}
.dl-picks{display:grid;gap:12px;padding:58px 22px 26px}
.pick{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:16px;background:var(--red);color:#fff;text-decoration:none;font-family:"Nirmala UI","Noto Sans Bengali",system-ui,sans-serif;font-weight:700;font-size:22px}
.pick-en{background:var(--dark)}
.pick:hover{filter:brightness(1.06)}
.dl-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#eef6f4;color:var(--dark);display:grid;place-items:center;cursor:pointer}
.dl-x svg{width:20px;height:20px}

.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:24px}
.nf h1{color:var(--dark)}

/* tablets in portrait and wide phones: features in two columns, copy kept to a readable width */
@media (min-width:600px) and (max-width:899.98px){
  .features{max-width:760px;margin:0 auto;padding-left:24px;padding-right:24px}
  .plate-a{aspect-ratio:1024/860}
  .hero-copy{max-width:760px;margin:0 auto;padding-left:24px;padding-right:24px}
  .story-copy,.band-copy,.search{max-width:760px;margin-left:auto;margin-right:auto}
}

/* wide windows in portrait: the features use the same five-column row as the landscape desktop */
@media (min-width:900px){
  .features{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1600px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,5vw,80px) clamp(40px,5vw,72px)}
  .feat{padding:22px 16px;text-align:center}
  .feat:last-child{grid-column:auto}
  .fi{margin:0 auto 12px;width:52px;height:52px}
  .fi svg{width:26px;height:26px}
  .feat h2{font-size:17px}
  .feat p{max-width:none;font-size:14px}
}

/* desktop: landscape screens. The hero covers the viewport; overlays and copy follow the artwork. */
/* only browsers with container query units (2023 and later) get the landscape desktop layout */
@supports (height:1cqh){
@media (min-width:900px) and (min-aspect-ratio:5/4) and (min-height:560px){
  .hero{height:100vh;height:100svh;min-height:560px;overflow:hidden;container-type:size;--u:max(calc(100cqw / 1024),calc(100cqh / 956))}
  .plate-a{position:absolute;inset:0;aspect-ratio:auto}
  .plate-a .plate-img{position:absolute;inset:0;height:100%}
  .site-header{position:absolute;top:0;left:0;right:0;z-index:10;flex-wrap:nowrap;padding:18px clamp(20px,4vw,64px)}
  .brand{font-size:19px}
  .brand img{width:52px}
  .nav{order:0;width:auto;flex-wrap:nowrap;gap:0 clamp(16px,2.2vw,32px);font-size:clamp(14px,1.05vw,16px)}
  .nav a{min-height:0;padding-bottom:6px}
  .nav a[aria-current]::after{bottom:0}
  .pill-dl{min-height:0;padding:9px 22px;font-size:15px}
  .hero-copy{position:absolute;left:calc(48*var(--u));top:min(calc(110*var(--u)),calc(100cqh * 0.2));width:min(calc(420*var(--u)),630px);padding:0;max-width:none;margin:0}
  .hero-copy h1{font-size:min(calc(64*var(--u)),96px,calc(100cqh * 0.12))}
  .hero-copy .h1-b{margin-top:min(calc(10*var(--u)),14px,calc(100cqh * 0.012));font-size:min(calc(50*var(--u)),75px,calc(100cqh * 0.095))}
  .lead{max-width:none;width:min(calc(350*var(--u)),520px);margin-top:min(calc(30*var(--u)),40px,calc(100cqh * 0.04));font-size:min(calc(21*var(--u)),28px,calc(100cqh * 0.035))}
  .cta{max-width:none;width:min(calc(330*var(--u)),440px);min-height:min(calc(54*var(--u)),66px,calc(100cqh * 0.085));margin-top:min(calc(20*var(--u)),26px,calc(100cqh * 0.03));font-size:min(calc(19*var(--u)),22px,calc(100cqh * 0.03));border-radius:999px}
  .cta svg{width:min(calc(24*var(--u)),28px);height:min(calc(24*var(--u)),28px)}
  .trust{width:min(calc(330*var(--u)),440px);margin-top:min(calc(10*var(--u)),14px,calc(100cqh * 0.015));text-align:center;font-size:min(calc(13.5*var(--u)),16px)}
  .features{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1600px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,5vw,80px) clamp(40px,5vw,72px)}
  .feat{padding:22px 16px;text-align:center}
  .feat:last-child{grid-column:auto}
  .fi{margin:0 auto 12px;width:52px;height:52px}
  .fi svg{width:26px;height:26px}
  .feat h2{font-size:17px}
  .feat p{max-width:none;font-size:14px}
  .story{display:block}
  .story-copy{position:absolute;left:calc(44*var(--u));top:calc(35*var(--u));width:min(calc(340*var(--u)),560px);padding:0;max-width:none;margin:0}
  .story h2{font-size:min(calc(46*var(--u)),72px)}
  .story-text{margin-top:min(calc(6*var(--u)),10px);width:min(calc(316*var(--u)),520px);max-width:none;font-size:min(calc(15.5*var(--u)),20px)}
  .story-tag{margin-top:min(calc(12*var(--u)),16px);width:min(calc(330*var(--u)),540px);max-width:none;font-size:min(calc(16*var(--u)),21px)}
  .plate-b{order:0}
  .search{position:absolute;left:50%;top:calc(317*var(--u));transform:translateX(-50%);width:min(calc(705*var(--u)),980px);height:min(calc(75*var(--u)),84px);margin:0;padding:0 min(calc(22*var(--u)),26px) 0 min(calc(30*var(--u)),36px);flex-wrap:nowrap;gap:14px;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:0 10px 26px rgba(8,50,40,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .search-ico{width:min(calc(34*var(--u)),36px);height:min(calc(34*var(--u)),36px)}
  .search-title{flex:none;width:min(calc(236*var(--u)),270px)}
  .search-title h3{font-size:min(calc(22*var(--u)),26px)}
  .search-title p{font-size:min(calc(12.5*var(--u)),14px)}
  .search input{flex:1 1 0;height:min(calc(46*var(--u)),52px);font-size:min(calc(15*var(--u)),17px)}
  .search button{height:min(calc(46*var(--u)),52px);padding:0 min(calc(20*var(--u)),26px);font-size:min(calc(15*var(--u)),17px)}
  .band{display:block}
  .band-copy{position:absolute;left:0;right:0;top:calc(26*var(--u));padding:0 20px;background:none;max-width:none;margin:0}
  .band-l1{font-size:min(calc(36*var(--u)),56px)}
  .band-l2{margin-top:min(calc(8*var(--u)),12px);font-size:min(calc(24*var(--u)),36px)}
  .plate-c{order:0}
}
}

/* text blocks sit above their artwork in every layout */
.hero-copy,.story-copy,.band-copy{z-index:4}

.dl-group{margin:6px 2px 0;font:700 13px/1.4 "Nirmala UI","Noto Sans Bengali",system-ui,sans-serif;color:var(--dark);letter-spacing:.02em}
.pick-std{background:#00764e}
.pick-std.pick-std-en{background:#0a3b2e}

.cta.cta-full{background:#00764e;margin-top:12px}
.cta.cta-full:hover{background:#0a3b2e}
/* Second layer: the header and footer on every page, the inner pages, and the 4K and phone adjustments.
   It loads after style.css, so the hero artwork rules there keep working on the home page. */

:root{
  --font-bn:"Nirmala UI","Noto Sans Bengali","Kohinoor Bangla","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ink:#14302b;
  --muted:#34504b;
  --sheet:#ffffff;
  --line:#d3e9e1;
}
body{font-family:var(--font-bn);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);font-kerning:normal;font-feature-settings:"liga" 1,"kern" 1}
[lang="bn"],.lang-bn{font-family:var(--font-bn)}

/* header: brand mark (raster from the 512 px brand icon, so it stays sharp at 1x, 2x and 3x) and a two-line name */
.brand{gap:12px;color:#0b1f1d}
.brand .brand-mark{width:52px;height:52px;flex:none;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-bn{font-size:20px;font-weight:800;color:#0b2e29}
.brand-en{font-size:13px;font-weight:600;letter-spacing:.02em;color:#2b4a44}
.nav a{min-height:48px;font-size:16px}
.pill-dl{min-height:48px;font-size:16px;padding:12px 22px}

/* footer: the mark and the names match the header */
.foot-brand img{width:40px;height:40px;object-fit:contain}
.foot-brand span{font-size:18px}
.foot-copy{font-size:14px;line-height:1.6;color:#c4e0d9}

/* inner pages */
.prose-page{position:relative;padding:clamp(20px,4vw,56px) clamp(14px,4vw,40px) clamp(40px,6vw,96px)}
.sheet{max-width:1080px;margin:0 auto;background:var(--sheet);border-radius:24px;padding:clamp(22px,4vw,56px);box-shadow:0 14px 36px rgba(8,50,40,.12);overflow-wrap:break-word}
.eyebrow{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.sheet h1{margin:0 0 14px;font-size:clamp(30px,4.6vw,52px);line-height:1.12;font-weight:800;color:var(--dark);text-wrap:balance}
.sheet h2{margin:clamp(28px,4vw,44px) 0 12px;font-size:clamp(22px,2.8vw,32px);line-height:1.25;font-weight:800;color:var(--dark)}
.sheet h3{margin:22px 0 8px;font-size:clamp(18px,2vw,22px);line-height:1.3;font-weight:700;color:#0b2e29}
.sheet p,.sheet li{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--muted)}
.sheet p{margin:0 0 14px}
.sheet ul,.sheet ol{margin:0 0 14px;padding-left:1.4em}
.sheet li{margin:6px 0}
.sheet a{color:var(--dark);text-decoration-thickness:2px;text-underline-offset:3px}
.sheet a:hover{color:var(--red)}
.lead{font-size:clamp(18px,1.9vw,23px);line-height:1.6;color:#1d3a35;margin:0 0 18px}
.note{margin:18px 0;padding:16px 18px;border-radius:16px;background:#eef9f4;border:1px solid var(--line);color:#1d3a35}
.note strong{color:var(--dark)}
.crumbs{margin:0 0 14px;font-size:14px;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:#8aa39e}
.crumbs a{color:var(--dark)}

/* feature and card grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin:18px 0 6px;padding:0;list-style:none}
.card{margin:0;padding:20px;border-radius:18px;background:#f4fbf8;border:1px solid var(--line)}
.card h3{margin:0 0 6px}
.card p{margin:0}
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:30px}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 4px #fff,0 0 0 1px var(--green)}

/* download cards */
.dl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;margin:18px 0}
.dl-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(8,50,40,.08)}
.dl-card h3{margin:0;font-size:20px}
.dl-card .meta{margin:0;font-size:15px;color:var(--muted)}
.dl-card code{display:block;margin:0;padding:10px 12px;border-radius:10px;background:#f1f7f5;font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:break-all;color:#14302b}
.cta-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:26px;background:var(--red);color:#fff;font-weight:700;font-size:17px;text-decoration:none;align-self:flex-start}
.cta-link:hover{background:var(--red-d);color:#fff}
.cta-link.cta-green{background:#00764e}
.cta-link.cta-green:hover{background:#0a3b2e}
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{counter-increment:step;position:relative;padding-left:44px;margin:12px 0}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}

/* comparison table (scrolls sideways inside its own box on phones, never the page) */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--muted)}
th{background:#eef9f4;color:var(--dark);font-weight:800}
tr:last-child td{border-bottom:0}

/* FAQ */
.faq{margin:14px 0 0}
.faq details{margin:0 0 12px;padding:0 18px;border-radius:16px;background:#f4fbf8;border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;font-weight:800;font-size:clamp(17px,1.8vw,20px);color:#0b2e29;padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:14px;font-size:24px;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px;margin:0}

/* sitemap */
.sitemap-list{columns:2 260px;column-gap:28px;margin:0;padding:0;list-style:none}
.sitemap-list li{break-inside:avoid;margin:0 0 12px}
.sitemap-list a{font-weight:700}

/* 404 */
.nf-box{text-align:center;padding:24px 0}

/* focus, motion and phones */
a,button{-webkit-tap-highlight-color:rgba(225,29,46,.18)}
@media (max-width:600px){
  .sheet{border-radius:18px;padding:20px 18px}
  .cta-link{width:100%}
  .brand .brand-mark{width:44px;height:44px}
  .brand-bn{font-size:18px}
  .brand-en{font-size:12px}
  .foot-nav{gap:4px 14px}
}
@media (min-width:1800px){
  .sheet{max-width:1240px}
  .prose-page{padding-top:clamp(40px,4vw,80px)}
}
@media (min-width:2400px){
  .sheet{max-width:1440px;padding:64px 72px}
  .sheet p,.sheet li{font-size:21px;line-height:1.75}
  .sheet h1{font-size:64px}
  .sheet h2{font-size:38px}
  .cards{gap:22px}
  .card{padding:28px}
  .brand .brand-mark{width:64px;height:64px}
  .brand-bn{font-size:24px}
  .brand-en{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* phones: the green full-version label wraps inside its pill instead of spilling past the edges */
@media (max-width:600px){
  .cta{white-space:normal;text-align:center;line-height:1.25;padding:12px 18px;min-height:56px}
}

/* buttons inside the text sheet keep their own label colour: the generic sheet link rule was overriding it */
.sheet a.cta-link,.sheet a.cta-link:hover{color:#fff}

/* decorative motion (flags and doves) starts after load, see app.js; static art until then */
html:not(.motion-on) .flag i{animation:none;will-change:auto}
html:not(.motion-on) .dove,html:not(.motion-on) .dove i{animation:none}

.cta .nw{white-space:nowrap}

/* phones: the download cards are a single column, so the grid needs no auto-fit sizing pass */
@media (max-width:600px){
  .dl-cards{grid-template-columns:minmax(0,1fr)}
}