/* GENERATED from tp-design-system/assets/web/website.css; run npm run tokens. DO NOT EDIT. */
/* T&P marketing site — the page's own styling.
   ------------------------------------------------------------------
   The refined finish (27 October 2026): the page is drawn in the same
   language as the application's refined boards (patterns/refined-page.md).
   Linen canvas, paper panels on a warm hairline with 6px corners, Libre
   Caslon Display titles with one phrase in navy italic, Cabin for
   everything else, status as a word with a tone, one navy button per view,
   secondary routes in ink underlined in brass, brass only ever as a rule.

   Every colour, face, size, space, shadow, duration and easing comes from
   /lib/tokens.css, which is GENERATED from tp-design-system/tokens/tokens.json.
   Nothing below re-declares a token value. The :root block holds only
   (a) site-local aliases where this page's name differs from the token's,
   and (b) marketing roles generated from tokens.json → web.

   Regenerate the token layer with `npm run tokens`. */

/* The bundled faces, copied beside the page by the generator from
   tp-design-system/assets/fonts/web (Latin subsets of the app's own files). */
@font-face{font-family:"Libre Caslon Display";src:url("/lib/fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("/lib/fonts/LibreCaslonText-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("/lib/fonts/LibreCaslonText-Italic-Variable.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Cabin;src:url("/lib/fonts/Cabin-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Cabin;src:url("/lib/fonts/Cabin-Italic-Variable.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  /* --- aliases over the generated token layer -------------------- */
  /* Names that match a token (--navy, --cream, --paper, --gold, --ink,
     --line) are NOT redeclared: they are inherited from /lib/tokens.css. */
  --navy-2:var(--navy-hover);
  --gold-light:var(--gold-on-navy);
  --muted:var(--sem-text-muted);
  --ink-2:var(--sem-text-strong);
  --rule:var(--sem-rule);
  --rule-strong:var(--sem-rule-strong);
  --brass:var(--sem-brass);
  --green:var(--settled);
  /* The largest titles and the wordmark are set in Libre Caslon Display;
     the token stack (--display) names the Text cut, which is the fallback. */
  --title:"Libre Caslon Display",var(--display);
  --serif:var(--display);
  --sans:var(--ui);
  --ease:var(--ease-standard);
  --shadow:var(--shadow-card);

  /* --- site-local, no product meaning ---------------------------- */
  /* Pure white. Not --paper: chat bubbles and type on navy, not the
     product's working surface. */
  --white:var(--web-white);
  /* The phone body behind the WhatsApp proof. */
  --tint-soft:var(--web-tint-soft);
  /* The deepest sheet in the record stack. */
  --stack-deep:var(--web-stack-deep);
  /* The tenant's reply bubble in the WhatsApp proof. */
  --reply-tint:var(--web-reply-tint);

  --notebook-image:url("/lib/assets/tp-notebook.webp");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:var(--family-refined-body);line-height:var(--leading-refined-prose);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--paper);padding:12px 18px;border-radius:var(--radius-control)}
.skip:focus{top:16px}
.progress{position:fixed;inset:0 auto auto 0;width:0;height:var(--space-refined-underline);background:var(--navy);z-index:90}
.shell{width:min(1240px,calc(100% - 2 * var(--space-refined-panel-x)));margin-inline:auto}

h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--title);font-weight:400;letter-spacing:var(--tracking-refined-title);line-height:var(--leading-refined-title)}
h3{font-family:var(--serif);font-weight:400;letter-spacing:var(--tracking-refined-title)}
/* .phead — the one phrase of a title set apart: navy italic. */
h1 em,h2 em{display:block;font-family:var(--serif);font-style:italic;color:var(--navy)}
h1{font-size:clamp(var(--family-refined-page-title-narrow),6vw,var(--family-refined-greeting));margin-bottom:var(--space-refined-lg)}
h2{font-size:clamp(var(--family-refined-section-title),4.6vw,var(--family-refined-page-title));margin-bottom:var(--space-refined-md)}
h3{font-size:var(--family-refined-panel-title);line-height:var(--leading-refined-card)}
.lede{font-size:var(--family-refined-lede);line-height:var(--leading-refined-lede);color:var(--ink-2);max-width:34ch}

/* .btn — the refined primary: one navy block, on-navy type in the strong
   weight, an arrow that leans forward on hover. On a navy scene it turns
   to paper so it is still the one weighted control. */
.btn{
  min-height:calc(var(--space-refined-control) + var(--space-refined-xxs));
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-refined-sm);
  padding:0 var(--space-refined-xl);border:1px solid transparent;border-radius:var(--radius-control);
  font-size:var(--family-refined-body);font-weight:700;cursor:pointer;
  transition:background .2s var(--ease),color .2s,border-color .2s;
}
.btn.small{min-height:var(--space-refined-target);padding:0 var(--space-refined-lg);font-size:var(--family-refined-nav)}
.btn.primary{background:var(--navy);color:var(--on-navy)}
.btn.primary:hover{background:var(--navy-2)}
.btn.primary.on-focal{background:var(--paper);color:var(--navy)}
.btn.primary.on-focal:hover{background:var(--cream)}
.arrow{width:18px;height:18px;transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
/* .sec-link — the quieter road: ink, underlined in brass. */
.quiet{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
.quiet:hover{text-decoration-color:var(--navy)}

/* .st — status is a word with a tone; colour is never the whole signal. */
.st{display:inline-flex;align-items:center;gap:var(--space-refined-xs);min-height:calc(var(--space-refined-xl) - 2px);padding:0 var(--space-refined-sm);border:1px solid var(--rule-strong);border-radius:var(--radius-pill);background:var(--paper);font-size:var(--family-refined-small);font-weight:700;line-height:1;white-space:nowrap;color:var(--ink)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st.ok{color:var(--sem-settled);background:var(--sem-ok-tint);border-color:var(--sem-ok-line)}
.st.warn{color:var(--sem-warn);background:var(--sem-warn-tint);border-color:var(--sem-warn-line)}
.st.info{color:var(--navy);background:var(--sem-info-tint);border-color:var(--sem-info-line)}

.reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

.saving-tool{background:var(--paper);color:var(--ink);border-radius:var(--radius-panel);padding:var(--space-refined-xl) var(--space-refined-panel-x);box-shadow:var(--shadow-raised)}
.calculator-intro{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-refined-lg);padding-bottom:var(--space-refined-md);border-bottom:1px solid var(--rule)}
.calculator-intro strong{font-family:var(--serif);font-size:var(--family-refined-panel-title);font-weight:400}
.calculator-intro span{font-size:var(--family-refined-small);color:var(--muted)}
.property-selector{margin:0 0 var(--space-refined-lg);padding:0;border:0}
.property-selector legend,.saving-label label,.fee-label label{font-size:var(--family-refined-meta);font-weight:700;color:var(--ink)}
.property-options{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-refined-xxs);margin-top:var(--space-refined-sm);padding:var(--space-refined-xxs);background:var(--sem-quiet-fill);border-radius:var(--radius-control)}
.property-option{min-height:var(--space-refined-target);border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink-2);font-size:var(--family-refined-body);font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.property-option:hover{color:var(--navy)}
.property-option[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.saving-label{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-refined-lg)}
.rent-readout{font-family:var(--title);font-size:var(--family-refined-figure);line-height:var(--leading-refined-figure);color:var(--ink)}
.rent-readout small{font-family:var(--sans);font-size:var(--family-refined-small);color:var(--muted)}
.rent-slider{width:100%;accent-color:var(--navy);margin:var(--space-refined-md) 0 var(--space-refined-xxs)}
.slider-limits{display:flex;justify-content:space-between;font-size:var(--family-refined-tag);color:var(--muted)}
.fee-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--space-refined-md);margin-top:var(--space-refined-lg);padding:var(--space-refined-md) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fee-label small{display:block;margin-top:2px;font-size:var(--family-refined-small);color:var(--muted)}
.rate-stepper{display:flex;align-items:center;min-height:var(--space-refined-target);border:1px solid var(--sem-field-edge);border-radius:var(--radius-control);overflow:hidden}
.rate-button{width:40px;height:44px;padding:0;border:0;background:transparent;font-size:20px;color:var(--navy);cursor:pointer;transition:background .2s}
.rate-button:hover{background:var(--sem-info-tint)}
.rate-field{display:flex;align-items:center;height:28px;padding:0 var(--space-refined-xxs);border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.rate-field input{width:46px;padding:0;border:0;background:transparent;font-family:var(--serif);font-size:var(--family-refined-month);text-align:center;color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.rate-field input::-webkit-outer-spin-button,.rate-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rate-field span{padding-right:2px;font-size:var(--family-refined-small);color:var(--muted)}
.saving-headline{padding:var(--space-refined-lg) 0 var(--space-refined-md)}
.saving-headline>span{display:block;color:var(--ink-2);font-size:var(--family-refined-meta)}
.saving-headline strong{display:block;margin-top:var(--space-refined-xxs);font-family:var(--title);font-size:clamp(46px,5.4vw,var(--family-refined-greeting));font-weight:400;line-height:1;color:var(--sem-settled)}
.saving-headline strong small{font-family:var(--sans);font-size:var(--family-refined-meta);color:var(--ink-2)}
.saving-result{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-refined-lg);padding-top:var(--space-refined-md);border-top:1px solid var(--rule)}
.saving-result small{display:block;color:var(--muted);margin-bottom:var(--space-refined-xxs);font-size:var(--family-refined-small)}
.saving-result strong{font-family:var(--serif);font-size:var(--family-refined-panel-title);font-weight:400;color:var(--ink)}
.saving-result .agent strong{color:var(--ink-2)}
.cost-track{display:block;height:4px;margin-top:var(--space-refined-xs);background:var(--sem-quiet-fill);border-radius:var(--radius-pill);overflow:hidden}
.cost-fill{display:block;width:100%;height:100%;background:var(--rule-strong);transition:width .35s var(--ease)}
.cost-fill.tp{width:17%;background:var(--navy)}
.saving-fine{margin:var(--space-refined-md) 0 0;color:var(--muted);font-size:var(--family-refined-tag);line-height:var(--leading-refined-meta);max-width:70ch}

.show{--wa-face:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wa-paper:var(--white);--wa-wall:var(--web-chat-wall);--wa-out:var(--web-chat-out);--wa-ink:var(--web-chat-ink);--wa-mute:var(--web-chat-mute);--wa-green:var(--web-chat-green);--wa-tick:var(--web-chat-tick);
  --phone-w:284px;--phone-h:570px;min-width:0}
.show-stage{
  position:relative;display:grid;justify-items:center;align-content:center;gap:var(--space-refined-md);
  padding:24px 24px 30px;min-height:660px;border-radius:var(--radius-panel);overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,var(--navy-2) 0,transparent 60%),var(--navy);
  box-shadow:var(--shadow-raised)}
.show-stage::before{ /* the brass ampersand, faint, behind the phone */
  content:"&";position:absolute;right:-.06em;bottom:-.32em;font-family:var(--serif);font-style:italic;
  font-size:560px;line-height:1;color:color-mix(in srgb,var(--on-navy) 7%,transparent);pointer-events:none}
.show-who{position:relative;display:flex;align-items:center;gap:8px;margin:0;font-size:var(--family-refined-small);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-med)}
.show-who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-navy);box-shadow:0 0 0 4px color-mix(in srgb,var(--on-navy) 16%,transparent)}
.show-who.swap #show-who{animation:who .5s var(--ease)}
@keyframes who{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.show-phone{position:relative;width:var(--phone-w);height:var(--phone-h);padding:10px;border-radius:46px;
  background:var(--web-phone);box-shadow:0 0 0 1px color-mix(in srgb,var(--white) 8%,transparent),0 40px 70px -30px color-mix(in srgb,var(--navy) 65%,transparent)}
.show-phone::before{content:"";position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:var(--web-phone);z-index:5}
.show-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--cream)}
.show-screen>*{position:absolute;inset:0}
.show-screen.fade>*{animation:screenIn .45s var(--ease)}
@keyframes screenIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.show-tap{position:absolute;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:color-mix(in srgb,var(--navy) 22%,transparent);border:2px solid color-mix(in srgb,var(--white) 90%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--navy) 25%,transparent);
  opacity:0;pointer-events:none;z-index:20;transition:transform .5s var(--ease),opacity .2s}
.show-tap.on{opacity:1}
.show-tap.press{animation:press .42s var(--ease)}
@keyframes press{0%{scale:1}40%{scale:.72}100%{scale:1}}
.show-tap.press::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid color-mix(in srgb,var(--white) 80%,transparent);animation:ring .6s ease-out forwards}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(2.2);opacity:0}}

.show-badge{position:absolute;left:50%;bottom:44px;z-index:30;display:flex;align-items:center;gap:10px;margin:0;
  padding:12px 18px 12px 12px;border-radius:999px;background:var(--paper);color:var(--ink);white-space:nowrap;
  font-family:var(--serif);font-size:19px;box-shadow:0 18px 40px -12px color-mix(in srgb,var(--navy) 45%,transparent);
  opacity:0;transform:translate(-50%,14px) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.show-badge.on{opacity:1;transform:translate(-50%,0)}
.show-badge svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--settled);fill:none;stroke:var(--white);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ── film 1: the landlord's app ── */
.app{padding:52px 18px 18px;background:var(--cream);font-family:var(--sans);color:var(--ink)}
.app-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.app-brand{font-family:var(--title);font-size:22px;color:var(--navy)}
.app-brand i{font-family:var(--serif);color:var(--navy)}
.app-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--on-navy);font-size:12px;font-weight:700}
.app-kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.app-title{margin:2px 0 14px;font-family:var(--title);font-size:30px;line-height:1.1}
.app-checks{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
.app-checks li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--rule)}
.app-checks li:first-child{border-top:0}
.ck-mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-38)}
.ck-ok .ck-mark,.ck-gas.done .ck-mark{border-color:var(--settled);background:var(--settled) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.ck-name{font-family:var(--serif);font-size:15px;line-height:1.2}
.ck-name small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ck-pill{font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--tag-ok);color:var(--settled)}
.ck-gas .ck-pill{background:var(--sem-quiet-fill);color:var(--ink-2)}
.ck-gas .ck-now{display:none}
.ck-gas.done .ck-was{display:none}.ck-gas.done .ck-now{display:block}
.ck-gas.done .ck-pill{background:var(--tag-ok);color:var(--settled);font-size:0}
.ck-gas.done .ck-pill::after{content:"Valid";font-size:11px}
.ck-gas.done{animation:glow 1.2s var(--ease)}
@keyframes glow{0%{background:var(--tag-ok)}100%{background:transparent}}
.app-drop{display:block;width:100%;margin-top:14px;padding:14px;border:1.5px dashed var(--ink-38);border-radius:6px;background:transparent;
  font:700 13px var(--sans);color:var(--navy);transition:opacity .3s}
.app.got .app-drop{opacity:0}
.app.done .app-drop{display:none}

.app-doc{position:absolute;left:44px;right:44px;top:150px;height:300px;padding:18px 16px;background:var(--white);border-radius:var(--radius-record);
  box-shadow:0 18px 40px -14px color-mix(in srgb,var(--navy) 45%,transparent);display:flex;flex-direction:column;gap:8px;overflow:hidden;z-index:4;
  transform:translateY(-70px) rotate(-5deg) scale(1.08);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s}
.app-doc b{font-family:var(--serif);font-weight:400;font-size:14px;color:var(--ink);border-bottom:2px solid var(--web-cert-red);padding-bottom:6px}
.app-doc .l{display:block;height:6px;border-radius:3px;background:var(--web-paper-rule)}
.w9{width:92%}.w8{width:80%}.w7{width:70%}.w6{width:60%}
.app-doc .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:6px 0}
.app-doc .grid span{height:28px;border:1px solid var(--web-paper-rule)}
.app-doc .sig{margin-top:auto;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--web-signature)}
.app.got .app-doc{transform:none;opacity:1}
.app-beam{position:absolute;left:0;right:0;top:-40px;height:40px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--navy) 35%,transparent) 85%,var(--navy));opacity:0}
.app.scan .app-beam{opacity:1;animation:beam 1.5s linear forwards}
@keyframes beam{to{top:100%}}
.app.read .app-doc{transform:translate(0,-96px) scale(.42);opacity:0;transition:transform .6s var(--ease),opacity .5s .2s}

.app-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--navy) 28%,transparent);opacity:0;transition:opacity .35s;z-index:5;pointer-events:none}
.app.read .app-scrim{opacity:1}
.app.done .app-scrim{opacity:0}
.app-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:20px 18px 22px;background:var(--paper);border-radius:18px 18px 0 0;
  transform:translateY(100%);transition:transform .55s var(--ease)}
.app.read .app-sheet{transform:none}
.app.done .app-sheet{transform:translateY(100%)}
.app-sheet-kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--settled)}
.app-sheet-title{margin:2px 0 12px;font-family:var(--title);font-size:24px}
.app-facts{list-style:none;margin:0 0 16px;padding:0}
.app-facts li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--rule);font-size:13px;
  opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s var(--ease)}
.app-facts li span{color:var(--muted)}
.app-facts li b{font-family:var(--serif);font-weight:400;font-size:14px}
.app-facts li b::after{content:" ✓";color:var(--settled);font-family:var(--sans);font-weight:700}
.app-facts li.on{opacity:1;transform:none}
.app-save{width:100%;padding:13px;border:0;border-radius:var(--radius-control);background:var(--navy);color:var(--on-navy);font:700 14px var(--sans)}

/* ── films 2 and 3: WhatsApp ── */
.wa{display:flex;flex-direction:column;background:var(--wa-wall);font-family:var(--wa-face);color:var(--wa-ink);font-size:13.5px;line-height:1.35}
.wa-head{display:flex;align-items:center;gap:10px;padding:46px 14px 10px;background:var(--wa-paper);border-bottom:1px solid var(--web-chat-rule)}
.wa-av{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--on-navy);font:13px var(--title);white-space:nowrap;letter-spacing:-.02em}
.wa-av i{color:var(--on-navy);font-family:var(--serif)}
.wa-who b{display:block;font-weight:600;font-size:14.5px}
.wa-who small{color:var(--wa-mute);font-size:11.5px}
.wa-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 10px 12px;overflow:hidden;
  background-image:radial-gradient(color-mix(in srgb,var(--navy) 3.5%,transparent) 1px,transparent 1.2px);background-size:14px 14px}
.wa-day{align-self:center;margin:0 0 4px;padding:3px 10px;border-radius:6px;background:var(--wa-paper);color:var(--wa-mute);font-size:11px}
.wa-msg{position:relative;max-width:84%;align-self:flex-start;padding:6px 8px 18px;border-radius:0 8px 8px 8px;background:var(--wa-paper);
  box-shadow:0 1px .5px color-mix(in srgb,var(--navy) 13%,transparent);opacity:0;transform:translateY(10px) scale(.97);transform-origin:left bottom;
  transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.2);display:none}
.wa-msg.in{display:block}
.wa-msg.on{opacity:1;transform:none}
.wa-msg p{margin:0}
.wa-msg p b{display:block;font-weight:600}
.wa-out{align-self:flex-end;background:var(--wa-out);border-radius:8px 0 8px 8px;transform-origin:right bottom}
.wa-time{position:absolute;right:8px;bottom:4px;font-size:10.5px;color:var(--wa-mute)}
.wa-ticks{color:var(--wa-tick);letter-spacing:-3px}
.wa-card{width:84%;padding:4px 4px 0}
.wa-card p{padding:6px 6px 16px}
.wa-card .wa-time{bottom:auto;top:auto;position:relative;display:block;text-align:right;margin:-16px 6px 4px}
.wa-pic{height:120px;border-radius:6px;background-size:cover;background-position:center}
.wa-pic-house{background:linear-gradient(180deg,var(--web-band-warm),var(--cream));position:relative}
.wa-pic-job{background:linear-gradient(180deg,var(--tag-us),var(--on-navy-med));position:relative}
.wa-pic::after{content:"⌂";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:80px;line-height:1;color:var(--navy)}
.wa-pic-job::after{content:"↗";font-size:60px}
.wa-btn{display:block;width:100%;padding:10px;border:0;border-top:1px solid var(--web-chat-rule);background:transparent;color:var(--web-chat-link);font:600 13.5px var(--wa-face);border-radius:0 0 8px 8px}
.wa-btn-key{margin-top:4px;border:0;border-radius:var(--radius-panel);background:var(--navy);color:var(--on-navy);font-weight:700}
.wa-bar{padding:8px 10px 14px}
.wa-bar span{display:block;padding:9px 14px;border-radius:20px;background:var(--wa-paper);color:var(--wa-mute)}

.wa-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--navy) 40%,transparent);opacity:0;pointer-events:none;transition:opacity .35s;z-index:5}
.wa.is-sheet .wa-scrim{opacity:1}
.wa-sheet{position:absolute;left:0;right:0;bottom:0;height:72%;z-index:6;display:flex;flex-direction:column;background:var(--wa-paper);
  border-radius:16px 16px 0 0;transform:translateY(102%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wa.is-sheet .wa-sheet{transform:none}
.wa-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 12px;border-bottom:1px solid var(--web-chat-rule);color:var(--wa-mute)}
.wa-sheet-head b{color:var(--wa-ink);font-weight:600;font-size:15px}
.wa-pages{flex:1;display:flex;overflow:hidden}
.wa-pages .wa-sheet-body{flex:0 0 100%;transition:transform .45s var(--ease)}
.wa.page2 .wa-pages .wa-sheet-body{transform:translateX(-100%)}
.wa-sheet-body{flex:1;padding:16px}
.wa-q{margin:0 0 12px;font-weight:600;font-size:14.5px}
.wa-opt{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--web-chat-rule-soft)}
.wa-opt small{display:block;color:var(--wa-mute);font-size:12px}
.wa-opt i{width:20px;height:20px;border-radius:50%;border:2px solid var(--web-chat-radio);transition:border .2s}
.wa-opt.sel i{border:6px solid var(--wa-green)}
.wa-field{display:block;padding:8px 12px;border:2px solid var(--wa-green);border-radius:6px}
.wa-field-label{display:block;font-size:11px;color:var(--wa-green);font-weight:600}
.wa-field-val{font-size:20px}
.caret{display:inline-block;width:2px;height:20px;margin-left:1px;vertical-align:-3px;background:var(--wa-green);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.wa-hint{margin:10px 0 0;color:var(--wa-mute);font-size:12px}
.wa-sheet-foot{padding:10px 16px 16px;text-align:center}
.wa-sheet-foot small{display:block;margin-top:8px;color:var(--wa-mute);font-size:11px}
.wa-cta{width:100%;padding:12px;border:0;border-radius:22px;background:var(--web-chat-rule);color:var(--web-chat-radio);font:600 14px var(--wa-face);transition:background .25s,color .25s}
.wa-cta.ready{background:var(--wa-green);color:var(--white)}
.wa-cta .t-send{display:none}
.wa.page2 .wa-cta .t-next{display:none}.wa.page2 .wa-cta .t-send{display:inline}

.scene-b{opacity:0;pointer-events:none;transition:opacity .45s}
.scene-a{transition:opacity .45s}
.film-repair.b .scene-a{opacity:0}
.film-repair.b .scene-b{opacity:1}

.film>*{position:absolute;inset:0}

.app-next{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px;border-radius:6px;background:var(--paper);border:1px solid var(--rule);
  font-size:12.5px;line-height:1.3;opacity:0;transform:translateY(8px);transition:opacity .4s .5s,transform .5s .5s var(--ease)}
.app-next svg{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:var(--tag-us);fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-next b{display:block;font-family:var(--serif);font-weight:400;font-size:14px}
.app.done .app-next{opacity:1;transform:none}

/* Motion refinement — one visual rhythm, with touch before response.
   Keep these rules with FILMS when embedding the component. */
.show{
  --motion-enter:cubic-bezier(.16,1,.3,1);
  --motion-travel:cubic-bezier(.4,0,.2,1);
  --motion-exit:cubic-bezier(.4,0,1,1);
  --motion-settle:cubic-bezier(.22,.8,.24,1);
  --touch-colour:var(--navy);
}
.show-stage{background:radial-gradient(ellipse at 50% 22%,var(--web-stage-glow) 0,transparent 68%),var(--navy);isolation:isolate}
.show-phone{box-shadow:0 0 0 1px color-mix(in srgb,var(--white) 12.5%,transparent),0 2px 0 1px color-mix(in srgb,var(--white) 7%,transparent) inset,0 30px 60px -22px color-mix(in srgb,var(--navy) 60%,transparent)}
.show-phone::after{content:"";position:absolute;bottom:17px;left:50%;width:84px;height:4px;border-radius:var(--radius-pill);transform:translateX(-50%);background:var(--navy-deep);opacity:.65;z-index:15;pointer-events:none}
.show-screen{isolation:isolate}
.show-screen.fade>*{animation:none}
.show-screen>.film{opacity:0;transform:translateY(5px) scale(.992);transition:opacity 440ms var(--motion-travel),transform 620ms var(--motion-enter);will-change:opacity,transform}
.show-screen>.film.is-live{opacity:1;transform:none}
.show-screen>.film.is-leaving{opacity:0;transform:translateY(-4px) scale(.992);pointer-events:none}
.show-who{min-height:18px}
.show-who.swap #show-who{animation:who 440ms var(--motion-enter) both}
@keyframes who{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.show-tap{width:34px;height:34px;margin:-17px 0 0 -17px;background:color-mix(in srgb,var(--touch-colour) 20%,transparent);border:1px solid color-mix(in srgb,var(--touch-colour) 22%,transparent);box-shadow:none;opacity:0;transition:transform 280ms var(--motion-travel),opacity 160ms ease;will-change:transform,opacity}
.show-tap::before{content:"";position:absolute;inset:11px;border-radius:50%;background:color-mix(in srgb,var(--touch-colour) 24%,transparent)}
.show-tap.press{animation:touchContact 280ms var(--motion-settle) both}
.show-tap.press::after{inset:-1px;border:1px solid color-mix(in srgb,var(--touch-colour) 30%,transparent);animation:touchRipple 480ms ease-out both}
@keyframes touchContact{0%{scale:1}38%{scale:.8}100%{scale:1}}
@keyframes touchRipple{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.show .is-pressed{scale:.975;filter:brightness(.96)}
.app-drop,.app-save,.wa-btn,.wa-cta,.wa-opt{transition:scale 180ms var(--motion-settle),filter 180ms ease,background-color 240ms ease,color 240ms ease,opacity 240ms ease}
.show-badge{width:max-content;max-width:calc(100% - 24px);bottom:35px;padding:11px 17px 11px 11px;transform:translate(-50%,9px);transition:opacity 360ms ease,transform 560ms var(--motion-enter);box-shadow:0 12px 30px -12px color-mix(in srgb,var(--navy) 50%,transparent);border:1px solid var(--line)}
.show-badge svg{flex-shrink:0}
.show-badge svg path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset 360ms 160ms var(--motion-settle)}
.show-badge.on svg path{stroke-dashoffset:0}
.show-pause{font-size:16px}
.show-pause:disabled{opacity:.4;cursor:default}

.app-doc{top:145px;transform:translate(35px,-85px) rotate(5deg) scale(.94);transform-origin:50% 70%;transition:transform 780ms var(--motion-enter),opacity 320ms ease;border:1px solid var(--web-paper-rule);border-radius:var(--radius-panel)}
.app.got .app-doc{transform:translateY(0) rotate(0) scale(1)}
.app.scan .app-doc{box-shadow:0 18px 40px -14px color-mix(in srgb,var(--navy) 40%,transparent)}
.app-beam{top:0;height:46px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--navy) 10%,transparent) 70%,color-mix(in srgb,var(--navy) 32%,transparent) 97%,var(--navy));transform:translateY(-48px);will-change:transform}
.app.scan .app-beam{animation:scanPass 1500ms cubic-bezier(.4,0,.35,1) both}
@keyframes scanPass{0%{transform:translateY(-48px);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateY(300px);opacity:0}}
.app.read .app-doc{transform:translateY(-22px) scale(.91);opacity:0;transition:transform 420ms var(--motion-travel),opacity 280ms ease}
.app.read .app-beam{opacity:0}
.app-sheet,.wa-sheet{box-shadow:0 -12px 36px -18px color-mix(in srgb,var(--navy) 27%,transparent);transform:translateY(105%);transition:transform 600ms var(--motion-enter);will-change:transform}
.app-sheet::before,.wa-sheet::before{content:"";position:absolute;left:50%;top:7px;width:28px;height:3px;border-radius:3px;transform:translateX(-50%);background:var(--web-sheet-grip)}
.app-sheet{padding-top:25px;padding-bottom:28px}
.app-scrim,.wa-scrim{transition:opacity 420ms var(--motion-travel)}
.app-facts li{transform:translateY(5px);transition:opacity 320ms ease,transform 420ms var(--motion-enter)}
.app.done .app-sheet,.wa:not(.is-sheet) .wa-sheet{transition-duration:400ms;transition-timing-function:var(--motion-travel)}
.app.got .app-drop{visibility:hidden}
.app.done .app-drop{display:block;height:0;padding:0;margin:0;border:0}
.app-next{transition:opacity 420ms 140ms ease,transform 500ms 140ms var(--motion-enter)}
.ck-mark,.ck-pill{transition:background-color 340ms ease,border-color 340ms ease,color 340ms ease}
.ck-gas.done{animation:gasSettled 1100ms ease both}
.ck-gas.done .ck-mark{animation:markSettled 480ms var(--motion-enter) both}
@keyframes gasSettled{0%,35%{background:var(--tag-ok)}100%{background:transparent}}
@keyframes markSettled{from{transform:scale(.75)}to{transform:scale(1)}}

.wa-head{padding-bottom:12px}
.wa-body{min-height:0;overflow:hidden;overflow-anchor:none;scrollbar-width:none;padding-bottom:14px}
.wa-body>*{flex-shrink:0}
.wa-msg{transform:translateY(9px) scale(.985);transform-origin:50% 100%;transition:opacity 240ms ease,transform 440ms var(--motion-enter)}
.wa-out{transform-origin:85% 100%}
.wa-msg.on{transform:none}
.wa-card{border-radius:10px}
.wa-pic{height:112px}
.wa-btn{padding-block:12px}
.wa-bar{padding-bottom:23px;flex-shrink:0}
.wa-sheet{height:74%;border-radius:20px 20px 0 0}
.wa-sheet-head{padding-top:23px;flex-shrink:0}
.wa-sheet-body{min-width:0;overflow:hidden}
.wa-pages{position:relative;min-height:0}
.wa-pages .wa-sheet-body{transition:transform 460ms var(--motion-travel)}
.wa-opt{border-radius:var(--radius-panel);padding-inline:6px;margin-inline:-6px;gap:8px}
.wa-opt.sel{background:var(--web-chat-selected)}
.wa-opt i{flex:none;position:relative;border:1.5px solid var(--web-chat-radio);transition:border-color 180ms ease}
.wa-opt i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--wa-green);transform:scale(0);transition:transform 240ms var(--motion-enter)}
.wa-opt.sel i{border:1.5px solid var(--wa-green)}
.wa-opt.sel i::after{transform:scale(1)}
.wa-sheet-foot{padding-bottom:25px;flex-shrink:0}
.wa-field{border-width:1.5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--web-chat-green) 3%,transparent)}
.wa-field-val{font-variant-numeric:tabular-nums}
.wa.page2 .caret{visibility:hidden}
.scene-a,.scene-b{transition:opacity 420ms var(--motion-travel),transform 540ms var(--motion-enter);will-change:opacity,transform}
.scene-b{transform:translateX(10px)}
.film-repair.b .scene-a{transform:translateX(-10px);pointer-events:none}
.film-repair.b .scene-b{transform:none;pointer-events:auto}
.show.is-still *,.show.is-still *::before,.show.is-still *::after{animation:none!important;transition:none!important}
.show.is-still .show-screen>.film{opacity:1;transform:none}
.show.is-still .show-tap,.show.is-still .caret{display:none}
@media(max-width:560px){
  .show-stage{padding-top:24px;padding-bottom:45px;min-height:615px}
  .show-badge{bottom:24px;font-size:16px}
  .wa-pic{height:96px}
  .wa-sheet{height:77%}
  .wa-sheet-body{padding:14px}
  .wa-opt{padding-block:9px}
  .app-title{font-size:28px}
  .app-checks li{padding:11px 9px;gap:7px}
  .ck-name{font-size:14px}
  .ck-name small{font-size:10.5px}
  .ck-pill{padding-inline:6px}
  .app-sheet-title{font-size:23px}
  .app-sheet{padding-inline:16px}
  }
@media(prefers-reduced-motion:reduce){
  .show *,.show *::before,.show *::after{animation:none!important;transition:none!important}
  .show-screen>.film{opacity:1;transform:none}
  .show-tap,.caret{display:none}
}

/* Homepage, October 2026 — people first, proof beside each benefit.
   Colours are exclusively aliases/references to the supplied token layer. */
[hidden]{display:none!important}
html{scroll-padding-top:110px}
body{overflow-wrap:break-word}
.shell{width:min(1280px,calc(100% - 96px))}
h1,h2{color:var(--navy)}
h1 em,h2 em{color:var(--navy)}
h1{font-size:clamp(42px,4.8vw,70px);line-height:1.08;letter-spacing:-.035em}
h2{font-size:clamp(38px,4vw,54px);line-height:1.12;letter-spacing:-.025em}
.lede{font-size:19px;line-height:1.5;max-width:none;color:var(--ink-2)}
.arrow{display:inline-block;vertical-align:middle;flex-shrink:0}
.quiet{display:inline-flex;align-items:center;gap:12px;font-size:15px}
.btn{border-radius:var(--radius-control);min-height:50px;font-size:15px;padding-inline:22px}
.masthead{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule);background:var(--cream)}
.masthead .shell{height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:20px}
.brand-mark{font-family:var(--title);font-size:48px;line-height:1;color:var(--navy)}
.brand-mark i{font-family:var(--serif);font-style:italic;color:var(--navy)}
.brand-rule{height:34px;width:1px;background:var(--brass)}
.brand-desc{font-size:10px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.mini-nav{display:flex;align-items:center;gap:32px;font-size:14px;color:var(--ink-2)}
.mini-nav a{padding-block:12px}
.mini-nav a:hover{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:7px}
.mini-nav .sign-in{margin-left:20px;padding-left:32px;border-left:1px solid var(--rule);font-weight:700}
.sign-in .arrow{width:15px;margin-left:8px}
.hero{padding:var(--web-hero-top) 0 0}
.hero-life{position:relative;margin:0;isolation:isolate}
.hero-life picture{display:block;overflow:hidden;border-radius:var(--radius-panel)}
.hero-life img{width:100%;height:var(--web-hero-photo-height);object-fit:cover;object-position:center 42%}
.hero-life>figcaption{position:absolute;left:26px;bottom:22px;padding:9px 13px;background:var(--paper);color:var(--navy);font-size:12px;border-radius:var(--radius-control)}
.property-update{position:absolute;right:30px;bottom:32px;width:300px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-raised);border-radius:var(--radius-panel);padding:18px 20px}
.update-meta{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:10px;color:var(--muted)}
.update-brand{font-family:var(--title);font-size:22px;line-height:1;color:var(--navy)}
.update-property{display:flex;align-items:center;gap:11px;padding:14px 0}
.property-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid var(--rule);border-radius:var(--radius-control);color:var(--navy)}
.property-icon svg{width:33px;height:33px}
.update-property small{display:block;font-size:10px;color:var(--muted);margin-bottom:2px}
.update-property strong{font-size:13px;font-weight:700}
.update-message{display:flex;gap:9px;align-items:flex-start;padding:12px 0 0;border-top:1px solid var(--rule)}
.update-check{display:grid;place-items:center;flex:none;width:21px;height:21px;color:var(--sem-settled);border:1px solid var(--sem-ok-line);border-radius:50%}
.update-check svg{width:13px;height:13px}
.update-message strong{font-size:14px;line-height:1.4}
.update-message p{margin:6px 0 0;font-size:12px;line-height:1.65;color:var(--ink-2)}
.update-end{margin:12px 0 0 30px;font-size:11px;color:var(--muted)}


/* What we take off your plate (4 Nov 2026): eight areas, each with the
   things we do (ticks) and the one thing left to the landlord (italic). */
.scope{padding:96px 0 72px}
.scope-intro{text-align:center;max-width:740px;margin:0 auto 48px}
.scope-intro h2{text-wrap:balance}.scope-intro .lede{margin:0 auto}
.scope-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.scope-area{display:flex;flex-direction:column;padding:30px 26px 30px;border-bottom:1px solid var(--rule)}
.scope-area:not(:nth-child(4n+1)){border-left:1px solid var(--rule)}
.scope-area:nth-child(4n+1){padding-left:0}
.scope-area:nth-child(4n){padding-right:0}
.scope-icon{display:block;width:28px;height:28px;color:var(--navy);margin-bottom:18px}
.scope-icon svg{width:100%;height:100%}
.scope-area h3{font-size:24px;line-height:1.15;margin:0 0 6px;color:var(--ink)}
.scope-sell{margin:0 0 16px;font-size:16px;line-height:1.4;color:var(--navy);font-weight:500}
.scope-area ul{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.scope-area ul li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start}
.scope-area ul li+li{margin-top:8px}
.scope-area ul svg{width:15px;height:15px;margin-top:2px;color:var(--green)}
.scope-you{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted)}
.scope-more{display:table;margin:36px auto 0;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:6px}
@media (max-width:1100px) and (min-width:721px){.scope-grid{grid-template-columns:1fr 1fr}.scope-area:nth-child(n){padding:28px 24px;border-left:0}.scope-area:nth-child(odd){padding-left:0}.scope-area:nth-child(even){border-left:1px solid var(--rule);padding-right:0}}
@media (max-width:720px){
 .scope{padding:64px 0 48px}
 .scope-intro{margin-bottom:28px}
 .scope-grid{grid-template-columns:1fr}
 .scope-area:nth-child(n){display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:24px 0;border-left:0}
 .scope-icon{grid-row:1/6;width:26px;height:26px;margin:2px 0 0}
 .scope-area h3{font-size:22px}
 .scope-sell{font-size:15.5px;margin-bottom:12px}
 .scope-area ul{margin-bottom:14px}
 .scope-you{padding-top:12px}
}
.story{padding:55px 0 75px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px}
.story-copy{max-width:460px}
.story-copy h2{margin-bottom:18px}
.story-copy .lede{font-size:20px;margin-bottom:24px}

.story-reverse{background:var(--paper);border-block:1px solid var(--rule);padding:75px 0}
.story-reverse .show{grid-column:1;grid-row:1}
.story-reverse .story-copy{grid-column:2;grid-row:1}
.show{margin:0;min-width:0}
.show-stage{min-height:650px;border-radius:var(--radius-panel);padding:46px 20px 58px;gap:17px;box-shadow:none}
.show-stage::before{display:none}
.demo-stage-label{position:absolute;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--on-navy-med);padding-bottom:12px;border-bottom:1px solid var(--sem-band-rule)}
.show-who{font-size:11px;text-transform:none;letter-spacing:0;margin-top:12px;color:var(--on-navy-med)}
.show-who::before{background:var(--on-navy);box-shadow:none;width:5px;height:5px}
.show-badge{font:16px var(--serif);white-space:normal;text-align:center;bottom:21px;gap:8px;padding:9px 13px 9px 9px}
.show-badge svg{width:24px;height:24px;background:var(--sem-settled)}
.demo-controls{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:17px 0 0;color:var(--muted)}
.demo-controls p{font-size:12px;line-height:1.6;margin:0;max-width:32ch}
.show-pause{flex:none;width:auto;min-height:36px;background:transparent;border:0;border-bottom:1px solid var(--brass);border-radius:0;padding:0 0 3px;font:600 12px var(--sans);cursor:pointer;color:var(--navy)}
.show-pause:disabled{cursor:default;opacity:1;color:var(--muted);border-color:var(--rule)}
.demo-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:30px;text-align:center;color:var(--navy);font:16px var(--sans)}
.demo-fallback .app-brand{font-size:36px}
.demo-fallback>span:last-child{font-size:12px;color:var(--muted)}
/* The progress/touch marker uses navy; brass remains a hairline. */
.app-beam{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--navy) 12%,transparent));border-bottom:1px solid var(--brass)}
.show-tap{--touch-colour:var(--navy)}
.autonomy{padding:80px 0;background:var(--cream)}
.autonomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.autonomy .lede{margin-bottom:28px}
.mode-panel{border:1px solid var(--rule);background:var(--paper);border-radius:var(--radius-panel);padding:24px}
.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
.mode-btn{min-height:44px;border:0;border-bottom:2px solid transparent;background:transparent;padding:10px;font:600 13px var(--sans);cursor:pointer;color:var(--muted)}
.mode-btn.active{border-bottom-color:var(--navy);color:var(--navy)}
.mode-readout{padding:28px 6px 4px;min-height:235px}
.mode-kicker{font-size:11px;color:var(--muted)}
.mode-readout h3{font-family:var(--title);font-size:28px;margin:12px 0}
.mode-readout p{font-size:14px;color:var(--ink-2);line-height:1.7}
.mode-rule{display:flex;gap:10px;align-items:start;padding-top:20px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-2)}
.mode-rule svg{width:16px;height:16px;flex:none;color:var(--sem-settled)}
.rent-support{padding:60px 0 80px}
.rent-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px;padding-top:45px;border-top:1px solid var(--rule)}
.rent-grid .lede{margin-bottom:0}
.rent-copy p{font-size:17px;line-height:1.8;color:var(--ink-2);max-width:43ch}
.savings{background:var(--navy);color:var(--on-navy);padding:90px 0}
.savings-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.savings .savings-copy,
.savings h2,.savings h2 em{color:var(--on-navy)}
.savings-copy{font-size:20px;line-height:1.5;margin-bottom:28px;max-width:30ch}

.savings .quiet{color:var(--on-navy)}
.saving-tool{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-panel);padding:28px}
.saving-label{gap:12px;flex-wrap:wrap}
.rent-readout{font-size:30px}
.saving-headline strong{font-size:52px}
.property-option{background:transparent;color:var(--navy)}
.property-option[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.switch{padding:80px 0}
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.switch .lede{margin-bottom:28px}
.switch-list{border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;position:relative;padding:22px 32px 22px 0;font-size:16px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:18px;font-size:24px;font-weight:400;color:var(--navy)}
details[open]>summary::after{content:"−"}
details>p{font-size:14px;line-height:1.8;color:var(--ink-2);padding:0 26px 20px 0;margin:0}
.human .shell>p{display:flex;align-items:center;gap:20px;border-block:1px solid var(--rule);padding:28px 0;margin:0}
.human strong{font:24px var(--title);color:var(--navy)}
.human span{font-size:14px;color:var(--muted)}
.human .quiet{margin-left:auto}
.join{padding:80px 0}
.join-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:var(--radius-panel);overflow:hidden;background:var(--paper)}
.notebook-photo{min-height:490px;background-image:var(--notebook-image);background-size:cover;background-position:center}
.join-copy{padding:50px;align-self:center}
.join-copy>p{font-size:17px;color:var(--ink-2);line-height:1.6}
.join-points{padding:0;margin:24px 0 30px;list-style:none;font-size:13px;color:var(--ink-2)}
.join-points li{padding:10px 0;border-top:1px solid var(--rule)}
.join-points li:last-child{border-bottom:1px solid var(--rule)}
.faq{padding:0 0 90px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.faq-list{border-top:1px solid var(--rule)}
.final{padding:70px 0 76px;text-align:center;background:var(--navy);color:var(--on-navy)}

.final h2,.final h2 em{color:var(--on-navy)}
.final h2{font-size:clamp(38px,4.4vw,62px);margin-bottom:20px}
.final p{font-size:15px;color:var(--on-navy-med);margin-bottom:28px}
footer{padding:40px 0;background:var(--cream)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:30px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.foot-links a:hover{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:5px}
.legal{font-size:11px;line-height:1.7;color:var(--muted);margin:30px 0 0;padding-top:24px;border-top:1px solid var(--rule);max-width:100ch}
@media(min-width:1500px){.hero{padding-top:var(--web-hero-top-wide)}.hero-life img{height:var(--web-hero-photo-height-wide)}}
@media(max-width:1100px){
 .shell{width:calc(100% - 64px)}
 .story-grid,.autonomy-grid,.rent-grid,.savings-grid,.switch-grid,.faq-grid{gap:55px}
 .property-update{right:22px;bottom:22px;width:280px;padding:15px 17px}
 .hero-life>figcaption{font-size:10px;left:18px;bottom:18px}
 .join-copy{padding:32px}
 .mini-nav{gap:22px}
 .mini-nav .sign-in{margin-left:0;padding-left:22px}
 .foot-top{align-items:start}.foot-links{max-width:420px;gap:18px}
}
@media(max-width:800px){
 .shell{width:calc(100% - 40px)}
 .masthead .shell{height:82px}.brand-mark{font-size:39px}.brand{gap:14px}.brand-desc{font-size:8px}.brand-rule{height:28px}
 .mini-nav{gap:18px;font-size:12px}.mini-nav a[href="#faq"]{display:none}.mini-nav .sign-in{padding-left:18px}
 .hero{padding-top:var(--web-hero-top-narrow)}
 .hero-life img{height:auto;aspect-ratio:1.55/1;object-position:35% center}
 .property-update{position:relative;width:calc(100% - 30px);margin:-35px auto 0;right:auto;bottom:auto;max-width:370px;padding:16px 20px}
 .hero-life>figcaption{position:static;padding:16px 0 0;margin:0;background:transparent;text-align:center;font-size:11px}
 .update-meta{padding-bottom:10px}.update-property{padding-block:10px}.update-message{padding-top:10px}.update-message p br{display:none}.update-end{margin-top:8px}
 
 .story{padding:35px 0 55px}.story-grid{grid-template-columns:1fr;gap:32px}.story-copy{max-width:none}.story h2{font-size:43px}.story-copy .lede{font-size:18px}
 .story-reverse{padding:55px 0}.story-reverse .show,.story-reverse .story-copy{grid-column:auto;grid-row:auto}
 .show{max-width:530px;width:100%;margin-inline:auto}
 .autonomy{padding:55px 0}.autonomy-grid,.rent-grid,.savings-grid,.switch-grid,.faq-grid{grid-template-columns:1fr;gap:30px}
 .autonomy .lede{margin-bottom:20px}.mode-readout{min-height:210px}
 .rent-support{padding:15px 0 55px}.rent-grid{padding-top:35px;gap:18px}.rent-copy p{margin-top:0;font-size:16px}
 .savings{padding:55px 0}.savings-copy{font-size:18px;margin-bottom:15px}.saving-tool{padding:24px}
 .switch{padding:55px 0}.switch .lede{margin-bottom:18px}
 .human .shell>p{flex-wrap:wrap;gap:12px 18px}.human strong{font-size:23px}.human span{font-size:12px}.human .quiet{margin-left:0;font-size:13px}
 .join{padding:55px 0}.join-card{grid-template-columns:1fr}.notebook-photo{min-height:300px;background-position:center 45%}.join-copy{padding:30px}
 .faq{padding-bottom:55px}.faq-grid{gap:10px}.faq h2{font-size:38px}.final{padding:55px 0}.final h2{font-size:42px}
 .foot-top{flex-direction:column;gap:30px}.foot-links{max-width:none;gap:16px 22px}
}
@media(max-width:430px){
 .brand-desc{font-size:7px}.brand{gap:11px}.mini-nav>a:not(.sign-in){display:none}.mini-nav .sign-in{border:0;padding-left:0;font-size:13px}
 .hero-life img{aspect-ratio:1.15/1;object-position:24% center}
 .story h2{font-size:39px}.show-stage{padding-inline:12px}.show-phone{--phone-w:274px;--phone-h:555px}.show-stage{min-height:650px}
 .property-update{max-width:300px}
 .demo-controls{gap:12px}.demo-controls p{max-width:24ch}
 .saving-tool{padding:19px}.saving-label{align-items:start;flex-direction:column}.fee-setting{gap:8px}.fee-label small{max-width:17ch}
 .saving-result{gap:15px}.saving-headline strong{font-size:46px}
 .join-copy{padding:25px}.join-copy h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .show-tap,.caret{display:none}
}
@media(max-width:360px){
 .show-phone{--phone-w:248px;--phone-h:540px}
 .hero h1{font-size:var(--web-hero-title-tiny)}
 .update-property strong{font-size:12px}
}

/* Hero, 30 October 2026 (Tom): the descriptor carries weight; the photo
   carries what T&P does while the landlord is out (the example update
   card is gone). The header's trial button
   appears only once the hero's own button has scrolled away, so a view
   never holds two navy buttons. */
.nav-cta{display:none;padding:11px 18px;font-size:14px}
.past-hero .nav-cta{display:inline-flex}
.hero-note .note-title{margin:14px 0 2px;font-family:var(--title);font-size:24px;line-height:1.15;color:var(--navy)}
.hero-note .note-line{margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.note-list{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--rule);display:grid;gap:9px}
.note-list li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--navy)}
.hero-note .update-end{margin:12px 0 0}
@media(max-width:640px){
 .past-hero .mini-nav .sign-in{display:none}
 .nav-cta{padding:9px 13px;font-size:12px}
}

/* The opening (patterns/website-page.md): one centred column — what it is,
   the headline with its italic second line, one line, one button, a note.
   The postcode is asked on the next page, so the opening holds nothing to
   fill in. Every size and gap is a web.hero* token. */
.hero-intro{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:var(--web-hero-measure);margin:0 auto var(--web-hero-gap-photo)}
.hero-kicker{margin:0 0 var(--web-hero-gap-kicker);font-family:var(--title);font-size:var(--web-hero-kicker);line-height:1.1;letter-spacing:var(--tracking-refined-title);color:var(--navy)}
.hero h1{font-size:var(--web-hero-title);margin-bottom:var(--web-hero-gap-title)}
.hero h1 em{margin-top:2px}
.hero-heritage{margin:0;font-size:var(--web-hero-line);line-height:1.5;color:var(--ink-2)}
.hero-start{display:flex;flex-direction:column;align-items:center;margin-top:var(--web-hero-gap-button);padding:0;min-width:0}
.hero-cta{padding:var(--web-hero-button-pad);font-size:var(--web-hero-button);gap:14px}
.hero-start-note{margin:var(--web-hero-gap-note) 0 0;font-size:var(--web-hero-note);line-height:1.5;color:var(--muted)}
@media(max-width:640px){
 .hero-intro{margin-bottom:var(--web-hero-gap-photo-narrow)}
 .hero-kicker{font-size:var(--web-hero-kicker-narrow);margin-bottom:var(--web-hero-gap-kicker-narrow)}
 .hero h1{font-size:var(--web-hero-title-narrow)}
 .hero-heritage{font-size:var(--web-hero-line-narrow)}
 .hero-start{margin-top:var(--web-hero-gap-button-narrow);align-self:stretch}
 .hero-cta{width:100%;justify-content:center}
}