/* QuickQVPN — single stylesheet for the static site */

:root{
  --bg:#ffffff; --surface:#f6f7f9; --text:#11161c; --muted:#5b6470;
  --line:#e5e8ec; --accent:#16a06a;
  --r-s:8px; --r-m:12px; --r-l:20px;
  --container:1200px; --gutter:24px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --font:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --fs-h1:clamp(28px,4.4vw,52px); --fs-h2:clamp(22px,2.6vw,32px);
  --fs-h3:18px; --fs-body:16px; --fs-sm:14px;
  --shadow:0 1px 2px rgba(17,22,28,.06),0 8px 24px rgba(17,22,28,.06);

  --header-h:64px;
  --header-h-sm:56px;
  --logo:32px;
  --logo-sm:28px;
  --brand-col:320px;
  --price-fs:44px;
  --step-size:40px;
  --focus-w:2px;
  --hairline:1px;
  --footer-pad:56px;
  --measure:760px;
  --z-header:50;
}
@media(max-width:960px){:root{--gutter:20px}}
@media(max-width:640px){:root{--gutter:16px}}

*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.7;
  overflow-wrap:break-word;
}

main{display:block}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--bg)}

a{color:inherit;text-underline-offset:.18em}
a:hover{text-decoration-thickness:var(--focus-w)}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:var(--focus-w) solid var(--accent);
  outline-offset:var(--focus-w);
}

.sr-only{
  position:absolute;
  width:var(--hairline);
  height:var(--hairline);
  padding:0;
  margin:calc(var(--hairline) * -1);
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:var(--s2);
  left:var(--s2);
  z-index:calc(var(--z-header) + 1);
  padding:var(--s2) var(--s4);
  border-radius:var(--r-s);
  background:var(--text);
  color:var(--bg);
  font-size:var(--fs-sm);
  text-decoration:none;
  transform:translateY(calc(-100% - var(--s4)));
}
.skip-link:focus-visible{transform:none}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.eyebrow{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}

.btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 28px;
  border-radius:999px;
  font-size:15px;
  text-decoration:none;
  transition:150ms;
  border:var(--hairline) solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent}
.btn-block{width:100%}

@media(hover:hover){
  .btn-primary:hover{filter:brightness(.93)}
  .btn-ghost:hover{background:var(--surface)}
}

.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--s5);
}

.media{
  aspect-ratio:16/10;
  border-radius:var(--r-l);
  border:1px dashed var(--line);
  background:linear-gradient(135deg,var(--surface),var(--bg));
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  padding:var(--s4);

  position:relative;
  overflow:hidden;
}
.media::before{
  content:"";
  position:absolute;
  inset:var(--s5);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-m);
  background:var(--bg);
  opacity:.72;
  pointer-events:none;
}
.media::after{
  content:"";
  position:absolute;
  top:calc(var(--s5) + var(--s3));
  left:calc(var(--s5) + var(--s3));
  width:var(--s2);
  height:var(--s2);
  border-radius:50%;
  background:var(--accent);
  box-shadow:var(--s3) 0 0 var(--line),var(--s5) 0 0 var(--line);
  pointer-events:none;
}
.media-label{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  min-height:var(--s6);
  padding:0 var(--s4);
  border:var(--hairline) solid var(--line);
  border-radius:999px;
  background:var(--bg);
  box-shadow:var(--shadow);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.04em;
}
.media-wide{aspect-ratio:16/9}

.crumb ol{
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.crumb li+li::before{content:"／";margin-right:8px;color:var(--line)}
.crumb a{color:var(--muted)}
.crumb [aria-current="page"]{color:var(--text)}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
}
@media(max-width:960px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:var(--bg);
  border-bottom:var(--hairline) solid var(--line);
}
.header-inner{
  min-height:var(--header-h);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s4);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s3);
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
}
.brand-mark{
  position:relative;
  display:inline-block;
  width:var(--logo);
  height:var(--logo);
  flex:0 0 auto;
  border-radius:var(--r-s);
  background:var(--accent);
}
.brand-mark::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:calc(var(--logo) / 2);
  height:var(--focus-w);
  background:var(--bg);
  border-radius:999px;
  box-shadow:0 calc(var(--s1) * -1) 0 var(--bg),0 var(--s1) 0 var(--bg);
  transform:translate(-50%,-50%) rotate(-32deg);
}
.brand-name{
  font-size:var(--fs-h3);
  line-height:1;
  letter-spacing:-.01em;
}
.main-nav{justify-self:center}
.main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:var(--s5);
}
.main-nav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--header-h);
  border-bottom:var(--focus-w) solid transparent;
  color:var(--muted);
  font-size:var(--fs-sm);
  text-decoration:none;
  white-space:nowrap;
}
.main-nav a:hover{color:var(--text)}
.main-nav a[aria-current="page"]{
  color:var(--text);
  border-bottom-color:var(--accent);
  font-weight:600;
}
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s3);
}
.lang{
  min-width:44px;
  min-height:44px;
  padding:0 var(--s2);
  border:var(--hairline) solid transparent;
  border-radius:var(--r-s);
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
}
.lang[aria-disabled="true"]{cursor:default}
.lang:hover{color:var(--text)}
.mobile-menu{display:none;position:static}
.mobile-toggle{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-s);
  background:var(--bg);
  cursor:pointer;
  list-style:none;
}
.mobile-toggle::-webkit-details-marker{display:none}
.menu-icon{
  position:relative;
  display:block;
  width:var(--fs-h3);
  height:var(--fs-sm);
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:var(--focus-w);
  border-radius:999px;
  background:var(--text);
}
.menu-icon::before{top:0;box-shadow:0 calc(var(--s2) - var(--focus-w)) 0 var(--text)}
.menu-icon::after{bottom:0}
.mobile-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:var(--z-header);
  padding:var(--s4) var(--gutter) var(--s5);
  background:var(--bg);
  border-top:var(--hairline) solid var(--line);
  border-bottom:var(--hairline) solid var(--line);
  box-shadow:var(--shadow);
}
.mobile-nav ul{list-style:none}
.mobile-nav a{
  display:block;
  padding:var(--s3) 0;
  border-bottom:var(--hairline) solid var(--line);
  color:var(--muted);
  text-decoration:none;
}
.mobile-nav a:hover{color:var(--text)}
.mobile-nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.mobile-actions{display:flex;gap:var(--s3);margin-top:var(--s4)}
.mobile-actions .btn{width:100%}

@media(max-width:960px){
  .header-inner{min-height:var(--header-h-sm)}
  .main-nav,.header-cta{display:none}
  .mobile-menu{display:block}
  .brand-name{font-size:var(--fs-body)}
}
@media(max-width:640px){
  .header-actions{gap:var(--s2)}
  .brand{gap:var(--s2)}
  .brand-name{font-size:15px}
}

/* Home hero */
.hero{padding-block:var(--s9)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:var(--s7);
  align-items:center;
}
.hero-copy{max-width:calc(var(--container) / 2 + var(--s8))}
.hero h1{
  margin-top:var(--s3);
  font-size:var(--fs-h1);
  line-height:1.14;
  letter-spacing:-.025em;
}
.hero-lede{
  max-width:calc(var(--measure) / 2);
  margin-top:var(--s4);
  color:var(--muted);
  font-size:clamp(var(--fs-body),1.5vw,var(--fs-h3));
  line-height:1.7;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s6);
}
.hero-actions .btn{min-width:160px}
.hero-media{width:100%}

@media(max-width:960px){
  .hero{padding-block:var(--s8)}
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .hero-copy{max-width:var(--measure)}
  .hero-lede{max-width:var(--measure)}
}
@media(max-width:640px){
  .hero{padding-block:var(--s7)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
}

/* Stats band */
.stats-band{
  background:var(--surface);
  border-block:var(--hairline) solid var(--line);
  padding-block:var(--s6);
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.stat{
  padding:var(--s2) var(--s5);
  border-left:var(--hairline) solid var(--line);
}
.stat:first-child{padding-left:0;border-left:0}
.stat:last-child{padding-right:0}
.stat-value{
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.35;
}
.stat-label{
  margin-top:var(--s1);
  color:var(--muted);
  font-size:var(--fs-sm);
}
@media(max-width:960px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{
    padding:var(--s5) var(--s4);
    border-left:var(--hairline) solid var(--line);
    border-top:var(--hairline) solid var(--line);
  }
  .stat:nth-child(odd){padding-left:0;border-left:0}
  .stat:nth-child(even){padding-right:0}
  .stat:nth-child(-n+2){padding-top:0;border-top:0}
}

/* Sections */
.section{padding-block:var(--s9)}
.section-surface{background:var(--surface)}
.section-head{
  max-width:var(--measure);
  margin-bottom:var(--s7);
}
.section-head h2{
  margin-top:var(--s2);
  font-size:var(--fs-h2);
  line-height:1.28;
  letter-spacing:-.015em;
}
.section-intro{
  margin-top:var(--s3);
  color:var(--muted);
}
.section-foot{margin-top:var(--s6)}
@media(max-width:960px){
  .section{padding-block:var(--s8)}
  .section-head{margin-bottom:var(--s6)}
}
@media(max-width:640px){
  .section{padding-block:var(--s7)}
}

/* Flow */
.flow-media{margin-bottom:var(--s6)}
.step-list{
  list-style:none;
  counter-reset:flow;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
}
.step-item{
  position:relative;
  padding-top:var(--s7);
  border-top:var(--hairline) solid var(--line);
}
.step-item::before{
  counter-increment:flow;
  content:counter(flow,decimal-leading-zero);
  position:absolute;
  top:var(--s4);
  left:0;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.step-item h3{
  font-size:var(--fs-h3);
  line-height:1.4;
}
.step-item p{
  margin-top:var(--s2);
  color:var(--muted);
  font-size:var(--fs-sm);
}
@media(max-width:640px){
  .step-list{grid-template-columns:1fr;gap:0}
  .step-item{padding-block:var(--s5) var(--s4)}
}

/* Feature cards */
.features-grid{counter-reset:feature}
.feature-card{
  position:relative;
  padding-top:calc(var(--s6) + var(--s4));
  min-height:100%;
  transition:150ms;
}
.feature-card::before{
  counter-increment:feature;
  content:counter(feature,decimal-leading-zero);
  position:absolute;
  top:var(--s5);
  left:var(--s5);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.feature-card h3{font-size:var(--fs-h3);line-height:1.4}
.feature-card p{
  margin-top:var(--s2);
  color:var(--muted);
  font-size:var(--fs-sm);
}
@media(hover:hover){
  .feature-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
}

/* CTA band */
.cta-band{
  background:var(--surface);
  border-block:var(--hairline) solid var(--line);
  padding-block:var(--s8);
}
.cta-inner{
  max-width:calc(var(--measure) - var(--s6));
  margin:0 auto;
  text-align:center;
}
.cta-inner h2{
  font-size:var(--fs-h2);
  line-height:1.28;
}
.cta-inner p{
  margin-top:var(--s3);
  color:var(--muted);
}
.cta-inner .btn{margin-top:var(--s5)}
@media(max-width:640px){
  .cta-band{padding-block:var(--s7)}
  .cta-inner .btn{width:100%}
}

/* Footer */
.site-footer{
  border-top:var(--hairline) solid var(--line);
  padding:var(--footer-pad) 0 var(--s5);
}
.footer-main{
  display:grid;
  grid-template-columns:var(--brand-col) minmax(0,1fr);
  gap:var(--s8);
  align-items:start;
}
.footer-brand{min-width:0}
.footer-brand .brand{margin-bottom:var(--s3)}
.footer-brand .brand-mark{width:var(--logo-sm);height:var(--logo-sm)}
.footer-brand .brand-mark::before{width:calc(var(--logo-sm) / 2)}
.footer-brand p{
  max-width:var(--brand-col);
  color:var(--muted);
  font-size:var(--fs-sm);
}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s6);
}
.footer-title{
  margin-bottom:var(--s4);
  font-size:var(--fs-sm);
  font-weight:700;
}
.footer-links{list-style:none;display:grid;gap:var(--s3)}
.footer-links a{
  color:var(--muted);
  font-size:var(--fs-sm);
  text-decoration:none;
}
.footer-links a:hover{color:var(--text);text-decoration:underline}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s2) var(--s5);
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:var(--hairline) solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.footer-bottom p{max-width:var(--measure)}
@media(max-width:960px){
  .footer-main{grid-template-columns:1fr;gap:var(--s6)}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .footer-nav{grid-template-columns:1fr;gap:var(--s5)}
  .footer-bottom{flex-direction:column}
}

/* Interior page heading */
.page-hero{
  padding-block:var(--s7) var(--s6);
  border-bottom:var(--hairline) solid var(--line);
}
.page-hero .crumb{margin-bottom:var(--s5)}
.page-head{max-width:var(--measure)}
.page-head h1{
  font-size:var(--fs-h2);
  line-height:1.2;
  letter-spacing:-.02em;
}
.page-lede{
  margin-top:var(--s3);
  color:var(--muted);
  font-size:var(--fs-body);
}
.page-section{padding-block:var(--s8)}
.page-section-tight{padding-block:var(--s7)}
.page-section-surface{background:var(--surface)}

/* Platform tabs */
.tabs{position:relative}
.tab-input{
  position:absolute;
  width:var(--hairline);
  height:var(--hairline);
  opacity:0;
  clip-path:inset(50%);
  pointer-events:none;
}
.tab-labels{
  display:flex;
  gap:var(--s2);
  border-bottom:var(--hairline) solid var(--line);
}
.tab-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 var(--s4);
  border-bottom:var(--focus-w) solid transparent;
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.tab-label:hover{color:var(--text)}
#platform-ios:checked ~ .tab-labels [for="platform-ios"],
#platform-android:checked ~ .tab-labels [for="platform-android"],
#platform-windows:checked ~ .tab-labels [for="platform-windows"],
#platform-macos:checked ~ .tab-labels [for="platform-macos"],
#platform-linux:checked ~ .tab-labels [for="platform-linux"]{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
#platform-ios:focus-visible ~ .tab-labels [for="platform-ios"],
#platform-android:focus-visible ~ .tab-labels [for="platform-android"],
#platform-windows:focus-visible ~ .tab-labels [for="platform-windows"],
#platform-macos:focus-visible ~ .tab-labels [for="platform-macos"],
#platform-linux:focus-visible ~ .tab-labels [for="platform-linux"]{
  outline:var(--focus-w) solid var(--accent);
  outline-offset:var(--focus-w);
}
.tab-panels{margin-top:var(--s5)}
.tab-panel{display:none}
#platform-ios:checked ~ .tab-panels #panel-ios,
#platform-android:checked ~ .tab-panels #panel-android,
#platform-windows:checked ~ .tab-panels #panel-windows,
#platform-macos:checked ~ .tab-panels #panel-macos,
#platform-linux:checked ~ .tab-panels #panel-linux{
  display:block;
}
@media(max-width:640px){
  .tab-labels{overflow-x:auto;scrollbar-width:none}
  .tab-labels::-webkit-scrollbar{display:none}
  .tab-label{padding:0 var(--s3)}
}

/* Download page */
.download-panel{max-width:var(--measure)}
.version-card{padding:var(--s6)}
.version-card h2,
.version-card h3{
  font-size:var(--fs-h3);
  line-height:1.4;
}
.version-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s3);
  margin-block:var(--s5);
  padding-block:var(--s4);
  border-block:var(--hairline) solid var(--line);
}
.version-meta dt{
  color:var(--muted);
  font-size:12px;
}
.version-meta dd{
  margin:var(--s1) 0 0;
  font-size:var(--fs-sm);
  font-weight:600;
}
.version-card .btn{margin-top:var(--s2)}
.link-note{
  display:block;
  margin-top:var(--s2);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.download-note{
  margin-top:var(--s4);
  color:var(--muted);
  font-size:var(--fs-sm);
}
.prep-steps{
  counter-reset:prep;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
  margin-top:var(--s6);
}
.prep-step{
  position:relative;
  padding:var(--s5);
  padding-top:var(--s7);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-m);
  background:var(--bg);
}
.prep-step::before{
  counter-increment:prep;
  content:counter(prep,decimal-leading-zero);
  position:absolute;
  top:var(--s4);
  left:var(--s5);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.prep-step h3{font-size:var(--fs-h3)}
.prep-step p{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-sm)}
@media(max-width:960px){
  .prep-steps{grid-template-columns:1fr}
  .prep-step{padding-top:var(--s6)}
}
@media(max-width:640px){
  .version-card{padding:var(--s5)}
  .version-meta{grid-template-columns:1fr;gap:var(--s3)}
}

/* Pricing */
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
  align-items:stretch;
}
.price-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  position:relative;
}
.price-card-featured{
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
.price-badge{
  position:absolute;
  top:calc(var(--s5) * -1);
  right:var(--s5);
  display:inline-flex;
  align-items:center;
  min-height:var(--s6);
  padding:0 var(--s3);
  border-radius:999px;
  background:var(--accent);
  color:var(--bg);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}
.price-card h2{
  font-size:var(--fs-h3);
  line-height:1.4;
}
.price-value{
  margin-top:var(--s4);
  font-size:var(--price-fs);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.03em;
}
.price-value small{
  font-size:var(--fs-sm);
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
}
.price-benefits{
  list-style:none;
  display:grid;
  gap:var(--s2);
  margin-block:var(--s5);
  color:var(--muted);
  font-size:var(--fs-sm);
}
.price-benefits li{
  position:relative;
  padding-left:var(--s4);
}
.price-benefits li::before{
  content:"";
  position:absolute;
  top:.7em;
  left:0;
  width:var(--s1);
  height:var(--s2);
  border-right:var(--focus-w) solid var(--accent);
  border-bottom:var(--focus-w) solid var(--accent);
  transform:rotate(45deg) translateY(-50%);
}
.price-card .btn{
  width:100%;
  margin-top:auto;
}
.price-note{
  display:block;
  margin-top:var(--s3);
  color:var(--muted);
  font-size:12px;
}
@media(max-width:960px){
  .price-grid{grid-template-columns:1fr}
  .price-card{padding:var(--s6)}
  .price-badge{top:var(--s5)}
  .price-value{margin-top:var(--s3)}
}

/* Tutorial */
.tutorial-list{
  counter-reset:tutorial;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);
}
.tutorial-step{
  position:relative;
  padding:var(--s5);
  padding-left:calc(var(--step-size) + var(--s5) + var(--s4));
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-m);
  background:var(--bg);
  scroll-margin-top:calc(var(--header-h) + var(--s5));
}
.tutorial-step::before{
  counter-increment:tutorial;
  content:counter(tutorial);
  position:absolute;
  top:var(--s5);
  left:var(--s5);
  display:grid;
  place-items:center;
  width:var(--step-size);
  height:var(--step-size);
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  font-size:var(--fs-sm);
  font-weight:700;
}
.tutorial-step h3{font-size:var(--fs-h3);line-height:1.4}
.tutorial-step p{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-sm)}
@media(max-width:960px){
  .tutorial-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tutorial-step{padding:var(--s5);padding-top:calc(var(--step-size) + var(--s5));padding-left:var(--s5)}
}

/* Responsive table */
.table-wrap{width:100%;overflow-x:auto}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.table th,
.table td{
  padding:var(--s4) var(--s4);
  border-bottom:var(--hairline) solid var(--line);
  text-align:left;
  vertical-align:top;
}
.table thead th{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}
.table tbody th{font-weight:600}
@media(max-width:640px){
  .responsive-table thead{
    position:absolute;
    width:var(--hairline);
    height:var(--hairline);
    padding:0;
    margin:calc(var(--hairline) * -1);
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td{display:block;width:100%}
  .responsive-table tr{
    margin-bottom:var(--s3);
    padding:var(--s4);
    border:var(--hairline) solid var(--line);
    border-radius:var(--r-m);
    background:var(--bg);
  }
  .responsive-table th,
  .responsive-table td{
    display:grid;
    grid-template-columns:34% minmax(0,1fr);
    gap:var(--s2);
    padding:var(--s2) 0;
    border-bottom:0;
  }
  .responsive-table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-weight:600;
  }
}

/* FAQ */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  margin-bottom:var(--s5);
}
.chip{
  display:inline-flex;
  align-items:center;
  min-height:var(--s6);
  padding:0 var(--s3);
  border:var(--hairline) solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
  font-size:12px;
}
.faq-list{
  display:grid;
  gap:var(--s3);
  max-width:calc(var(--measure) + var(--s5));
}
.faq-item{
  background:var(--bg);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-m);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  min-height:44px;
  padding:var(--s4) var(--s5);
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  color:var(--accent);
  font-size:var(--fs-h3);
  font-weight:400;
  line-height:1;
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{
  padding:0 var(--s5) var(--s5);
  color:var(--muted);
  font-size:var(--fs-sm);
}
.faq-answer p{max-width:var(--measure)}

/* Why page */
.why-grid{counter-reset:why}
.why-card{
  position:relative;
  padding-left:calc(var(--s7) + var(--s5));
  min-height:100%;
}
.why-card::before{
  content:"";
  position:absolute;
  top:var(--s5);
  left:var(--s5);
  width:var(--s6);
  height:var(--s6);
  border:var(--hairline) solid var(--line);
  border-radius:50%;
  background:var(--surface);
}
.why-card::after{
  content:"";
  position:absolute;
  top:calc(var(--s5) + var(--s3));
  left:calc(var(--s5) + var(--s2));
  width:var(--s3);
  height:calc(var(--s2) - var(--focus-w));
  border-left:var(--focus-w) solid var(--accent);
  border-bottom:var(--focus-w) solid var(--accent);
  transform:rotate(-45deg);
}
.why-card h3{font-size:var(--fs-h3);line-height:1.4}
.why-card p{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-sm)}
@media(max-width:640px){
  .why-card{padding-left:calc(var(--s7) + var(--s4))}
}

/* Legal pages */
.legal-layout{max-width:calc(var(--measure) + var(--s6))}
.legal-meta{
  margin-top:var(--s3);
  color:var(--muted);
  font-size:var(--fs-sm);
}
.legal-list{
  counter-reset:legal;
  display:grid;
  gap:var(--s6);
  margin-top:var(--s7);
}
.legal-item{counter-increment:legal}
.legal-item h2{
  display:grid;
  grid-template-columns:var(--s7) minmax(0,1fr);
  gap:var(--s2);
  align-items:baseline;
  font-size:var(--fs-h3);
  line-height:1.45;
}
.legal-item h2::before{
  content:counter(legal,decimal-leading-zero);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.legal-item p{
  margin-top:var(--s3);
  padding-left:var(--s7);
  color:var(--muted);
}
.legal-contact{
  margin-top:var(--s7);
  padding:var(--s5);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-m);
  background:var(--surface);
}
.legal-contact h2{font-size:var(--fs-h3)}
.legal-contact p{margin-top:var(--s2);color:var(--muted)}
@media(max-width:640px){
  .legal-list{gap:var(--s5);margin-top:var(--s6)}
  .legal-item h2{grid-template-columns:1fr;gap:var(--s1)}
  .legal-item p{padding-left:0}
}

/* 404 */
.error-page{
  min-height:calc(100vh - var(--header-h) - var(--s9));
  display:grid;
  place-items:center;
  padding-block:var(--s9);
}
.error-inner{
  max-width:var(--measure);
  text-align:center;
}
.error-code{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
}
.error-inner h1{
  margin-top:var(--s3);
  font-size:var(--fs-h2);
  line-height:1.25;
}
.error-inner p{margin-top:var(--s3);color:var(--muted)}
.error-actions{
  display:flex;
  justify-content:center;
  gap:var(--s3);
  margin-top:var(--s5);
}
.error-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s3) var(--s5);
  margin-top:var(--s5);
  font-size:var(--fs-sm);
}
.error-links a{color:var(--muted)}
@media(max-width:640px){
  .error-page{min-height:auto;padding-block:var(--s7)}
  .error-actions{flex-direction:column}
  .error-actions .btn{width:100%}
}

/* Utility */
.text-link{
  color:var(--accent);
  text-decoration:underline;
}
.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s5);
}
.mt-5{margin-top:var(--s5)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}