/* ═══════════════════════════════════════════════════════════════════════════════════════════
   th-prop-pages.css — the property family's own two extras, on top of th.css:
     · the ROI calculator          (/property-automation)
     · the rendered-frame reel     (all three property pages)

   Split out of `th-pdemo.css` on 2026-08-12, when Duval deleted /property-demo and
   /property-demo-app ("take the demo page off as an option… delete the pages too"). Two blocks
   of that stylesheet were used by pages that SURVIVE, so deleting the file wholesale would have
   shipped an unstyled calculator and an unstyled reel — the classes would resolve to nothing and
   both sections would still *render*, which is exactly the failure a text assertion cannot see.
   `th_prop_pages.js` now asserts every `roi`/`pdreel` class its own markup uses has a rule here.


   ⚠ THE NAME. This is NOT `th-prop.css`, which is the property GET-STARTED WIZARD stylesheet
   (the `.pw*` classes, loaded by th_gs_prop.js on both checkouts). Writing this file under that
   name once truncated it. Two property stylesheets, two jobs, two names.

   Loaded ALONGSIDE th.css, so it uses th.css's tokens and adds nothing that collides with them.
   Brand: VOID / MINT / PAPER, Satoshi 900 headings, Switzer body, Cabinet numerals. No gold.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── ROI calculator ─────────────────────────────────────────────────────────────────────── */
.s-roi{position:relative;background:var(--void);padding:clamp(90px,13vh,160px) var(--pad)}
.roi{margin-top:clamp(2rem,4vw,3.2rem)}
.roi .core{padding:clamp(1.4rem,2.6vw,2.4rem)}
.roi__grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
@media(min-width:760px){.roi__grid{grid-template-columns:1fr 1fr}}
.roi__f{background:var(--ink-2);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.roi__l{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.roi__i{width:100%;background:var(--ink-3);border:1px solid var(--line-2);border-radius:12px;
  color:#fff;font-family:'Cabinet Grotesk','Satoshi',ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:1.5rem;letter-spacing:-.02em;padding:.55rem .8rem;-moz-appearance:textfield}
.roi__i:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(79,216,166,.16)}
.roi__i::-webkit-outer-spin-button,.roi__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi__h{font-size:.72rem;color:rgba(255,255,255,.4);line-height:1.4}

.roi__out{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;margin-top:1px}
@media(min-width:680px){.roi__out{grid-template-columns:repeat(4,1fr)}}
.roi__stat{background:var(--ink);padding:1.2rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem}
.roi__stat b{font-family:'Cabinet Grotesk','Satoshi',ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.045em;line-height:1;color:var(--mint)}
.roi__stat span{font-size:.76rem;color:rgba(255,255,255,.46);line-height:1.35}
.roi__note{margin-top:1.4rem;font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.55;color:rgba(255,255,255,.78);max-width:66ch}
.roi__note b{color:#fff;font-weight:700}
.roi__work{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.roi__work summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--mint);letter-spacing:.02em}
.roi__work ul{margin:.9rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.roi__work li{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.45}
.roi__src{margin-top:.9rem;font-size:.74rem;color:rgba(255,255,255,.4);line-height:1.5}
.roi__src a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px}
.roi__src a:hover{color:var(--mint)}

/* ── the rendered-frame reel — REAL renders, never a mock-up ─────────────────────────────
   Every frame is a still the property render engine actually produced, in a made-up
   agency's branding (Vaal & Co, #1F6FEB). Deliberately NOT our mint and never a real
   client's brand: this is our marketing showing what the product makes, and the two-brands
   rule says generated content carries the tenant's identity — so the tenant here is fictional.
   ⚠ `height:auto` on the img is load-bearing. A width/height attribute pair resolves to real
   CSS height, and when BOTH axes resolve, `aspect-ratio` is ignored — which is how these
   rendered 480px tall in a 106px column once. */
.pdreel{position:relative;z-index:2;max-width:var(--max);margin:clamp(2.2rem,4.5vw,3.4rem) auto 0}
.pdreel__row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.pdreel__i{position:relative;margin:0;background:var(--ink-2);overflow:hidden}
/* ⚠ height:auto IS LOAD-BEARING. The img carries width/height ATTRIBUTES (which it must, to
   reserve layout and avoid CLS), and the UA stylesheet maps the height attribute to a real
   height in px. When BOTH width and height resolve, aspect-ratio is IGNORED — so every
   thumbnail rendered 480px tall inside a 74px column: a sliver of image in a card four times
   too tall, which is what the first screenshot of this page showed. */
.pdreel__i img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  filter:saturate(1.02);transition:transform .8s var(--e-soft)}
.pdreel__i:hover img{transform:scale(1.04)}
.pdreel__i figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .7rem .55rem;
  font-size:.66rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.86);
  background:linear-gradient(0deg,rgba(0,0,0,.86),transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdreel__c{margin:1rem auto 0;max-width:64ch;text-align:center;font-size:.82rem;line-height:1.55;
  color:rgba(255,255,255,.46)}
@media(max-width:900px){
  .pdreel__row{grid-template-columns:repeat(3,1fr)}
  .pdreel__i:nth-child(n+4){display:none}
}

/* ── HOW IT WORKS — segmented, CSS-only ─────────────────────────────────────────────────────
   Duval, 2026-08-12: *"dont mke it vibe coded looking with those blocks that you use, make it
   look clesn and proper"*. So: no boxes, no borders around each step, no three-across grid.
   An oversized Cabinet numeral, a hairline between steps, generous type. A process is ORDERED
   and a grid is not.

   The panel swap is two radio inputs and `:checked ~` sibling selectors — no JavaScript at all,
   which matters because the site is `script-src 'self'` with no inline scripts and a tab control
   is exactly where a page grows an inline handler. It works with JS off and needs no hydration.

   ⚠ THE RADIOS MUST STAY FOCUSABLE. `display:none` would remove them from the tab order and
   make the control keyboard-inoperable; the clip-rect pattern below hides them visually while
   keeping them in the accessibility tree, and `:focus-visible + …` paints a real focus ring on
   the label that stands in for them. */
/* the section itself — it is a .sec, so this only owns what is specific to it */
.hw{position:relative}
.hw__c{min-width:0}          /* a grid child will not shrink below its content without this,
                                 which is what lets a long word overflow the page on a phone */
.hw__r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hw__in{margin-top:clamp(1.8rem,3.6vw,2.8rem)}

/* the segmented control */
.hw__tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);
  border-radius:999px;background:var(--ink-2);margin-bottom:clamp(2rem,4vw,3rem);max-width:100%}
.hw__t{flex:0 1 auto;cursor:pointer;border-radius:999px;padding:.72rem 1.25rem;
  font-family:'Switzer',ui-sans-serif,system-ui,sans-serif;font-size:.86rem;font-weight:600;
  letter-spacing:-.01em;color:rgba(255,255,255,.56);white-space:nowrap;
  transition:background .32s var(--e-soft),color .32s var(--e-soft);
  -webkit-tap-highlight-color:transparent;user-select:none}
.hw__t:hover{color:#fff}

/* the steps — a rail, not cards */
.hw__p{display:none}
.hw__s{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.6vw,2.2rem);
  align-items:start;padding:clamp(1.5rem,3vw,2.1rem) 0;border-top:1px solid var(--line)}
.hw__s:first-child{border-top:0;padding-top:0}
.hw__n{font-family:'Cabinet Grotesk','Satoshi',ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:.82;letter-spacing:-.05em;
  color:var(--mint);opacity:.9;font-variant-numeric:tabular-nums}
.hw__h{margin:0 0 .55rem;font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.12;letter-spacing:-.035em;color:#fff}
.hw__d{margin:0;font-size:clamp(.95rem,1.4vw,1.06rem);line-height:1.6;
  color:rgba(255,255,255,.58);max-width:64ch}

/* ── the swap. Two panes: first radio -> first pane, second -> second. ──────────────────── */
/* the panes are selected by an EXPLICIT ordinal. :nth-of-type counts by tag among siblings, and
   .hw__tabs is a div sitting beside them, so :nth-of-type(1) matched nothing and (2) matched the
   first pane -- measured live as "both panes hidden, second tab shows the first one". */
.hw__r:nth-of-type(1):checked ~ .hw__in .hw__p[data-i="1"],
.hw__r:nth-of-type(2):checked ~ .hw__in .hw__p[data-i="2"],
.hw__r:nth-of-type(3):checked ~ .hw__in .hw__p[data-i="3"]{display:block;
  animation:hwIn .5s var(--e-out) both}
.hw__r:nth-of-type(1):checked ~ .hw__in .hw__tabs .hw__t:nth-of-type(1),
.hw__r:nth-of-type(2):checked ~ .hw__in .hw__tabs .hw__t:nth-of-type(2),
.hw__r:nth-of-type(3):checked ~ .hw__in .hw__tabs .hw__t:nth-of-type(3){
  background:var(--mint);color:var(--on-mint)}
.hw__r:focus-visible ~ .hw__in .hw__tabs{box-shadow:0 0 0 3px rgba(79,216,166,.3)}

@keyframes hwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hw__r:checked ~ .hw__in .hw__p{animation:none}
}

/* ⚠ MOBILE. The two labels are "Agents Automation" and "Firm Automation" — together they are
   wider than a 390px viewport with the pill padding, so the control would either overflow the
   page or squash the words. It becomes a full-width two-up grid instead of an inline pill row:
   equal halves, still one tap each, still 44px+ tall. */
@media(max-width:620px){
  .hw__tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px}
  .hw__t{text-align:center;padding:.8rem .5rem;font-size:.8rem;white-space:normal}
  .hw__s{grid-template-columns:1fr;gap:.5rem}
  .hw__n{font-size:2.1rem}
  /* ⚠ THREE TABS STACK; THEY DO NOT GO 2 + 1. The two-column grid above is hardcoded, so a
     third option lands alone on a second row and reads as an afterthought rather than as one of
     three equal choices — and three across at 390px is ~118px a cell against a label like
     "Agents Automation", which wraps to three lines and drops the pill under the 44px target
     the rest of this control keeps. Full-width rows are one tap each and legible. */
  /* ⚠ AND IT STOPS BEING A PILL. `.hw__tabs` is `border-radius:999px`, which is right for a
     one-row segmented control and reads as a rounded BLOB once three rows are stacked inside
     it — measured at 390: the bottom corners swallowed the third option and left dead space
     either side of it. Three stacked rows want a card radius, not a stadium. */
  .hw--n3 .hw__tabs{grid-template-columns:1fr;border-radius:18px}
  .hw--n3 .hw__t{border-radius:12px}
}

/* ── CENTRED (Duval, 2026-08-12: "please centre that section with the how it works") ────────
   The heading, the lede and the segmented control centre. The STEPS do not: a numeral-and-copy
   rail centred item-by-item reads as a ransom note, and centred body text over 60ch is measurably
   harder to read because every line starts in a different place. The rail is instead constrained
   to a narrower column and that COLUMN is centred — the section reads centred, the copy stays
   left-aligned where the eye needs a fixed left edge. */
.hw--c .sec__head{justify-content:center;text-align:center}
.hw--c .sec__head .lede{margin-left:auto;margin-right:auto}
.hw--c .hw__tabs{display:flex;margin-left:auto;margin-right:auto}
.hw--c .hw__in{display:flex;flex-direction:column;align-items:center}
.hw--c .hw__p{width:100%;max-width:940px}
@media(max-width:620px){
  /* the two-up control is already full width here; keep it edge to edge and centred */
  .hw--c .hw__tabs{display:grid}
}

/* the shared one-liner from th_data.PROP_SETUPS, above the steps */
.hw__lead{margin:0 0 clamp(1.4rem,3vw,2.1rem);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.55;
  color:rgba(255,255,255,.72);max-width:70ch}
.hw--c .hw__lead{margin-left:auto;margin-right:auto;text-align:center}
/* the agent page has one setup, so it renders a single pane with no control */
.hw__p--only{display:block}