/* ─────────────────────────────────────────────────────────────
   Design DNA — dealt seed googlerecensioni|2026-08-23|0
   base family ...... Editorial Minimalism
   discipline ....... Swiss Modular (grid-metered, hairline-ruled,
                      flush-left, no containers)
   signature ........ accent scarcity: the green appears ONLY on the
                      primary CTA and the active nav item
   palette .......... OKLCH ramp seeded from #34A853 (palette.mjs)
   ───────────────────────────────────────────────────────────── */
:root{
  /* neutrals — green-tinted, never pure black/white */
  --n1:#fcfdfc; --n4:#e5e9e6; --n6:#ced4cf; --n11:#5f6560; --n12:#2c2f2c;
  /* accent — used with deliberate scarcity */
  --a11:#327340; --a12:#15361c;

  --bg:var(--n1); --rule:var(--n6); --rule-soft:var(--n4);
  --ink:var(--n12); --ink-2:var(--n11);

  --t-micro:.72rem; --t-cap:.82rem; --t-ui:.9rem; --t-sm:.95rem;

  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Archivo",ui-sans-serif,"Helvetica Neue",Helvetica,sans-serif;

  /* Swiss modular scale — ratio-locked, not arbitrary */
  --s4b:2rem;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:3.5rem; --s6:5rem; --s7:6.5rem;
  --col:minmax(0,1fr);
  --pad:clamp(1.25rem,4vw,3.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* the module grid — every section sits on it */
.grid{
  display:grid;grid-template-columns:repeat(12,var(--col));
  gap:0 var(--s3);padding-inline:var(--pad);
  max-width:1360px;margin-inline:auto;
}
@media(max-width:860px){.grid{grid-template-columns:repeat(6,var(--col))}}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0}
h1{font-size:clamp(2.2rem,4.4vw,3.7rem)}
h2{font-size:clamp(2rem,4vw,3.35rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2}
p{margin:0 0 var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.narrow{max-width:44ch}
.lead{font-size:clamp(1.08rem,1.02rem + .4vw,1.3rem);color:var(--ink-2);max-width:34ch}

/* section label — a ruled ledger tab, flush left, NOT a pill above the H1 */
.label{
  padding-top:.25rem;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-family:var(--sans);
  padding-bottom:var(--s1);border-bottom:1px solid var(--ink);
  display:block;margin-bottom:var(--s4);
}

/* ── nav ───────────────────────────────────────── */
header{border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:40}
header .grid{align-items:center;min-height:60px}
.brand{
  grid-column:1/4;font-family:var(--serif);font-size:1.15rem;font-weight:600;
  letter-spacing:-.02em;text-decoration:none;
}
.brand em{font-style:normal;color:var(--ink-2)}
.menu{grid-column:5/13;display:flex;justify-content:flex-end;gap:var(--s4);font-size:var(--t-ui)}
.menu a{text-decoration:none;color:var(--ink-2);padding:.8rem 0;border-bottom:1px solid transparent}
.menu a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.menu a.on{color:var(--a11);border-bottom-color:var(--a11)}
.menu a.nav-cta{color:#fff;padding:.55rem 1.1rem;font-size:var(--t-cap);border-bottom:0;
  background:var(--a11);border-radius:2px}
.menu a.nav-cta:hover{color:#fff;background:var(--a12);border-bottom:0}
@media(max-width:860px){
  .brand{grid-column:1/5}
  .menu{grid-column:5/7;gap:var(--s2);font-size:var(--t-ui);align-items:center}
  .menu a:not(.nav-cta){display:none}
  .menu a.nav-cta{display:inline-block}
  .menu a[href="#formati"]{display:inline-block}
}

/* ── hero: 5 / 7 asymmetric split ──────────────── */
.hero{padding-top:var(--s7);padding-bottom:0}
.hero-copy{grid-column:1/7;padding-bottom:var(--s7)}
.hero-fig{grid-column:8/13;align-self:end;position:relative}
.hero-fig img{aspect-ratio:3/2;object-fit:cover}

@media(max-width:860px){
  .hero{padding-top:var(--s4)}
  .hero-copy{grid-column:1/7;padding-bottom:var(--s3)}
  .hero-fig{grid-column:1/7}
}
h1 .thin{font-style:italic;color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.explain{margin:var(--s2) 0 0;max-width:40ch;font-size:var(--t-sm);color:var(--ink-2)}
.pricerow{
  margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;
  font-size:var(--t-ui);color:var(--ink-2);
}
.pricerow a{
  text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.pricerow a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.pricerow b{color:var(--ink);font-weight:600}
.pricerow span{flex-basis:100%;font-size:var(--t-cap)}
.hero-meta{
  grid-column:8/13;margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--rule-soft);
  font-size:var(--t-cap);color:var(--ink-2);
}

/* the ONE place the accent lives */
.cta{
  display:inline-block;background:var(--a11);color:#fff;text-decoration:none;
  font-weight:600;font-size:var(--t-sm);padding:.95rem 1.7rem;border-radius:2px;
  transition:background .15s ease;
}
.cta:hover{background:var(--a12)}
.textlink{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--t-ui);
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.textlink:hover{border-bottom-color:var(--ink)}

figure{margin:0}
figcaption{
  font-size:var(--t-cap);color:var(--ink-2);padding-top:var(--s1);margin-top:var(--s1);
  border-top:1px solid var(--rule-soft);
}

/* ── ledger band: facts as ruled rows, not cards ─ */
.ledger{border-top:1px solid var(--ink);margin-top:var(--s7);padding-top:var(--s1)}
.ledger .grid{padding-block:0}
.ledger dl{padding-top:var(--s2)}
.ledger dl{grid-column:1/13;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
.ledger dl > div{padding:var(--s4) var(--s4b) var(--s4) 0;position:relative}
/* hairline as a drawn rule, not a container edge */
.ledger dl > div:not(:last-child)::after{
  content:"";position:absolute;top:var(--s4);bottom:var(--s4);right:var(--s2);
  width:1px;background:var(--rule-soft);
}
.ledger dt{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em}
.ledger dd{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-2);max-width:24ch}
@media(max-width:860px){
  .ledger dl{grid-column:1/7;grid-template-columns:1fr}
  .ledger dl > div{padding-right:0}
  .ledger dl > div:not(:last-child)::after{top:auto;bottom:0;left:0;right:0;width:auto;height:1px}
}

section{padding-block:var(--s7)}
@media(max-width:860px){section{padding-block:3.5rem}.rule,.close{padding-top:var(--s4)}}
.rule{border-top:1px solid var(--rule);padding-top:var(--s6)}

/* ── steps: ruled columns on the module grid ───── */
.steps{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.steps > div{border-top:1px solid var(--ink);padding-top:var(--s2)}
.steps h3{margin-bottom:var(--s2)}
.steps p{color:var(--ink-2);font-size:var(--t-sm);margin:0}
@media(max-width:860px){.steps{grid-column:1/7;grid-template-columns:1fr;gap:var(--s3)}}

.fig-side{grid-column:8/13;align-self:end}
.fig-side img{aspect-ratio:3/2;object-fit:cover}
.head-wide{grid-column:1/8}
.head-half{grid-column:1/7}
.side-note{grid-column:8/13;align-self:end}
@media(max-width:860px){.head-wide,.head-half,.side-note,.fig-side{grid-column:1/7}.side-note{margin-top:1.5rem}.fig-side{margin-top:var(--s4)}}

/* ── use-case gallery: deliberately unequal ────── */
/* Deliberately unequal mosaic: spans alternate 5/7, 7/5, 8/4, 4/8 so no two rows
   read the same. Each image's aspect-ratio is its span over 3, which makes every
   row land on the same image height without a single uniform cell. */
.cases{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--s3);row-gap:var(--s5);margin-top:var(--s4)}
.cases figure img{width:100%;object-fit:cover}
.cases .w4{grid-column:span 4}  .cases .w4 img{aspect-ratio:4/3}
.cases .w5{grid-column:span 5}  .cases .w5 img{aspect-ratio:5/3}
.cases .w7{grid-column:span 7}  .cases .w7 img{aspect-ratio:7/3}
.cases .w8{grid-column:span 8}  .cases .w8 img{aspect-ratio:8/3}
@media(max-width:860px){
  .cases{grid-column:1/7;grid-template-columns:1fr;row-gap:var(--s4)}
  .cases figure{grid-column:auto}
  .cases figure img{aspect-ratio:4/3}
}

/* ── formats: spec rows, ledger discipline ─────── */
.formats{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s4);margin-top:var(--s4)}
/* Cards by request, but no container chrome: no border box, no radius, no shadow.
   A hairline rule on top is what holds them, same as every other block on the page. */
.fmt{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:var(--s2)}
.fmt img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--s3)}
.fmt h3{margin:0 0 var(--s1)}
.fmt .desc{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 var(--s3)}
.fmt .grow{flex:1}
.fmt .note{margin-bottom:var(--s2)}
.fmt .flag{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin:0 0 var(--s2);min-height:1.1em}
.fmt .amount{font-family:var(--serif);font-size:2.1rem;letter-spacing:-.02em;line-height:1}
.fmt .amount small{display:block;font-family:var(--sans);font-size:var(--t-micro);
  color:var(--ink-2);letter-spacing:0;margin-top:.35rem}
.qty{margin-bottom:var(--s2)}
.qty-label{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);margin-bottom:var(--s1)}
.qty-row{display:flex;gap:.4rem;flex-wrap:wrap}
.qty-row button{
  font:inherit;font-size:var(--t-cap);font-weight:600;color:var(--ink-2);
  background:none;border:1px solid var(--rule);border-radius:2px;
  padding:.45rem .75rem;cursor:pointer;transition:all .12s ease;
}
.qty-row button:hover{border-color:var(--ink);color:var(--ink)}
.qty-row button.on{background:var(--ink);border-color:var(--ink);color:var(--n1)}
.fmt .unit{font-size:var(--t-micro);color:var(--ink-2);margin:.35rem 0 0}
.fmt .btn-ink{display:block;text-align:center;margin-top:var(--s3);padding:.85rem 1.2rem;
  background:var(--ink);color:var(--n1);text-decoration:none;border-radius:2px;
  font-weight:600;font-size:var(--t-cap);transition:background .15s ease}
.fmt .btn-ink:hover{background:var(--a12)}
@media(max-width:860px){.formats{grid-column:1/7;grid-template-columns:1fr;gap:var(--s5)}}

/* ── two-up: image + argument ──────────────────── */
.split-fig{grid-column:1/7}
.split-copy{grid-column:8/13;align-self:center}
.split-copy ul{list-style:none;padding:0;margin:var(--s3) 0 0}
.split-copy li{padding:var(--s2) 0;border-top:1px solid var(--rule-soft);font-size:var(--t-sm);color:var(--ink-2)}
.split-copy li b{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-bottom:2px}
@media(max-width:860px){.split-fig,.split-copy{grid-column:1/7}.split-copy{margin-top:var(--s4)}}

/* ── faq ───────────────────────────────────────── */
.faq{grid-column:5/13}
.faq-head{grid-column:1/5}
details{border-top:1px solid var(--rule-soft);padding:0 0 var(--s3)}
details:last-of-type{border-bottom:1px solid var(--rule-soft)}
summary{cursor:pointer;list-style:none;font-weight:600;display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0 .75rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"→";color:var(--ink-2);transition:transform .18s ease}
details[open] summary::after{transform:rotate(90deg)}
details p{margin:var(--s2) 0 0;color:var(--ink-2);max-width:62ch;font-size:var(--t-sm)}
@media(max-width:860px){.faq,.faq-head{grid-column:1/7}.faq{margin-top:var(--s3)}}

/* ── closing ───────────────────────────────────── */
.close{border-top:1px solid var(--ink);padding-top:var(--s6)}
.close-copy{grid-column:1/8}
.close-side{grid-column:9/13;align-self:end;font-size:var(--t-ui);color:var(--ink-2)}
@media(max-width:860px){.close-copy,.close-side{grid-column:1/7}.close-side{margin-top:var(--s3)}}

/* sticky order bar, phone only: the page is 9.500px and had no CTA after the hero */
.orderbar{display:none}
@media(max-width:860px){
  .orderbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:var(--s2);
    padding:.7rem var(--pad);background:var(--n1);border-top:1px solid var(--rule);
    transform:translateY(110%);transition:transform .22s ease;
  }
  .orderbar.show{transform:none}
  .ob-txt{font-size:var(--t-cap);color:var(--ink-2);line-height:1.3}
  .ob-txt b{color:var(--ink);font-weight:600}
  .orderbar .cta{padding:.7rem 1.3rem;font-size:var(--t-cap);white-space:nowrap}
  body{padding-bottom:0}
}
footer{border-top:1px solid var(--rule);padding-block:var(--s4);font-size:var(--t-cap);color:var(--ink-2)}
footer .grid{row-gap:var(--s2)}
.f1{grid-column:1/6}.f2{grid-column:6/10}.f3{grid-column:10/13}
footer a{text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--ink)}

/* last word on the phone: these two are declared after their own media query above,
   so the overrides have to sit at the end of the sheet to win on source order.
   An out-of-range grid-column (8/13 on a 6-track grid) silently mints implicit
   columns and crushes the whole hero, so this is load-bearing, not cosmetic. */
@media(max-width:860px){
  .hero-meta{grid-column:1/7;margin-top:var(--s2)}
  .hero-cta{margin-top:var(--s3)}
}
@media(max-width:860px){.f1,.f2,.f3{grid-column:1/7}}

/* ── guide: long-form reading column on the same grid ───────────── */
.art{grid-column:3/11}
.art-head{grid-column:3/11;margin-bottom:var(--s4)}
.art-meta{font-size:var(--t-cap);color:var(--ink-2);margin-top:var(--s2)}
.art h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:var(--s5) 0 var(--s2)}
.art h3{font-size:1.15rem;margin:var(--s4) 0 var(--s1)}
.art p{max-width:68ch;margin:0 0 var(--s2)}
.art ul,.art ol{max-width:68ch;margin:0 0 var(--s3);padding-left:1.2rem}
.art li{margin-bottom:.5rem}
.art .intro{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--ink-2)}
.art .note{
  border-left:2px solid var(--ink);padding:var(--s2) 0 var(--s2) var(--s3);
  margin:var(--s3) 0;max-width:64ch;
}
.art .note b{display:block;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.35rem}
.art .note p{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.art blockquote{
  margin:var(--s3) 0;padding-left:var(--s3);border-left:2px solid var(--rule);
  max-width:64ch;font-family:var(--serif);font-size:1.15rem;line-height:1.45;
}
.art blockquote cite{display:block;font-family:var(--sans);font-size:var(--t-cap);
  font-style:normal;color:var(--ink-2);margin-top:var(--s1)}
.art .sell{border-top:1px solid var(--ink);margin-top:var(--s5);padding-top:var(--s3)}
.art .sell p{font-size:var(--t-sm);color:var(--ink-2)}
.crumbs{grid-column:3/11;font-size:var(--t-cap);color:var(--ink-2);margin-bottom:var(--s3)}
.crumbs a{color:var(--ink-2)}
.guidecards{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.guidecards a{text-decoration:none;border-top:1px solid var(--ink);padding-top:var(--s2)}
.guidecards h3,.guidecards h2{font-size:1.15rem;line-height:1.2;margin:0 0 var(--s1)}
.guidecards p{font-size:var(--t-sm);color:var(--ink-2);margin:0}
@media(max-width:860px){
  .art,.art-head,.crumbs{grid-column:1/7}
  .guidecards{grid-column:1/7;grid-template-columns:1fr;gap:var(--s3)}
}