.hero{position:relative;max-width:100%;overflow-x:clip;padding-top:34px;padding-bottom:48px;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px),linear-gradient(180deg,var(--color-hero-top),var(--color-hero-bottom));background-size:48px 48px,48px 48px,100% 100%}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-title{margin:16px 0 0;font-weight:500}
.hero-lede{max-width:760px;margin:14px auto 0;font-size:17px;line-height:1.7}
.cta-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.trust-points{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:16px 0 0;padding:0;list-style:none;color:var(--color-muted);font-size:13.5px}
.trust-points li{display:inline-flex;align-items:center}
.trust-points li+li::before{content:"·";margin-right:10px;color:var(--color-muted-2)}
.trust-band{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;color:var(--color-muted)}
.band-list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.band-list li{display:inline-flex;align-items:center;gap:7px;padding:0 13px;white-space:nowrap;font-size:12px}
.band-list li:first-child{padding-left:0}
.band-list li+li{border-left:1px solid var(--color-border)}
.platform-icon,.flag-icon{width:18px;height:18px;flex:0 0 18px;color:currentColor}
.band-divider{width:1px;height:24px;flex:0 0 1px;background:var(--color-border)}
.device{position:relative;margin-top:30px}
.kb-window{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-panel);box-shadow:var(--shadow-window)}
.kb-chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 16px;border-bottom:1px solid var(--color-border-soft);background:linear-gradient(180deg,var(--color-white),var(--color-panel))}
.kb-nav,.kb-title,.kb-controls{display:flex;align-items:center;gap:8px}
.kb-round{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border:1px solid var(--color-border-soft);border-radius:50%;background:var(--color-panel-3);color:var(--color-muted);font-size:13px}
.kb-title{font-size:14px;font-weight:500}
.kb-segment{display:inline-flex;padding:3px;border-radius:var(--radius-pill);background:var(--color-panel-2)}
.kb-segment span{padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;color:var(--color-muted)}
.kb-segment .is-active{background:var(--color-white);color:var(--color-text)}
.kb-switch{display:inline-flex;align-items:center;gap:7px;color:var(--color-accent-dark);font-size:12px}
.kb-switch::after{content:"";width:32px;height:18px;border-radius:var(--radius-pill);background:radial-gradient(circle at 74% 50%,var(--color-white) 0 6px,transparent 7px),linear-gradient(var(--color-accent),var(--color-accent-dark))}
.kb-body{display:grid;grid-template-columns:70% 30%}
.kb-grid{display:grid;grid-template-columns:92px repeat(5,minmax(0,1fr));grid-template-rows:30px repeat(6,50px)}
.kb-head,.kb-row-head,.kb-cell{min-width:0;border-bottom:1px solid var(--color-border-soft)}
.kb-head{display:flex;align-items:center;gap:5px;padding:0 8px;border-left:1px solid var(--color-border-soft);font-size:11px;font-weight:500;white-space:nowrap}
.kb-row-head{display:flex;align-items:center;padding:0 8px;font:500 10px/1.3 var(--font-mono);color:var(--color-muted)}
.kb-cell{padding:4px;border-left:1px solid var(--color-border-soft)}
.route-block{display:flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--radius-sm);background:var(--color-panel-2);color:var(--color-muted);font-size:10.5px;line-height:1.2}
.route-block.is-recommended{flex-direction:column;align-items:flex-start;justify-content:center;border:1.5px dashed var(--color-success);background:linear-gradient(180deg,var(--color-success-soft-2),var(--color-success-soft));color:var(--color-text)}
.route-block small{color:var(--color-forest)}
.kb-panel{display:grid;grid-template-columns:1fr 48px;border-left:1px solid var(--color-border-soft);background:var(--color-panel-3)}
.kb-entry{display:flex;min-width:0;flex-direction:column;gap:10px;padding:16px}
.entry-meta{display:flex;align-items:center;gap:8px;color:var(--color-muted);font-size:11px}
.entry-code{margin-left:auto;padding:2px 6px;border-radius:var(--radius-sm);background:var(--color-panel-2);font:500 10px/1.4 var(--font-mono)}
.entry-title{margin:0;font-size:17px}
.entry-copy{font-size:12.5px;line-height:1.55}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:22px;padding:3px 8px;background:var(--color-white);color:var(--color-accent-dark);font:500 10.5px/1 var(--font-mono)}
.mini-plan{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:10px;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:var(--color-panel)}
.mini-plan small{color:var(--color-muted-2)}
.mini-plan strong{font-size:13px;font-weight:500}
.mini-plan .tag{grid-column:2;grid-row:1/span 2;background:var(--color-success-soft);color:var(--color-forest)}
.kb-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px;border-left:1px solid var(--color-border-soft)}
.rail-button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--color-border-soft);border-radius:50%;background:var(--color-white);color:var(--color-muted)}
.float-note{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-panel)}
.refund-note{top:-18px;right:-18px;padding:9px 14px;border-radius:var(--radius-lg);background:var(--color-panel);transform:rotate(1.2deg)}
.device-note{bottom:-16px;left:-14px;padding:9px 15px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark));color:var(--color-white);font-size:13px;transform:rotate(-1.5deg)}
.logo-strip{text-align:center;margin-top:28px}
.logo-strip .band-list{justify-content:center;color:var(--color-muted-2)}
.logo-strip p{margin-top:10px;font-size:13px}
[data-parallax-decor]{will-change:transform}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stat-card{position:relative;overflow:hidden;min-height:320px;padding:36px;border-radius:var(--radius-2xl);color:var(--color-white)}
.stat-card::before{content:"";position:absolute;inset:0;opacity:.24;pointer-events:none}
.stat-card.is-accent{background:var(--color-accent)}
.stat-card.is-accent::before{background-image:radial-gradient(var(--color-white) 1px,transparent 1px);background-size:18px 18px}
.stat-card.is-success{background:var(--color-success)}
.stat-card.is-success::before{background-image:linear-gradient(30deg,transparent 45%,var(--color-white) 46% 48%,transparent 49%);background-size:80px 80px}
.stat-card.is-forest{background:var(--color-forest)}
.stat-card.is-forest::before{background-image:linear-gradient(var(--color-white) 1px,transparent 1px),linear-gradient(90deg,var(--color-white) 1px,transparent 1px);background-size:54px 54px}
.stat-number{position:relative;display:block;margin-top:80px;font:500 clamp(64px,9vw,118px)/1 var(--font-display);letter-spacing:-.04em}
.stat-label{position:relative;margin-top:16px;color:var(--color-white)}
.tab-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
[role="tablist"].tabs{display:flex;flex-direction:column;gap:6px}
[role="tab"]{display:flex;align-items:center;min-height:48px;padding:10px 16px;border:0;border-left:3px solid transparent;border-radius:0 var(--radius-md) var(--radius-md) 0;background:transparent;color:var(--color-muted);text-align:left;cursor:pointer}
[role="tab"][aria-selected="true"]{border-left-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-text)}
[role="tabpanel"]{min-width:0}
[role="tabpanel"][hidden]{display:none}
.tab-detail{padding:32px}
.toc-tabs{position:sticky;top:12px;z-index:20;display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel);box-shadow:var(--shadow-panel);scrollbar-width:none}
.toc-tabs a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--radius-pill);white-space:nowrap;color:var(--color-muted);font-size:14px}
.toc-tabs a.is-current{background:var(--color-accent);color:var(--color-white)}
body:has(.toc-tabs) section[id]{scroll-margin-top:104px}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);background:var(--color-panel)}
.faq-item summary{position:relative;min-height:56px;padding:15px 52px 15px 18px;cursor:pointer;font-weight:500;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--color-accent);font-size:24px}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 18px 18px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:28px}
.plan-card.is-featured{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft),var(--shadow-panel)}
.plan-badge{position:absolute;top:16px;right:16px;background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.plan-price{margin:20px 0 6px;font:500 42px/1 var(--font-display);letter-spacing:-.03em}
.plan-price small{font-size:14px;color:var(--color-muted)}
.plan-features{display:grid;gap:8px;margin:22px 0;padding:0;list-style:none;color:var(--color-muted)}
.plan-card .btn{margin-top:auto}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;min-width:680px;border:1px solid var(--color-border);background:var(--color-panel)}
.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--color-border-soft);text-align:left}
.data-table th{background:var(--color-panel-2);color:var(--color-text);font-weight:600}
.data-table td:first-child{color:var(--color-text);font-weight:500}
.prose>.data-table{display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.platform-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
.platform-card svg{width:28px;height:28px;color:var(--color-accent-dark)}
.platform-card .btn{width:100%;margin-top:auto}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-card{display:flex;min-width:0;flex-direction:column;padding:24px}
.article-meta{display:flex;gap:10px;margin-bottom:14px;color:var(--color-muted-2);font-size:12px}
.article-card h3{font-size:21px}
.article-card .article-link{margin-top:auto;color:var(--color-accent-dark);font-weight:500}
.callout{padding:20px 22px;border-left:4px solid var(--color-success);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--color-success-soft)}
.callout strong{color:var(--color-forest)}
.promo-block{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:32px;border-radius:var(--radius-2xl);background:var(--color-accent);color:var(--color-white)}
.promo-block h2,.promo-block p{color:var(--color-white)}
.float-cta{position:fixed;right:28px;bottom:22px;z-index:55;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--color-text-2),var(--color-text));color:var(--color-white);box-shadow:0 12px 26px -10px var(--color-ink-shadow);font-size:14px;font-weight:500}
.float-cta svg{width:16px;height:16px}
body:has(.float-cta)::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px))}
.preview-section{padding-top:80px;padding-bottom:80px}
.preview-title{margin-bottom:32px;font-size:38px}
.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.swatch{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel)}
.swatch-color{height:84px}
.swatch-info{padding:12px;font:500 12px/1.5 var(--font-mono)}
.swatch-bg{background:var(--color-bg)}
.swatch-panel{background:var(--color-panel)}
.swatch-panel-2{background:var(--color-panel-2)}
.swatch-accent{background:var(--color-accent)}
.swatch-accent-dark{background:var(--color-accent-dark)}
.swatch-success{background:var(--color-success)}
.swatch-forest{background:var(--color-forest)}
.swatch-text{background:var(--color-text)}
.type-sample{padding:28px}
.type-display{font:500 52px/1.1 var(--font-display);letter-spacing:-.02em}
.type-body{font:400 17px/1.7 var(--font-body)}
.type-mono{font:500 14px/1.6 var(--font-mono)}
.button-demo{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.static-footer{margin-top:0}
@media (max-width:1080px){
  .kb-body{grid-template-columns:1fr}
  .kb-panel{border-left:0;border-top:1px solid var(--color-border-soft)}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .float-note{display:none}
  .trust-band{align-items:flex-start;flex-direction:column;overflow-x:auto}
  .band-divider{display:none}
  .kb-grid{grid-template-columns:72px repeat(5,minmax(112px,1fr));overflow-x:auto}
  .kb-panel{grid-template-columns:1fr}
  .kb-rail{display:none}
  .stat-grid,.plan-grid,.article-grid{grid-template-columns:1fr}
  .stat-card{min-height:240px}
  .stat-number{margin-top:44px}
  .tab-layout{grid-template-columns:1fr}
  [role="tablist"].tabs{flex-direction:row;overflow-x:auto}
  [role="tab"]{flex:0 0 auto;border-left:0;border-bottom:3px solid transparent;border-radius:var(--radius-pill)}
  [role="tab"][aria-selected="true"]{border-bottom-color:var(--color-accent)}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-block{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cta-row{width:100%;flex-direction:column}
  .hero{padding-top:28px}
  .kb-controls,.kb-title .kb-segment{display:none}
  .logo-strip .band-list{flex-wrap:wrap;gap:10px 0}
  .platform-grid{grid-template-columns:1fr}
  .float-cta{right:16px;bottom:16px}
  .refund-note,.device-note{transform:none}
}