/* Eumneme site base: browser surfaces, layout and the page components shared by every inner page.
   Load order: tokens.css, ui.css, site.css, shell.css. Flat paper, white cards on hairlines (owner order 2026-10-27). */

/* ---------- Base and browser surfaces ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--s-6));scrollbar-color:rgba(17,17,19,.28) transparent;accent-color:var(--mk-ink);caret-color:var(--mk-ink);overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;font:400 var(--t-body)/var(--lh-body) var(--font-text);font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (max-width:599px){body{font-size:var(--t-body-mobile)}}
::selection{background:var(--select);color:var(--on-select)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(29,29,31,.28);border:3px solid transparent;background-clip:padding-box;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(29,29,31,.45);background-clip:padding-box}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
main{display:block}
main:focus{outline:none}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:var(--lh-snug);letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
h3{font-size:var(--t-xl)}
h4{font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui);letter-spacing:0}
p{margin:0 0 var(--s-4);text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
em{font-style:italic}
small{font-size:var(--t-xs)}
ol,ul{padding-left:1.25em}
table{border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
time,data,.num{font-variant-numeric:tabular-nums lining-nums}
hr{height:1px;margin:var(--s-12) 0;border:0;background:var(--rule)}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}

/* Links: graphite underline that thickens under the pointer. */
a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor;transition:text-decoration-thickness var(--dur-1) var(--ease-out)}
a:hover{text-decoration-thickness:2px}
a:active{text-decoration-thickness:3px}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
a:focus-visible{border-radius:6px}
p a,li a,.fine a,dd a,td a{color:var(--mk-ink)}
.doc__rail a,summary a{color:inherit}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:calc(var(--wrap-narrow) + 2 * var(--gutter))}
.section{padding:var(--s-24) 0}
.section + .section{padding-top:var(--s-16)}
.section--sheet{padding:var(--s-24) 0;background:var(--mk-card);border-block:1px solid var(--mk-line)}
.section--deep{background:var(--mk-paper-2);border-block:1px solid var(--mk-line)}
@media (max-width:767px){.section,.section--sheet{padding:var(--s-16) 0}.section + .section{padding-top:var(--s-12)}}

/* A section heading is one display sentence in the book's serif. The one thing it names
   wears an inline tape (.tape--inline). Never a tape label above a heading: no kickers. */
.section__title{max-width:20em;margin:0 0 var(--s-8);font:500 var(--t-3xl)/1.12 var(--font-display);letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.section__title--s{font-size:var(--t-2xl);line-height:1.16;max-width:24em}
.section__title--tape{max-width:none;margin-bottom:var(--s-6);line-height:0}
.section__title + .lede{margin:calc(var(--s-4) - var(--s-8)) 0 var(--s-8)}
.statement{max-width:20em;margin:0 0 var(--s-8);font:500 var(--t-3xl)/1.04 var(--font-display);letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.statement--s{font-size:var(--t-2xl);line-height:1.1;max-width:24em}
.lede{max-width:34em;font-size:var(--t-lg);line-height:var(--lh-lede);color:var(--ink-2)}
.prose{max-width:var(--measure)}
.prose > * + h3{margin-top:var(--s-10)}
.prose h3{margin-bottom:var(--s-3)}
.fine{font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.opinion{font-style:italic}
.opinion b{font-style:normal;font-family:var(--font-ui);font-size:.85em;font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-16);align-items:start}
.slip__after{margin-top:var(--s-4)}
.state__risk{margin-bottom:var(--s-12)}
@media (max-width:959px){.split{grid-template-columns:1fr;gap:var(--s-10)}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Actions ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin:var(--s-8) 0 0}
/* Small capsule buttons keep the 44px hit target the design rules require (glass.css sets 40px). */
.tape--button.tape--s{min-height:var(--tap-min)}
/* Quiet secondary link: UI type, drawn arrow (mask from a data URI; CSP img-src allows data:). */
.link-quiet{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap-min);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink);text-underline-offset:.3em}
.link-quiet::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:translate var(--dur-2) var(--ease-out)}
.link-quiet:hover::after{translate:3px 0}
/* Button loading state (checkout.js and skills.js set aria-disabled while a request runs). */
.tape--button[aria-busy="true"]{cursor:progress}
/* A gated control that has lost its href (skills.js closed checkout) is a label, not a link. */
a.link-quiet:not([href]){color:var(--ink-3);text-decoration:none;cursor:default}
a.link-quiet:not([href])::after{display:none}

/* ---------- Price with its date ---------- */
.price{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0}
.price .tape--date{margin-inline-start:0}
.requote{margin:var(--s-2) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}

/* ---------- Plates: photographs with HTML labels stuck on objects ----------
   The plate is a size container; labels read --x and --y (0 to 1, fractions of the source image)
   and are mapped through object-fit: cover, so they stay on their objects at every crop.
   Set --ar (image width / height), and --px, --py (object-position as fractions). */
.plate{position:relative;margin:0;--ar:1.5;--px:.5;--py:.5;container-type:size;aspect-ratio:var(--ar);background:var(--wall-deep);overflow:hidden}
.plate picture,.plate > img{position:absolute;inset:0;width:100%;height:100%}
.plate img{width:100%;height:100%;object-fit:cover;object-position:calc(var(--px) * 100%) calc(var(--py) * 100%);color:transparent}
.plate__label{--W:max(100cqw,100cqh * var(--ar));--H:max(100cqh,100cqw / var(--ar));--lx:calc((100cqw - var(--W)) * var(--px) + var(--W) * var(--x,.5));--tx:clamp(calc(var(--lx) * -1),-50%,calc(100cqw - var(--lx) - 100%));position:absolute;left:var(--lx);top:calc((100cqh - var(--H)) * var(--py) + var(--H) * var(--y,.5));translate:var(--tx) -50%;rotate:var(--r,0deg);z-index:1;white-space:nowrap;line-height:0}
.plate__label{width:max-content}
/* Labels stuck on photographed objects are 8 modules tall, smaller than page tape. */
.plate__label .tape{display:inline-block;white-space:nowrap;padding:var(--u) calc(var(--u) * 2.5);line-height:calc(var(--u) * 6)}
.plate__label .tape--m{padding:calc(var(--u) * 1.5) calc(var(--u) * 3);line-height:calc(var(--u) * 7)}
.plate__cap{margin:var(--s-2) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
figure.plate-figure{margin:0}
figure.plate-figure .plate{box-shadow:var(--lift-2)}

/* ---------- Three parts ---------- */
.parts{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6);align-items:start;margin:0 0 var(--s-10);padding:0;list-style:none}
/* The cable: one drawn line joining the parts in reading order, behind the cards. */
.parts::before{content:"";position:absolute;left:var(--s-8);right:var(--s-8);top:var(--s-10);height:2px;background:var(--rule-strong)}
.part{position:relative;margin:0;padding:var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.part h3{margin:0 0 var(--s-4);font-size:var(--t-xl);line-height:0}
.part p{font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-2)}
.part--phone{grid-column:1/span 3;margin-top:var(--s-8)}
.part--desktop{grid-column:4/span 4;margin-top:var(--s-4)}
.part--server{grid-column:8/span 5;padding:var(--s-8);box-shadow:var(--lift-3)}
.part--server p{font-size:var(--t-body);color:var(--ink)}
/* The backup sits behind the server: a second card, offset, peeking out. */
.part__backup{position:absolute;right:calc(-1 * var(--s-4));bottom:calc(-1 * var(--s-12));z-index:-1;width:62%;padding:var(--s-16) var(--s-5) var(--s-4);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2);rotate:1.2deg}
.part__backup p{margin:var(--s-2) 0 0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.part--server{z-index:1;margin-bottom:var(--s-12)}
@media (max-width:959px){
  .parts{grid-template-columns:1fr;gap:var(--s-8);padding-left:var(--s-8)}
  .parts::before{left:var(--s-3);right:auto;top:var(--s-6);bottom:var(--s-16);width:2px;height:auto}
  .part--phone,.part--desktop,.part--server{grid-column:1;margin-top:0}
  .part::before{content:"";position:absolute;left:calc(-1 * var(--s-5) - 1px);top:var(--s-6);width:var(--s-5);height:2px;background:var(--rule-strong)}
  .part__backup{position:relative;right:auto;bottom:auto;z-index:auto;width:auto;margin:var(--s-6) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));padding:var(--s-4) var(--s-5);rotate:0deg;box-shadow:var(--lift-1);background:var(--wall)}
}

/* ---------- The week (signature) ---------- */
.week__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-12);align-items:start}
.week__stage{position:sticky;top:calc(var(--nav-h) + var(--s-8))}
.week__plate{--ar:1.7778}
.week__days{margin:0;padding:0;list-style:none;counter-reset:none}
.week__day{padding:var(--s-8) 0;border-top:1px solid var(--rule)}
.week__day:last-child{border-bottom:1px solid var(--rule)}
.week__day h3{margin:0 0 var(--s-3);font-size:var(--t-xl);line-height:0}
.week__day p{max-width:32em;color:var(--ink-2)}
.week__day--accept h3 .tape{font-size:calc(var(--u) * 5)}
/* Printed state of a plate label. Hidden labels are only ever hidden when site.js runs the week. */
.week--live .week__label{clip-path:inset(-8px 100% -8px -8px);opacity:0;translate:var(--tx) calc(-50% - 6px);transition:clip-path var(--dur-emboss) steps(var(--n,12),end),opacity 1ms linear,translate var(--dur-2) var(--ease-out) var(--dur-emboss),rotate var(--dur-2) var(--ease-out) var(--dur-emboss)}
.week--live .week__label.is-printed{clip-path:inset(-8px -8px -8px -8px);opacity:1;translate:var(--tx) -50%}
.week--live .week__day{min-height:44vh;transition:color var(--dur-2) var(--ease-out)}
.week--live .week__day:not(.is-current) p{color:var(--ink-3)}
@media (max-width:959px){
  .week__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .week__stage{position:static}
  /* On phones the labels live in the ordered list; the plate keeps only the acceptance label. */
  .week__label:not(.week__label--accept){display:none}
  .week--live .week__label{clip-path:none;opacity:1;translate:var(--tx) -50%;transition:none}
  .week--live .week__day{min-height:0}
  .week--live .week__day:not(.is-current) p{color:var(--ink-2)}
}

/* ---------- Approval slip ---------- */
.slip{margin:0;padding:0;list-style:none;background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.slip li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:var(--s-1) var(--s-6);padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--rule)}
.slip li:last-child{border-bottom:0}
.slip__k{font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);padding-top:var(--s-3)}
.slip__v{line-height:1}
.slip__v .tape{display:inline-block}
.slip li p{grid-column:2;margin:var(--s-2) 0 0;font-size:var(--t-md);color:var(--ink-2)}
@media (max-width:599px){.slip li{grid-template-columns:1fr;padding:var(--s-4)}.slip li p{grid-column:1}.slip__k{padding-top:0}}

/* ---------- Forms ---------- */
.field{display:grid;gap:var(--s-2);margin:0 0 var(--s-6)}
.field label,.label{font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink)}
.field__hint{font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.input,.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{width:100%;min-height:var(--s-12);padding:var(--s-3) var(--s-4);border:1px solid var(--gray-500);border-radius:var(--r-field);background:var(--glass-input);color:var(--ink);font:400 var(--t-md)/var(--lh-ui-lg) var(--font-ui);box-shadow:none;transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.field textarea{min-height:calc(var(--s-32) + var(--s-8));resize:vertical;line-height:var(--lh-ui-lg)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:not([type="checkbox"]):not([type="radio"]):hover,.field textarea:hover,.field select:hover{border-color:var(--ink-3)}
.field input:not([type="checkbox"]):not([type="radio"]):focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--brand-blue);box-shadow:var(--focus-ring)}
.field input:not([type="checkbox"]):not([type="radio"]):disabled,.field textarea:disabled,.field select:disabled{background:var(--wall);border-style:dashed;border-bottom-width:1px;color:var(--ink-3);cursor:not-allowed}
/* Error: never color alone. A drawn mark, a heavier rule and a message that names the fix. */
.field [aria-invalid="true"],.field input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"]{border-color:var(--alert);border-width:2px}
.field__error{display:flex;gap:var(--s-2);align-items:flex-start;margin:0;font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink)}
.field__error::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1.1'/%3E%3C/svg%3E") center/contain no-repeat}
.field__error[hidden]{display:none}
/* Checkbox and radio rows: native controls, themed by accent-color, 44px rows. */
.check{display:flex;align-items:flex-start;gap:var(--s-3);min-height:var(--tap-min);padding:var(--s-2) 0;font:400 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;cursor:pointer}
.check input:focus-visible{box-shadow:var(--focus-ring)}
.check input:disabled,.check input:disabled + span{cursor:not-allowed;color:var(--ink-3)}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{float:left;width:100%;padding:0;margin:0 0 var(--s-3);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui)}
legend + *{clear:both}
/* Status line under a form or checkout button. skills.js adds .error on failure. */
.status-line{margin:var(--s-3) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.status-line.error{font-weight:600;color:var(--ink)}
.status-line.error::before{content:"";display:inline-block;width:12px;height:12px;margin-right:var(--s-2);vertical-align:-1px;background:var(--ink);border-radius:50%}

/* ---------- What can leave: the route builder ---------- */
.route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin:0 0 var(--s-10);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.route fieldset{padding:var(--s-6) var(--s-8)}
.route__slip{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-8);border-left:1px dashed var(--rule-strong);background:var(--shelf)}
.route__slip .tape{align-self:flex-start;display:inline-block}
.route__out{display:block;font:500 var(--t-2xl)/1.1 var(--font-display);color:var(--ink);text-wrap:balance}
.route__more{margin:0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
@media (max-width:767px){.route{grid-template-columns:1fr}.route fieldset,.route__slip{padding:var(--s-5)}.route__slip{border-left:0;border-top:1px dashed var(--rule-strong)}}

/* ---------- Status board: dated labels for honest state ---------- */
.board{display:grid;margin:0 0 var(--s-12);padding:0;border-top:1px solid var(--rule-strong)}
.board > div{display:grid;grid-template-columns:minmax(12em,auto) minmax(0,1fr);gap:var(--s-2) var(--s-8);align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}
.board dt{margin:0;line-height:1}
.board dt .tape{display:inline-block}
.board dd{margin:0;color:var(--ink-2)}
.board__date{display:block;margin:0 0 var(--s-3);font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
@media (max-width:599px){.board > div{grid-template-columns:1fr}}

/* ---------- Pins: every promise pinned by a leader line to its limit ---------- */
.pins{margin:0;padding:0}
.pin{display:grid;grid-template-columns:minmax(0,1fr) var(--s-24) minmax(0,1fr);align-items:center;padding:var(--s-4) 0}
.pin dt{position:relative;margin:0;font:600 var(--t-xl)/1.15 var(--font-display);color:var(--ink);text-wrap:balance}
.pin dd{position:relative;grid-column:3;margin:0;padding:var(--s-3) var(--s-4);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-1);font:400 var(--t-md)/var(--lh-ui-lg) var(--font-text);color:var(--ink-2)}
/* The leader: a hairline with a dot where it is pinned to the promise and a short tick at the limit. */
.pin::before{content:"";grid-column:2;grid-row:1;height:1px;background:var(--mk-gold);margin:0 var(--s-2)}
.pin dd::before{content:"";position:absolute;left:calc(-1 * var(--s-24) + var(--s-1));top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--mk-gold)}
.pin dd::after{content:"";position:absolute;left:-1px;top:var(--s-2);bottom:var(--s-2);width:1px;background:var(--mk-gold)}
.pin dt{grid-column:1;grid-row:1}
.pin dd{grid-row:1}
.pin__limit{display:block;margin:0 0 var(--s-1);font:600 var(--t-2xs)/16px var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
@media (max-width:767px){
  .pin{grid-template-columns:var(--s-6) minmax(0,1fr);row-gap:var(--s-3);padding:var(--s-5) 0}
  .pin dt{grid-column:1/-1}
  .pin::before{grid-column:1;grid-row:2;width:1px;height:auto;align-self:stretch;margin:0 0 0 var(--s-2)}
  .pin dd{grid-column:2;grid-row:2}
  .pin dd::before{left:calc(-1 * var(--s-4) - 3px);top:0;margin-top:-4px}
}

/* ---------- Offer shelf: edge to edge, each with its dated price tape ---------- */
.shelf{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin:0 0 var(--s-6);padding:0;list-style:none}
.offer{position:relative;display:flex;flex-direction:column;gap:var(--s-4);margin:0;padding:var(--s-8) var(--s-6) var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-1)}
.offer--lead{z-index:1;box-shadow:var(--lift-3);padding-top:var(--s-8)}
.offer__name{margin:0;font:600 var(--t-lg)/var(--lh-ui-lg) var(--font-ui);letter-spacing:-.005em}
.offer__desc{margin:0;font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-2)}
.offer__not{margin:0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.offer__foot{display:grid;gap:var(--s-2);margin-top:auto;padding-top:var(--s-4)}
.offer__foot .tape--button{justify-self:start}
.offer__foot .link-quiet{justify-self:start}
.offer .requote{margin-top:calc(-1 * var(--s-2))}
.shelf__note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:var(--s-8) 0 0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
@media (max-width:1119px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.shelf{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:var(--wrap-narrow);margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;display:block;min-height:var(--s-16);padding:var(--s-5) var(--s-12) var(--s-5) 0;font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* Drawn plus that turns into a minus. */
.faq summary::before,.faq summary::after{content:"";position:absolute;right:var(--s-3);top:50%;width:16px;height:2px;margin-top:-1px;background:var(--ink);transition:rotate var(--dur-2) var(--ease-out)}
.faq summary::after{rotate:90deg}
.faq details[open] summary::after{rotate:0deg}
.faq summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.faq summary:focus-visible{box-shadow:var(--focus-ring)}
.faq details > div{max-width:var(--measure);padding:0 0 var(--s-6)}
.faq details > div p{color:var(--ink-2)}

/* ---------- Close ---------- */
.close{padding:var(--s-32) 0 var(--s-24)}
.close__title{max-width:14em;margin:0 0 var(--s-6);font-size:var(--t-4xl);line-height:1;letter-spacing:-.025em}
.close__line{margin:0;font:400 var(--t-lg)/var(--lh-lede) var(--font-text);color:var(--ink-2)}
@media (max-width:767px){.close{padding:var(--s-20) 0 var(--s-16)}}

/* ---------- Toast (copy helper) ---------- */
#copytoast{position:fixed;left:50%;bottom:max(var(--s-6),env(safe-area-inset-bottom));z-index:var(--z-menu);translate:-50% var(--s-16);box-sizing:border-box;width:max-content;max-width:calc(100vw - var(--s-8));padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);background:var(--ink);color:var(--ink-on);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);text-align:center;overflow-wrap:anywhere;box-shadow:var(--lift-2);opacity:0;transition:translate var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);pointer-events:none}
#copytoast.on{translate:-50% 0;opacity:1}
/* A refused copy leaves the text in the toast to select by hand: it takes the pointer, and a
   long value (a Stripe session id) wraps inside a rounded card instead of a pill. */
#copytoast.hold{pointer-events:auto;-webkit-user-select:text;user-select:text;border-radius:var(--r-card)}

/* ---------- Page head (every inner page) ----------
   H1 is one display sentence; the thing the page is about wears one inline tape. */
.page-head{padding:var(--s-20) 0 var(--s-12)}
.page-head__title{max-width:16em;margin:0 0 var(--s-6);font:500 var(--t-4xl)/1.06 var(--font-display);letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.page-head__lede{max-width:34em;margin:0 0 var(--s-8);font:400 var(--t-lg)/var(--lh-lede) var(--font-text);color:var(--ink-2);text-wrap:pretty}
.page-head__meta{margin:0;font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.page-head .actions{margin-top:var(--s-2)}
@media (max-width:767px){.page-head{padding:var(--s-12) 0 var(--s-8)}}

/* ---------- Read layout (docs, legal, support) ----------
   A rail of white tape tabs beside one reading column. The current tab is black tape. */
.doc{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s-12);align-items:start;padding:0 0 var(--s-24)}
.doc__rail{position:sticky;top:calc(var(--nav-h) + var(--s-6));display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.doc__rail a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.doc__rail a .tape{--tape-surface:var(--tape-white);--tape-letter:var(--tape-black)}
.doc__rail a[aria-current] .tape{--tape-surface:linear-gradient(180deg,#DDBB6E 0%,#C79F50 100%);--tape-letter:#21180A;border-color:transparent}
.doc__body{min-width:0;max-width:var(--measure)}
.doc__body h2{margin:var(--s-16) 0 var(--s-4);font:500 var(--t-2xl)/1.12 var(--font-display);letter-spacing:-.015em;text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{margin:var(--s-10) 0 var(--s-3);font:600 var(--t-lg)/var(--lh-snug) var(--font-ui)}
.doc__body p,.doc__body li{line-height:var(--lh-body)}
.doc__body ol,.doc__body ul{padding-left:1.4em}
.doc__body li + li{margin-top:var(--s-2)}
.steps{counter-reset:step;margin:var(--s-6) 0;padding:0;list-style:none}
.steps > li{counter-increment:step;display:grid;grid-template-columns:var(--s-10) minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--rule)}
.steps > li::before{content:counter(step);font:600 var(--t-lg)/1.2 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
/* Every child of a step sits in the text column, so a step that carries a name or a heading as well as
   its sentence never drops the sentence back under the numeral into the narrow number column. */
.steps > li > *{grid-column:2}
.callout{margin:var(--s-8) 0;padding:var(--s-5) var(--s-6);background:var(--card);box-shadow:var(--lift-1)}
.callout > .tape{display:inline-block;margin:0 0 var(--s-3)}
.callout p{margin:0;color:var(--ink-2)}
.callout p + p{margin-top:var(--s-3)}
@media (max-width:959px){.doc{grid-template-columns:1fr;gap:var(--s-6)}.doc__rail{position:static;display:flex;flex-wrap:wrap}}

/* ---------- Soft corners for page cards that predate the glass system ---------- */
.callout,.company-note,.company-safety,.company-source-note,.library-material,.compare,.ins-return,.skills-head__sheet,.return-notice:not([hidden]),.pack-item,.fit-limit,.demo-slip,.buy-slip,.trust-flow,.mv-form__status.ok,.plate,.company-profiles a,.sources > div:target,.ticket{border-radius:var(--mk-r-card)}
.compare,.plate{overflow:hidden}
.fit-limit{border-top:0}
.pack-shelf::after,.skills-head__object::before{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important}
}

/* ---------- Editorial layer: big serif display type, scene art under the page head,
   sections that read as distinct bands, and a quiet reading rail. Layout only; no copy depends on it. */
.page-head{position:relative;padding:clamp(56px,8vw,120px) 0 clamp(32px,4vw,56px)}
.page-head__title,.company-head__title{max-width:15em;font-size:clamp(2.25rem,1.4rem + 3.6vw,4.125rem);font-weight:500;line-height:1.08;letter-spacing:-.025em}
.page-head__lede,.company-head__lede{max-width:36em;font-size:clamp(1.125rem,1rem + .45vw,1.4375rem);line-height:1.5;color:var(--ink-2)}
.page-head__meta{color:var(--ink-3)}
.section__title{max-width:18em;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);font-weight:400;line-height:1.08;letter-spacing:-.02em}
.section__title--s{max-width:22em;font-size:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.018em}
.close__title{font-size:clamp(2.25rem,1.4rem + 3.6vw,4.125rem);letter-spacing:-.025em}
.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.55}

/* Scene art: one wide generated photograph under a page head. Scales gently with scroll where supported. */
.page-art{position:relative;width:min(calc(100% - 2 * var(--gutter)),calc(var(--wrap) - 2 * var(--gutter)));margin:0 auto clamp(8px,2vw,24px);aspect-ratio:21/9;border:1px solid var(--mk-line);border-radius:var(--mk-r-card);overflow:hidden;background:var(--mk-paper-2);isolation:isolate}
.page-art picture,.page-art img{display:block;width:100%;height:100%}
/* Black and white only: generated scene photographs render in greyscale. */
.page-art img{object-fit:cover;object-position:var(--art-x,50%) var(--art-y,55%);filter:grayscale(1) contrast(1.04)}
.page-art--night{background:var(--mk-night)}
.page-art + .wrap > .doc{padding-top:clamp(32px,5vw,72px)}
.page-art__cap{position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:1;margin:0;padding:4px 10px;border-radius:var(--mk-r-pill);background:#FFFFFF;color:var(--mk-ink-2);font:500 var(--t-2xs)/16px var(--font-ui)}
@media (max-width:767px){.page-art{aspect-ratio:4/3}}

/* Bands: a sheet section is a white band, a deep section the alternate paper. Cards sit on hairlines. */
.section--sheet{margin-inline:0;border:0;border-block:1px solid var(--mk-line);border-radius:0;background:var(--mk-card);box-shadow:none}
.section--deep{background:var(--mk-paper-2);border-block:1px solid var(--mk-line)}
.glass-card,.offer,.part,.slip,.callout,.pack-item,.buy-slip,.record{border:1px solid var(--mk-line);box-shadow:none}
.section--sheet .glass-card,.section--sheet .offer,.section--sheet .callout{background:var(--mk-paper)}

/* Reading rail: a quiet list with a marker on desktop; capsules stay on phones where the rail wraps. */
@media (min-width:960px){
  .doc__rail{gap:0;padding-left:var(--s-4);border-left:1px solid var(--mk-line)}
  .doc__rail a{position:relative;min-height:40px}
  .doc__rail a .tape{all:unset;font:500 var(--t-sm)/1.3 var(--font-ui);color:var(--ink-3);transition:color var(--dur-2) var(--ease-out)}
  .doc__rail a:hover .tape{color:var(--ink)}
  .doc__rail a[aria-current] .tape{color:var(--ink);font-weight:600}
  .doc__rail a[aria-current]::before{content:"";position:absolute;left:calc(-1 * var(--s-4) - 1px);top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--mk-gold)}
}
.doc__body{font-size:1.0625rem;line-height:1.7}
.doc__body p,.doc__body li{line-height:1.7}
.doc__body h2{margin-top:var(--s-16);padding-top:var(--s-8);border-top:1px solid var(--mk-line);font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.1;letter-spacing:-.022em}
.doc__body h2:first-child,.doc__body > .callout:first-child + h2{margin-top:0;padding-top:0;border-top:0}
.doc__body table{width:100%;margin:var(--s-6) 0;font-size:var(--t-sm);line-height:1.45}
.doc__body th{padding:var(--s-3);border-bottom:1px solid var(--mk-line-strong);font:600 var(--t-xs)/1.3 var(--font-ui);letter-spacing:.03em;text-align:left;vertical-align:bottom;color:var(--ink-2)}
.doc__body td{padding:var(--s-3);border-bottom:1px solid var(--mk-line);vertical-align:top}
.doc__body tr:last-child td{border-bottom:0}
.callout{background:var(--mk-card)}

/* ---------- Motion, native and dependency-free ----------
   Scroll-linked reveal for home sections and inner sections, plus a cross-document view transition.
   The reveal moves text but never fades it: faded text fails 4.5:1 contrast while it rises. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes mv-rise{from{transform:translateY(16px)}to{transform:none}}
    .home-body .block>.wrap,body:not(.home-body) .section>.wrap{animation:mv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 240px}
  }
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media (forced-colors:active){
  .part,.offer,.slip,.route,.pin dd,.mv-foot__sheet{border:1px solid CanvasText}
}

/* Kodros inner page heads (2026-11-02): a light wash of the home sky behind the title and one gold hairline under it,
   so every page opens in the same world as the home page. Static, so nothing here moves. */
.page-head,.ins-head,.company-head{position:relative;isolation:isolate}
.page-head::before,.ins-head::before,.company-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/kodros/img/sky-1200.webp) 50% 78%/cover no-repeat;opacity:.38;-webkit-mask-image:linear-gradient(180deg,#000 10%,rgba(0,0,0,.5) 60%,transparent);mask-image:linear-gradient(180deg,#000 10%,rgba(0,0,0,.5) 60%,transparent)}
.page-head::after,.ins-head::after,.company-head::after{content:"";position:absolute;left:50%;bottom:0;width:min(520px,70vw);height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,var(--mk-gold) 50%,transparent);opacity:.55;pointer-events:none}