/* trev.bot public site: The Preview Card.
   Before the feature, your drive gets its card: the page opens on the green
   title card every disc collector has sat through before a trailer, with the
   drive check in its box. The card is the same in both themes; around it the
   ground is screen white by day and theatre black by night, and reading panels
   are flat. Lime belongs to the primary action only. No ratings-body marks. */

@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-400.woff2?v=b0a8ad37ac45) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-600.woff2?v=4b52ddd4836b) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-600.woff2?v=215a93c696f4) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-700.woff2?v=3787a5a41917) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/martian-mono-wdth.woff2?v=f9c1655c2c9d) format("woff2");font-weight:400;font-stretch:75% 112.5%;font-style:normal;font-display:swap}
/* Metric-matched local fallbacks keep lines from reflowing while the faces arrive. */
@font-face{font-family:"Barlow fallback";src:local("Arial");size-adjust:94.4%;ascent-override:106%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed fallback";src:local("Arial");size-adjust:75%;ascent-override:133%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Martian Mono fallback";src:local("Consolas"),local("Menlo"),local("Courier New");size-adjust:111%;ascent-override:90%;descent-override:18%;line-gap-override:0%}

:root{
  /* Light: a screen in daylight. */
  color-scheme:light;
  --cover:#eef0ec;--cover-deep:#dde1dc;--cover-rule:#bfc5bf;
  --stock:#fbfcfa;--stock-hi:#fbfcfa;--stock-lo:#fbfcfa;--stock-press:#eef1ec;
  --print:#0c100e;--print-2:#4a524c;--print-hover:#27302b;
  --rule:#c3c9c3;--mark:#4a524c;--etch:#121614;
  --caution:#b4302a;--cover-accent:var(--card);--cover-focus:var(--print);
  --scroll-thumb:#aab1ab;
  --lift:0 1px 2px rgb(12 16 14 / .1),0 18px 36px -24px rgb(12 16 14 / .38);
  /* The card: identical in both themes. */
  --card:#0d7a3e;--card-deep:#0a6532;--card-ink:#ffffff;--card-rule:rgb(255 255 255 / .92);
  --band:#c4ef7a;--band-hi:#d6f59d;--on-band:#0c100e;
  --sans:Barlow,"Barlow fallback",system-ui,sans-serif;
  --cond:"Barlow Condensed","Barlow Condensed fallback",sans-serif;
  --mono:"Martian Mono","Martian Mono fallback",ui-monospace,monospace;
  --wide:1280px;--gutter:clamp(16px,3.9vw,56px);--die:12px;--pad:clamp(20px,4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --measure:54ch;
  --focus:var(--print);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h20M15 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}
/* Dark: a theatre with the lights down, for the system setting and the explicit override. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --cover:#0b0d0c;--cover-deep:#070808;--cover-rule:#262b28;
    --stock:#151917;--stock-hi:#151917;--stock-lo:#151917;--stock-press:#1e2420;
    --print:#edf1ed;--print-2:#a3aca5;--print-hover:#cfd6d0;
    --rule:#313833;--mark:#8e978f;--etch:#dfe4df;
    --caution:#ff7a6b;--cover-accent:var(--band);--cover-focus:var(--band);
    --scroll-thumb:#3a423d;
    --lift:inset 0 0 0 1px rgb(255 255 255 / .05),0 18px 36px -24px rgb(0 0 0 / .9);
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --cover:#0b0d0c;--cover-deep:#070808;--cover-rule:#262b28;
    --stock:#151917;--stock-hi:#151917;--stock-lo:#151917;--stock-press:#1e2420;
    --print:#edf1ed;--print-2:#a3aca5;--print-hover:#cfd6d0;
    --rule:#313833;--mark:#8e978f;--etch:#dfe4df;
    --caution:#ff7a6b;--cover-accent:var(--band);--cover-focus:var(--band);
    --scroll-thumb:#3a423d;
    --lift:inset 0 0 0 1px rgb(255 255 255 / .05),0 18px 36px -24px rgb(0 0 0 / .9);
}
html{background:var(--cover);scrollbar-color:var(--scroll-thumb) var(--cover-deep);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-width:320px;font:400 1.0625rem/1.6 var(--sans);color:var(--etch);font-kerning:normal;font-variant-numeric:lining-nums;
  background:var(--cover)}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
::selection{background:var(--band);color:var(--on-band)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-skip-ink:auto}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.008em;text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:20;padding:12px 16px;background:var(--band);color:var(--on-band);font-weight:600;border-radius:6px}
.skip:focus{top:16px}
.data{font-family:var(--mono);font-stretch:87.5%;font-variant-numeric:tabular-nums slashed-zero;letter-spacing:0}

/* Label stock: every printed surface. */
.label,.page-head,.download.is-available,.site-header{background:linear-gradient(176deg,var(--stock-hi),var(--stock) 34%,var(--stock-lo));color:var(--print);--focus:var(--print)}
/* Focus rings print thermal black by default; only controls printed straight on the gunmetal
   cover take the lime ring, which would be about 1.1:1 on label stock. */
.site-footer{--focus:var(--cover-focus)}
.skip{--focus:var(--on-band)}
.label,.page-head,.download.is-available{position:relative;border-radius:var(--die);box-shadow:var(--lift)}
.label a:hover,.page-head a:hover{text-decoration-thickness:2px}
.rubric,.field dt,.download-facts dt,.catalogue-count dt,.price-list dt,.drive-search label,.beta-form label{margin:0;font:600 .8125rem/1.2 var(--cond);letter-spacing:.11em;text-transform:uppercase;color:var(--print-2)}

/* Navigation: a thin label strip along the top of the cover. */
.site-header{display:flex;align-items:stretch;width:min(var(--wide),100% - 2*var(--gutter));margin:16px auto 0;border-radius:10px;overflow:hidden;box-shadow:var(--lift)}
/* Home: the label's maker band carries the brand, so the strip is a shorter label at the top right. */
.site-header.no-brand{width:fit-content;max-width:calc(100% - 2*var(--gutter));margin-right:max(var(--gutter),(100% - var(--wide)) / 2)}
.wordmark{display:inline-flex;align-items:center;padding:0 20px;font:700 1.375rem/1 var(--cond);letter-spacing:.005em;color:var(--print);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--print-2)}
.site-header .wordmark:focus-visible,.site-header nav a:focus-visible{outline-offset:-5px}
.site-header nav{display:flex;min-width:0;margin-left:auto;border-left:1px solid var(--rule)}
.site-header.no-brand nav{border-left:0}
.site-header ul{display:flex;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
.site-header ul::-webkit-scrollbar{display:none}
.site-header li{display:flex;flex:none;scroll-snap-align:start}
.site-header li+li{border-left:1px solid var(--rule)}
.site-header nav a{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;font:600 .9375rem/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--print);white-space:nowrap;transition:background-color .15s}
.site-header nav a:hover{background:var(--stock-press)}
.site-header nav a[aria-current="page"]::after{content:"";position:absolute;left:18px;right:18px;bottom:10px;height:3px;background:var(--print)}
.site-header .nav-download{flex:none;padding:0 24px;background:var(--print);color:var(--stock);font-weight:700}
.site-header .nav-download:hover{background:var(--print-hover)}
.site-header .nav-download:focus-visible{outline-color:var(--band)}
.site-header .nav-download[aria-current="page"]::after{background:var(--band)}

main{display:block;width:min(var(--wide),100% - 2*var(--gutter));margin:0 auto;padding:clamp(24px,3.2vw,40px) 0 clamp(80px,9vw,136px)}
main>*+*{margin-top:clamp(56px,7vw,104px)}
main>.page-head+*{margin-top:clamp(24px,2.8vw,36px)}

/* Home: the main label and the app screen applied beside it. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:start}
.hero-label{overflow:hidden}
.label-band{display:flex;align-items:center;min-height:60px;margin:0;padding:0 var(--pad);background:var(--band);color:var(--print);border-bottom:2px solid var(--print)}
.band-mark{font:700 2rem/1 var(--cond);letter-spacing:.004em;color:var(--print);text-decoration:none}
.band-mark:hover{text-decoration:underline;text-decoration-thickness:2px}
.label-body{padding:clamp(24px,3vw,38px) var(--pad) clamp(24px,3vw,40px)}
.hero h1{font-size:clamp(2.4rem,1.05rem + 3.5vw,4.25rem);line-height:.9;letter-spacing:-.004em}
.hero h1 .line{display:block}
.lead{max-width:46ch;margin:18px 0 0;font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);line-height:1.5}
.hero .lead{max-width:50ch}

.field-grid{margin-top:clamp(22px,2.6vw,30px);border:1.5px solid var(--print);border-radius:9px;overflow:hidden}
.example{display:grid;grid-template-columns:auto minmax(0,1fr);border-bottom:1.5px solid var(--print)}
.example-tag{margin:0;padding:10px 5px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;background:var(--print);color:var(--stock);font:700 .75rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.example-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0}
.field{position:relative;min-width:0;padding:13px 20px 15px}
.field dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:6px 0 0}
.field .model{font-size:clamp(1.3rem,.95rem + 1vw,1.85rem);line-height:1.1}
.field .rev{font-size:1rem;color:var(--print-2)}
.field-to{border-left:1.5px solid var(--print);padding-left:30px}
.field-to::before{content:"";position:absolute;left:-15px;top:calc(50% - 14px);width:28px;height:28px;border:1.5px solid var(--print);border-radius:50%;background:var(--stock)}
.field-to::after{content:"";position:absolute;left:-8px;top:calc(50% - 5.5px);width:15px;height:11px;background:var(--print);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.field-runs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:12px 20px}
.platform-marks{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
.platform-marks li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.platform-marks a{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding:1px 10px 0;font:600 .9375rem/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--print)}
.platform-marks a::before{content:"";position:absolute;inset:8px 0;z-index:-1;border:1px solid var(--print);border-radius:3px;transition:background-color .15s}
.platform-marks a:hover::before{background:var(--stock-press)}

.label-foot{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:18px 28px;align-items:center;margin-top:clamp(22px,2.6vw,30px)}
.barcode{display:grid;gap:9px;padding:14px 16px 13px;border:1.5px solid var(--print);border-radius:9px;color:var(--print);text-decoration:none;transition:background-color .18s var(--ease-out)}
.barcode:hover{background:var(--band)}
.bars{display:block;width:100%;height:20px;fill:currentColor}
.barcode-line{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;font:700 clamp(1.25rem,1rem + .5vw,1.4375rem)/1 var(--cond);letter-spacing:.055em;text-transform:uppercase}
.barcode-line::after{content:"";flex:none;width:30px;height:20px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .2s var(--ease-out)}
.barcode:hover .barcode-line::after{transform:translateX(4px)}
.hero-note{margin:0;font-size:.96875rem;line-height:1.55;color:var(--print-2)}

.hero-shot{margin:24px 0 0;padding:10px 10px 0;border-radius:12px;background:linear-gradient(176deg,var(--stock-hi),var(--stock) 40%,var(--stock-lo));color:var(--print);box-shadow:var(--lift)}
.hero-shot img{border-radius:5px;background:#0d0e0f}
.hero-shot figcaption,.step-shot figcaption{padding:10px 4px 12px;font-size:.875rem;line-height:1.4;color:var(--print-2)}

/* The example data prints in once, row by row, like a thermal head darkening
   the stock. The values stay in place and faintly legible before the pass; with
   reduced motion, or without the animation, they are simply printed. */
.print-in{position:relative}
@media (prefers-reduced-motion:no-preference){
  .print-in::after{content:"";position:absolute;inset:-4px -6px;background:var(--stock);opacity:.8;pointer-events:none;animation:thermal .6s steps(8,jump-end) .45s both}
  .field-to .print-in::after{animation-delay:.95s}
}
@keyframes thermal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}

/* Sheets: further labels down the cover. */
.sheet{padding:clamp(28px,4vw,52px) var(--pad) clamp(30px,4vw,52px)}
.sheet h2{font-size:clamp(2rem,1.25rem + 2.3vw,3.25rem);margin-bottom:clamp(18px,2vw,26px)}
.sheet p{max-width:var(--measure)}
.field-list{margin:0;border-top:2px solid var(--print)}
.field-list>div{display:grid;grid-template-columns:minmax(10rem,17rem) minmax(0,1fr);gap:4px 40px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.field-list dt{font:700 1.25rem/1.15 var(--cond);letter-spacing:.035em;text-transform:uppercase}
.field-list dd{max-width:var(--measure);margin:0}

.steps{margin:0;padding:0;list-style:none;counter-reset:step;border-top:2px solid var(--print)}
.steps>li{counter-increment:step;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:24px;align-content:start;padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.steps>li::before{content:counter(step);grid-row:1/span 3;font:700 2.75rem/.82 var(--cond)}
.steps>li>h3,.steps>li>p{grid-column:2}
.steps h3{margin:0 0 6px;font-size:1.375rem;line-height:1.1;letter-spacing:.025em}
.steps p{max-width:var(--measure);margin:0}
.steps>li:has(.step-shot){grid-template-columns:3.25rem minmax(0,1fr) minmax(0,26rem)}
.step-shot{grid-column:3;grid-row:1/span 3;margin:0}
.step-shot img,.tour-step figure a{border:1.5px solid var(--print);border-radius:8px;overflow:hidden;background:#0d0e0f}
.more{margin:26px 0 0;font-weight:600}
/* Home: four steps in the site's words, each over the app screen it shows. */
.app-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;margin:0;padding:0;list-style:none;counter-reset:step;border-top:2px solid var(--print);border-bottom:2px solid var(--print)}
.app-steps>li{counter-increment:step;display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;gap:10px;padding:20px 18px 24px;border-left:1px solid var(--rule)}
.app-steps>li:first-child{padding-left:0;border-left:0}
.app-steps>li:last-child{padding-right:0}
.app-steps>li::before{content:counter(step);font:700 2.75rem/.82 var(--cond)}
.app-steps h3{margin:0;font:700 1.375rem/1.05 var(--cond);letter-spacing:.035em;text-transform:uppercase}
.app-steps p{margin:0;font-size:.9375rem;line-height:1.45;color:var(--print-2)}
.app-shot{margin:8px 0 0}
.app-shot img{display:block;width:100%;height:auto;border:1.5px solid var(--print);border-radius:8px;background:#0d0e0f}
@media (max-width:1080px){
  .app-steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto auto 1fr auto)}
  .app-steps>li:nth-child(odd){padding-left:0;border-left:0}
  .app-steps>li:nth-child(even){padding-right:0}
  .app-steps>li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:620px){
  /* One screen on a phone: Confirm, the moment people want to see before they download. */
  .app-steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .app-steps>li,.app-steps>li:nth-child(n){grid-row:auto;grid-template-rows:none;grid-template-columns:2.75rem minmax(0,1fr);column-gap:16px;row-gap:6px;padding:18px 0 20px;border-left:0;border-top:1px solid var(--rule)}
  .app-steps>li:first-child{border-top:0}
  .app-steps>li::before{grid-row:1/span 2}
  .app-steps>li>h3,.app-steps>li>p,.app-steps>li>.app-shot{grid-column:2}
  .app-shot{display:none}
  .app-shot.key{display:block}
}

/* The laser-caution panel: the only red print, beside the decision it protects. */
.caution{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;align-items:start;max-width:54rem;margin-top:28px;padding:18px 22px 20px;border:2px solid var(--caution);border-radius:10px;outline:1px solid var(--caution);outline-offset:-6px}
.caution-mark{margin:0;padding:6px 10px 5px;border-radius:3px;background:var(--caution);color:var(--stock);font:700 .875rem/1 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.caution .precaution{margin:0;max-width:var(--measure)}
.caution a{color:var(--caution);font-weight:600}

/* Supported drives and the price, side by side near the decision. */
.drives-intro{margin:0}
.families{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:24px;border-top:2px solid var(--print);border-bottom:1px solid var(--rule)}
.family{padding:20px 24px 22px 0}
.family+.family{padding:20px 0 22px 24px;border-left:1px solid var(--rule)}
.family h3{margin:0 0 10px;font-size:2.25rem}
.family p{margin:0 0 10px}
.family-offer,p.catalogue-count,.proof{font-weight:600}
.family-link{margin:16px 0 0!important;font-weight:600}
.not-listed{margin:20px 0 0}
.buy-action{margin:26px 0 0}
.buy-unavailable{display:block;margin-top:10px;color:var(--print-2);font-size:.9375rem}
.launch-line{margin:10px 0 0;color:var(--print-2);font-size:.9375rem}
.availability{margin:10px 0 0;font:600 .875rem/1.3 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--print-2)}
.assure{margin:18px 0 0}
.purchase-note{margin:12px 0 0;font-size:.9375rem;color:var(--print-2)}

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 22px 12px;border:1.5px solid var(--print);border-radius:8px;background:var(--print);color:var(--stock);font:700 1.0625rem/1.05 var(--cond);letter-spacing:.075em;text-transform:uppercase;text-align:center;text-decoration:none;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s}
.button:hover{background:var(--print-hover)}
.button[aria-disabled="true"]{border-style:dashed;border-color:var(--print-2);background:transparent;color:var(--print-2);cursor:not-allowed}
.button:disabled{opacity:.6;cursor:progress}

/* OpenRipper: a quieter label, grey band, no maker's lime. */
.also{max-width:44rem;margin-left:auto;padding:0 var(--pad) 28px;overflow:hidden}
.also::before{content:"";display:block;height:10px;margin:0 calc(var(--pad) * -1) 26px;background:var(--mark);border-bottom:1.5px solid var(--print)}
.also h2{margin-bottom:12px;font-size:clamp(1.5rem,1.1rem + 1.1vw,2.125rem)}
.also p{margin:0}
.also-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:14px!important;font-weight:600}
.also-links a{display:inline-flex;align-items:center;min-height:44px}

/* Inner pages: a page label with the maker's band, then ruled sheets. */
.page-head{overflow:hidden;padding:0 var(--pad) clamp(28px,3.6vw,46px)}
.page-head::before{content:"";display:block;height:14px;margin:0 calc(var(--pad) * -1) clamp(28px,3.4vw,44px);background:var(--band);border-bottom:2px solid var(--print)}
.page-head h1{max-width:20ch;font-size:clamp(2.25rem,1.2rem + 3.3vw,4.25rem);line-height:.92}
.page-head .lead{max-width:56ch}
.hero-action{margin:26px 0 0}
/* Family pages carry the same barcode action as the home label. */
.page-head:has(.barcode){display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,27rem);column-gap:clamp(28px,4vw,64px);align-items:end}
.page-head:has(.barcode)::before{grid-column:1/-1}
.page-head:has(.barcode)>:not(.hero-action){grid-column:1}
.page-head .hero-action:has(.barcode){grid-column:2;grid-row:2/span 2;margin:0}
.page-head .barcode-line{white-space:normal;line-height:1.05}
.page-openripper .page-head::before{background:var(--mark)}
.page-openripper main{width:min(66rem,100% - 2*var(--gutter))}
.provisional{display:inline-block;margin:0 0 0 8px;padding:3px 6px 2px;border:1px dashed currentColor;border-radius:3px;font:600 .75rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;vertical-align:.15em;color:var(--print-2)}

.stack{padding-block:clamp(12px,2vw,24px)}
.stack>section{display:grid;grid-template-columns:minmax(11rem,17rem) minmax(0,1fr);gap:0 44px;padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--rule)}
.stack>section:first-child{border-top:0}
.stack>section>*{grid-column:2;margin:0 0 12px}
.stack>section>:last-child{margin-bottom:0}
.stack>section>h2{grid-column:1;grid-row:1/span 9;margin:0;font-size:clamp(1.5rem,1.15rem + 1vw,2rem);line-height:1}
.stack ul,.stack ol{padding-left:1.25em}
.stack li{margin:0 0 6px;max-width:var(--measure)}
.stack li::marker,.reading li::marker{font-family:var(--cond);font-weight:700}
.stack .caution{margin-top:16px}
.stack .steps{padding-left:0}
.stack .steps>li{max-width:none;margin:0}

/* Download: one label per platform; an empty die-cut outline where none is published. */
.downloads{display:grid;gap:16px}
.download{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr) auto;align-items:center;gap:18px 32px;padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,36px)}
.download h2{font-size:clamp(1.875rem,1.2rem + 1.5vw,2.625rem)}
.download-head .provisional{margin:10px 0 0}
.download.is-unavailable .provisional{color:var(--etch)}
.download-suggested{display:inline-block;margin:10px 0 0;padding:5px 8px 4px;border-radius:3px;background:var(--band);color:var(--on-band);font:700 .8125rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.download-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));margin:0;border:1.5px solid var(--print);border-radius:9px;overflow:hidden}
.download-facts>div{margin:-1px 0 0 -1px;padding:10px 14px 12px;border-top:1px solid var(--print);border-left:1px solid var(--print)}
.download-facts dd{margin:4px 0 0;font-size:.96875rem;line-height:1.4}
.download-action{margin:0}
.download.is-unavailable{grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);border:2px dashed var(--cover-rule);border-radius:var(--die);color:var(--etch)}
.download-status{margin:0;color:var(--mark)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.notes>section{padding:0 28px;border-left:1px solid var(--rule)}
.notes>section:first-child{padding-left:0;border-left:0}
.notes>section:last-child{padding-right:0}
.notes h2{margin-bottom:14px;font-size:clamp(1.375rem,1.1rem + .6vw,1.75rem);line-height:1}
.notes ul{margin:0;padding-left:1.15em}
.notes li{margin-bottom:8px}
.notes p{margin:0 0 12px}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.copy-status{font-size:.9375rem;color:var(--print-2)}

/* Pioneer: the search box is the label's MODEL field. */
.drive-search{position:sticky;top:12px;z-index:2;margin:24px 0 0;padding:12px 18px 12px;border:1.5px solid var(--print);border-radius:9px;background:var(--stock)}
.drive-search:has(input[hidden]){display:none}
.drive-search:focus-within{outline:3px solid var(--print);outline-offset:3px}
#drive-filter{display:block;width:100%;min-height:44px;margin-top:6px;padding:4px 0 6px;border:0;border-bottom:2px solid var(--print);border-radius:0;background:transparent;color:var(--print);font:400 clamp(1.3rem,1rem + 1vw,1.85rem)/1.2 var(--mono);font-stretch:87.5%;caret-color:var(--print);-webkit-appearance:none;appearance:none}
#drive-filter:focus-visible{outline:none}
#drive-filter::placeholder{color:var(--print-2);opacity:1}
.drive-list h2{margin-bottom:14px}
.conversions{margin:22px 0 0;padding:0;list-style:none;border-top:2px solid var(--print)}
.conversions>li{border-bottom:1px solid var(--rule)}
.conversions>.list-section{padding:24px 0 12px;border-bottom:1.5px solid var(--print)}
.section-title{display:inline-block;margin:0;padding:6px 9px 5px;border-radius:3px;background:var(--print);color:var(--stock);font:700 .875rem/1 var(--cond);letter-spacing:.13em;text-transform:uppercase}
.section-note{margin:8px 0 0;font-size:.9375rem;color:var(--print-2)}
.conv-empty{padding:18px 0;color:var(--print-2)}
.group-head{display:grid;grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr) 1.25rem;align-items:center;gap:4px 16px;width:100%;min-height:56px;padding:10px 0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left}
button.group-head{cursor:pointer;transition:background-color .15s}
button.group-head:hover{background:var(--stock-press)}
button.group-head:focus-visible{outline-offset:2px}
.group-head>span:not([class]){font:600 .75rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--print-2);text-align:center}
.group-side{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.group-model,.group-target{display:inline-flex;align-items:center;gap:8px;font:400 1.0625rem/1.25 var(--mono);font-stretch:87.5%}
.group-rev,.rev-from,.rev-to{font:400 .875rem/1.4 var(--mono);font-stretch:87.5%;color:var(--print-2)}
.group-brand{font:600 .75rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--print-2)}
.kind-tag,.rev-pending{padding:3px 5px 2px;border:1px solid var(--print-2);border-radius:3px;font:600 .75rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--print-2)}
.conv-arrow{width:3.5rem;height:1.4rem;fill:none;stroke:var(--print);stroke-width:1.6}
.group-chevron{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s var(--ease-out)}
.drive-group.open .group-chevron{transform:rotate(180deg)}
.group-check,.rev-check{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--print);color:var(--stock)}
.group-check svg,.rev-check svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2.4}
.group-body{margin:0 0 12px;padding:0;list-style:none}
.rev-line{display:grid;grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr) 1.25rem;align-items:center;gap:4px 16px;padding:8px 0;border-top:1px dotted var(--rule)}
.rev-from{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rev-arrow{width:2.75rem}

/* Read pages: one long label sheet at a comfortable measure. */
.help-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:clamp(24px,3vw,40px);align-items:start}
.help-layout>.reading{grid-column:1;grid-row:1}
.help-layout>.faq-toc{grid-column:2;grid-row:1;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:24px 24px 18px}
.reading{max-width:58rem}
.reading h2{margin-bottom:16px;font-size:clamp(1.75rem,1.2rem + 1.5vw,2.5rem)}
.reading p,.reading li,.reading dd{max-width:var(--measure)}
.reading ol{padding-left:1.3em}
.reading li{margin-bottom:6px}
.faq-toc h2{margin:0 0 12px;font-size:1.5rem}
.faq-toc ul{margin:0;padding:0;list-style:none;border-top:2px solid var(--print)}
.faq-toc li{break-inside:avoid;margin:0;border-top:1px solid var(--rule)}
.faq-toc li:first-child{border-top:0}
.faq-toc a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:.96875rem;line-height:1.35;font-weight:600;text-decoration:none}
.faq-toc a:hover{text-decoration:underline}
.faq{margin:44px 0 0}
.reading>section+.faq>dt:first-child{margin-top:0}
.faq dt{margin-top:30px;padding-top:28px;border-top:2px solid var(--print);font:600 1.3125rem/1.3 var(--sans);text-wrap:balance;scroll-margin-top:16px}
.faq dt:first-child{margin-top:0}
.faq dt:target{text-decoration:underline;text-decoration-color:var(--band);text-decoration-thickness:.35em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
.faq dd{margin:10px 0 0}
.faq dd p{margin:0}
.beta-form{max-width:38rem;margin-top:18px}
.beta-form div{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.beta-form input{flex:1 1 15rem;min-height:48px;padding:10px 14px;border:1.5px solid var(--print);border-radius:8px;background:var(--stock-hi);color:var(--print);font:inherit;caret-color:var(--print)}
.beta-form input::placeholder{color:var(--print-2);opacity:1}
.beta-form .button{background:transparent;color:var(--print)}
.beta-form .button:hover{background:var(--stock-press)}
#beta-status{margin:12px 0 0;font-weight:600}

/* See the app: one ruled sheet, a screen per step. */
.tour-steps{margin:0;padding:8px var(--pad);list-style:none;counter-reset:tour}
.tour-step{counter-increment:tour;display:grid;grid-template-columns:3.25rem minmax(0,1fr) minmax(0,1.45fr);gap:16px 32px;align-items:start;padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--rule)}
.tour-step:first-child{border-top:0}
.tour-step::before{content:counter(tour);font:700 2.75rem/.82 var(--cond)}
.tour-copy h2{margin-bottom:10px;font-size:clamp(1.5rem,1.15rem + 1vw,2rem);line-height:1}
.tour-copy p{max-width:52ch;margin:0}
.tour-step figure{margin:0}
.tour-step figure a{display:block}
.tour-cta h2{margin-bottom:12px}
.tour-cta p:last-child{margin:22px 0 0}

/* What's new: current releases ruled down one label; the folded test-release
   history is a second, collapsible label below it. */
.page-changelog .log-day{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);gap:8px 40px;margin:0;padding:26px var(--pad);background:var(--stock);color:var(--print);border-top:1px solid var(--rule)}
.page-changelog main>.page-head+.log-day{margin-top:clamp(24px,2.8vw,36px);border-top:0;border-radius:var(--die) var(--die) 0 0;padding-top:clamp(28px,3.4vw,44px)}
.page-changelog main>.log-day+.log-day{margin-top:0}
.page-changelog main>.log-day:last-of-type{border-radius:0 0 var(--die) var(--die);padding-bottom:clamp(28px,3.4vw,44px);box-shadow:var(--lift)}
.page-changelog main>.page-head+.log-day:last-of-type{border-radius:var(--die)}
.log-empty{margin-bottom:0;padding:22px var(--pad);border-radius:var(--die);background:var(--stock);color:var(--print-2);box-shadow:var(--lift)}
.page-changelog main>.log-archive{margin-top:clamp(24px,2.8vw,36px)}
.log-archive{border-radius:var(--die);background:var(--stock);color:var(--print);box-shadow:var(--lift);overflow:hidden;--focus:var(--print)}
.log-archive>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:18px var(--pad);font:700 1.25rem/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase;list-style:none;cursor:pointer;transition:background-color .15s}
.log-archive>summary::-webkit-details-marker{display:none}
.log-archive>summary::after{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;transition:transform .2s var(--ease-out)}
.log-archive[open]>summary::after{transform:rotate(180deg)}
.log-archive>summary:hover{background:var(--stock-press)}
.log-archive>summary:focus-visible{outline-offset:-5px}
.log-archive[open]>summary{border-bottom:2px solid var(--print)}
.log-archive .log-day{background:transparent}
.log-archive .log-day:first-of-type{border-top:0}
.log-day h2{font-size:1.25rem;line-height:1.15;letter-spacing:.05em}
.log-day ul{margin:0;padding:0;list-style:none}
.log-day li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:0 0 14px}
.log-day li+li{padding-top:14px;border-top:1px dotted var(--rule)}
.log-day p{max-width:var(--measure);margin:0}
.log-version{font:400 .8125rem/1.4 var(--mono);font-stretch:87.5%;color:var(--print-2);white-space:nowrap}

/* Terms: the legal text printed on one sheet, unchanged. */
.page-terms main{width:min(60rem,100% - 2*var(--gutter));margin:clamp(24px,3.2vw,40px) auto clamp(80px,9vw,136px);padding:0 var(--pad) clamp(28px,4vw,56px);overflow:hidden;background:var(--stock);color:var(--print);border-radius:var(--die);box-shadow:var(--lift);--focus:var(--print)}
.page-terms main::before{content:"";display:block;height:14px;margin:0 calc(var(--pad) * -1) clamp(28px,3.4vw,44px);background:var(--band);border-bottom:2px solid var(--print)}
.page-terms main>*+*{margin-top:0}
.page-terms .fine{margin-top:16px}
.page-terms .risk-notice{margin-top:28px}
.page-terms h1{font-size:clamp(2.25rem,1.2rem + 3.3vw,3.75rem)}
.page-terms h2{margin:36px 0 10px;font-size:1.5rem;line-height:1.05}
.page-terms p{max-width:var(--measure)}
.fine{margin:10px 0 0;font:600 .875rem/1.3 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--print-2)}
.risk-notice{margin-top:28px;padding:16px 20px;border:1.5px solid var(--print);border-radius:9px}
.risk-notice strong{font:700 1rem/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.risk-notice p{margin:8px 0 0}

/* Footer: printed straight onto the cover in compliance grey. */
.site-footer{width:min(var(--wide),100% - 2*var(--gutter));margin:0 auto;padding:0 0 36px;color:var(--mark);font-size:.9375rem}
.footer-plate{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 48px;align-items:baseline;padding-top:26px;border-top:1px solid var(--cover-rule)}
.site-footer .wordmark{padding:0;font-size:1.5rem;color:var(--etch)}
.site-footer .wordmark span{color:var(--mark)}
.footer-note{max-width:48ch;margin:0;justify-self:end;text-align:right}
.site-footer nav{grid-column:1/-1}
.site-footer ul{display:flex;flex-wrap:wrap;gap:0 6px;margin:0 0 0 -10px;padding:0;list-style:none}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--etch);text-decoration:none}
.site-footer a:hover{color:var(--cover-accent);text-decoration:underline}
.site-footer a[aria-current="page"]{text-decoration:underline}

/* Home below the fold: the label's field vocabulary, panels sized to their content. */
.families{margin-top:22px;border:1.5px solid var(--print);border-radius:9px;overflow:hidden}
.family,.family+.family{padding:18px 22px 20px}
.family+.family{border-left:1px solid var(--print)}
.family h3{margin-bottom:10px;font-size:1.75rem}
dl.catalogue-count{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));margin:14px 0 4px;border:1px solid var(--print);border-radius:6px;overflow:hidden}
dl.catalogue-count>div{margin:-1px 0 0 -1px;padding:9px 12px 10px;border-top:1px solid var(--print);border-left:1px solid var(--print)}
dl.catalogue-count dd{margin:5px 0 0;font-size:1.75rem;line-height:1.1}
.price-list{margin:0;border:1.5px solid var(--print);border-radius:9px;overflow:hidden}
.price-list>div{display:grid;grid-template-columns:5.75rem minmax(0,1fr)}
.price-list>div+div{border-top:1px solid var(--print)}
.price-list dt{padding:15px 12px 14px;border-right:1px solid var(--print)}
.price-list dd{margin:0;padding:12px 16px 14px}
.field-value{display:block;margin-bottom:4px;font:700 1.1875rem/1.2 var(--cond);letter-spacing:.03em;text-transform:uppercase}
/* The price label keeps its chamfered corner. */
.pricing{clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.also{border-radius:6px}
@media (max-width:1080px){
  .help-layout{grid-template-columns:minmax(0,1fr)}
  .help-layout>.faq-toc{grid-column:1;grid-row:auto;position:static;max-height:none}
  .help-layout>.reading{grid-row:auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-shot{width:min(100%,600px);margin:0 0 0 auto}
  .page-head:has(.barcode){grid-template-columns:minmax(0,1fr)}
  .page-head .hero-action:has(.barcode){grid-column:1;grid-row:auto;max-width:26rem;margin-top:26px}
  .steps>li:has(.step-shot){grid-template-columns:3.25rem minmax(0,1fr)}
  .step-shot{grid-column:2;grid-row:auto;max-width:34rem;margin-top:16px}
  .download{grid-template-columns:minmax(0,1fr)}
  .download.is-unavailable{grid-template-columns:minmax(0,1fr)}
  .tour-step{grid-template-columns:3.25rem minmax(0,1fr)}
  .tour-step figure{grid-column:2}
}
@media (max-width:820px){
  .wordmark{padding:0 14px;font-size:1.25rem}
  .site-header nav a{min-height:48px;padding:0 12px;font-size:.875rem;letter-spacing:.06em}
  .site-header .nav-download{padding:0 16px}
  /* Keep every destination visible without a hidden horizontal scroll area. */
  .site-header,.site-header.no-brand{width:calc(100% - 2*var(--gutter));max-width:none;flex-wrap:wrap}
  .site-header .wordmark{min-height:44px;width:100%;border-bottom:1px solid var(--rule)}
  .site-header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-left:0}
  .site-header .nav-links{display:contents}
  .site-header li{min-width:0}
  .site-header li+li{border-left:0}
  .site-header li:nth-child(even){border-left:1px solid var(--rule)}
  .site-header li:nth-child(n+3){border-top:1px solid var(--rule)}
  .site-header li a{width:100%;padding:0 8px;letter-spacing:.02em}
  .site-header .nav-download{padding:0 12px;border-top:1px solid var(--rule)}
  .site-header nav a[aria-current="page"]::after{left:12px;right:12px;bottom:8px}
  .notes{grid-template-columns:minmax(0,1fr)}
  .notes>section{padding:22px 0 0;margin-top:22px;border-left:0;border-top:1px solid var(--rule)}
  .notes>section:first-child{padding-top:0;margin-top:0;border-top:0}
  .stack>section{grid-template-columns:minmax(0,1fr)}
  .stack>section>*,.stack>section>h2{grid-column:1;grid-row:auto}
  .stack>section>h2{margin-bottom:6px}
  .field-list>div{grid-template-columns:minmax(0,1fr)}
  .page-changelog .log-day{grid-template-columns:minmax(0,1fr)}
  .footer-plate{grid-template-columns:minmax(0,1fr)}
  .footer-note{justify-self:start;text-align:left}
}
@media (max-width:620px){
  :root{--die:12px}
  .label-band{min-height:52px}
  .band-mark{font-size:1.625rem}
  .label-foot{grid-template-columns:minmax(0,1fr)}
  .hero .label-body{padding-top:20px}
  .hero .lead{margin-top:14px}
  .hero .field-grid{margin-top:16px}
  .hero .label-foot{margin-top:16px;gap:12px}
  .hero .barcode{padding:12px 14px}
  .hero .hero-note{font-size:.9375rem}
  .field{padding:11px 12px 13px}
  .field-to{padding-left:22px}
  .field-runs{padding:10px 12px}
  .families{grid-template-columns:minmax(0,1fr)}
  .family,.family+.family{padding:18px 0;border-left:0}
  .family+.family{border-top:1px solid var(--rule)}
  .steps>li,.steps>li:has(.step-shot){grid-template-columns:2.25rem minmax(0,1fr);column-gap:14px}
  .steps>li::before{font-size:2.125rem}
  .caution{grid-template-columns:minmax(0,1fr);padding:16px 16px 18px}
  .caution-mark{justify-self:start}
  .group-head,.rev-line{grid-template-columns:minmax(0,1fr) 2.25rem minmax(0,1fr) 1rem;gap:4px 10px}
  .conv-arrow{width:2.25rem}
  .group-model,.group-target{font-size:.9375rem}
  .group-rev,.rev-from,.rev-to{font-size:.8125rem}
  .tour-step{grid-template-columns:minmax(0,1fr)}
  .tour-step::before{font-size:2.125rem}
  .tour-step figure{grid-column:1}
  .log-day li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .how .steps{grid-template-columns:minmax(0,1fr)}
  .how .steps>li:nth-child(-n+3){padding-right:0}
  .how .steps>li:nth-child(2),.how .steps>li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:620px){
  .family,.family+.family{padding:16px 16px 18px}
  .family+.family{border-left:0;border-top:1px solid var(--print)}
  .price-list>div{grid-template-columns:minmax(0,1fr)}
  .price-list dt{padding:12px 14px 0;border-right:0}
  .price-list dd{padding:6px 14px 14px}
  .pricing{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
}

/* ---- The Preview Card ---------------------------------------------------- */
.nw{white-space:nowrap}
.label,.download.is-available{border-radius:12px}
.pricing{clip-path:none}
.site-header .nav-download{background:var(--card);color:var(--card-ink)}
.site-header .nav-download:hover{background:var(--card-deep)}
.site-header .nav-download:focus-visible{outline-color:var(--band);outline-offset:-5px}
.site-header .nav-download[aria-current="page"]::after{background:var(--band)}
.site-header nav a[aria-current="page"]::after{background:var(--card)}
/* The opening card: green field, white frame, white caps. */
.hero.card{display:block}
.card{position:relative;padding:clamp(10px,1.2vw,16px);border-radius:20px;background:var(--card);color:var(--card-ink);box-shadow:var(--lift);--focus:var(--card-ink)}
.card-frame{display:grid;gap:clamp(18px,2.2vw,30px);align-content:space-between;min-height:min(80vh,800px);padding:clamp(22px,3vw,44px) clamp(20px,4vw,64px) clamp(22px,2.8vw,40px);border:2px solid var(--card-rule);border-radius:12px}
.card-mark{margin:0}
.card-mark a{font:700 1.5rem/1 var(--cond);letter-spacing:.01em;color:var(--card-ink);text-decoration:none}
.card-mark a span{opacity:.86}
.card-mark a:hover{text-decoration:underline;text-decoration-thickness:2px}
.hero.card h1{max-width:15ch;font-size:clamp(2.6rem,1.1rem + 4.7vw,5.75rem);line-height:.9;letter-spacing:-.004em}
.hero.card .lead{max-width:54ch;margin-top:20px}
.card a{color:var(--card-ink)}
/* The card's box: one enormous word, the example check pinned beside it. */
.rating{display:grid;grid-template-columns:auto minmax(0,1fr);max-width:62rem;border:2px solid var(--card-rule);border-radius:8px;overflow:hidden}
.rating-mark{display:flex;align-items:center;justify-content:center;margin:0;padding:clamp(12px,1.4vw,20px) clamp(20px,2.6vw,40px);border-right:2px solid var(--card-rule);font:700 clamp(3.75rem,2rem + 5.6vw,8.25rem)/.78 var(--cond);letter-spacing:-.012em}
.rating-body{padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,28px)}
.rating-title{margin:0 0 12px;font:700 .875rem/1 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.rating-fields{display:grid;grid-template-columns:repeat(4,max-content);gap:12px 0;margin:0}
.rating-fields>div{padding:0 clamp(16px,2vw,28px);border-left:1px solid var(--card-rule)}
.rating-fields>div:first-child{padding-left:0;border-left:0}
.rating-fields dt{font:700 .8125rem/1 var(--cond);letter-spacing:.13em;text-transform:uppercase}
.rating-fields dd{margin:8px 0 0;font-size:1.125rem;line-height:1.25}
.rating-fields dd.data{font-size:1.0625rem}
/* The example check walks through a few supported drives; storefront.js adds them and Pause. */
.rating-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.rating-head .rating-title{margin:0}
.example-toggle{min-height:32px;margin:-8px 0;padding:0 12px;border:1px solid var(--card-rule);border-radius:4px;background:none;color:var(--card-ink);font:700 .75rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .15s}
.example-toggle:hover{background:var(--card-deep)}
/* A 44px tap target around the 32px control. */
.example-toggle{position:relative}
.example-toggle::before{content:"";position:absolute;inset:-7px -2px}
.rating-fields dd.cycling{display:grid}
/* Row by row, like a check filling in: the old value fades, then the new one rises into place. */
.example-value{grid-area:1/1;opacity:0;transform:translateY(.45em);visibility:hidden;transition:opacity .16s linear var(--row-delay,0s),transform 0s linear calc(var(--row-delay,0s) + .16s),visibility 0s linear calc(var(--row-delay,0s) + .16s)}
.example-value.is-current{opacity:1;transform:none;visibility:visible;transition:opacity .38s var(--ease-out) calc(var(--row-delay,0s) + .16s),transform .38s var(--ease-out) calc(var(--row-delay,0s) + .16s),visibility 0s linear}
.rating-fields>div:nth-child(2) .example-value{--row-delay:.07s}
.rating-fields>div:nth-child(3) .example-value{--row-delay:.14s}
.card-foot{display:grid;gap:14px}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:0}
.button.go{min-height:56px;padding:16px 28px 15px;border-color:var(--band);background:var(--band);color:var(--on-band);font-size:1.25rem}
.button.go:hover{background:var(--band-hi)}
.card .button.go:focus-visible{outline-color:var(--card-ink)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap}
.card-offer{margin:0;font-weight:600}
.card .provisional{color:var(--card-ink)}
.card-runs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:14px;border-top:1px solid rgb(255 255 255 / .5)}
.card .rubric{color:var(--card-ink)}
.card .platform-marks a{color:var(--card-ink)}
.card .platform-marks a::before{border-color:var(--card-rule)}
.card .platform-marks a:hover::before{background:var(--card-deep)}
/* The card is projected once: a brief brightening as the lamp comes up. */
@media (prefers-reduced-motion:no-preference){
  .hero.card{animation:lamp .7s var(--ease-out) both}
}
@keyframes lamp{from{filter:brightness(.55) saturate(.7);opacity:.6}to{filter:none;opacity:1}}
/* Inner pages: a shorter title card, its frame drawn inside the edge. */
.page-head{padding:clamp(34px,4vw,58px) clamp(30px,4.6vw,74px) clamp(32px,3.8vw,54px);border-radius:20px;background:var(--card);color:var(--card-ink);outline:2px solid var(--card-rule);outline-offset:-14px;--focus:var(--card-ink)}
.page-head::before{display:none}
.page-head:has(.barcode)::before,.page-head:has(.go)::before{display:none}
.page-head a{color:var(--card-ink)}
.page-head .lead{color:var(--card-ink)}
.page-head:has(.go){display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);column-gap:clamp(28px,4vw,64px);align-items:end}
.page-head:has(.go)>*{grid-column:1}
.page-head:has(.go) .hero-action,.page-head:has(.go) .hero-note,.page-head:has(.go) .hero-offer{grid-column:2}
.page-head:has(.go) .hero-action{grid-row:1/span 2;align-self:end;margin:0}
.page-head .hero-note{margin:8px 0 0}
.page-head .hero-offer{margin:8px 0 0;font-weight:600}
.page-head .provisional{color:var(--card-ink)}
/* Below the card, every section hangs from the card's rule. */
.sheet>h2::before,.guides>h2::before{content:"";display:block;width:64px;height:6px;margin-bottom:18px;border-radius:1px;background:var(--card)}
.drives-key{max-width:var(--measure);margin:18px 0 0;font-size:.9375rem;color:var(--print-2)}
.guide-list,.guides ul{margin:0;padding:0;list-style:none;border-top:2px solid var(--print)}
.guide-list li,.guides li{border-bottom:1px solid var(--rule)}
.guide-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font:600 1.1875rem/1.3 var(--sans);letter-spacing:0;text-decoration:none}
.guide-list a::after{content:"";flex:none;width:24px;height:16px;background:var(--card);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .2s var(--ease-out)}
.guide-list a:hover::after{transform:translateX(4px)}
.questions>p{margin:20px 0 0}
.guides{padding:clamp(24px,3vw,40px) var(--pad)}
.guides h2{margin-bottom:16px;font-size:clamp(1.75rem,1.2rem + 1.5vw,2.5rem)}
.guides li{padding:14px 0;max-width:none}
.guides li a{margin-right:10px;font:700 1.1875rem/1.2 var(--cond);letter-spacing:.035em;text-transform:uppercase}
.guide-links{display:flex;flex-wrap:wrap;gap:4px 26px;font-weight:600}
.guide-links a{display:inline-flex;align-items:center;min-height:44px}
.page-guide main{width:min(66rem,100% - 2*var(--gutter))}
.reading>.faq:first-child{margin-top:0}
.reading>.faq:first-child>dt:first-child{padding-top:0;border-top:0}
/* Appearance: three positions on the house-lights panel. */
.site-footer .appearance{grid-column:1/-1}
.appearance{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:6px 0 0;padding:0;border:0;min-inline-size:0}
.appearance legend{float:left;margin-right:14px;padding:0;font:600 .8125rem/40px var(--cond);letter-spacing:.11em;text-transform:uppercase;color:var(--mark)}
.appearance label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--cover-rule);color:var(--etch);font:600 .875rem/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background-color .15s}
.appearance label+label{border-left:0}
.appearance label:first-of-type{border-radius:6px 0 0 6px}
.appearance label:last-of-type{border-radius:0 6px 6px 0}
.appearance label:hover{background:var(--cover-deep)}
.appearance input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.appearance label:has(input:checked){background:var(--card);border-color:var(--card);color:var(--card-ink)}
.appearance label:has(input:focus-visible){outline:3px solid var(--cover-focus);outline-offset:2px;z-index:1}
@media (max-width:1080px){
  .page-head:has(.go){grid-template-columns:minmax(0,1fr)}
  .page-head:has(.go) .hero-action,.page-head:has(.go) .hero-note,.page-head:has(.go) .hero-offer{grid-column:1;grid-row:auto}
  .page-head:has(.go) .hero-action{margin-top:24px}
  .rating-fields{grid-template-columns:repeat(2,max-content)}
  .rating-fields>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:620px){
  .card{border-radius:16px}
  .card-frame{min-height:0;padding:20px 18px 22px}
  .rating{grid-template-columns:minmax(0,1fr)}
  .rating-mark{justify-content:flex-start;border-right:0;border-bottom:2px solid var(--card-rule)}
  .rating-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rating-fields>div{padding:0 0 0 14px}
  .rating-fields>div:nth-child(odd){padding-left:0;border-left:0}
  .button.go{width:100%}
  .page-head{outline-offset:-10px;padding:30px 24px 28px}
}

/* ---- Finish review, round 1 ---------------------------------------------- */
body{overflow-x:clip}
/* The card is projected: square, edge to edge, no shadow. */
.hero.card{--edge:clamp(8px,1.2vw,20px);margin-inline:calc(50% - 50vw + var(--edge));border-radius:0;box-shadow:none}
.card-frame{border-radius:0;padding-inline:clamp(20px,5vw,96px)}
.hero.card h1{max-width:20ch;font-size:clamp(2.4rem,1rem + 3.4vw,4.5rem)}
.page-head{border-radius:0;box-shadow:none}
/* The box is the largest thing on the card. */
.rating{max-width:none}
.rating-mark{padding:clamp(14px,1.6vw,24px) clamp(22px,3vw,48px);font-size:clamp(5rem,1.5rem + 10.5vw,13rem)}
.rating-body{display:flex;flex-direction:column;justify-content:center}
.rating-fields{grid-template-columns:repeat(2,max-content);gap:18px 0}
.rating-fields>div{padding:0 clamp(18px,2.4vw,36px)}
.rating-fields>div:nth-child(odd){padding-left:0;border-left:0}
.rating-fields>div:nth-child(even){border-left:1px solid var(--card-rule)}
.rating-fields dd{font-size:clamp(1.125rem,.9rem + .5vw,1.375rem)}
.rating-fields dd.data{font-size:clamp(1.0625rem,.85rem + .45vw,1.3125rem)}
/* Platforms sit on the card's last line as plain set text. */
.card-runs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.card-runs .platform-marks a::before{border:0}
.card-runs .platform-marks a,.card-runs .platform-marks .mark{min-height:44px;padding:0;letter-spacing:.12em;text-decoration:underline;text-underline-offset:.3em}
.card-runs .platform-marks .mark{text-decoration:none}
/* Sections hang from the card's 2px rule: no panels, so nothing nests. */
.label{background:none;box-shadow:none;border-radius:0}
.sheet{padding-inline:0;padding-top:clamp(28px,3.4vw,44px);border-top:2px solid var(--card)}
.sheet>h2::before,.guides>h2::before{content:none}
.drive-search{background:var(--cover)}
.faq-toc{border-top:2px solid var(--card);padding-inline:0}
.tour-steps{padding-inline:0;border-top:2px solid var(--card)}
/* Model numbers never split at their hyphens. */
.group-model,.group-target{white-space:nowrap}
/* Inner title cards: the action on the card's last line, as on home. */
.page-head:has(.go){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:center}
.page-head:has(.go)>*{grid-column:1/-1;grid-row:auto}
.page-head:has(.go) .hero-action{grid-column:1;grid-row:auto;align-self:center;margin:30px 0 0}
.page-head:has(.go) .hero-note{grid-column:2;grid-row:auto;margin:30px 0 0}
.page-head:has(.go) .hero-offer{grid-column:1/-1;margin:14px 0 0}
@media (max-width:620px){
  /* Download inside the first phone viewport: a 3 x 2 menu, and the action before the box. */
  .site-header nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-header nav a{font-size:.8125rem;letter-spacing:.02em;padding:0 4px}
  .site-header li{border-left:1px solid var(--rule)}
  .site-header li:nth-child(3n+1){border-left:0}
  .site-header li:nth-child(n+3){border-top:0}
  .site-header li:nth-child(n+4){border-top:1px solid var(--rule)}
  .site-header .nav-download{border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
  .rating-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .group-model,.group-target{font-size:.8125rem}
  .page-head:has(.go){grid-template-columns:minmax(0,1fr)}
  .page-head:has(.go) .hero-note{grid-column:1;margin-top:10px}
}
/* ---- Finish review, round 2 ---------------------------------------------- */
/* Platform names as set text on the chips' baseline; each name and its status wrap together. */
.card-runs .platform-marks{align-items:baseline}
.card-runs .platform-marks li{flex-wrap:nowrap;align-items:baseline}
.card-runs .platform-marks a,.card-runs .platform-marks .mark{display:inline;min-height:0;padding:0;font:600 1rem/1.6 var(--sans);letter-spacing:0;text-transform:none}
.card-runs .platform-marks .mark::before{content:none}
.card-runs .provisional{vertical-align:baseline}
/* The first section under a title card needs no rule of its own. */
main>.page-head+.sheet{border-top:0;padding-top:clamp(8px,1vw,16px)}
@media (max-width:620px){
  /* Give the target column the width the two-target rows need. */
  .group-head,.rev-line{grid-template-columns:minmax(0,1fr) 1.75rem minmax(0,1.3fr) 1rem;gap:4px 8px}
  .conv-arrow{width:1.75rem}
  .group-target{font-size:.78rem}
}
@media (max-width:620px){
  /* Downgrade rows: the chip on its own line, model and version together below it. */
  .group-side.to:has(.kind-tag){display:grid;grid-template-columns:max-content max-content;column-gap:10px;row-gap:4px}
  .group-side.to .kind-tag{grid-column:1/-1;justify-self:start}
}
/* Download: the next steps once a download starts. */
.next-steps:focus{outline:none}
.next-steps:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.next-steps .steps{margin-top:6px}
.next-steps>p{margin:22px 0 0}
/* ---- Documenter drift, fixed ----------------------------------------------- */
/* The primary action is the lime Download everywhere it appears. */
.button.primary{min-height:56px;padding:16px 28px 15px;border-color:var(--band);background:var(--band);color:var(--on-band);font-size:1.25rem}
.button.primary:hover{background:var(--band-hi)}
/* Lime belongs to the action only: chips, highlights and cover links use the card or the print. */
.download-suggested{background:var(--card);color:var(--card-ink)}
.faq dt:target{text-decoration-color:var(--card)}
.page-terms main::before{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cover-accent:var(--print);--cover-focus:var(--print)}}
:root[data-theme="dark"]{--cover-accent:var(--print);--cover-focus:var(--print)}
/* Download: the app as it looks on each published platform. */
.download-shots{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.download-shots figure{margin:0}
.download-shots img{border:1.5px solid var(--print);border-radius:8px;background:#0d0e0f}
.download-shots figcaption{padding:8px 2px 0;font-size:.875rem;line-height:1.4;color:var(--print-2)}
@media (max-width:620px){.download-shots{grid-template-columns:minmax(0,1fr)}}
/* The download button is the page's one lime action. */
.button.download-button{border-color:var(--band);background:var(--band);color:var(--on-band)}
.button.download-button:hover{background:var(--band-hi)}
/* ---- Critique fixes, 2026-10-11 ------------------------------------------ */
/* The box grows with the screen's height as well as its width, so the card fits a laptop. */
.rating-mark{font-size:clamp(5rem,min(1.5rem + 10.5vw,22vh),13rem)}
@media (min-width:621px) and (max-height:880px){
  /* Short screens (1366x768, a 1080p laptop at 125%): Download and the platforms come before the box, as in the HTML. */
  .page-home main{padding-top:clamp(12px,1.4vw,20px)}
  .card-frame{min-height:0;gap:clamp(14px,1.6vw,22px);padding-block:clamp(18px,2.2vw,28px) clamp(18px,2vw,26px)}
  .hero.card .lead{margin-top:14px}
}
/* Counts are not drive data: they read in the text face, not Martian Mono. */
p.catalogue-count .data{font:inherit;font-variant-numeric:tabular-nums}
@media (min-width:621px) and (min-height:881px){
  /* Tall desktop screens: the box sits above Download, visually only, with both in view. */
  .card-foot{order:1}
}