/* cappellascrovegni.com — "Science Journal" design system, from design.md.
   Paper-white column, abstract-blue plates. Source Serif 4 for display, h1 AND
   prose; IBM Plex Sans for the label caps at .08em. Radii 2/3/5, no gradients,
   one accent action per screen.

   THE SECOND BRIEF IN A ROW THAT HOLDS AS WRITTEN, and measured before a line
   of CSS existed. Every pair the brief states passes on both grounds: the
   secondary #606368 is 5.72:1 on the paper and 6.03:1 on a card, the blue
   #1A4B8C is 8.21:1 as a link and takes white at 8.65:1 as a fill. A journal
   palette is easy to get right and this one is.

   What the brief does not state is the dark band, which is where the last two
   builds lost pages. On #121213 the blue is 2.17:1 and the secondary 3.10:1 -
   a link and a caption nobody could read in the footer or the takeaways block.
   So two values are ADDED rather than deviated: --coral-band, the same blue
   lightened along its own hue to 5.67:1, and --foot-muted at 5.63:1. A palette
   has as many grounds as it has bands. */

:root{
  --ink:#121213;        /* primary: headlines & core text    17.77:1 on the paper */
  --sage:#606368;       /* secondary AS BRIEFED: 5.72 on the paper, 6.03 on a card */
  --coral:#1A4B8C;      /* tertiary: the journal blue, as a fill and as an edge */
  --coral-ink:#1A4B8C;  /* and as ink on the paper - 8.21:1, no darkening needed */
  --coral-dk:#123A6E;   /* button hover fill; white text on it 11.31:1 */
  --coral-text:#FFFFFF; /* what goes ON the blue fill                    8.65:1 */
  --coral-edge:#1A4B8C; /* the button's edge against the page            8.21:1 */
  --coral-band:#538FDF; /* the blue LIGHTENED, for links on the dark band 5.67:1 */
  --neutral:#FAF9F5;    /* page foundation: paper white */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#E4E2DC;
  --foot-muted:#8B8D91;  /* footer text ON --ink             5.63:1 */
  --foot-link:#E6E7E9;   /* footer links ON --ink           15.13:1 */
  --foot-line:#2A2A2C;   /* footer hairline, decorative, no floor */
  /* design.md rounded: sm 2, md 3, lg 5. Nearly square, journal-plate corners. */
  --r-sm:2px;
  --r-md:3px;
  --r-lg:5px;
  --maxw:1120px;
  --prose-w:760px;      /* THE MEASURE. Section intros align to this, not to their band. */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px;line-height:1.7;color:var(--ink);background:var(--neutral);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* ONE SERIF DOES BOTH JOBS HERE, AGAIN. design.md names Source Serif 4 for
   display, h1 AND body, so the ladder is carried by size and weight alone and
   the weights have to be right: 700 on display and h1, which for a text serif
   is a proper bold rather than the hairline risk a didone would have run.
   THE LOGO IS NOT A HEADING - it gets its own rule rather than sharing h3's,
   because on an earlier site it was bolded by a change that was never about it.
   Source Serif 4 loads 400,500,600,700 and IBM Plex Sans loads 400,500,600,700;
   every weight below is one of those, which is what the per-face weight gate
   checks. The caps tracking is .08em here, not the .22em of the last brief -
   a journal label, not a placard. */
h1,h2,h3,.logo,.display{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;letter-spacing:-.01em;line-height:1.15}
h1,.display{font-weight:700}
.display{font-size:4rem;letter-spacing:-.015em}  /* design.md: display 4rem/700/-0.015em */
h2{font-weight:700}
h3{font-weight:600}
.logo{font-weight:700;letter-spacing:-.01em}
h1{font-size:2.2rem;margin:.1em 0 .5em;font-weight:700;letter-spacing:-.01em}  /* design.md: h1 2.2rem/700 */
h2{font-size:1.7rem;margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.6em 0 .4em}
h4{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}

/* placard caps, per design.md: Inter 500 at .68rem with .3em tracking */
.label{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:0 0 .7em}

/* ---------- buttons ---------- */
/* THE BUTTON CARRIES WINE INK, NOT WHITE. design.md pairs its gold fill with
   the cream on-primary: #FAF3E4 on #B8935F is 2.58:1, which is not a button,
   it is a rumour of one. The same fill under the wine primary is 5.61:1 and
   keeps the brief's rule that the tertiary is the only interaction colour. The
   hover deepens the gold and flips to cream at 6.26:1. */
.btn{
  display:inline-block;background:var(--coral);color:var(--coral-text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-md);border:2px solid var(--coral-edge);
  transition:background .15s,border-color .15s,color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);
  text-decoration:none;color:var(--surface)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
/* The palette gate resolves `.btn` and passed at 5.61:1 while THIS rule
   repainted the one button every page shows, in the header, back to white
   on the gold: 2.85:1. A promise about a class is not a promise about the
   element, once a second rule with higher specificity exists. */
.nav a.btn{color:var(--coral-text)}
.nav a.btn:hover{color:var(--surface)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--surface);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}

/* ---------- language switcher ----------
   add_langbar.py injects this bar after </nav> on all 170 pages, and this
   stylesheet had NO rule for it. Five 18px links with no separators and no
   padding rendered as the single word "ENDEFRESIT" in link blue, wider than
   the nav beside it: in German it pushed the document 21px past a 1000px
   viewport and the header gate failed on horizontal overflow.

   The gate had asserted the bar EXISTED, and it did. Presence is not
   appearance - the same lesson the bar's own docstring records about the
   build before this one, one level further out. */
.lang-bar{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.lang-chip{
  display:inline-block;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:var(--sage);                       /* 5.12:1 on white */
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 6px;
}
.lang-chip:hover{color:var(--ink);border-color:var(--sage);text-decoration:none}
.lang-chip.is-current{background:var(--ink);border-color:var(--ink);color:#fff}  /* 18.17:1 */

@media(max-width:860px){
  .nav-toggle{display:block;margin-left:12px}
  .lang-bar{margin-left:auto}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--surface);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}
@media(max-width:520px){
  /* the switcher costs ~135px the header did not have to find before, and on a
     narrow phone that pushed the wordmark onto two lines. Measured at 390px. */
  .site-head .wrap{gap:10px}
  .logo{font-size:.95rem}
  .lang-chip{font-size:.58rem;padding:4px 3px;letter-spacing:.02em}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.74rem;color:var(--sage);padding:14px 22px 0;text-transform:uppercase;letter-spacing:.05em}
.crumb a{color:var(--sage)}

/* ---------- hero (flat solid overlay, not a gradient) ---------- */
.hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/hero.jpg');color:#fff;border-bottom:4px solid var(--coral)}
.hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'))}
/* THE SCRIM, SOLVED ON THE ACTUAL PHOTOGRAPH RATHER THAN CHOSEN BY EYE.
   hero.jpg is a pale brick facade under a blue sky above a bright lawn - there
   is no dark quarter of the frame to hide text in. Measured through the old
   overlay, white h1 came out at 3.10:1, the lede at 2.64:1 and .hero-trust at
   2.23:1, against a 4.5 floor for the body sizes. The reason the old stack
   missed it: ::after was anchored to the BOTTOM 55% while .hero .wrap centres
   its copy, so the h1 sat in the only band the gradient never reached.

   A flat scrim would have to go to .68 to carry all three, which greys the
   photograph out entirely. The copy column is max-width:52% and left-aligned,
   so the darkness goes WHERE THE TEXT IS: a modest flat layer for the sky,
   plus a left-weighted gradient that releases the facade on the right.
   Composited and measured at eight viewports from 1920 down to 390:
     white h1  6.50 - 7.67:1     lede  5.84 - 6.89:1
     trust     5.33 - 6.29:1     label 5.23 - 6.18:1
   Under 900px .hero-copy goes full width, so the second layer flattens out -
   a left-weighted gradient there would leave the end of every line uncovered. */
.hero::before{content:"";position:absolute;inset:0;background:rgba(21,24,24,.46)}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(21,24,24,0) 60%,rgba(21,24,24,.30) 100%),
  linear-gradient(96deg,rgba(21,24,24,.52) 0%,rgba(21,24,24,.46) 50%,rgba(21,24,24,.10) 84%,rgba(21,24,24,0) 100%)}
@media(max-width:900px){
  .hero::after{background:
    linear-gradient(180deg,rgba(21,24,24,0) 60%,rgba(21,24,24,.30) 100%),
    linear-gradient(180deg,rgba(21,24,24,.40),rgba(21,24,24,.40))}
}
.hero .wrap{position:relative;z-index:1;padding:163px 22px 145px;min-height:550px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:52%}
.hero .label{color:rgba(255,255,255,.86)}   /* on the hero's dark scrim, not the last site's cream */
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:var(--surface);font-weight:700;letter-spacing:-.01em}  /* the display size, one step down so a long German h1 still fits */
.hero .lede{font-size:1.18rem;color:#F2F3F1;margin-bottom:1.5em;line-height:1.5}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6em}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-trust{font-size:.95rem;color:#E8E9E6;margin:0}
.hero-trust b{color:#fff}
@media(max-width:900px){.hero-copy{max-width:100%}}
@media(max-width:640px){.hero h1{font-size:2.1rem}.hero .wrap{padding:64px 22px 56px;min-height:0}}

/* ---------- tour-data facts strip (under hero) ---------- */
.facts-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;font-size:1.32rem;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.facts-val .star{color:var(--coral-ink)}
.facts-val,.facts-label{overflow-wrap:break-word;hyphens:auto}
.facts-label{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-top:.45em}
@media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}}
@media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}}

/* ---------- on-page jump bar (sticky anchor menu, homepage) ---------- */
.section-nav{position:sticky;top:66px;z-index:30;background:var(--ink);border-bottom:1px solid var(--ink)}
.section-nav .wrap{display:flex;gap:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.section-nav .wrap::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff;
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.section-nav a:hover{background:var(--coral);color:var(--coral-text);text-decoration:none}
@media(max-width:780px){.section-nav{top:0}.section-nav a{padding:12px 15px;font-size:.8rem}}

/* ---------- explore link cluster (keyword interlinks, above footer) ---------- */
.explore{margin:2.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.explore h2{margin:0 0 .7em}
.explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.explore-links a{display:block;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:.92rem;font-weight:400;
  color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--coral);line-height:1.35}
.explore-links a:hover{color:var(--coral-ink);border-left-color:var(--coral-ink)}
@media(max-width:780px){.explore-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.explore-links{grid-template-columns:1fr}}

/* ---------- main / prose ---------- */
.section-pad{padding-top:40px;padding-bottom:64px}
.prose{max-width:var(--prose-w);margin:0 auto;overflow-wrap:break-word}
.prose.wide{max-width:960px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.32em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}

/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}

/* ---------- answer box ---------- */
.answer-box{background:var(--neutral);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}

/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--ink);border-radius:var(--r-lg);padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)}
.ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)}
.ia-takeaways li:last-child{border-bottom:0}
/* A DARK ACCENT HAS NO VALUE ON A DARK GROUND. This band is painted --ink and
   these two rules coloured their tick and their links with the accent, which
   was written for a palette whose accent was a bright orange. Here the accent
   is a near-black charcoal: measured on the built page, 1.65:1 against a 4.5
   requirement, on the one block answer engines quote most. The mirror image of
   the fault two sites ago, where white text sat on an accent too light to
   carry it. Same lesson from the other end - name the ground, then choose. */
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--coral-band);font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
/* On THIS palette the accent works here: gold on wine is 5.61:1, so the
   brief's single-accent rule and the contrast floor agree for once. */
/* THE PLAIN GOLD IS 4.25:1 ON THIS GREEN - it cleared the bar on the last
   site's wine and does not clear it here. Same variable, same rule, a
   different ground. The lightened gold is 5.17:1. */
.ia-takeaways a{color:var(--coral-band);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(198,162,107,.55)}
.ia-takeaways a:hover{color:#fff;filter:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}

.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:14px 16px}
.kf-label{display:block;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral-ink);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:#D9DBD7}
.sc-price{margin-top:.5em;font-weight:700;color:#fff}
.sc-specs{padding:8px 22px;background:var(--surface)}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sc-row:last-child{border-bottom:0}
.sc-row span{color:var(--sage)}
.sc-row b{text-align:right}
@media(max-width:560px){.scorecard{grid-template-columns:1fr}}

/* ---------- review hub cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s}
.rev-card:hover{border-color:var(--coral);text-decoration:none}
.rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rev-card:hover .rev-thumb img{transform:scale(1.04)}
.rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em}
.rev-score{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral-ink);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:400;font-size:.72rem;color:var(--sage)}
.rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em}
.rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em}
.rev-price{font-weight:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin:1.5em 0 .4em}
.tours-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.tours-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.tours-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours-grid,.tours-grid.cols-4{grid-template-columns:1fr}}
.tour{border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .15s}
.tour:hover{border-color:var(--coral)}
/* whole card is an <a> (see helpers._card) — kill link styling, keep hover feedback */
a.tour{color:inherit;text-decoration:none}
a.tour:hover .btn{filter:brightness(1.08)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:var(--coral-text);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)}
.tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
/* THE GOLD IS A FILL, NOT AN INK - AND THAT RULE HAS TO REACH THE SMALL
   PARTS TOO. The palette promises in gate_tooling passed while 53 nodes
   failed on the built pages, because those promises check the six pairs
   a stylesheet DECLARES and these are the pairs it forgets: a star glyph
   at 2.58:1, white on a gold badge at 2.85:1. Stars take the darkened
   gold (4.99:1 on the page, 5.34:1 on a card); anything painted ON the
   gold takes the wine ink at 5.61:1. */
.star{color:var(--coral-ink)}
.price{font-weight:700;margin-bottom:.8em}
/* Cards print how long the day is and whether it reaches the Citadelle.
   Exact figures live in the tariff table and the live widget. */
.tour-meta{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);margin-bottom:.8em}
.tour-meta span{font-weight:400;color:var(--sage)}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(244,245,242,.78);padding:5px 11px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}

/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:var(--coral-text);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the prose column so it has more room to
   breathe. THE PULL DEPENDS ON THE COLUMN, and the previous rule applied the
   narrow column's pull to both.
     .wrap content box  = 1120 - 44 = 1076px
     .prose             =  760px -> (1076-760)/2 = 158px slack each side
     .prose.wide        =  960px -> (1076-960)/2 =  58px slack each side
   -110px on a .wide page overflows the body by 52px each side, which is how a
   table page silently starts scrolling sideways. Each column now gets a pull it
   actually has room for. */
@media(min-width:1080px){
  .prose .cmp-wrap{margin-left:-110px;margin-right:-110px}
  .prose.wide .cmp-wrap{margin-left:-58px;margin-right:-58px}
}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:700}
table.cmp .rowlabel{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:var(--coral-text);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em}
.step h3{margin:0 0 .25em;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews band ---------- */
.reviews-band{background:var(--neutral);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}

/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.1rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}

/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 12px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}

/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}

/* related strip */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em}

/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--foot-link);margin-top:40px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:48px 22px 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4em 0}
.site-foot a{color:var(--foot-link);font-size:.92rem}
.site-foot a:hover{color:#fff}
/* THE FOOTER HAS ITS OWN GROUND, and on the last site the palette gate never
   looked at it: seven pairs passed and 33 pages failed at 3.86:1. It is a
   promise now, measured here before a page exists - --foot-muted is 5.18:1 on
   this near-black and --foot-link is 13.55:1.
   THE LINK GREY WAS ALSO A CARRY-OVER, and this is the shape §1 is about: it
   was a hardcoded var(--foot-link), not a token, so no gate could see it. It passes on
   contrast (11.64:1) and was wrong anyway - a cold grey on a warm oxblood-brown
   ground. It is a token now, and it is warm. The hairline stays decorative and
   needs no floor. */
.foot-guides{margin-top:30px;border-top:1px solid var(--foot-line);padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid var(--foot-line);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--foot-muted)}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:var(--foot-link);font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid var(--foot-line);padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--foot-muted);margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid var(--foot-line);padding-top:20px}
.foot-searches h4{font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--foot-muted);margin:0 0 12px}
.foot-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-searches li{margin:0}
.foot-searches a{display:inline-block;padding:5px 11px;border:1px solid var(--foot-line);border-radius:var(--r-sm);font-size:.78rem;color:var(--foot-muted);line-height:1.3;transition:color .15s,border-color .15s,background .15s}
.foot-searches a:hover{color:#fff;border-color:var(--coral);background:rgba(255,255,255,.05)}
.foot-bottom{margin-top:28px;border-top:1px solid var(--foot-line);padding-top:18px;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:.74rem;color:var(--foot-muted)}
.foot-bottom a{color:var(--foot-link)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- homepage: "what's included" two-column ---------- */
.includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.includes h2{margin:0 0 .25em}
.includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem}
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.includes-col h3{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block}
.includes-col ul.check{margin:0}
.includes-col .muted{color:var(--sage);font-style:italic}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- homepage: route / "what you see, in order" (AEO) ---------- */
.route{margin:2.4em 0}
.route h2{margin:0 0 .25em}
.route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem}
.route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop}
.route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0}
.route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--coral);color:var(--coral-text);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:.85rem;font-weight:600;border-radius:var(--r-sm)}
.route-stops li:not(:last-child):after{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2em;width:2px;background:var(--line)}
.route-stops li strong{color:var(--ink)}

/* ---------- homepage: wide photo gallery (breaks out of prose) ---------- */
.photo-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.6em 0}
/* the measure, not 44em: the children below align to --prose-w and a
   narrower parent clamps them 16px off it */
.photo-wide-head{text-align:center;max-width:var(--prose-w);margin:0 auto 1.2em}
.photo-wide-head h2{margin:.15em 0 .3em}
.photo-wide-sub{color:var(--sage);margin:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-strip .shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--neutral)}
.photo-strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.photo-strip .shot:hover img{transform:scale(1.06)}
@media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.photo-strip{grid-template-columns:1fr}}

/* ---------- homepage: guest testimonials (breaks out of prose) ---------- */
.testimonials{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.8em 0 2.2em}
.testimonials h2{text-align:center;margin:0 0 .25em}
.t-lead{text-align:center;color:var(--sage);margin:0 0 1.4em}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{margin:0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral-ink);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em}
.t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)}
.t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em}
.t-name{display:block;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:.74rem;color:var(--sage);margin-top:2px}
.t-foot{text-align:center;color:var(--sage);font-size:.9rem;margin:1.4em 0 0}
@media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.t-grid{grid-template-columns:1fr}}
/* ===== CTR features (opt-in; render only when the site defines them) =====
   _ladder / _town_chips / _book_bar in build_home.py + fee/perday in helpers.
   First shipped on yellowstonetourpackages.com. Recolor per site theme. */
/* entry-fee badge on card thumbs (tour dict: "fee_inc" / "fee_badge") */
.fee-badge{position:absolute;left:10px;bottom:10px;background:#2E5D3A;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-sm)}
/* price-per-day subtext (tour dict: "perday") */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}
/* duration/decision ladder band (homecontent: LADDER) */
.ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px}
.ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-md);padding:20px 18px;display:flex;flex-direction:column}
.ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.ladder-col.feat p{color:var(--ink)}
.ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral);font-weight:700;font-size:1.3rem;margin:4px 0 8px}
.ladder-col.feat .ladder-price{color:var(--coral-ink)}
.ladder-col p{font-size:.9rem;line-height:1.5;margin:0 0 16px;color:rgba(255,255,255,.85);flex:1}
.ladder-col .btn{align-self:flex-start}
.ladder-col .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--neutral)}
.ladder-col .btn.ghost:hover{border-color:var(--coral-ink);color:var(--coral-ink)}
@media(max-width:760px){.ladder{grid-template-columns:1fr}}
/* departure-town chips (auto when 2+ tours carry "town") */
.town-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.chips-label{font-size:.85rem;color:var(--sage);font-weight:600}
.town-chips .chip{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)}
.town-chips .chip:hover{border-color:var(--coral)}
/* sticky mobile book-bar (homecontent: BOOK_BAR) */
.book-bar{display:none}
@media(max-width:760px){
  .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between;
    gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25)}
  .book-bar span{font-size:.85rem;font-weight:600}
  .book-bar .btn{padding:9px 16px;font-size:.85rem}
  body{padding-bottom:58px}
}

/* ==================================================================== */
/* Conversion + EEAT layer (piloted on okavangodeltasafaritours.com)    */

/* cancel-note under availability widgets (conversion layer) */
.cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}

/* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */
.price-anchor{margin:34px 0;padding:26px 26px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.price-anchor h2{margin:0 0 18px;font-size:1.25rem}
.pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-md)}
.pa-was{background:var(--neutral);border:1px dashed var(--line)}
.pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700}
.pa-price{font-size:2rem;font-weight:700;line-height:1.1}
.pa-was .pa-price{color:var(--sage)}
.pa-now .pa-price{color:#fff}
.pa-note{font-size:.85rem;line-height:1.45;opacity:.85}
.pa-vs{align-self:center;font-weight:700;color:var(--sage);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.08em}
.pa-now .btn{margin-top:12px;align-self:flex-start;background:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.pa-row{grid-template-columns:1fr}.pa-vs{justify-self:center;padding:2px 0}}

/* real-photo trust strip (opt-in via homecontent REAL_STRIP; Wikimedia Commons, credited) */
.real-strip{margin:38px 0}
.real-strip>h2{text-align:center}
.real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.real-grid figure{margin:0}
.real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:var(--r-md);display:block}
.real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:6px;line-height:1.4}
.real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.real-grid.pair{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:720px){.real-grid{grid-template-columns:1fr}}
/* breakout: same width as the testimonials band */
.real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.real-zoom{display:block;cursor:zoom-in}
.real-zoom img{transition:transform .18s ease}
.real-zoom:hover img{transform:scale(1.015)}
/* lightbox overlay for full-size photos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,26,18,.92);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center}
.lightbox img{max-width:100%;max-height:84vh;border-radius:var(--r-sm);display:block;margin:0 auto}
.lightbox figcaption{color:#e8e5da;font-size:.82rem;margin-top:10px;line-height:1.4}
.lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* author card (EEAT, about page — driven by cfg.AUTHOR) */
.author-card{display:flex;gap:18px;align-items:center;margin:18px 0 24px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.author-card img{width:96px;height:96px;border-radius:var(--r-sm);object-fit:cover;flex-shrink:0}
/* No portrait: cfg.AUTHOR["portrait"] is empty on purpose - the guide is a
   real person and we are not generating a face for her - so the card wears
   her initials as a placard instead of an <img> pointed at nothing. */
.author-mono::before{content:attr(data-mono)}
.author-mono{width:96px;height:96px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--ink);color:var(--neutral);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:400;font-size:2.1rem;
  letter-spacing:.02em;line-height:1}
.author-card div{display:flex;flex-direction:column;gap:3px}
.author-card b{font-size:1.05rem}
.author-card span{font-size:.85rem;color:var(--sage)}


/* ---------- section intros align to the measure ----------
   Reported by eye two builds ago and true of every scaffold since: the heading
   blocks inside the wide bands were centred while every other section sat on
   the left edge of the measure, so the page had four different left edges.
   Aligning a heading to its own band puts it ~160px LEFT of everything above
   it, which is just as wrong. Both band and measure are centred on the
   viewport, so giving the intro the measure's width and auto side margins
   lands its left edge exactly on the measure at every viewport. */
.testimonials > h2,
.testimonials > .t-lead,
.t-foot,
.real-strip > h2,
.real-strip > p,
/* The decision ladder is a full-width band like the others and its heading sat
   158px left of the measure at 1440px. Every band added to this layout has to
   be added here too - which is why the gate measures the painted left edge of
   every intro block rather than trusting the list. */
.ladder-band .wrap > h2,
.ladder-band .wrap > p,
.photo-wide-head > *{
  text-align:left;
  max-width:var(--prose-w);
  margin-left:auto;
  margin-right:auto;
}