/* Selling fold. Loaded after cine.css; inherits its tokens, defines no colours of its own.
   Added 2026-10-13 against the starestate.com study: their above-the-fold is six scannable
   facts and a form, ours was ~250 words of prose holding more facts, less legibly. This block
   adds hierarchy only. No copy below it is reworded, so no question-match citation is traded. */

.sell-fold{margin:2rem 0 0;padding:1.4rem 1.5rem 1.5rem;border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:10px;background:var(--paper)}
.sf-facts{margin:0;display:grid;gap:1.05rem}
@media(min-width:760px){.sf-facts{grid-template-columns:1fr 1fr;gap:1.1rem 2.2rem}}
.sf-row>dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sage);margin:0 0 .3rem}
.sf-row>dd{margin:0;font-family:var(--f-body);font-weight:500;font-size:1.06rem;line-height:1.35;
  color:var(--ink);font-variant-numeric:tabular-nums}
.sf-row.sf-price>dd{font-size:clamp(1.5rem,5vw,1.95rem);font-weight:500;letter-spacing:-.01em}
.sf-q{display:block;margin-top:.3rem;font-family:var(--f-body);font-weight:400;font-size:.8rem;
  line-height:1.45;color:#5A564E;font-variant-numeric:normal;letter-spacing:0}
.sf-row>dd a{color:var(--terracotta);text-decoration:underline;text-underline-offset:2px}
.sf-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.sf-act a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.8rem 1.25rem;border-radius:8px;font-family:var(--f-body);font-weight:600;
  font-size:.95rem;text-decoration:none;flex:1 1 auto}
.sf-wa{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.sf-call{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.sf-note{margin:.95rem 0 0;font-family:var(--f-body);font-size:.78rem;line-height:1.5;color:#5A564E}

/* In-page nav. Depth was the measured problem: long pages carried contact only at 64-82%. */
/* The site header is position:fixed at z-index 40 and 89px tall on this template, so a
   nav stuck at top:0 lands underneath it and its labels collide with the hamburger.
   Sit below the header, and below it in stacking order too. One variable to retune if
   another template's header is a different height. */
:root{--site-header-h:89px}
/* Deliberately NOT sticky. Sticky at top:0 landed under the fixed 89px header; moved to
   top:89px it stuck correctly but page content still painted over its background, so it
   was fighting this template's stacking. The jump-list is worth having and a half-legible
   sticky bar is not, and the page already carries a persistent bottom CALL / BOOK A SITE
   VISIT bar. Revisit when the shell's stacking is untangled. */
.sell-nav{position:static;background:rgba(8,8,7,.92);
  border-top:1px solid rgba(247,244,238,.14);border-bottom:1px solid rgba(247,244,238,.14);
  padding:.55rem env(safe-area-inset-right,0) .55rem env(safe-area-inset-left,0)}
.sell-nav ul{display:flex;gap:.3rem;margin:0;padding:0 var(--pad);list-style:none;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
/* Flex items default to flex-shrink:1, so at 390px every label squeezed to 44px and the
   text overlapped instead of the row scrolling. Measured: ul scrollWidth 408 against a
   390 client width, li width 44. */
.sell-nav li{flex:0 0 auto}
.sell-nav ul::-webkit-scrollbar{display:none}
.sell-nav a{display:block;white-space:nowrap;padding:.5rem .8rem;border-radius:6px;
  font-family:var(--f-body);font-size:.84rem;font-weight:500;color:var(--cream);text-decoration:none}
.sell-nav a:hover,.sell-nav a:focus{background:rgba(247,244,238,.1);color:var(--gold)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
h2[id],.sell-fold[id]{scroll-margin-top:calc(var(--site-header-h) + 1rem)}

/* In-hero variant. The hero is near-black; a pure white card reads as pasted on, which is
   the exact "looks fake" tell the render-first mandate exists to kill. Inherit the hero
   instead: a dark panel, cream text, the gold rule carried through. */
.eo-hero .sell-fold{background:rgba(12,12,10,.55);border-color:rgba(247,244,238,.16);
  border-left-color:var(--gold)}
.eo-hero .sf-row>dt{color:var(--gold);opacity:.9}
.eo-hero .sf-row>dd{color:var(--cream)}
.eo-hero .sf-q{color:var(--cream-soft)}
.eo-hero .sf-row>dd a{color:var(--gold)}
.eo-hero .sf-note{color:var(--cream-faint)}
.eo-hero .sf-call{color:var(--cream);border-color:rgba(247,244,238,.3)}

/* A wide comparison table was making the WHOLE page scroll sideways at 390px: measured
   499px against a 390 viewport on the 7 Peaks page, before any of tonight's changes.
   The table gets its own scroll box so the page itself stays put. eo-table appears on
   three pages, all of which load this file. */
.eo-tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.eo-tablewrap>table{min-width:min-content}