/* Browser device */
.stage-wrap{position:relative;z-index:4;width:min(1040px,100%);margin:30px auto 0}
.stage{position:relative;transition:transform .6s var(--ease-arrival)}
.stage:hover{transform:perspective(1600px) rotateX(1.2deg) translateY(-3px)}
.window{position:relative;z-index:2;height:384px;display:grid;grid-template-rows:46px 1fr;border-radius:var(--r-window);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-window);overflow:hidden}
.window::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--hi);pointer-events:none}
.chrome{display:flex;align-items:flex-end;gap:14px;padding:0 120px 0 18px;background:linear-gradient(180deg,var(--panel-2),var(--bg-bottom));border-bottom:1px solid var(--border);min-width:0}
.dots{display:flex;gap:7px;align-self:center;flex-shrink:0}
.dots i{width:11px;height:11px;border-radius:var(--r-round);background:var(--border);box-shadow:inset 0 1px 0 var(--hi)}
.dots i:nth-child(2){background:var(--panel)}
.dots i:nth-child(3){background:var(--bg)}
.tabs{display:flex;gap:4px;list-style:none;margin:0;padding:0;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-tab) var(--r-tab) 0 0;font-size:var(--size-small);color:var(--muted);white-space:nowrap;flex-shrink:0}
.tab.is-on{color:var(--text);font-weight:var(--weight-semibold);background:linear-gradient(180deg,var(--surface) 0%,var(--bg-top) 100%);box-shadow:0 -1px 0 var(--border),1px 0 0 var(--border),-1px 0 0 var(--border);margin-bottom:-1px;height:37px}
.flag{width:21px;height:14px;flex-shrink:0;display:block;border-radius:3px;overflow:hidden}
.f-red{fill:var(--flag-red)}
.f-white{fill:var(--flag-white)}
.f-blue{fill:var(--flag-blue)}
.f-navy{fill:var(--flag-navy)}
.fs-white{fill:none;stroke:var(--flag-white)}
.fs-red{fill:none;stroke:var(--flag-red)}
.f-edge{fill:none;stroke:rgb(var(--ink-rgb) / .2);stroke-width:1}
.win-body{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:0}
.side{display:flex;flex-direction:column;padding:12px 10px;background:var(--panel);border-right:1px solid var(--border)}
.side-group+.side-group{margin-top:10px}
.side-label{height:16px;margin:0 0 4px;padding:0 10px;font-size:var(--size-micro);line-height:16px;letter-spacing:.06em;color:var(--muted)}
.side-list{list-style:none;margin:0;padding:0}
.side-item{display:flex;align-items:center;gap:9px;height:28px;padding:0 10px;border-radius:var(--r-side);font-size:var(--size-row);color:var(--text)}
.side-item svg{width:16px;height:16px;flex-shrink:0;color:var(--muted)}
.side-item.is-on{background:var(--surface);font-weight:var(--weight-semibold);box-shadow:0 0 0 1px var(--border-soft),var(--shadow-soft)}
.side-item.is-on svg{color:var(--indigo)}
.side-fact{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;margin-left:4px;border-radius:var(--r-pill);background:var(--panel-2);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);color:var(--text)}
.side-fact svg{width:14px;height:14px;flex-shrink:0;color:var(--ink-teal)}
.main{position:relative;padding:20px 28px;min-width:0}
.main-head{display:flex;align-items:center;justify-content:space-between;height:18px;font-size:var(--size-small);color:var(--muted)}
.crumb{display:flex;align-items:center;gap:6px}
.crumb svg{width:14px;height:14px;flex-shrink:0}
.crumb b{font-weight:var(--weight-medium);color:var(--text)}
.crumb-sep{color:var(--border)}
.head-tools{display:flex;align-items:center;gap:14px}
.head-tools svg{width:16px;height:16px}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip,.badge,.tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 11px 2px 8px;border-radius:var(--r-pill);font-size:var(--size-chip);font-weight:var(--weight-semibold);max-width:100%;overflow-wrap:anywhere}
.chip svg,.badge svg{width:15px;height:15px;flex-shrink:0}
.chip-ok,.badge-native{background:rgb(var(--success-rgb) / .12);color:var(--success)}
.chip-line,.tag{background:rgb(var(--indigo-rgb) / .10);color:var(--indigo)}
.badge{background:var(--panel-2);color:var(--text)}
.badge-native{background:rgb(var(--success-rgb) / .12);color:var(--success)}
.doc-title{margin:12px 0 0;font-family:var(--font-display);font-size:var(--size-doc);line-height:1.2;font-weight:var(--weight-bold);letter-spacing:-.02em}
.doc-desc{margin:4px 0 0;font-size:var(--size-label);line-height:20px;color:var(--muted)}
.pl-head{display:flex;justify-content:space-between;margin-top:14px;font-size:var(--size-caption);line-height:16px;color:var(--muted)}
.pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:8px 0 0;padding:0}
.pl li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:0 10px 0 12px;border-radius:var(--r-row);background:var(--panel);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:var(--size-row);font-weight:var(--weight-medium);white-space:nowrap;min-width:0}
.ok{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-round);background:rgb(var(--success-rgb) / .14);color:var(--success);flex-shrink:0}
.ok svg{width:11px;height:11px}
.status{position:absolute;z-index:5;left:200px;bottom:-30px;width:400px;padding:12px 16px;border-radius:var(--r-card);background:var(--surface);border:1px solid rgb(var(--accent-rgb) / .4);box-shadow:var(--shadow-accent);list-style:none;margin:0}
.status li{display:flex;align-items:center;gap:10px;min-height:23px;font-size:var(--size-row);color:var(--text)}
.status li+li{margin-top:3px}
.status .s-ico{width:16px;height:16px;flex-shrink:0;color:var(--ink-teal)}
.status .s-ok{width:14px;height:14px;flex-shrink:0;color:var(--success)}
.note{position:absolute;z-index:6;right:-58px;top:-16px;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px 0 12px;border-radius:var(--r-pill);background:var(--apricot);border:1px solid var(--apricot-edge);font-size:var(--size-small);font-weight:var(--weight-semibold);color:var(--text);transform:rotate(5deg);box-shadow:0 10px 24px -10px rgb(var(--accent-rgb) / .22),inset 0 1px 0 var(--hi)}
.note svg{width:16px;height:16px;flex-shrink:0;color:var(--accent-dark)}
.doodle{position:absolute;z-index:1;opacity:.3;pointer-events:none;overflow:visible}
.doodle-l{left:-164px;top:36px;width:180px;height:160px}
.doodle-r{right:-158px;top:176px;width:160px;height:150px}
.dd-apricot{fill:none;stroke:var(--doodle-apricot);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.dd-apricot-fill{fill:var(--doodle-apricot)}
.dd-ice{fill:none;stroke:var(--doodle-ice);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}

/* Tabs and reading navigation */
.tab-set{min-width:0}
.tab-list,[role="tablist"]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px;background:var(--panel-2);border-radius:var(--r-pill);width:fit-content;max-width:100%;margin-bottom:20px}
.tab-button,[role="tab"]{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 18px;border:1px solid var(--transparent);border-radius:var(--r-pill);background:var(--transparent);font-size:var(--size-label);font-weight:var(--weight-semibold)}
[role="tab"][aria-selected="true"]{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-soft)}
.tab-panel,[role="tabpanel"]{min-width:0}
.toc-tabs{position:sticky;top:var(--toc-offset);z-index:15;display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:8px;margin-bottom:24px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-soft);scrollbar-width:thin;overscroll-behavior-x:contain}
.toc-tabs a{display:inline-flex;align-items:center;min-height:40px;flex-shrink:0;white-space:nowrap;padding:8px 18px;border-radius:var(--r-pill);color:var(--text)}
.toc-tabs a.is-current{background:var(--panel-2);font-weight:var(--weight-semibold)}
.toc-tabs.toc-static{position:static}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--toc-anchor-offset)}

/* FAQ and editorial components */
.faq-item{border-bottom:1px solid var(--border);background:var(--panel);border-radius:var(--r-card);margin-bottom:12px;overflow:clip}
.faq-item summary{position:relative;padding:20px 54px 20px 24px;font-size:var(--size-button);font-weight:var(--weight-semibold);cursor:pointer;list-style:none;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:24px;top:20px;font-family:var(--font-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 24px 20px;color:var(--muted)}
.faq-answer p:last-child{margin-bottom:0}
.callout{margin:24px 0;padding:20px 24px;border-left:3px solid var(--ink-teal);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--panel-2);color:var(--text)}
.callout p:last-child{margin-bottom:0}
.article-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px;border-radius:var(--r-window);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.article-card h3{margin:0;font-size:var(--size-doc)}
.article-card p{margin:0;color:var(--muted)}
.article-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:var(--size-small);color:var(--muted)}
.article-link{display:inline-flex;align-items:center;min-height:32px;color:var(--indigo);margin-top:auto}
.article-link:hover{text-decoration:underline}
.article-header{border-top:4px solid var(--ink-teal);padding-top:20px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:32px}
.article-header h1{font-size:clamp(32px,4vw,48px);margin:16px 0}
.promo-block{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--border);border-radius:var(--r-window);background:var(--panel-2);box-shadow:inset 0 1px 0 var(--hi);margin-top:40px;min-width:0}
.promo-copy{min-width:0}
.promo-copy strong{font-family:var(--font-display);font-size:var(--size-doc)}
.promo-copy p{margin:8px 0 0;color:var(--muted)}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* Pricing, comparisons and downloads */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;padding:28px;border:1px solid var(--border);border-radius:var(--r-feature);background:var(--panel);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-soft)}
.plan-card.is-current{border:2px solid var(--ink-teal);background:var(--surface)}
.plan-card h3{margin:0}
.plan-price{font-family:var(--font-display);font-size:36px;font-weight:var(--weight-bold);line-height:1.2;font-variant-numeric:tabular-nums}
.plan-price small{font-family:var(--font-body);font-size:var(--size-label);font-weight:var(--weight-normal);color:var(--muted)}
.plan-features{padding-left:20px;margin:0;color:var(--muted)}
.plan-card .btn{margin-top:auto}
.plan-badge{align-self:flex-start;padding:4px 12px;border-radius:var(--r-pill);background:var(--panel-2);font-size:var(--size-small);font-weight:var(--weight-semibold)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-card);background:var(--panel)}
.data-table,.line-table{width:100%;min-width:640px;text-align:left}
.data-table th,.data-table td,.line-table th,.line-table td{padding:16px 20px;border-bottom:1px solid var(--border);word-break:keep-all;color:var(--text)}
.table-scroll th,.line-table th{white-space:nowrap;color:var(--text);background:var(--panel-2);font-weight:var(--weight-semibold)}
.line-table .region-row th{background:var(--bg);font-size:var(--size-label)}
.data-table tr:last-child td,.line-table tr:last-child td{border-bottom:0}
.prose>.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.platform-card{display:flex;align-items:center;flex-direction:column;gap:16px;min-width:0;padding:24px 16px;border:1px solid var(--border);border-radius:var(--r-window);background:var(--panel);box-shadow:var(--shadow-soft);text-align:center}
.platform-icon{display:grid;place-items:center;width:52px;height:52px;background:var(--panel-2);border-radius:var(--r-card);color:var(--text)}
.platform-icon svg{width:28px;height:28px}
.platform-card h3{font-size:var(--size-label);margin:0}
.platform-card .btn{font-size:var(--size-small);min-height:40px;padding:0 16px}

/* Signature feature folios */
.feature-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feature-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:32px 28px 0;min-width:0;overflow:hidden;border-radius:var(--r-feature);background:var(--panel-2)}
.feature-card.feature-apricot{background:var(--apricot)}
.feature-card.feature-indigo{background:var(--indigo-panel)}
.feature-kicker{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);background:var(--panel);font-weight:var(--weight-semibold);font-size:var(--size-small);color:var(--ink-teal)}
.feature-card h3{font-size:28px;line-height:1.25;margin:0}
.feature-card .tab-set{width:100%}
.feature-card [role="tablist"]{background:var(--transparent);padding:0;border-radius:0;margin-bottom:12px}
.feature-card [role="tab"]{padding:6px 12px;min-height:32px;font-size:var(--size-small);border-color:var(--text)}
.feature-card p{font-size:var(--size-label);color:var(--muted)}
.feature-widget{align-self:stretch;min-width:0;padding:20px;margin-top:auto;background:var(--surface);border-radius:var(--r-card) var(--r-card) 0 0;box-shadow:var(--shadow-window);border:1px solid var(--border)}
.widget-list{list-style:none;margin:0;padding:0}
.widget-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.widget-list li:last-child{border:0}
.widget-list svg{width:16px;height:16px}
.subscription-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:var(--r-row);background:var(--panel)}
.help-section{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}

/* Preview-only layouts; no inline styles required */
.preview-stack{display:flex;flex-direction:column;gap:24px}
.preview-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.color-sample{min-width:0;padding:10px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card)}
.color-sample code{display:block;margin-top:8px;font-size:var(--size-caption)}
.color-patch{height:56px;border-radius:var(--r-row);border:1px solid var(--border)}
.sw-bg{background:var(--bg)}.sw-top{background:var(--bg-top)}.sw-bottom{background:var(--bg-bottom)}
.sw-panel{background:var(--panel)}.sw-panel2{background:var(--panel-2)}.sw-border{background:var(--border)}
.sw-border-soft{background:var(--border-soft)}.sw-surface{background:var(--surface)}
.sw-accent{background:var(--accent)}.sw-accent-soft{background:var(--accent-soft)}.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}.sw-muted{background:var(--muted)}.sw-teal{background:var(--ink-teal)}
.sw-success{background:var(--success)}.sw-indigo{background:var(--indigo)}.sw-warn{background:var(--warn)}.sw-error{background:var(--error)}
.sw-apricot{background:var(--apricot)}.sw-apricot-edge{background:var(--apricot-edge)}.sw-indigo-panel{background:var(--indigo-panel)}
.sw-doodle-apricot{background:var(--doodle-apricot)}.sw-doodle-ice{background:var(--doodle-ice)}
.sw-flag-red{background:var(--flag-red)}.sw-flag-white{background:var(--flag-white)}.sw-flag-blue{background:var(--flag-blue)}.sw-flag-navy{background:var(--flag-navy)}
.sw-hi{background:var(--hi)}.sw-transparent{background:var(--transparent)}
.type-display{font-family:var(--font-display);font-size:var(--size-h2);font-weight:var(--weight-bold)}
.type-body{font-family:var(--font-body);font-size:var(--size-body)}
.type-mono{font-family:var(--font-mono);font-size:var(--size-label)}
.state-focus{outline:2px solid var(--ink-teal);outline-offset:3px}
.preview-note{font-size:var(--size-small);color:var(--muted)}

@media(max-width:1279px){.doodle{display:none}.note{right:18px}}
@media(max-width:1100px){.status{left:180px}.pl li{font-size:var(--size-small)}}
@media(max-width:960px){
  .feature-band{display:flex;overflow-x:auto;gap:20px;padding-bottom:20px;scroll-snap-type:x proximity}
  .feature-card{flex:0 0 360px;scroll-snap-align:start}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preview-colors{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:768px){
  .stage-wrap{width:100%;margin-top:28px}
  .stage:hover{transform:none}
  .window{height:auto}
  .chrome{padding:0 12px}
  .win-body{grid-template-columns:minmax(0,1fr)}
  .side,.note,.doodle{display:none}
  .main{padding:18px}
  .pl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status{position:static;width:auto;margin-top:16px}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .promo-block{flex-direction:column;align-items:flex-start}
  .preview-colors{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .feature-band{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
  .feature-card{width:100%;max-width:100%;padding:28px 24px 0}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage,.stage:hover{transform:none}
  .toc-tabs{border-radius:var(--r-card)}
  .status li{font-size:var(--size-small);gap:7px;flex-wrap:wrap}
}
@media(max-width:420px){.pl{grid-template-columns:minmax(0,1fr)}.platform-grid{grid-template-columns:minmax(0,1fr)}}