/* ------------------------------------------------------------------
   OFFER SHEET — shared stylesheet

   One machine, one page: a document meant to be read and printed rather
   than a web page to be scanned. Every usato-*.html links this after
   css/tokens.css and before its own <style>, so a page only carries the
   handful of rules that are its own.

   It was inline in usato-bmb-kw3500-68000.html until there were three
   sheets to keep in step. The print rules in particular are worth having
   in one place: tools/make-offer-pdf.mjs renders through them, so a
   change here changes every generated PDF.
------------------------------------------------------------------- */

:root{
  /* This sheet is a document meant to be read and printed, not a web
     page to be scanned, so it keeps a narrower measure than the rest of
     the site. That is the one deliberate departure from the tokens. */
  --maxw:1080px;
  --confirm-bg:#fff7e6;--confirm-border:#f0d38a;--confirm-text:#7a5c00;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition-duration:.01ms !important;} }
body{margin:0;font-family:var(--font-body);color:var(--charcoal);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px;}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;text-wrap:balance;}
p{margin:0 0 1em;color:var(--gray);text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.6em;}
/* justify-content:center — the other pages have it and this one did not,
   so a short label sat against the left padding while the long one beside
   it filled the button and read as centred. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.6em;border-radius:var(--r-btn);font-weight:700;font-size:.92rem;border:2px solid transparent;cursor:pointer;
  transition:translate .22s var(--ease), box-shadow .22s var(--ease), background-color .18s ease, color .18s ease;}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(241,101,34,.28);}
.btn-primary:hover{background:var(--orange-dark);translate:0 -2px;box-shadow:0 10px 22px rgba(241,101,34,.36);}
.btn-dark{border-color:var(--charcoal);color:var(--charcoal);background:none;}
.btn-dark:hover{background:var(--charcoal);color:#fff;translate:0 -2px;}
/* the same green as every other page — the token is in css/tokens.css */
.btn-wa{background:var(--wa);color:#06301c;box-shadow:0 6px 18px rgba(37,211,102,.32);}
.btn-wa:hover{background:#1fbe5b;translate:0 -2px;}
@media (prefers-reduced-motion: reduce){ .btn:hover{translate:0 0;} }

/* top bar */
.topbar{background:var(--charcoal);color:#fff;font-size:.82rem;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:48px;}
.topbar a.back{color:rgba(255,255,255,.75);font-weight:600;}
.topbar a.back:hover{color:#fff;}
/* The switcher is the shared one from css/i18n.css, in its .on-dark variant
   for this bar. It used to be styled separately here, which made the same
   control look like a different control depending on the page. */

header.pagehead{border-bottom:1px solid var(--border);padding:1.1em 0;}
header.pagehead .wrap{display:flex;align-items:center;gap:.6em;}
.logo-img{height:42px;width:auto;display:block;}

/* hero — dark ground and spacing are shared; the photograph and the scrim
   over it are declared by each sheet, in its own <style>.

   That split is not arbitrary. A url() is resolved against the stylesheet
   that writes it, so "img/x.jpg" written here means css/img/x.jpg, and
   routing it through a custom property does not move the resolution to the
   page either. The photograph therefore has to be written where the page is,
   and the gradients travel with it so the whole background stack stays in
   one declaration. */
.offer-hero{background:var(--charcoal);color:#fff;padding:4.5em 0 3em;}
.offer-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);max-width:22ch;}
.offer-hero .meta{color:rgba(255,255,255,.75);font-size:.95rem;margin-bottom:1.4em;}
.price-block{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1em;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);
  padding:1.3em 1.6em;margin-top:1em;
}
.price-block .amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700;}
.price-block .amount small{display:block;font-size:.7rem;font-weight:500;color:rgba(255,255,255,.65);font-family:var(--font-body);letter-spacing:.03em;}
/* A machine quoted on request puts a sentence where the figure goes. The
   tabular mono above is sized for digits, so it takes the text face a size
   down — same treatment as the card on the home page. */
.price-block .amount.on-request{font-family:var(--font-display);font-size:1.35rem;letter-spacing:0;}
/* On this page each button ships four times, one per language, wrapped in a
   .lang-stack — so the flex items here are the stacks, not the buttons. Size
   the stacks, then let the button fill the stack it sits in. */
.hero-actions > *, .contact-actions > *{flex:1 1 190px;}
.hero-actions .lang-stack > .btn, .contact-actions .lang-stack > .btn{width:100%;}
/* Both actions the same height. The orange one runs to two lines in three
   of the four languages and the download stayed one, so side by side they
   sat at different heights. The row stretches its children, each stack
   fills the row, and the button fills its stack. */
/* No height:100% on the stack — an explicit height is exactly what stops
   align-items:stretch working, which is what went wrong the first time.
   Let the row stretch the stack, then the grid stretches the button. */
.hero-actions .lang-stack > .btn, .contact-actions .lang-stack > .btn{height:100%;text-align:center;}
.hero-actions, .contact-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:.8em;max-width:520px;}
.hero-actions{margin-top:1.3em;}
/* The two ways to answer sit centred under the three offices, so they read as
   the section's conclusion rather than as another item in the left column. */
.contact-actions{margin:2.2em auto 0;justify-content:center;}

.quickspecs{background:var(--bg-alt);border-bottom:1px solid var(--border);}
.quickspecs .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;padding:1.6em var(--gutter);}
.quickspecs div{text-align:center;}
.quickspecs b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.25rem;color:var(--charcoal);}
.quickspecs span{font-size:.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;}
/* The other three values are numbers, which is what the tabular mono above
   is for. This one is a phrase, and mono is wide enough that it would not
   fit half a 320px screen — so it takes the text face instead, and balances
   its own line break if it ever needs one. Uppercase comes from here, not
   the markup, so the sentence stays readable to a screen reader. */
.quickspecs .qs-text b{font-family:var(--font-display);font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.15;text-wrap:balance;}
/* The values are no longer all the same size or the same face, so give each
   one the same box and centre it there: the four labels underneath then
   start at the same y and the row reads as one line of figures. */
.quickspecs .wrap > div > b{min-height:2rem;line-height:1.2;
  display:flex;align-items:center;justify-content:center;}
.quickspecs .qs-text > .lang-stack{min-height:2rem;align-items:center;}
/* The label under it is one plain span, not a stack of four translations, so
   it stays inline and sits on the cell's own larger line box — 6px below the
   stacked labels in the cells beside it. (.lang-stack keeps its grid: that
   rule carries !important.) */
.quickspecs .qs-text > span{display:block;}
/* two columns from here down, so the cell is half a phone wide — a size
   down keeps the longest of the four ("ROBOT INCLUDED") on one line */
@media (max-width:700px){
  .quickspecs .qs-text b{font-size:.95rem;letter-spacing:.01em;}
}
@media (max-width:700px){.quickspecs .wrap{grid-template-columns:repeat(2,1fr);}}

section{padding:var(--sec) 0;}
.alt{background:var(--bg-alt);}
.section-head{max-width:640px;margin-bottom:2em;}
.section-head h2{font-size:1.55rem;}

.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;list-style:none;padding:0;margin:0 0 1.2em;}
.app-grid li{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:1.1em 1.2em;font-weight:600;font-size:.92rem;}
@media (max-width:800px){.app-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.app-grid{grid-template-columns:1fr;}}
.note{font-size:.82rem;color:var(--gray-light);font-style:italic;}

.offer-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.offer-table tr:nth-child(even){background:var(--bg-alt);}
.offer-table tr:not(:last-child) td{border-bottom:1px solid var(--border);}
.offer-table td{padding:1em 1.3em;vertical-align:top;}
.offer-table td:first-child{font-weight:700;width:38%;color:var(--charcoal);}
.offer-table td:last-child{color:var(--gray);}
/* see the note on table.spec in toyo-modello.html — same problem, same cure:
   on a very narrow phone this table is wider than the viewport and drags the
   page with it, so the padding tightens and long values are allowed to break */
@media (max-width:420px){
  .offer-table{font-size:.9rem;}
  .offer-table td{padding:.8em .6em;overflow-wrap:anywhere;}
  .offer-table td:first-child{width:42%;}
}
.confirm-badge{
  display:inline-block;margin-top:.4em;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  background:var(--confirm-bg);color:var(--confirm-text);border:1px solid var(--confirm-border);
  padding:.2em .55em;border-radius:var(--r-sm);text-transform:uppercase;
}
.offer-note{background:var(--confirm-bg);border:1px solid var(--confirm-border);color:var(--confirm-text);
  font-size:.85rem;padding:1em 1.2em;border-radius:var(--r-btn);margin-top:1.4em;}

.pack-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.pack-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);padding:.6em .8em;border-bottom:2px solid var(--charcoal);}
.pack-table td{padding:.9em .8em;border-bottom:1px solid var(--border);}
.pack-table td:first-child{font-family:var(--font-mono);font-weight:700;width:64px;}
.pack-wrap{overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);}
.pack-table tbody tr:nth-child(even){background:var(--bg-alt);}

.spec-tables{display:grid;grid-template-columns:1fr 1fr;gap:2em;margin-bottom:2.2em;}
.spec-tables table{width:100%;border-collapse:collapse;font-size:.88rem;}
.spec-tables caption{text-align:left;font-weight:800;color:var(--orange);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6em;}
.spec-tables td{padding:.5em .2em;border-bottom:1px solid var(--border);}
.spec-tables td:last-child{text-align:right;font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
@media (max-width:800px){.spec-tables{grid-template-columns:1fr;}}

.feature-list{columns:2;gap:2em;padding-left:1.1em;font-size:.88rem;color:var(--gray);}
.feature-list li{margin-bottom:.5em;break-inside:avoid;}
@media (max-width:700px){.feature-list{columns:1;}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-btn);box-shadow:var(--shadow-sm);cursor:zoom-in;transition:scale .35s var(--ease), box-shadow .35s var(--ease);}
.gallery img:hover{scale:1.04;box-shadow:var(--shadow-md);}
@media (prefers-reduced-motion: reduce){ .gallery img:hover{scale:1;} }
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* The gallery closes the sheet rather than sitting beside the applications
   copy: two columns of large photographs, up to eight, so the machine is
   read from the pictures at the end instead of glanced at in thumbnails
   halfway up. In the PDF that puts it on the last pages. */
.gallery-full{grid-template-columns:repeat(2,1fr);gap:1.2em;}
.gallery-full img{aspect-ratio:4/3;border-radius:var(--r-md);}
@media (max-width:600px){.gallery-full{grid-template-columns:1fr;}}

/* Three offices, three equal columns across the measure rather than three
   blocks pushed together on the left — the addresses are different lengths,
   so a flex row left them unevenly spaced and reading as one paragraph.
   They collapse to one column when a column would be narrower than an
   address line. */
.offices-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6em;
  margin:2.2em 0 2.6em;}
.offices-mini div{font-size:.85rem;}
.offices-mini b{display:flex;align-items:center;gap:.4em;font-size:.78rem;margin-bottom:.25em;}
@media (max-width:760px){
  .offices-mini{grid-template-columns:1fr;gap:1.4em;}
}
img.fl{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;object-fit:cover;}

footer.pagefoot{background:var(--charcoal);color:rgba(255,255,255,.55);padding:2em 0;font-size:.78rem;}
footer.pagefoot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em;}

.lightbox{position:fixed;inset:0;background:rgba(8,8,9,.94);z-index:1000;display:none;align-items:center;justify-content:center;padding:4vh 4vw;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:var(--r-sm);}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;}

/* the [lang] hiding rules and .lang-stack now come from css/i18n.css */

.internal-link{opacity:.55;font-size:.7rem;}

@media print{
  /* keep the artwork: this PDF is sent to buyers, not used as an ink-saving printout */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  .topbar, .lightbox, .hero-actions, .internal-link{display:none !important;}
  /* Letter, to agree with the `format` tools/make-offer-pdf.mjs passes to
     page.pdf() — the generator's setting wins for the committed files, but
     this is what a browser's own Ctrl-P uses, and the two disagreeing is
     how a sheet ends up paginated differently depending on who printed it. */
  @page{size:letter;margin:12mm 10mm;}
  section{padding:1.6em 0;}
  .offer-hero{padding:2.4em 0 2em;}
  .offer-hero h1{font-size:1.7rem;}
  /* What may and may not be split across a page.

     Keeping a whole table together sounds right and is what this used to
     do, but the terms table is 596px, the specification pair 672px and the
     packing list 430px: a block that size rarely fits in what is left of a
     page, so it jumped to the next one whole and left most of a page blank
     behind it. Six pages came out of four pages of content.

     A table may break between its rows — that is what page breaks are for.
     Only a row is indivisible, and a header repeats at the top of each
     page the table continues onto so the columns stay readable. */
  .price-block, .app-grid li, .offer-note, .quickspecs{
    break-inside:avoid;page-break-inside:avoid;}
  /* A Letter page inside its margins is about 768px, so the strip keeps its
     four columns but each cell is only ~157px — the same squeeze the phone
     gets, and it takes the same size down to stay on one line. */
  .quickspecs .qs-text b{font-size:.95rem;letter-spacing:.01em;}
  tr{break-inside:avoid;page-break-inside:avoid;}
  thead{display:table-header-group;}
  tfoot{display:table-footer-group;}
  /* A heading never sits alone at the foot of a page — and the eyebrow above
     it counts as part of the heading. break-after:avoid keeps the block with
     what follows it but says nothing about splitting the block itself, which
     is how "PROSSIMI PASSI" ended up stranded on the page before its own
     title. */
  .section-head{break-inside:avoid;page-break-inside:avoid;}
  .section-head, h1, h2, h3, h4{break-after:avoid;page-break-after:avoid;}
  p, li{orphans:3;widows:3;}
  #specs{break-before:page;page-break-before:always;}
  /* The page is narrow enough to trip the one-column breakpoint, but on paper
     three short columns cost nothing and stacking them pushes the footer onto
     a sixth page. Keep the row, tighten the gutter. */
  .offices-mini{grid-template-columns:repeat(3,1fr);gap:1.2em;margin:1.4em 0 1.6em;}
  .contact-actions{margin-top:1.4em;}
  /* The photographs close the document and fill whatever is left of the page
     they start on. Forcing them onto a page of their own sounds tidier and
     is not: the specification list rarely ends near a page foot, so the
     break left two thirds of a page white in a document sent to a buyer.
     Only the individual photographs are indivisible. */
  .gallery-full{grid-template-columns:repeat(2,1fr);gap:1em;}
  .gallery-full img{break-inside:avoid;page-break-inside:avoid;}
  .gallery img{box-shadow:none;}
  /* On screen a button's coloured glow reads as depth. Print has no blur to
     spend it on: Chromium flattens the shadow into a translucent slab wider
     than the button, so the two of them overlapped each other and washed into
     the footer band underneath. The buttons still work in the PDF — they are
     real mailto: and wa.me links — they just sit flat. */
  .btn{box-shadow:none !important;}
  a{text-decoration:none;}
}