/* ==========================================================================
   Logic Software — house site
   The world: a shipping register. The catalogue is not a grid of cards, it is
   a ruled register with a status column, and the status marks are the three
   blocks of the Logic mark at their own opacities (solid / 45% / outline).
   Palette and font stack are inherited verbatim from the LogicSAT product
   site so the two read as one house on one domain.
   ========================================================================== */

:root{
  /* Inherited brand tokens (LogicSAT, 17/08/2026) */
  --ink:#1D1D1F;
  --txt:#1D1D1F;
  --txt2:#4A5160;
  --line:#E3E6EB;
  --ground:#F5F6F8;
  --red:#991B1B;
  --red-hi:#7F1414;
  --amber:#B45309;
  /* Live goes green (19/08, decisión de Juanra). Two values because the text
     needs AA (6.4:1 on the ground) and the block only needs 3:1, so it can
     carry more chroma and actually read as green at 13px. */
  --green:#166534;
  --green-mark:#15803D;
  --d-green:#4ADE80;

  /* House additions, derived from the same hues */
  --plate:#151517;        /* the register plate */
  --plate-2:#1D1D1F;
  --d-txt:#F2F3F5;
  --d-txt2:#A2A8B4;
  --d-line:#33333A;
  --d-line-2:#26262C;
  --d-red:#F87171;
  --d-amber:#F0B45E;
  --wash:#FBF1F1;         /* red wash, from the product site */
  --wash-line:#E4C4C4;
  --notice-txt:#6B3232;
  --notice-strong:#5A2424;

  /* One muted grey per surface, instead of the six near-identical ones this
     file grew during the build. #8A8A94 clears AA on the plate (4.95:1);
     #6E7480 and #6C7280 did not, and they were carrying footer labels. */
  --d-txt3:#8A8A94;
  --d-line-3:#5A5A64;
  --muted:#6B7280;
  --white:#fff;
  --ink-hover:#0B0B0C;
  --field-hover:#C9CFD8;
  --field-bad:#B4534B;
  --scrim:rgba(255,255,255,.90);
  --scrim-dark:rgba(10,10,12,.74);
  --amber-line-d:rgba(240,180,94,.34);
  --shadow-ink:rgba(21,21,23,.5);

  /* Archivo: a grotesque drawn for print and screen, with real character in the
     heavy weights — the system stack at 800 was reading as generated. Spline
     Sans Mono carries the register's data. 19/08/2026. */
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;

  --rail:1120px;
  --pad:26px;
  /* Two curves, on purpose. --ease decelerates hard and belongs to entrances;
     --ease-out starts immediately and belongs to anything answering a pointer.
     The browser default (`ease`) eases IN, which is why unattributed hover
     transitions felt sluggish before 19/08. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.2,0,0,1);
  --t-press:90ms;
  --t-ui:170ms;
  --t-enter:420ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  /* `clip`, never `hidden`: hidden would make the body a scroll container and
     break the sticky header. This contains the 100vw bleed images, which are
     wider than the content box whenever a scrollbar is showing. */
  overflow-x:clip;
  font:16.5px/1.65 var(--sans);
  color:var(--txt);
  background:var(--white);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-underline-offset:3px}
img,svg{max-width:100%}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.close :focus-visible{outline-color:var(--d-red)}

.rail{max-width:var(--rail);margin:0 auto;padding:0 var(--pad)}
.wide{max-width:1320px;margin:0 auto;padding:0 var(--pad)}

/* --------------------------------------------------------------- typography */
h1,h2,h3,h4{text-wrap:balance}
.display{
  font-size:clamp(34px,5.6vw,60px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:800;
}
.display-2{
  font-size:clamp(27px,3.4vw,40px);
  line-height:1.12;
  letter-spacing:-.038em;
  font-weight:800;
}
h2{font-size:clamp(24px,2.9vw,33px);line-height:1.15;letter-spacing:-.035em;font-weight:800}
h3{font-size:17.5px;line-height:1.3;letter-spacing:-.018em;font-weight:700}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--txt2);max-width:64ch}
.close .lede{color:var(--d-txt2)}
p{max-width:72ch}
.tag{
  font:600 11.5px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--txt2);
}
.close .tag{color:var(--d-txt2)}

/* -------------------------------------------------------------------- header */
.top{
  position:sticky;top:0;z-index:40;
  background:var(--scrim);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:26px;height:64px;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.03em;flex:none}
.brand .cube{width:30px;height:30px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex:none}
.brand .cube svg{width:18px;height:18px;display:block}
.brand em{font-style:normal;font-weight:500;color:var(--txt2)}
.menu{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:600;color:var(--txt2);margin-left:8px}
.menu a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.menu a:hover{color:var(--ink);border-bottom-color:var(--red)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;transition:background var(--t-ui) var(--ease-out)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:transform var(--t-ui) var(--ease-out)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:10px;padding:11px 18px;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),
              color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.btn:active{transform:translateY(1px);transition-duration:0s}
.btn svg{width:15px;height:15px;flex:none}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-hi);box-shadow:0 6px 18px -4px rgba(153,27,27,.42)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--ink-hover);box-shadow:0 6px 18px -6px rgba(29,29,31,.5)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--white)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--d-txt);box-shadow:0 6px 20px -6px var(--shadow-ink)}
.btn-outline-d{border-color:var(--d-line);color:var(--d-txt);background:transparent}
.btn-outline-d:hover{border-color:var(--d-txt2);background:rgba(255,255,255,.05)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn:disabled:active,.btn[aria-disabled="true"]:active{transform:none}

/* ------------------------------------------------------------------ sections */
section{padding:78px 0}
section.ground{padding:112px 0}
section.tight{padding:58px 0}
@media (max-width:860px){section{padding:58px 0}section.ground{padding:72px 0}}
.ruled{border-top:1px solid var(--line)}
.ground{background:var(--ground)}
/* The section head is a two-column editorial split, not a stacked
   heading-over-lede. Ten identical stacked heads was the shape of the
   generated landing page this site kept resembling. 19/08/2026. */
.head{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:20px 56px;align-items:end;margin-bottom:44px;max-width:none;
}
.head>h2{grid-column:1;margin:0}
.head>p{grid-column:2;margin:0;max-width:46ch}
.head>.prod-meta{grid-column:1/-1;margin-bottom:0}
@media (max-width:900px){
  .head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:34px}
  .head>h2,.head>p{grid-column:1}
  .head>p{max-width:62ch}
}

/* ------------------------------------------------------------- register plate */
/* The plate was near-black through 19/08. It made every page open in the dark
   and the whole site read as gloomy, so the ground is now light and the ink is
   spent on the closing band and the footer only — darkness as punctuation. */
.plate{background:var(--ground);color:var(--txt);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* No corner glow and no giant watermark. Both were template decoration and
   they were the loudest generated-page tell left on the page; the ground is
   plain and the type and the register carry it. 19/08/2026. */
.plate>*{position:relative}
.register caption{font-size:11.5px}
.plate-top{padding-top:78px;padding-bottom:34px}
.plate-top .display{max-width:19ch}
.plate-top .lede{margin-top:20px}
.plate-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}

/* the register itself */
.register{width:100%;border-collapse:collapse;font-size:15.5px}
.register caption{text-align:left;padding-bottom:14px}
.register th{
  text-align:left;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt2);padding:0 16px 12px 0;border-bottom:1px solid #CFD5DE;white-space:nowrap;
}
.register td{padding:20px 16px 20px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.register tr:last-child td{border-bottom:0}
.register .ref{font:500 12.5px/1 var(--mono);color:var(--txt2);letter-spacing:.03em;white-space:nowrap;width:1%}
.register .name{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.register .name a{text-decoration:none}
.register .name a:hover{color:var(--red)}
.register .what{color:var(--txt2);font-size:14.5px}
@media (min-width:861px){.register .what{width:44%}.register td:nth-child(4),.register th:nth-child(4){width:186px}}
.register .act{text-align:right;width:1%;white-space:nowrap}
.register .act a{
  font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
}
.register .act a:hover{color:var(--red)}
.register .act a svg{width:13px;height:13px;transition:transform var(--t-ui) var(--ease-out)}
.register .act a:hover svg{transform:translateX(3px)}
.register .act span{font-size:13.5px;color:var(--muted)}
.register tbody tr.is-live{background:linear-gradient(90deg,rgba(21,128,61,.085),rgba(21,128,61,0) 76%)}

/* status marks: the three blocks of the Logic mark, at their own weights */
.st{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;white-space:nowrap}
.st i{width:13px;height:13px;border-radius:3.5px;flex:none;display:block}
.st-live i{background:var(--green-mark)}
.st-live{color:var(--green)}
.st-dev i{background:var(--amber)}
.st-dev{color:var(--amber)}
.st-plan i{box-shadow:inset 0 0 0 1.5px #A7ADB8;background:transparent}
.st-plan{color:var(--muted)}
/* dark-surface variants, for the closing band and anywhere ink is the ground */
.st.on-dark.st-live i{background:var(--d-green)}
.st.on-dark.st-live{color:var(--d-green)}
.st.on-dark.st-dev i{background:var(--d-amber);opacity:.6}
.st.on-dark.st-dev{color:var(--d-amber)}
.st.on-dark.st-plan i{box-shadow:inset 0 0 0 1.5px var(--d-line-3)}
.st.on-dark.st-plan{color:var(--d-txt3)}

.legend{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  padding:22px 0 76px;font-size:13.5px;color:var(--txt2);
}
.legend .st{font-weight:600}
.legend p{font-size:13.5px;max-width:46ch;color:var(--txt2)}

/* register row entrance — the one authored moment: the ledger stamping in */
@media (prefers-reduced-motion:no-preference){
  .stamp{opacity:0;transform:translateY(8px);animation:stamp var(--t-enter) var(--ease) forwards;animation-delay:var(--d,0ms)}
  @keyframes stamp{to{opacity:1;transform:none}}
  .stamp .st i{animation:mark 300ms var(--ease-out) backwards;animation-delay:calc(var(--d,0ms) + 140ms)}
  @keyframes mark{from{opacity:0;transform:scale(.5)}}

  /* Photographs decode at their own pace; without this the seven Logic Table
     images pop in as you scroll. The class is added by JS, so with no
     JavaScript the pictures are simply visible. */
  .shot img.fading{opacity:0}
  .shot img{transition:opacity var(--t-enter) var(--ease-out)}
}

/* ------------------------------------------------------------------ proof */
.proof{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--ground);display:block;position:relative}

/* Logic Table's imagery is art direction for a product that does not exist.
   The badge travels with the frame so the picture cannot be mistaken for a
   screenshot even when it is cropped or shared on its own. */
.impression{
  position:absolute;left:12px;top:12px;z-index:2;
  font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-amber);background:var(--scrim-dark);
  border:1px solid var(--amber-line-d);border-radius:8px;padding:7px 9px;
}
@media (max-width:560px){.impression{left:9px;top:9px;padding:6px 8px}}
.shot.portrait{aspect-ratio:2/3}
/* A picture that breaks the rail and runs to the viewport edge, square. The
   rounded, rail-width, evenly-spaced photo is the template's own habit. */
.bleed{width:100vw;margin-left:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0}
.bleed+figcaption{max-width:var(--rail);margin-left:auto;margin-right:auto;padding:0 var(--pad)}
@media (max-width:860px){.bleed{border-radius:0}}
.shot.w16{aspect-ratio:16/9}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.tall{aspect-ratio:4/3}
.shot.band{aspect-ratio:21/8}
.shot.sq{aspect-ratio:1/1}
figure figcaption{margin-top:11px;font-size:13.5px;color:var(--txt2);max-width:52ch}
.close figcaption{color:var(--d-txt2)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}

/* --------------------------------------------------------------- spec sheet */
.spec{border-top:1px solid var(--line)}
.spec-row{
  display:grid;grid-template-columns:220px 1fr;gap:32px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start;
}
.spec-row dt{display:flex;align-items:flex-start;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.018em}
.spec-row dt svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--ink);stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.spec-row dd{color:var(--txt2);font-size:15.5px}
.spec-row dd b{color:var(--txt);font-weight:600}

/* --------------------------------------------------------------- the pipeline */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.pipe-step{padding:26px 22px;border-right:1px solid var(--line);position:relative}
.pipe-step:last-child{border-right:0}
.pipe-step .n{font:600 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--red)}
.pipe-step h3{margin:12px 0 8px}
.pipe-step p{font-size:14.5px;color:var(--txt2)}
.pipe-step{transition:background var(--t-ui) var(--ease-out)}
.pipe-step:hover{background:var(--ground)}

/* ------------------------------------------------------------------ cards-lite */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.panel{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--white)}
.panel.ground{background:var(--ground)}
.panel h3{margin-bottom:9px}
.panel p{font-size:14.5px;color:var(--txt2)}
.panel ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--txt2)}
.panel li{display:flex;gap:10px;align-items:flex-start}
.panel li svg{width:15px;height:15px;margin-top:4px;flex:none;fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------- product page */
.prod-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;padding:70px 0}
.prod-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-bottom:20px}
.prod-meta .ref{font:500 12.5px/1 var(--mono);color:var(--txt2);letter-spacing:.04em}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.feat>div{background:var(--white);padding:24px}
.feat h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.feat h3 svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat p{font-size:14.5px;color:var(--txt2)}

.notice{
  border:1px solid var(--wash-line);background:var(--wash);border-radius:14px;
  padding:20px 22px;font-size:14.5px;color:var(--notice-txt);
}
.notice b{color:var(--notice-strong)}
.notice a{color:var(--red);font-weight:700}

/* ------------------------------------------------------------------- contact */
.form{display:grid;gap:16px;max-width:560px}
.field{display:grid;gap:7px}
.field label{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.field .hint{font-size:12.5px;color:var(--txt2);font-weight:500}
.field input,.field select,.field textarea{
  font:16px/1.5 var(--sans);color:var(--txt);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--white);
  transition:border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out);width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--field-hover)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(153,27,27,.12);
}
.field input:invalid:not(:placeholder-shown){border-color:var(--field-bad)}
.form-note{font-size:13.5px;color:var(--txt2);max-width:52ch}

/* --------------------------------------------------------------------- close */
.close{background:var(--ink);color:var(--d-txt);padding:78px 0}
.close h2{color:var(--white)}
.close .close-in{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.close .acts{display:flex;flex-wrap:wrap;gap:11px}

/* -------------------------------------------------------------------- footer */
footer{background:var(--plate);color:var(--d-txt2);padding:56px 0 44px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-txt3);margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a{text-decoration:none;color:var(--d-txt2);transition:color var(--t-ui) var(--ease-out)}
footer a:hover{color:var(--d-txt)}
.foot-brand p{font-size:13.5px;line-height:1.6;max-width:34ch;margin-top:14px;color:var(--d-txt3)}
.foot-brand .brand{color:var(--d-txt)}
.foot-brand .brand .cube{background:#26262C}
.foot-bar{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--d-line-2);
  display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--d-txt3);
}

/* --------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .proof{grid-template-columns:1fr;gap:32px}
  .prod-hero{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .close .close-in{grid-template-columns:1fr;gap:28px}
  .pipe{grid-template-columns:1fr 1fr}
  .pipe-step{border-bottom:1px solid var(--line)}
  .pipe-step:nth-child(2n){border-right:0}
  .pipe-step:last-child{border-bottom:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:860px){
  .menu{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 16px;margin:0;
  }
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line);border-left:0;font-size:16px}
  .menu a:hover{border-bottom-color:var(--line);color:var(--red)}
  .menu a[aria-current="page"]{color:var(--red);border-bottom-color:var(--line)}
  .burger{display:flex}
  .top .right .btn-hide{display:none}
  .plate-top{padding-top:54px;padding-bottom:26px}

  /* the register becomes a stack of records, still ruled, still a register */
  .register,.register tbody,.register tr,.register td{display:block;width:100%}
  .register caption{display:block}
  .register thead{display:none}
  .register tr{padding:20px 0;border-bottom:1px solid var(--line)}
  .register tr:last-child{border-bottom:0}
  .register td{border:0;padding:0}
  .register td+td{margin-top:7px}
  .register .ref{width:auto}
  .register .act{text-align:left;width:auto;margin-top:13px}
  .register tbody tr.is-live{
    background:linear-gradient(90deg,rgba(21,128,61,.085),rgba(21,128,61,0) 82%);
    margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:14px;
  }
  .photo-pair{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
}
@media (max-width:600px){
  /* the header has to hold brand + action + menu on a 360px phone */
  .top-in{gap:12px}
  .brand{font-size:15.5px;gap:9px}
  .brand .cube{width:27px;height:27px;border-radius:8px}
  .top .right{gap:8px}
  .top .right .btn{padding:9px 13px;font-size:13.5px}
  .burger{width:38px;height:36px}
}
@media (max-width:560px){
  .pipe{grid-template-columns:1fr}
  .pipe-step{border-right:0}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .plate-actions .btn,.close .acts .btn{width:100%;justify-content:center}
}

/* Reduced motion: everything stops, including the smooth scroll and the
   burger's rotation. Nothing here depends on motion to be legible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------------- utility */
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:99}
.skip:focus{left:0}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:40px}
.center{text-align:center}
.nowrap{white-space:nowrap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.row-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* ------------------------------------------------------------------- prose */
.prose{max-width:70ch}
.prose h2{margin:44px 0 12px;font-size:clamp(21px,2.2vw,26px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 8px}
.prose p{margin-bottom:14px;color:var(--txt2)}
.prose p b,.prose li b{color:var(--txt)}
.prose ul{list-style:none;margin:0 0 16px;display:flex;flex-direction:column;gap:9px}
.prose ul li{display:flex;gap:11px;color:var(--txt2)}
.prose ul li::before{content:"";width:6px;height:6px;border-radius:3.5px;background:var(--red);flex:none;margin-top:9px;opacity:.55}
.prose a{color:var(--red);font-weight:600}
.prose .updated{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt2);margin-bottom:28px}
.prose dl{margin-bottom:18px}
.prose dt{font-weight:700;margin-top:14px}
.prose dd{color:var(--txt2)}