/* mesa.css — «La mesa de corte» on the pages where the work is done and bought (r1260, 11-11-2026).
   ==========================================================================
   The home (assets/css/home-cut.css, r1210) set the language: ink and paper, one flat colour per material
   (mint for glass, amber for boards, coral for bars), the condensed cut of Archivo (wdth 62, weight 900) for
   figures, pill buttons with a 2.5 px edge, ink edges and hard shadows instead of soft ones. This sheet takes
   that language to the tools. ONLY the pages that link it wear it: a page is skinned by adding
     <link rel="stylesheet" href="/assets/css/mesa.css">
   after base.css, and nothing else. The material colour comes from the page's own body[data-area]
   (glass mint, wood amber, metal coral); a page can name another with --mc-mat on <body>.

   How it is built, so it does not fight base.css:
   - It moves the site's own tokens (--paper, --ink, --glass, --wd, --wt, the opening band's --wb…) to the new
     palette, so everything that already reads a token follows without a rule here.
   - Rules are written with the selectors base.css uses for the same thing (body[data-area] .calc, main > .hero
     :first-of-type, main:has(> #tool #sheets) for the glass optimiser), and this sheet comes after it.
   - No !important: where one appears it answers an !important or an inline style of the page, and says so.
   - Screen only. Print keeps the site's print styles untouched (tools/test/ui-print.mjs).
   - Dark theme: the same language on ink (the home's dark screens): paper edges, the band keeps its colour.
   Contrast (WCAG 2.x, measured): ink #0b0f0e on mint 12.3, on amber 11.0, on coral 6.8, on lilac 9.2, on paper 17.1
   (and the same pairs reversed); --ink-2 #2a3330 on paper 11.5; --ink-3 #4a5450 on paper 7.0, on white 7.9; the link
   green #0f6e56 on paper 5.5, on white 6.2; pass / warn / fail on paper 5.0 / 5.2 / 5.8; the field edge --rule-2
   #848a84 on white 3.53, on --surface-2 3.33, on paper 3.13 (a component's edge needs 3:1). Dark: --ink-3 #b9b6ae on the
   sheet #161d1b 8.5, mint on it 10.9, the field edge #6b7672 on the sheet 3.64, on --surface-2 3.29, on the page 4.10.
   ========================================================================== */
@media screen{
:root{
  --mc-ink:#0b0f0e; --mc-paper:#f4f1ea; --mc-mint:#79e0cc; --mc-amber:#f6b93b; --mc-coral:#ff6b3d; --mc-lilac:#b9a7ff;
  --mc-green:#0f6e56; --mc-indigo:#23236b; --mc-sheet:#161d1b;
  /* the pieces of a cutting plan: the home's five, then three more for a list with many sizes; ink reads on all of them */
  --mc-p0:#79e0cc; --mc-p1:#f6b93b; --mc-p2:#ff6b3d; --mc-p3:#b9a7ff; --mc-p4:#f4f1ea; --mc-p5:#3fb9a3; --mc-p6:#ffd98a; --mc-p7:#ff9d7e;
}
body{
  --mc-mat:var(--mc-mint); --mc-edge:var(--mc-ink); --mc-cut:var(--mc-ink); --mc-on-cut:var(--mc-paper); --mc-focus:var(--mc-ink);
  --paper:#f4f1ea; --paper-2:#e9e5da; --surface:#fff; --surface-2:#faf8f3;
  --ink:#0b0f0e; --ink-2:#2a3330; --ink-3:#4a5450;
  --rule:#d8d3c6; --rule-2:#848a84;
  --glass:#0f6e56; --glass-deep:#0a5241; --glass-tint:#dff5ef; --glass-edge:#3fb9a3;
  --readout:#f4f1ea;
  --r-panel:8px;
  background:var(--paper);
}
body[data-area="wood"]{ --mc-mat:var(--mc-amber); --glass-tint:#fdf0d2; }
body[data-area="metal"]{ --mc-mat:var(--mc-coral); --glass-tint:#ffe6dc; }
/* the area's own tokens (base.css, «the five worlds» and the opening band of r264) in the new palette */
html body[data-area]{ --wd:var(--mc-cut); --wt:var(--paper); --wink:var(--mc-on-cut); --wv:var(--ink);
  --wb:var(--mc-mat); --wb2:var(--mc-mat); --wbi:var(--mc-ink); --wbi2:var(--mc-ink); --wba:var(--mc-ink); }

/* ---------- the opening band: the material's colour, ink on it ---------- */
body[data-area] main > .hero:first-of-type{ color-scheme:light; background:var(--mc-mat); color:var(--mc-ink); border-bottom:4px solid var(--mc-ink);
  --ink:var(--mc-ink); --ink-2:var(--mc-ink); --ink-3:var(--mc-ink); --glass:var(--mc-ink); --glass-deep:var(--mc-ink);
  --surface:transparent; --surface-2:transparent; --rule:rgba(11,15,14,.35); --rule-2:var(--mc-ink); --mc-focus:var(--mc-ink); }
body[data-area] main > .hero:first-of-type > .eyebrow{ display:flex; align-items:center; gap:10px; color:var(--mc-ink); font-weight:700; letter-spacing:.14em; }
body[data-area] main > .hero:first-of-type > .eyebrow::before{ content:""; flex:0 0 26px; height:4px; background:currentColor; }
body[data-area] main > .hero:first-of-type > h1{ font-weight:800; font-stretch:104%; letter-spacing:-.03em; line-height:.96; }
body[data-area] main > .hero:first-of-type > .answer{ background:none; border:0; border-left:4px solid var(--mc-ink); border-radius:0; box-shadow:none; }
body[data-area] main > .hero:first-of-type :is(.answer, .hint, p, li){ color:var(--mc-ink); }
/* «Read more» keeps a 44 px target without making its row taller than the 32 px it had */
body[data-area] main > .hero:first-of-type .sf-more{ color:var(--mc-ink); text-decoration:underline; text-underline-offset:3px; min-height:44px; margin:-2px 0 -6px; }

/* ---------- buttons: pills with a 2.5 px edge (body.hub: the pages where it is bought, which have no area) ---------- */
/* the edge is 1.5 px thicker than the site's: the padding gives it back, so no button grows */
:is(body[data-area], body.hub) main :is(.cta, .btn){ border-radius:999px; border-width:2.5px; font-weight:800; box-shadow:none; }
:is(body[data-area], body.hub) main .cta{ padding-block:10.5px; }
:is(body[data-area], body.hub) main .btn{ padding-block:7.5px; }
:is(body[data-area], body.hub) main .cta.solid,
body[data-area] .calc .cta.solid,
:is(body[data-area], body.hub) main > .hero:first-of-type .cta.solid{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
:is(body[data-area], body.hub) main .cta.ghost{ background:transparent; border-color:var(--mc-edge); color:var(--ink); }
:is(body[data-area], body.hub) main .btn{ border-color:var(--mc-edge); background:var(--surface); color:var(--ink); font-weight:700; min-height:44px; }
@media (hover:hover){
  :is(body[data-area], body.hub) main :is(.cta, .btn):hover{ transform:translateY(-2px); box-shadow:none; }
  :is(body[data-area], body.hub) main .cta.solid:hover,
  :is(body[data-area], body.hub) main > .hero:first-of-type .cta.solid:hover{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); box-shadow:0 4px 0 var(--mc-mat); }
  :is(body[data-area], body.hub) main :is(.cta.ghost, .btn):hover{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
  :is(body[data-area], body.hub) main > .hero:first-of-type .cta.solid:hover{ box-shadow:0 4px 0 rgba(11,15,14,.28); }
}
:is(body[data-area], body.hub) main :is(.cta, .btn):active{ transform:translateY(0) scale(.98); }
/* on a phone a label keeps the one line it had: a lighter cut and less padding at the sides */
@media (max-width:560px){ :is(body[data-area], body.hub) main .cta{ font-weight:700; font-size:.97rem; letter-spacing:-.015em; padding-inline:12px; } }
:is(body[data-area], body.hub) main :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible{ outline:3px solid var(--mc-focus); outline-offset:3px; }
body[data-area] .calc :is(input, select, textarea):focus{ border-color:var(--mc-edge); box-shadow:0 0 0 3px var(--mc-mat); }

/* ---------- the tool: a white sheet with an ink edge and a hard shadow ---------- */
body[data-area] .calc{ border:2.5px solid var(--mc-edge); border-radius:8px; box-shadow:8px 8px 0 var(--mc-edge); background:var(--surface); }
body[data-area] .calc::before{ display:none; }
body[data-area] .calc > .results{ background:var(--paper); border-top:2.5px solid var(--mc-edge); }
body[data-area] legend{ font-weight:800; font-stretch:104%; letter-spacing:-.01em; }
body[data-area] legend::before{ border-radius:0; background:var(--mc-edge); }
body[data-area] .calc :is(input[type=number],input[type=text],input[type=search],input[type=email],select,textarea){ border-radius:6px; border-color:var(--rule-2); }
body[data-area] .seg{ border-color:var(--mc-edge); background:var(--surface); }
body[data-area] .note{ border-radius:6px; }

/* the verdict: ink when it is fine; amber or coral when it is not (the dot and the words still say which) */
body[data-area] .verdict{ border:0; border-radius:6px; box-shadow:none; }
body[data-area] .verdict.ok{ background:var(--mc-cut); color:var(--mc-on-cut); box-shadow:none; }
body[data-area] .verdict.ok :is(strong, small){ color:var(--mc-on-cut); }
body[data-area] .verdict.ok .dot{ background:var(--mc-mint); }
body[data-area] .verdict.ok .dot::after{ color:var(--mc-ink); }
body[data-area] .verdict.warn{ background:var(--mc-amber); box-shadow:none; }
body[data-area] .verdict.no{ background:var(--mc-coral); box-shadow:none; }
body[data-area] .verdict:is(.warn, .no) :is(strong, small){ color:var(--mc-ink); }
body[data-area] .verdict:is(.warn, .no) .dot{ background:var(--mc-ink); }
body[data-area] .verdict:is(.warn, .no) .dot::after{ color:var(--mc-paper); }

/* the figures: the condensed cut, large */
body[data-area] .metrics{ border:2.5px solid var(--mc-edge); border-radius:6px; background:var(--mc-edge); gap:2.5px; }
body[data-area] .metric{ background:var(--surface); padding:14px 16px 13px; }
body[data-area] .metric::before{ display:none; }
body[data-area] .metric .k{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
body[data-area] .metric .v,
body[data-area] .metrics > .metric:first-child .v{ color:var(--ink); font-stretch:62%; font-weight:900; letter-spacing:-.01em; line-height:.9;
  font-size:clamp(2.3rem, 1.6rem + calc(1.6vw / var(--zc,1)), 3.1rem); font-variant-numeric:tabular-nums; margin-top:6px; }
body[data-area] .metric .v .u{ font-stretch:100%; font-weight:700; font-size:.95rem; letter-spacing:0; color:var(--ink-2); }
body[data-area] .metric .bar{ background:var(--paper-2); border-radius:0; }
body[data-area] .metric .bar > span{ background:var(--mc-edge); border-radius:0; }

/* the plans drawn by linearcut-ui.js and panelcut-ui.js (#plan): they write each piece as an inline style on
   --pc0 … --pc7, the track on --surface and the leftovers on --accent-2 / --faint, so the palette and the ink bed
   go in through those variables. The two !important answer the inline fill-opacity and stroke of a piece. */
body[data-area] .calc{ --pc0:var(--mc-p0); --pc1:var(--mc-p1); --pc2:var(--mc-p2); --pc3:var(--mc-p3); --pc4:var(--mc-p4); --pc5:var(--mc-p5); --pc6:var(--mc-p6); --pc7:var(--mc-p7); }
body[data-area] .diagram{ border:2.5px solid var(--mc-edge); border-radius:6px; background:var(--surface); }
body[data-area] #plan svg rect{ --surface:var(--mc-ink); --line-2:var(--mc-ink); --accent-2:var(--mc-paper); --faint:rgba(244,241,234,.62); }
body[data-area] #plan svg rect[style*="--pc"]{ fill-opacity:1 !important; stroke:var(--mc-ink) !important; stroke-width:1.5px; }
body[data-area] #plan svg text[text-anchor="middle"]{ --text:var(--mc-ink); --dim:var(--mc-paper); --surface:transparent; font-weight:700; }
body[data-area] .pc-key .lsw{ border-radius:0; box-shadow:inset 0 0 0 1.5px var(--mc-edge); }
body[data-area] main .btn.primary{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); font-weight:800; }
/* the band carries no drawing: the tool's own plan is right below it, and the title takes the room */
body[data-area] main > .hero:first-of-type::after{ display:none; }
body[data-area] main > .hero:first-of-type > :is(h1, .eyebrow){ max-width:none; }
body[data-area] main > .hero:first-of-type > :is(.answer, p){ max-width:900px; }

/* what sits around the tool */
body[data-area] .pro-note{ background:none; border-top:2.5px solid var(--mc-edge); border-radius:0; padding:14px 0 0; margin-top:26px; color:var(--ink); }
body[data-area] details.sf-sec{ border-top:2.5px solid var(--mc-edge); }
body[data-area] details.sf-sec > summary::after{ border-color:var(--mc-edge); }
body[data-area] details.sf-sec > summary:hover h2{ color:var(--ink); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; }
body[data-area] .prose h2::before{ border-radius:0; background:var(--mc-edge); }
body[data-area] main th{ background:var(--mc-ink); color:var(--mc-paper); }
body[data-area] .rel-grid a{ border:2px solid var(--mc-edge); border-radius:8px; box-shadow:none; }
body[data-area] .rel-grid a:hover{ border-color:var(--mc-edge); box-shadow:5px 5px 0 var(--mc-edge); transform:translate(-2px,-2px); }

/* ---------- the glass cutting optimiser (the pages with #sheets, as base.css r870 picks them) ---------- */
@media (min-width:1100px){
  /* the band does not grow: the title in two lines at most, in the room r870 gave it */
  /* the paddings answer the !important of r870 (the section carries an inline padding) */
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type{ grid-template-columns:minmax(0,1fr) minmax(300px,350px); column-gap:36px; padding-top:12px !important; padding-bottom:10px !important; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > h1{ font-size:clamp(2rem, 1.1rem + calc(1.5vw / var(--zc,1)), 2.6rem); margin-bottom:.24em; max-width:none; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > .eyebrow{ margin-bottom:4px; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > .answer{ padding:2px 14px; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > .cta-row .cta{ min-height:46px; }
}
/* «Read more» keeps a 44 px target without making its row taller */
@media (scripting: enabled){ body[data-area] main:has(> #tool #sheets) > .hero:first-of-type:not(.sf-open):not(.sf-flat) > .answer > .sf-more{ margin:-6px 0; } }
@media (min-width:960px){ body[data-area] main:has(> #tool #sheets) .calc > .results{ border-top:0; border-left:2.5px solid var(--mc-edge); } }
@media (max-width:959px){ main:has(> #tool #sheets) .calc > .results{ border-top:2.5px solid var(--mc-edge); border-bottom:2.5px solid var(--mc-edge); } }
@media (max-width:700px){
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type{ margin-bottom:10px; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > h1{ font-size:1.5rem; line-height:1; }
  body[data-area] main:has(> #tool #sheets) > .hero:first-of-type > .cta-row .cta.ghost{ border-color:transparent; background:none; color:var(--mc-ink); }
  main:has(> #tool #sheets) .cstart-b .cta{ padding-block:6.5px; }
  main:has(> #tool #sheets) .cstart-h strong{ font-weight:700; letter-spacing:-.022em; }
}
/* «Type or paste your sizes»: paper with an ink edge */
#tool :is(.cstart, .cutguide){ background:var(--paper); border:2.5px solid var(--mc-edge); border-radius:6px; }
#tool .cg-n{ background:var(--mc-cut); color:var(--mc-on-cut); }
#tool .cstart-h strong{ font-weight:800; letter-spacing:-.01em; }
#tool .cs-tag{ justify-self:start; background:var(--mc-mat); color:var(--mc-ink); font-weight:700; border-radius:999px; }
/* the plan: the home's colours on an ink bed, every piece with an ink edge. In table mode it stays black on white. */
#tool .sheetbox{ background:var(--surface); border:2.5px solid var(--mc-edge); border-radius:6px; }
#tool .sheetlab{ color:var(--ink-2); }
#tool .sheetlab b{ color:var(--ink); font-weight:800; }
:is(#tool #sheets, .cpfull:not(.mesa)) svg{ --text:var(--mc-ink); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg > rect:first-child{ fill:var(--mc-ink); stroke:var(--mc-ink); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg > rect[stroke-dasharray]{ stroke:var(--mc-paper); stroke-opacity:.45; }
:is(#tool #sheets, .cpfull:not(.mesa)) svg > line{ stroke:var(--mc-ink); stroke-opacity:1; stroke-width:1.5; }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c]{ fill-opacity:1; stroke:var(--mc-ink); stroke-width:2; }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="0"]{ fill:var(--mc-p0); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="1"]{ fill:var(--mc-p1); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="2"]{ fill:var(--mc-p2); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="3"]{ fill:var(--mc-p3); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="4"]{ fill:var(--mc-p4); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="5"]{ fill:var(--mc-p5); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="6"]{ fill:var(--mc-p6); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg rect[data-c="7"]{ fill:var(--mc-p7); }
:is(#tool #sheets, .cpfull:not(.mesa)) svg text{ font-weight:700; }
#sheets .cpf-go{ border:2.5px solid var(--mc-edge); background:var(--surface); color:var(--ink); font-weight:800; box-shadow:none; }
#sheets .cpf-go:focus-visible{ outline:3px solid var(--mc-focus); outline-offset:3px; }
/* full screen: ink, paper edges; the buttons are the same pills */
body > .cpfull{ background:var(--mc-ink); color:var(--mc-paper); }
.cpfull .cpf-bar{ border-bottom:2.5px solid var(--mc-paper); }
.cpfull .cpf-bar button{ border-radius:999px; border:2.5px solid var(--mc-paper); background:transparent; color:var(--mc-paper); font-weight:800; }
.cpfull .cpf-bar .cpf-mesa[aria-pressed="true"]{ background:var(--mc-mint); border-color:var(--mc-mint); color:var(--mc-ink); }
.cpfull .cpf-bar .cpf-close{ background:var(--mc-paper); border-color:var(--mc-paper); color:var(--mc-ink); }
.cpfull :is(.cpf-bar button, .cpf-sc):focus-visible{ outline:3px solid var(--mc-lilac); outline-offset:2px; }
body > .cpfull:not(.mesa) .sheetbox{ background:var(--mc-sheet); border:2px solid var(--mc-paper); border-radius:6px; }
body > .cpfull:not(.mesa) .sheetlab b{ color:var(--mc-mint); }
/* table mode stays black on white, as it was: only its buttons follow */
body > .cpfull.mesa{ background:#fff; color:#000; }
.cpfull.mesa .cpf-bar{ border-bottom-color:#000; }
.cpfull.mesa .cpf-bar button{ border-color:#000; color:#000; }
.cpfull.mesa .cpf-bar :is(.cpf-mesa[aria-pressed="true"], .cpf-close){ background:#000; border-color:#000; color:#fff; }
.cpfull.mesa :is(.cpf-bar button, .cpf-sc):focus-visible{ outline-color:#000; }
/* the cost of the job and the comparison of sheet sizes */
#tool .cutcost{ border:2.5px solid var(--mc-edge); border-radius:6px; background:var(--surface); }
#tool .cutcost h3{ font-weight:800; }
#tool .cut-total strong{ font-stretch:62%; font-weight:900; font-size:1.9rem; line-height:1; letter-spacing:-.01em; }
#tool .sfcmp.cmp-wide{ margin-top:30px; }
#tool .sfcmp .cmp-f{ border:2px solid var(--mc-edge); border-radius:6px; }
#tool .sfcmp tr.cmp-best :is(th, td){ background:var(--mc-mat); color:var(--mc-ink); font-weight:800; }
#tool .sfcmp :is(th, td){ border-bottom-color:var(--mc-edge); }
#tool .sfcmp .cmp-v{ font-weight:800; font-size:1.15rem; }
#tool .sfcmp caption{ font-weight:800; }

/* ---------- dark: the same language on ink ---------- */
@media (prefers-color-scheme: dark){
  body{
    --mc-edge:var(--mc-paper); --mc-cut:var(--mc-paper); --mc-on-cut:var(--mc-ink); --mc-focus:var(--mc-lilac);
    --paper:#0b0f0e; --paper-2:#131917; --surface:#161d1b; --surface-2:#1d2624;
    --ink:#f4f1ea; --ink-2:#dedbd3; --ink-3:#b9b6ae;
    --rule:#2c3633; --rule-2:#6b7672;
    --glass:#79e0cc; --glass-deep:#a5ecdd; --glass-tint:#12332c; --glass-edge:#3fb9a3;
    --readout:#0b0f0e;
  }
  body[data-area="wood"]{ --glass-tint:#33270c; }
  body[data-area="metal"]{ --glass-tint:#3a1a10; }
  /* the band keeps its colour and its ink (base.css turns the band dark here, with this selector) */
  body[data-area]:not([data-area="envelope"]) main > .hero:first-of-type{ color-scheme:light;
    --surface:transparent; --surface-2:transparent; --paper:transparent; --paper-2:transparent; --rule:rgba(11,15,14,.35); --rule-2:var(--mc-ink); }
  body[data-area]:not([data-area="envelope"]) main > .hero:first-of-type .cta.solid,
  body[data-area]:not([data-area="envelope"]) main > .hero:first-of-type .cta.solid:hover{ background:var(--mc-ink); border-color:var(--mc-ink); color:var(--mc-paper); }
  body[data-area] main > .hero:first-of-type .cta.ghost{ border-color:var(--mc-ink); color:var(--mc-ink); }
  body[data-area] .calc{ box-shadow:8px 8px 0 var(--mc-mat); }
  body[data-area] .verdict.ok .dot{ background:var(--mc-ink); }
  body[data-area] .verdict.ok .dot::after{ color:var(--mc-mint); }
  body[data-area] main th{ background:var(--mc-paper); color:var(--mc-ink); }
  body[data-area] .rel-grid a:hover{ box-shadow:5px 5px 0 var(--mc-mat); }
  :is(#tool #sheets, .cpfull:not(.mesa)) svg > rect:first-child{ fill:#000; stroke:var(--mc-paper); }
}
}

/* ---------- r1263: the pricing page (/pricing/ and its five translations) ----------
   The page writes its own styles in its <head>, after this sheet: every rule here starts at body.hub, which
   outranks them. The band is lilac: Pro is for every material, so it takes none of the three. It is painted as
   wide as the window with no layout and nothing to scroll (r1270): its own background and, at its sides, two spread
   box-shadows cut by clip-path: the band's colour, ending 4 px above the foot, over the edge's, ending at the foot. */
@media screen{
body.hub .pz-hero{ padding:22px 0 22px; color:var(--mc-ink); background:linear-gradient(var(--mc-lilac) calc(100% - 4px), var(--mc-edge) 0);
  box-shadow:0 calc(-100vmax - 4px) 0 100vmax var(--mc-lilac), 0 -100vmax 0 100vmax var(--mc-edge); clip-path:inset(0 -100vmax -1px);
  --ink:var(--mc-ink); --ink-2:var(--mc-ink); --ink-3:var(--mc-ink); --glass:var(--mc-ink); --glass-deep:var(--mc-ink); --mc-focus:var(--mc-ink); }
body.hub .pz-hero h1{ color:var(--mc-ink); font-weight:800; font-stretch:104%; letter-spacing:-.03em; line-height:.98; }
body.hub .pz-hero .pz-lead{ color:var(--mc-ink); }
body.hub .pz-chips li{ border:2px solid var(--mc-ink); background:none; color:var(--mc-ink); font-weight:600; }
body.hub .pz-chips svg{ color:var(--mc-ink); }
body.hub .pz-plans{ padding-top:24px; }
/* the three ways: sheets with an ink edge; Pro, the one to buy, carries the hard shadow */
body.hub .pz-plan{ border:2.5px solid var(--mc-edge); border-radius:8px; box-shadow:none; }
body.hub .pz-plan.pz-hi{ border:2.5px solid var(--mc-edge); box-shadow:8px 8px 0 var(--mc-edge); }
body.hub .pz-badge{ background:var(--mc-cut); color:var(--mc-on-cut); font-weight:800; }
body.hub .pz-plan h2, body.hub .pz-plans > .pz-taller h2{ font-weight:800; letter-spacing:-.02em; }
/* the price: the condensed cut, as large as the card allows */
body.hub .pz-plans .pz-price{ font-stretch:62%; font-weight:900; font-size:clamp(4rem, 2.6rem + calc(3vw / var(--zc,1)), 5.4rem); line-height:.82; letter-spacing:-.01em; gap:4px 10px; font-variant-numeric:tabular-nums; }
body.hub .pz-plans .pz-price :is(small, span:not([class])){ font-stretch:100%; font-weight:700; font-size:1rem; line-height:1.2; letter-spacing:0; }
body.hub .pz-pa{ border:2px solid var(--mc-edge); border-radius:6px; background-color:var(--paper);
  background-image:linear-gradient(rgba(11,15,14,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,14,.07) 1px,transparent 1px); }
body.hub .pz-plans .pz-inc{ border-top:2.5px solid var(--mc-edge); }
body.hub .pz-inc > summary::after, body.hub .pz-faq summary::after{ color:var(--ink); font-weight:700; }
body.hub .pz-inc > summary:focus-visible{ outline:3px solid var(--mc-focus); outline-offset:2px; }
body.hub .pz-list li::before{ background:var(--mc-mint); }
body.hub .pz-list li::after{ border-color:var(--mc-ink); }
/* the Plan Taller's card: indigo, as its own page */
body.hub .pz-plans > .pz-taller{ background:var(--mc-indigo); color:var(--mc-paper); border:2.5px solid var(--mc-edge); border-radius:8px; box-shadow:none; --mc-focus:var(--mc-mint); }
body.hub .pz-plans > .pz-taller .pz-k{ color:var(--mc-mint); font-weight:700; letter-spacing:.14em; }
body.hub .pz-plans > .pz-taller :is(h2, .pz-price){ color:var(--mc-paper); }
body.hub .pz-plans > .pz-taller :is(p, .pz-price small, .pz-price span){ color:var(--mc-paper); }
body.hub .pz-plans > .pz-taller .cta{ background:var(--mc-mint); border-color:var(--mc-mint); color:var(--mc-ink); }
body.hub .pz-plans > .pz-taller .pz-pa{ border-color:var(--mc-paper); }
body.hub .pz-plans > .pz-taller p.sf-guar::before{ border-color:var(--mc-mint); }
/* below the first screen: ink edges instead of soft shadows, the figures condensed */
body.hub :is(.pz-sec, .pz-pics, .pc-calc) > h2{ font-weight:800; letter-spacing:-.025em; }
body.hub :is(.pz-pic, .pz-step, .pz-flow, .pz-cmp, .pz-stat, .pz-faq details){ border:2px solid var(--mc-edge); border-radius:8px; box-shadow:none; }
body.hub .pz-doc{ border:2px solid var(--mc-ink); border-radius:4px; box-shadow:6px 6px 0 var(--mc-edge); }
body.hub :is(.pz-art, .pz-flow-art){ background-color:var(--paper);
  background-image:linear-gradient(rgba(11,15,14,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,14,.07) 1px,transparent 1px); border-bottom:2px solid var(--mc-edge); }
body.hub .pz-stat{ background:var(--surface); }
body.hub .pz-stat b{ font-stretch:62%; font-weight:900; font-size:clamp(3.2rem, 2.4rem + calc(2vw / var(--zc,1)), 4.4rem); line-height:.85; color:var(--ink); }
body.hub :is(.pz-step .n, .pz-steps b, .pz-tag.pro, .pz-fp .p b){ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
body.hub .pz-steps li::before{ background:var(--mc-edge); }
body.hub .pz-steps li + li{ border-left:2px solid var(--mc-edge); }
body.hub .pz-cmp tr.us > *{ background:var(--mc-lilac); color:var(--mc-ink); font-weight:700; }
body.hub .pz-cmp tr.us th{ box-shadow:inset 5px 0 0 var(--mc-ink); }
body.hub .pz-cmp tr.us a{ color:var(--mc-ink); }
body.hub .pz-cmp :is(th, td){ border-bottom-color:var(--mc-edge); }
body.hub .pc-calc-t th{ background:var(--mc-cut); color:var(--mc-on-cut); }
body.hub .pc-calc-t tbody th{ background:none; color:var(--ink); }
/* the last band: ink, the buttons the other way round */
body.hub .pz-final{ border-radius:8px; background:var(--mc-ink); color:var(--mc-paper);
  --ink:var(--mc-paper); --ink-2:var(--mc-paper); --ink-3:#d3d0c8; --glass:var(--mc-mint); --glass-deep:var(--mc-mint); --rule-2:var(--mc-paper);
  --mc-cut:var(--mc-paper); --mc-on-cut:var(--mc-ink); --mc-edge:var(--mc-paper); --mc-focus:var(--mc-lilac); }
body.hub .pz-final h2{ color:var(--mc-paper); font-weight:800; letter-spacing:-.025em; }
body.hub .pz-final :is(p, small, label){ color:var(--mc-paper); }
@media (max-width:700px){ body.hub .pz-plans > .pz-taller .pz-pa, body.hub .pz-pa{ border-width:1.5px; } body.hub .pz-cmp tr.us{ background:var(--mc-lilac); box-shadow:inset 5px 0 0 var(--mc-ink); } }
@media (prefers-color-scheme: dark){
  body.hub .pz-plan.pz-hi{ box-shadow:8px 8px 0 var(--mc-lilac); }
  body.hub .pz-pa, body.hub :is(.pz-art, .pz-flow-art){ background-image:linear-gradient(rgba(244,241,234,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.08) 1px,transparent 1px); }
  body.hub .pz-doc{ box-shadow:6px 6px 0 var(--mc-lilac); }
  body.hub .pz-final{ background:var(--mc-paper); color:var(--mc-ink);
    --ink:var(--mc-ink); --ink-2:var(--mc-ink); --ink-3:#2a3330; --glass:var(--mc-green); --glass-deep:var(--mc-green); --rule-2:var(--mc-ink);
    --mc-cut:var(--mc-ink); --mc-on-cut:var(--mc-paper); --mc-edge:var(--mc-ink); --mc-focus:var(--mc-indigo); }
  body.hub .pz-final h2, body.hub .pz-final :is(p, small, label){ color:var(--mc-ink); }
}
}

/* ---------- r1264: the Plan Taller's page (/pricing/taller/ and its five translations) ----------
   The band is indigo with paper ink, the colour of its card on the pricing page. The page has no element around
   its opening lines, so the eyebrow, the title and the lead each paint their own strip as wide as the window
   (a spread box-shadow cut by clip-path) and sit flush, each reaching 1 px under the next; the lead closes it with the edge.
   Its styles are in its <head>, after this sheet: every rule starts at body.hub .tl, which outranks them. */
@media screen{
body.hub .tl{ padding-top:0; --tl-b:var(--mc-indigo); }
body.hub .tl > :is(.eyebrow, h1, .tl-lead){ margin:0; color:var(--mc-paper); background:var(--tl-b); box-shadow:0 0 0 100vmax var(--tl-b); clip-path:inset(0 -100vmax -1px); }
body.hub .tl > .eyebrow{ display:flex; align-items:center; gap:10px; padding:30px 0 12px; color:var(--mc-mint); font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
body.hub .tl > .eyebrow::before{ content:""; flex:0 0 26px; height:4px; background:currentColor; }
/* the name of the plan as one of the home's giant words */
body.hub .tl > h1{ padding:0 0 16px; font-stretch:62%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.8;
  font-size:clamp(4rem, 2rem + calc(9vw / var(--zc,1)), 8rem); text-wrap:balance; }
body.hub .tl > .tl-lead{ padding:0 0 30px; margin-bottom:24px; background:linear-gradient(var(--tl-b) calc(100% - 4px), var(--mc-edge) 0);
  box-shadow:0 calc(-100vmax - 4px) 0 100vmax var(--tl-b), 0 -100vmax 0 100vmax var(--mc-edge); clip-path:inset(-1px -100vmax -1px); }
/* the title covers the first pixel of the lead, where its antialiased clip would let the lower shadow show */
body.hub .tl > h1{ position:relative; z-index:1; }
body.hub .tl > .tl-lead b{ color:var(--mc-mint); }
/* the offer in three facts: sheets with an ink edge, their headline condensed */
body.hub .tl-facts li{ border:2.5px solid var(--mc-edge); border-radius:8px; background:var(--surface); }
body.hub .tl-facts b{ font-stretch:62%; font-weight:900; font-size:1.9rem; line-height:.95; letter-spacing:-.005em; margin-bottom:8px; }
/* the price is the first of the three, and the largest */
body.hub .tl-facts li:first-child b{ font-size:3rem; line-height:.86; }
body.hub .tl-list li::before{ background:var(--mc-mint); }
body.hub .tl-list li::after{ border-color:var(--mc-ink); }
/* where it is bought, and the price again further down: the hard shadow in the plan's colour */
body.hub :is(.tl-box, .tl-price){ border:2.5px solid var(--mc-edge); border-radius:8px; box-shadow:8px 8px 0 var(--tl-b); }
body.hub .tl-box h2, body.hub .tl-sec h2{ font-weight:800; letter-spacing:-.025em; }
body.hub .tl-price .tl-big b{ display:inline-block; font-stretch:62%; font-weight:900; font-size:clamp(5rem, 3rem + calc(6vw / var(--zc,1)), 7.4rem); line-height:.8; letter-spacing:-.01em; margin-right:12px; font-variant-numeric:tabular-nums; }
body.hub .tl-step{ border:2px solid var(--mc-edge); border-radius:8px; }
body.hub .tl-n{ background:var(--mc-cut); color:var(--mc-on-cut); }
@media (prefers-color-scheme: dark){
  body.hub :is(.tl-box, .tl-price){ box-shadow:8px 8px 0 var(--mc-mint); }
}
}

/* ---------- r1265: the glaziers' page (/for-glaziers/ and its five translations) ----------
   The band is mint, glass's colour, as wide as the window (a spread box-shadow cut by clip-path, r1270). The page
   writes its styles in its <head>, after this sheet: every rule starts at body, one element more than the page's
   own, so it outranks them (the English and Spanish pages are body.hub, the other four body[data-area="glass"]). */
@media screen{
body .cr-hero{ padding:34px 0 34px; color:var(--mc-ink); background:linear-gradient(var(--mc-mint) calc(100% - 4px), var(--mc-edge) 0);
  box-shadow:0 calc(-100vmax - 4px) 0 100vmax var(--mc-mint), 0 -100vmax 0 100vmax var(--mc-edge); clip-path:inset(0 -100vmax -1px);
  --ink:var(--mc-ink); --ink-2:var(--mc-ink); --ink-3:var(--mc-ink); --glass:var(--mc-ink); --glass-deep:var(--mc-ink); --surface:transparent; --rule-2:var(--mc-ink);
  --mc-cut:var(--mc-ink); --mc-on-cut:var(--mc-paper); --mc-edge:var(--mc-ink); --mc-focus:var(--mc-ink); }
body .cr-hero .eyebrow{ display:flex; align-items:center; gap:10px; color:var(--mc-ink); font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
body .cr-hero .eyebrow::before{ content:""; flex:0 0 26px; height:4px; background:currentColor; }
body .cr-hero h1{ color:var(--mc-ink); font-weight:800; font-stretch:104%; letter-spacing:-.03em; line-height:.96; }
body .cr-hero :is(.cr-lead, .cr-offer){ color:var(--mc-ink); }
body .cr-chips li{ border:2px solid var(--mc-ink); background:none; color:var(--mc-ink); font-weight:600; }
body .cr-phone{ background:var(--mc-ink); box-shadow:10px 10px 0 var(--mc-ink); }
/* the sections: ink edges instead of soft shadows */
body .cr-sec > h2{ font-weight:800; letter-spacing:-.025em; }
body :is(.cr-grid li, .cr-tool, .cr-price > div, .cr-faq details, .cr-step){ border:2px solid var(--mc-edge); border-radius:8px; box-shadow:none; }
body .cr-price > div{ background:var(--surface); }
body .cr-price b{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
body .cr-tool{ transition:transform .18s ease, box-shadow .18s ease; }
body .cr-tool:hover{ border-color:var(--mc-edge); box-shadow:5px 5px 0 var(--mc-edge); transform:translate(-2px,-2px); }
body .cr-tool :is(svg, span){ color:var(--ink); }
body .cr-tool h3{ font-weight:800; }
body .cr-paper img{ border:2px solid var(--mc-edge); border-radius:8px; }
body .cr-points li::before{ background:var(--mc-mint); }
body .cr-points li::after{ border-color:var(--mc-ink); }
body .cr-n{ background:var(--mc-cut); color:var(--mc-on-cut); }
body .cr-faq summary::after{ color:var(--ink); font-weight:700; }
/* the last band: ink, the button the other way round */
body .cr-final{ border-radius:8px; background:var(--mc-ink); color:var(--mc-paper);
  --ink:var(--mc-paper); --ink-2:var(--mc-paper); --ink-3:#d3d0c8; --glass:var(--mc-mint); --glass-deep:var(--mc-mint);
  --mc-cut:var(--mc-paper); --mc-on-cut:var(--mc-ink); --mc-edge:var(--mc-paper); --mc-focus:var(--mc-lilac); }
body .cr-final h2{ color:var(--mc-paper); font-weight:800; letter-spacing:-.025em; }
body .cr-final p{ color:var(--mc-paper); }
@media (prefers-reduced-motion: reduce){ body .cr-tool{ transition:none; } }
@media (prefers-color-scheme: dark){
  body .cr-final{ background:var(--mc-paper); color:var(--mc-ink);
    --ink:var(--mc-ink); --ink-2:var(--mc-ink); --ink-3:#2a3330; --glass:var(--mc-green); --glass-deep:var(--mc-green);
    --mc-cut:var(--mc-ink); --mc-on-cut:var(--mc-paper); --mc-edge:var(--mc-ink); --mc-focus:var(--mc-indigo); }
  body .cr-final h2, body .cr-final p{ color:var(--mc-ink); }
}
}

/* ---------- r1266: the panel cutting optimiser (the pages with #pcRows: /wood/panel-cutting-optimiser/ and its five
   translations) ----------
   Not a redesign (the page is being redone elsewhere): only what broke under the skin. The paddings of the band
   answer the !important of the page (html …); the banded edge answers the inline stroke of panelcut-ui.js. */
@media screen{
@media (min-width:1100px){
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type{ padding-top:13px !important; padding-bottom:11px !important; }
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type > h1{ margin-bottom:.26em; max-width:none; }
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type > .answer{ padding:1px 14px; max-width:min(960px,80%); }
}
@media (max-width:700px){
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type{ padding-top:8px !important; padding-bottom:6px !important; margin-bottom:10px; }
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type > h1{ font-size:1.4rem; line-height:1.02; margin-bottom:.22em; }
  html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type > .answer{ padding:0 12px; }
}
/* «Read more» keeps its 44 px target without making the band taller */
@media (scripting: enabled){ html body[data-area] main:has(#pcRows):has(#pcPaste) > .hero:first-of-type:not(.sf-open):not(.sf-flat) > .answer > .sf-more{ margin:-6px 0; } }
/* the plan: name, size and grain mark of a piece in ink; a banded edge as a thick ink line */
body[data-area] #plan .sheet svg{ --warn:var(--mc-ink); }
body[data-area] #plan .sheet svg text{ --text:var(--mc-ink); --dim:var(--mc-ink); --surface:transparent; font-weight:700; }
body[data-area] #plan .sheet svg .pc-eb{ stroke:var(--mc-ink) !important; stroke-width:4.2px !important; }
/* the edges of one row: a banded side says so with the material's colour */
body[data-area] .pcr-e .btn{ border-radius:8px; }
body[data-area] .pcr-e .btn[aria-pressed=true]{ background:var(--mc-mat); border-color:var(--mc-edge); color:var(--mc-ink); box-shadow:none; }
@media (prefers-color-scheme: dark){
  body[data-area] #plan .sheet svg > rect:first-child{ --surface:#000; --line-2:var(--mc-paper); }
}
}

/* ---------- r1268: the pricing link in the header, on the pages that wear this sheet ----------
   A green pill in base.css (901 px up; EN, ES, DE, FR): here ink with paper words, 17.1:1, the same size. */
@media screen{
@media (min-width:901px){
  .site-head .nav a:is([href="/pricing/"], [href="/es/precios/"], [href="/de/preise/"], [href="/fr/tarifs/"]){ background:var(--mc-cut); color:var(--mc-on-cut); }
  .site-head .nav a:is([href="/pricing/"], [href="/es/precios/"], [href="/de/preise/"], [href="/fr/tarifs/"]):hover{ background:var(--mc-cut); color:var(--mc-on-cut); box-shadow:0 3px 0 var(--mc-mat); }
  .site-head .nav a:is([href="/pricing/"], [href="/es/precios/"], [href="/de/preise/"], [href="/fr/tarifs/"]):focus-visible{ outline:3px solid var(--mc-focus); outline-offset:3px; }
}
}

/* ---------- r1269: the drawings of the pricing page (tools/pricing-pics.cjs draws them in this palette) ----------
   Flat, with ink edges: the soft shadow the page gives them goes. They are ink on paper, so in the dark theme their
   tile stays paper (an ink arrow on an ink tile would not be seen). */
@media screen{
body.hub :is(.pz-art, .pz-flow-art, .pz-pa) svg{ filter:none; }
@media (prefers-color-scheme: dark){
  body.hub .pz-pa, body.hub :is(.pz-art, .pz-flow-art){ background-color:var(--mc-paper);
    background-image:linear-gradient(rgba(11,15,14,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,14,.07) 1px,transparent 1px); }
}
}

/* ---------- r1271: the area page of the cutting tools (/cutting/ and /es/corte/) ----------
   The door to the three optimisers: an ink band with paper words, and each group in its material's colour. The page
   loads worlds.css after this sheet: every rule starts at body.hub.section, which outranks it, and the band is
   recoloured through the variables of worlds.css. Contrast on ink: paper 17.1, #d3d0c8 12.5, mint 12.3. */
@media screen{
body.hub.section .hubw.world-hero{ --w:var(--mc-ink); --wi:var(--mc-paper); --wi2:#d3d0c8; --wa:var(--mc-mint); --wl:var(--mc-paper); --wc:rgba(244,241,234,.12);
  color-scheme:dark; background:var(--mc-ink); border-bottom:4px solid var(--mc-edge); --mc-focus:var(--mc-lilac); }
body.hub.section .hubw .world-kicker{ font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; font-stretch:100%; }
body.hub.section .hubw .world-kicker i{ width:26px; height:4px; border-radius:0; }
body.hub.section .hubw h1{ font-weight:800; font-stretch:104%; letter-spacing:-.03em; line-height:.96; }
body.hub.section .hubw .jump a{ min-height:44px; padding:7px 16px; border-radius:999px; box-shadow:inset 0 0 0 2.5px var(--mc-paper); font-weight:700; color:var(--mc-paper); }
body.hub.section .hubw .jump a:hover{ background:var(--mc-paper); color:var(--mc-ink); box-shadow:inset 0 0 0 2.5px var(--mc-paper); transform:translateY(-2px); }
body.hub.section .hubw :is(a, button):focus-visible{ outline:3px solid var(--mc-lilac); outline-offset:3px; }
body.hub.section .hubw-shot img{ border:2.5px solid var(--mc-paper); border-radius:6px; box-shadow:8px 8px 0 var(--mc-amber); }
body.hub.section .tgroup{ --tg:var(--mc-edge); }
body.hub.section #g-sheet{ --tg:var(--mc-amber); }
body.hub.section #g-glass{ --tg:var(--mc-mint); }
body.hub.section #g-bars{ --tg:var(--mc-coral); }
body.hub.section .tgroup > h2{ font-weight:800; letter-spacing:-.025em; }
body.hub.section .tgroup > h2::before{ width:10px; border-radius:0; background:var(--tg); box-shadow:inset 0 0 0 2px var(--mc-edge); }
body.hub.section .titem{ border:2px solid var(--mc-edge); border-radius:8px; box-shadow:none; }
body.hub.section .titem.feat{ background:var(--surface); box-shadow:6px 6px 0 var(--tg); }
body.hub.section .titem > div > b{ font-weight:800; }
body.hub.section .titem > div > em{ border:1.5px solid var(--mc-edge); border-radius:6px; background:var(--paper); }
body.hub.section .titem > div > em > i{ color:var(--ink-2); }
body.hub.section .titem:focus-visible{ outline:3px solid var(--mc-focus); outline-offset:3px; }
@media (hover:hover){
  body.hub.section .titem:hover{ border-color:var(--mc-edge); box-shadow:5px 5px 0 var(--mc-edge); transform:translate(-2px,-2px); }
  body.hub.section .titem.feat:hover{ box-shadow:8px 8px 0 var(--tg); }
}
}