/* ============================================================
   Meadow marketing site — page-level styles
   Loaded after meadow.css. Sections: shared helpers · home ·
   about · register. Uses the tokens defined in meadow.css.
   ============================================================ */

/* ============================================================
   Shared helpers
   ============================================================ */
.eyebrow-center{ justify-content:center; }

/* ---- One card scale for the whole site ----
   Every card-shaped component draws its heading and copy from these two rules,
   not from a section-scoped override of its own. That is the entire fix: the
   same card used to render at 25.6px on home, 20px on about and 14.5px on the
   legal pages because each section quietly out-specified the shared token.
   The selectors listed here are the cards whose markup uses a bare heading;
   cards that carry the .h4 class get the same size from the token itself.
   Add a new card here by adding its selector to the list — never by giving it
   its own font-size. Sizes are the .h4 and .body-sm rungs from meadow.css. */
.card-title,
.how-steps .step h3,
.dl-card h3,
.support-cat h3,
.legal-card h4,
.legal-feature h4,
.legal-contact__card h4,
.support-panel h4,
.contact-detail__label,
.legal-body h2{
  font-size:1.25rem; line-height:1.3; letter-spacing:-.02em; font-weight:800;
}
.card-title{ margin-top:20px; }

.card-copy,
.how-steps .step p,
.dl-card p,
.support-cat p,
.f-list p,
.legal-card p,
.legal-feature p,
.legal-contact__card p,
.support-panel p,
.support-cta p,
.terms-note p,
.terms-card--sm p,
.terms-card--tint p,
.terms-card--alert p,
.legal-note p,
.legal-note li,
.legal-checks li,
.office-card__sub{
  font-size:.9375rem; line-height:1.6; font-weight:500;
}
.card-copy{ margin-top:10px; }
.split-head{ align-items:flex-end; margin-bottom:50px; }
.split-head__lead{ max-width:46ch; }

/* ============================================================
   Home — hero artwork
   ============================================================ */
.hero__micro .micro-ic{ color:var(--good); display:flex; }
.mock__url{ margin-left:8px; font-size:12px; color:var(--muted); font-family:'DM Mono', monospace; }
.float-card--start{ top:-22px; left:-26px; }
.float-card--end{ bottom:-20px; right:-18px; }
.float-card__label{ font-size:12px; color:var(--muted); font-weight:600; }
.float-card__value{ font-weight:800; font-size:15px; }
.chip-good{ background:var(--good-bg); color:var(--good); }

/* App screenshots — the phone shots (hero, tenant app) and the wide dashboard
   shots (manager, landlord) share one treatment. Every source is a plain
   capture, so each stands on its own with no frame or chrome: centred, width
   capped so it never sprawls, and lifted off the page by a soft shadow. The
   phone shots hold to their native 236px and stay pixel-sharp; the dashboard
   shots take a wider cap below. */
.hero__media,
.phone-stage,
.shot-stage{ position:relative; display:flex; justify-content:center; }

/* Glow pooled behind the shot so it reads as sitting above the section
   background rather than pasted onto it. */
.hero__media::before,
.phone-stage::before,
.shot-stage::before{
  content:''; position:absolute; z-index:0; left:50%; top:50%;
  width:320px; height:320px; transform:translate(-50%,-46%);
  background:radial-gradient(circle, rgba(23,101,186,.10), transparent 70%);
  filter:blur(8px); pointer-events:none;
}

.hero-shot,
.phone-stage__shot,
.shot-stage__img{
  position:relative; z-index:1;
  width:100%; max-width:236px; height:auto; display:block;
  border-radius:var(--r-lg);
  box-shadow:0 1px 3px rgba(15,31,79,.04), 0 8px 18px rgba(15,31,79,.07), 0 24px 48px rgba(15,31,79,.09);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
.hero-shot:hover,
.phone-stage__shot:hover,
.shot-stage__img:hover{
  transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(15,31,79,.05), 0 12px 24px rgba(15,31,79,.09), 0 32px 60px rgba(15,31,79,.12);
}

/* The dashboard captures are landscape, and their own background is near-white
   — so they get a wider cap, a glow shaped to match, and a hairline edge to
   separate them from a light section behind. */
.shot-stage::before{ width:min(100%,520px); height:300px; }
.shot-stage__img{ max-width:620px; border:1px solid var(--border); }

/* A default .split leaves the media column ~490px at --maxw, which is narrower
   than the shots deserve. Tilt the ratio toward the media side so they read at
   a useful size; .split-rev places the media in the first track, so the ratio
   flips with it. Only above the breakpoint where .split is still two columns. */
@media (min-width: 901px){
  .split--shot{ grid-template-columns:.86fr 1.14fr; }
  .split--shot.split-rev{ grid-template-columns:1.14fr .86fr; }
}

@media (prefers-reduced-motion: reduce){
  .hero-shot,
  .phone-stage__shot,
  .shot-stage__img{ transition:none; }
  .hero-shot:hover,
  .phone-stage__shot:hover,
  .shot-stage__img:hover{ transform:none; }
}

/* ---- Home — payment tiles: brand glyphs in the shared chip tile ---- */
.pay-grid{ margin-top:54px; }
.pay-logo{ height:auto; margin-bottom:20px; }
.pay-logo .chip svg{ width:26px; height:26px; }
.pay-logo--paypal{ color:#0070BA; }
.pay-logo--venmo{ color:#3D95CE; }

/* ---- Home — key features: icon chip and heading centered above left-aligned copy ---- */
#features .grid .chip{ margin-left:auto; margin-right:auto; }
#features .grid .card-title{ text-align:center; }

/* ---- Home — how it works (Figma: numbered cards, centered) ---- */
#how .eyebrow::before{ display:none; }
.how-steps{ margin-top:64px; grid-template-columns:repeat(4,1fr); gap:24px; }
.how-steps .step{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  background:var(--canvas);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  padding:46px 22px 30px;
  text-align:center;
}
.how-steps .step__num{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-size:16px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--canvas);
  box-shadow:0 6px 16px rgba(23,101,186,.30);
  z-index:2;
}
.how-steps .step__chip{
  width:48px; height:48px; border-radius:12px;
  margin:0 auto; background:var(--blue-tint); color:var(--blue);
}
.how-steps .step__chip svg{ width:24px; height:24px; }
.how-steps .step h3{ margin-top:20px; color:var(--ink); }
.how-steps .step p{ margin-top:12px; color:var(--muted); }

@media (max-width: 900px){
  .how-steps{ grid-template-columns:1fr 1fr; gap:44px 24px; }
}
@media (max-width: 600px){
  .how-steps{ grid-template-columns:1fr; gap:44px; margin-top:52px; }
}

/* ---- Home — stats ---- */
.stats-head{ max-width:600px; }
.stats-grid{ margin-top:54px; text-align:center; }
.stats-note{ margin-top:40px; font-size:12.5px; font-weight:500; color:var(--on-dark-3); }

/* ---- Home — testimonials ---- */
.t-head{ align-items:flex-end; margin-bottom:44px; }
.tnav--end{ justify-self:end; }
.tstars{ color:#F2B705; margin-bottom:18px; }
.tauthor__name{ font-weight:800; }
.tauthor__role{ font-size:14px; }

/* ---- Home — tenant app section ---- */
.app-copy .h2,
.app-copy .lead{ margin-top:16px; }
.app-badges{ margin-top:30px; align-items:center; }
.app-note{ margin-top:18px; font-size:.8125rem; line-height:1.55; font-weight:500; }
/* .phone-stage and .phone-stage__shot are styled with the hero shot above. */

/* ============================================================
   About
   ============================================================ */
.about-hero{ background:linear-gradient(180deg, var(--blue-tint) 0%, var(--blue-tint-2) 100%); }
.about-hero__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center; position:relative; }
.about-hero h1{ max-width:12ch; margin-top:18px; }
.about-hero h1 .accent{ color:var(--blue); }
.about-hero__lead{ margin-top:18px; max-width:46ch; }
.about-hero__media{ position:relative; }
/* The artwork ships with its own rounded corners, shadow and transparent
   margin — so it sizes naturally here rather than being framed or cropped. */
.about-shot{ width:100%; height:auto; display:block; }
.secure-card{ position:absolute; left:0; bottom:5%; width:min(260px,64%); background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-md); padding:14px 16px; }
.secure-card__top{ display:flex; align-items:center; gap:11px; }
.secure-card .chip{ width:34px; height:34px; border-radius:10px; }
.secure-card .chip svg{ width:17px; height:17px; }
.secure-card .t{ font-size:13px; font-weight:800; color:var(--blue); letter-spacing:-.01em; }
.secure-card .s{ font-size:11px; font-weight:600; color:var(--muted); margin-top:1px; }
.secure-card__bar{ margin-top:12px; height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.secure-card__bar i{ display:block; height:100%; width:72%; border-radius:999px; background:var(--blue); }

.about-story__title{ margin-top:16px; }
.about-story__body{ margin-top:18px; }
.about-values__grid{ margin-top:50px; }
.about-values .h4{ margin-top:18px; }

.about-stats{ background:linear-gradient(120deg, var(--blue) 0%, var(--blue-700) 100%); }
.stat-box{ border:1px solid rgba(255,255,255,.28); border-radius:var(--r-md); padding:22px 18px; text-align:center; }
.stat-box .stat__label{ text-transform:uppercase; letter-spacing:.07em; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.75); margin-top:10px; }
.about-stats__note{ text-align:center; margin-top:34px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ---- Dark CTA band ---- */
.cta-dark{ background:#080C16; }
.cta-dark__card{ background:linear-gradient(120deg, var(--blue) 0%, var(--blue-700) 100%); border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.cta-dark__glow{ position:absolute; top:-140px; right:-90px; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none; }
.cta-dark__inner{ position:relative; }
.cta-dark__title{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-dark__lead{ color:rgba(255,255,255,.85); margin-top:14px; max-width:52ch; margin-inline:auto; }
.cta-dark__actions{ justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ============================================================
   Register
   ============================================================ */
/* The split mirrors the portal login screen (PublicAuthPageLayout.vue): a light
   brand panel beside a centred form column. Pinned to the viewport with
   `height`, not `min-height` — with `min-height` the row is content-sized and
   free to grow, so `.reg-main`'s `overflow-y` never engages and the document
   scrolls instead of the column. `dvh` keeps that honest while a mobile URL bar
   collapses. */
.reg-wrap{ height:100dvh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }

/* This page has no fixed header, so the global scroll-padding meant for one
   would over-scroll every field the user tabs into. */
.reg-wrap,
.reg-main{ scroll-padding-top:0; }

/* ---- Register — left brand panel ---- */
/* #D6E5FF is the portal's --main-light-color, so the two auth screens sit on
   the same wash. */
/* The logo is the only in-flow child, so it centres on both axes; the copyright
   is taken out of flow and pinned to the bottom, otherwise it pulls the logo
   above the panel's midpoint. */
.reg-brand{ position:relative; background:#D6E5FF; display:flex; align-items:center; justify-content:center; padding:clamp(32px,4vw,64px); overflow:hidden; }
.reg-brand__link{ display:block; width:min(350px,80%); margin:0 auto; }
.reg-brand__logo{ width:100%; height:auto; display:block; }
.reg-brand__copy{ position:absolute; left:0; right:0; bottom:clamp(24px,5vh,48px); color:var(--blue); font-size:.8125rem; line-height:1.55; font-weight:600; text-align:center; margin:0; }

/* ---- Register — form column ---- */
/* `min-height:0` lets the column shrink below its content and actually scroll —
   without it a grid/flex child floors at its content height. */
.reg-main{ display:flex; flex-direction:column; padding:32px clamp(24px,4vw,56px) 24px; overflow-y:auto; min-height:0; }
/* Centred with auto margins, not `justify-content:center`. Once validation
   messages push the form past the viewport, a centred flex column overflows
   equally in both directions and the top of the card — heading included —
   becomes unreachable; auto margins collapse to 0 instead and the column
   scrolls from the top. */
.reg-card{ width:100%; max-width:470px; margin:auto; }
.reg-card__brand{ display:none; }
.reg-logo{ height:28px; width:auto; display:block; margin-bottom:24px; }
.reg-title{ font-size:1.9rem; color:var(--blue); letter-spacing:-.02em; }
.reg-sub{ margin-top:6px; font-weight:500; color:var(--ink-2); }
.reg-alt{ margin-top:16px; text-align:center; font-size:.9375rem; line-height:1.6; font-weight:500; color:var(--ink-2); }
.reg-alt a{ color:var(--navy); font-weight:700; }
.reg-alt a:hover{ color:var(--blue); }
.reg-form{ margin-top:24px; }
.reg-form > .form-row + .form-row,
.reg-form > .form-row + .field,
.reg-form > .field + .field{ margin-top:14px; }
.reg-form .form-row{ gap:14px; }
.reg-demo{ font-size:.8125rem; line-height:1.55; font-weight:500; text-align:center; margin-top:16px; }
.reg-demo a{ font-weight:600; }

/* ---- Register — login-style fields (icon well, 45px, 10px radius) ---- */
.reg-form .field label{ color:var(--ink); margin-bottom:7px; }
.reg-input{ position:relative; }
.reg-input__ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
.reg-input__ic svg{ width:18px; height:18px; display:block; }
.reg-form .field input{ height:45px; padding:0 15px 0 45px; border-radius:10px; }

.reg-submit{ margin-top:20px; height:48px; padding:0 24px; border-radius:10px; letter-spacing:.04em; }
/* Longhands, and repeated on :hover, on purpose. `.btn` transitions the
   `background` shorthand, and `.btn-primary:hover` (0,2,0) outranks a bare
   `.reg-submit` (0,1,0) — so on hover the solid hover colour dropped the
   gradient image instantly while background-color animated up from
   transparent, flashing the white page through for ~180ms. */
.reg-submit,
.reg-submit:hover{ background-color:var(--blue); background-image:none; box-shadow:none; }
/* Flat, like the portal login button — no lift on a full-width form submit. */
.reg-submit:hover{ filter:brightness(1.06); transform:none; }
.reg-submit[disabled]{ opacity:.65; cursor:not-allowed; transform:none; filter:none; }
.reg-foot{ display:none; margin-top:auto; padding-top:20px; text-align:center; font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); }
.req{ color:var(--bad); font-weight:700; }
.checkbox-row{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; }
.checkbox-row input{ width:19px; height:19px; margin-top:2px; accent-color:var(--blue); flex-shrink:0; }
.checkbox-row label{ font-size:.8125rem; line-height:1.55; color:var(--ink); font-weight:500; }
.checkbox-row a{ color:var(--ink); font-weight:600; text-decoration:underline; }
.checkbox-row a:hover{ color:var(--blue); }
.checkbox-err{ color:var(--bad); font-size:.8125rem; line-height:1.55; margin-top:6px; font-weight:600; display:none; }
.checkbox-err.show{ display:block; }

/* SMS disclosures required beside the consent box by Twilio's A2P campaign check (message
   frequency, data rates, STOP/HELP). Indented to the label's text column — past the 19px
   box and its 11px gap — and set small and muted so it reads as fine print attached to the
   consent rather than as another form field. */
.consent-fineprint{ margin:5px 0 0 30px; font-size:.6875rem; line-height:1.45; color:var(--muted); font-weight:500; }

/* ---- Register — form-level error (CSRF expiry, throttling, server faults) ---- */
.reg-alert{ display:none; margin-top:16px; padding:12px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--bad); background:rgba(200,65,47,.06); color:var(--bad);
  font-size:.8125rem; font-weight:600; line-height:1.55; }
.reg-alert.show{ display:block; }

/* ---- Register — password reveal toggle ---- */
.pw-input{ position:relative; }
/* Scoped as tightly as `.reg-form .field input`, whose padding shorthand would
   otherwise reset the room reserved for the reveal button. */
.pw-input input,
.reg-form .pw-input input{ padding-right:46px; }
.pw-toggle{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer;
  border-radius:var(--r-xs); transition:color .15s var(--ease), background-color .15s var(--ease);
}
.pw-toggle:hover{ color:var(--ink-2); background-color:var(--surface-2); }
.pw-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.pw-toggle svg{ width:19px; height:19px; display:block; }
.pw-toggle span{ display:flex; }
.pw-toggle .pw-icon--off{ display:none; }
.pw-toggle.is-revealed .pw-icon--on{ display:none; }
.pw-toggle.is-revealed .pw-icon--off{ display:flex; }

/* ---- Register — password strength ---- */
/* Hidden until the field has a value so the column height stays stable. */
.pw-meter{ display:none; margin-top:9px; }
.pw-meter.show{ display:block; }
.pw-meter__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.pw-meter__caption{ font-size:.75rem; line-height:1.4; font-weight:600; color:var(--muted); }
.pw-meter__label{ font-size:.75rem; line-height:1.4; font-weight:700; color:var(--muted); }
.pw-meter__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.pw-meter__seg{ height:4px; border-radius:var(--r-pill); background:var(--border-2); transition:background-color .18s var(--ease); }
.pw-meter[data-level="weak"] .pw-meter__label{ color:var(--bad); }
.pw-meter[data-level="weak"] .pw-meter__seg.is-on{ background:var(--bad); }
.pw-meter[data-level="fair"] .pw-meter__label{ color:var(--warn); }
.pw-meter[data-level="fair"] .pw-meter__seg.is-on{ background:var(--warn); }
.pw-meter[data-level="strong"] .pw-meter__label{ color:var(--good); }
.pw-meter[data-level="strong"] .pw-meter__seg.is-on{ background:var(--good); }
.pw-reqs{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; padding:0; list-style:none; }
.pw-reqs li{ font-size:.75rem; line-height:1.4; font-weight:600; color:var(--muted); transition:color .18s var(--ease); }
.pw-reqs li::before{ content:'○'; margin-right:5px; font-size:10px; }
.pw-reqs li.is-met{ color:var(--good); }
.pw-reqs li.is-met::before{ content:'●'; }

.reg-success__lead{ margin-top:12px; max-width:40ch; margin-inline:auto; }
.reg-success__actions{ justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ============================================================
   Contact
   ============================================================ */
.contact-hero .container{ max-width:720px; }
.contact-hero h1{ margin-top:18px; }
.contact-hero .lead{ margin-top:18px; }
.contact-sec{ padding-top:clamp(40px,5vw,64px); }
.contact-form-card{ border-radius:var(--r-xl); }
/* The form spans the row, so the detail cards sit under it as their own band.
   Only two cards exist, so center them as a group instead of a 3-up grid that
   leaves a blank trailing column. flex-wrap stacks them centered on narrow screens. */
.contact-details{ margin-top:24px; justify-content:center; flex-wrap:wrap; }
.contact-details > .card{ flex:1 1 320px; max-width:380px; }

/* ---- Contact — floating-label underline fields ---- */
.field-float{ position:relative; padding-top:18px; }
.field-float > label{ position:absolute; left:0; top:18px; margin:0; font-size:.9375rem; line-height:1.6; font-weight:500; color:var(--muted); pointer-events:none; transition:top .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease); }
.field-float > input,
.field-float > select,
.field-float > textarea{ border:none; border-bottom:1.5px solid var(--border-2); border-radius:0; padding:9px 0; background:transparent; }
.field-float > textarea{ min-height:150px; }
.field-float > input:focus,
.field-float > select:focus,
.field-float > textarea:focus{ box-shadow:none; border-bottom-color:var(--blue); }
.field-float > input:focus + label,
.field-float > input:not(:placeholder-shown) + label,
.field-float > textarea:focus + label,
.field-float > textarea:not(:placeholder-shown) + label,
.field-float--select > label{ top:0; font-size:.75rem; line-height:1.4; font-weight:700; color:var(--blue); }
.field-float > select{ color:var(--muted); }
.field-float > select:valid{ color:var(--ink); }
.field-float.show-err > input,
.field-float.show-err > select,
.field-float.show-err > textarea,
.field-float > .invalid{ border-bottom-color:var(--bad); box-shadow:none; }
.contact-row{ margin-top:26px; }
.contact-actions{ margin-top:30px; }
.contact-note{ font-size:.8125rem; line-height:1.55; font-weight:500; margin-top:14px; }
.contact-note a{ font-weight:700; }
.contact-success__lead{ margin-top:12px; max-width:42ch; margin-inline:auto; }
.contact-success__btn{ margin-top:24px; }

/* ---- Contact — detail cards ---- */
.contact-detail{ align-items:flex-start; }
/* A flex item floors at its own min-content width, and an email address has no
   break opportunity — so on a narrow phone the address pushed straight out of
   the card. Let the text column shrink, and let the address itself break. */
.contact-detail > div{ min-width:0; }
.contact-detail__value{ font-weight:600; display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.contact-detail__meta{ font-size:.8125rem; line-height:1.55; font-weight:500; margin-top:2px; }

/* ---- Contact — office card ---- */
.office-card{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); background:var(--navy); min-height:420px; display:flex; }
.office-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.office-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,79,.15) 0%, rgba(23,101,186,.82) 68%, rgba(15,76,143,.94) 100%); }
.office-card__body{ position:relative; z-index:1; margin-top:auto; padding:clamp(24px,3vw,34px); color:#fff; }
.office-card__eyebrow{ display:flex; align-items:center; gap:8px; font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.office-card__eyebrow svg{ width:15px; height:15px; }
.office-card__title{ color:#fff; font-size:clamp(1.4rem,2.2vw,1.75rem); letter-spacing:-.02em; margin-top:12px; }
.office-card__sub{ color:rgba(255,255,255,.82); margin-top:6px; }
.office-card__btn{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:#fff; color:var(--ink); font-weight:700; font-size:.9375rem; padding:11px 20px; border-radius:var(--r-pill); transition:transform .18s, box-shadow .18s; }
.office-card__btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.office-card__btn svg{ width:15px; height:15px; }
.office-copy__eyebrow{ display:block; color:var(--blue); font-weight:700; font-size:.9375rem; }
.office-copy__body{ margin-top:16px; }
.office-copy__quote{ margin-top:20px; font-style:italic; color:var(--ink-2); font-weight:500; line-height:1.65; }
.office-copy__by{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.office-copy__by .tavatar{ width:44px; height:44px; font-size:15px; }
.office-copy__by span:last-child{ color:var(--blue); font-weight:600; }

/* ============================================================
   Features
   ============================================================ */
.f-hero .container{ max-width:780px; }
.f-hero h1{ margin-top:18px; }
.f-hero h1 .accent{ color:var(--blue); }
.f-hero .lead{ margin-top:18px; }
.f-tabs{ display:inline-flex; gap:4px; padding:6px; border-radius:var(--r-pill); background:var(--blue); box-shadow:var(--sh-blue); margin-top:34px; flex-wrap:wrap; justify-content:center; }
.f-tabs a{ padding:11px 22px; border-radius:var(--r-pill); font-size:.9375rem; font-weight:600; color:#fff; transition:background .15s, color .15s; }
.f-tabs a:hover{ background:rgba(255,255,255,.14); }
.f-tabs a.is-active{ background:var(--canvas); color:var(--blue); font-weight:700; box-shadow:0 2px 8px rgba(15,31,79,.16); }

.f-sec__title{ margin-top:16px; }
.f-sec__lead{ margin-top:16px; }

/* ---- Features — two-column benefit list ---- */
/* Sized by the space actually available, not by viewport width. This list lives
   in the text half of a `.split--shot`, so just above the 900px breakpoint its
   column is only ~330px — a hard `1fr 1fr` there gave each item ~120px and shredded
   the copy, while a viewport media query cannot see that the container is narrow. */
.f-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px 26px; margin-top:30px; list-style:none; padding:0; }
.f-list--single{ grid-template-columns:1fr; gap:18px; }
.f-list li{ display:flex; gap:11px; align-items:flex-start; }
.f-list .tick{ flex-shrink:0; color:var(--blue); display:flex; margin-top:1px; }
.f-list .tick svg{ width:18px; height:18px; }
/* Compact two-up benefit list — the .h5 rung, not the full card title. */
.f-list h4{ font-size:1.0625rem; line-height:1.35; letter-spacing:-.015em; color:var(--ink); }
.f-list p{ color:var(--muted); margin-top:4px; }
.f-list .chip-sm{ width:34px; height:34px; border-radius:10px; }
.f-list .chip-sm svg{ width:17px; height:17px; }

/* ---- Features — landlord payout cards ---- */
.f-payout{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.f-card{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:20px; }
.f-payout__side{ margin-top:36px; }
.f-payout__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.f-payout__label{ font-size:12px; font-weight:800; color:var(--blue); }
.f-payout__date{ font-size:10.5px; font-weight:600; color:var(--muted); }
.f-payout__amt{ font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.03em; margin-top:12px; }
.f-bar{ height:6px; border-radius:999px; background:var(--surface-2); margin-top:14px; overflow:hidden; }
.f-bar i{ display:block; height:100%; width:92%; background:var(--blue); border-radius:999px; }
.f-payout__meta{ display:flex; justify-content:space-between; gap:10px; font-size:10.5px; font-weight:600; color:var(--muted); margin-top:8px; }
.f-stmt__head{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; color:var(--blue); }
.f-stmt__head svg{ width:16px; height:16px; }
.f-lines{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.f-lines i{ display:block; height:7px; border-radius:999px; background:var(--surface-2); }
.f-lines i:nth-child(2){ width:82%; }
.f-lines i:nth-child(3){ width:58%; }
.f-stmt__link{ display:block; margin-top:18px; text-align:center; font-size:11.5px; font-weight:700; color:var(--blue); background:var(--blue-wash); border-radius:var(--r-pill); padding:9px; }

/* ---- Features — tenant phone mockup ---- */
.f-phone{ width:280px; border-radius:38px; background:var(--navy); padding:12px; box-shadow:var(--sh-lg); margin-inline:auto; }
.f-phone__screen{ background:var(--canvas); border-radius:28px; padding:18px 16px 20px; }
.f-phone__bar{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
.f-phone__bar .burger{ display:flex; flex-direction:column; gap:3px; }
.f-phone__bar .burger i{ display:block; width:14px; height:2px; border-radius:2px; background:var(--ink-2); }
.f-phone__bar .avatar{ width:16px; height:16px; border-radius:50%; background:var(--blue-tint-2); display:block; }
.f-phone__title{ font-size:16px; font-weight:800; letter-spacing:-.02em; margin-top:16px; }
.f-phone__sub{ font-size:11px; font-weight:600; color:var(--muted); margin-top:3px; }
.f-phone__due{ background:var(--surface); border-radius:var(--r-md); padding:14px; margin-top:16px; }
.f-phone__due .l{ font-size:9px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.f-phone__due .v{ font-size:24px; font-weight:800; letter-spacing:-.03em; margin-top:4px; }
.f-phone__pay{ display:block; text-align:center; background:var(--blue); color:#fff; font-weight:800; font-size:13.5px; padding:12px; border-radius:var(--r-sm); margin-top:14px; }
.f-phone__row{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-top:10px; }
.f-phone__row .ic{ width:26px; height:26px; border-radius:8px; background:var(--good-bg); color:var(--good); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.f-phone__row .ic svg{ width:14px; height:14px; }
.f-phone__row .n{ font-size:11.5px; font-weight:700; }
.f-phone__row .d{ font-size:10px; font-weight:600; color:var(--muted); margin-top:1px; }
.f-phone__row .paid{ margin-left:auto; font-size:10px; font-weight:700; color:var(--good); }

/* ---- Features — social sign-in buttons ---- */
.f-signin{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.f-signin a{ display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--border-2); border-radius:var(--r-pill); padding:10px 18px; font-size:13.5px; font-weight:700; color:var(--ink); background:var(--canvas); transition:border-color .15s, transform .15s; }
.f-signin a:hover{ border-color:var(--blue); transform:translateY(-2px); }
.f-signin svg{ width:17px; height:17px; }
.f-signin .g{ color:#4285F4; }

/* ---- Features — comparison ---- */
.f-compare{ background:linear-gradient(120deg, var(--blue) 0%, var(--blue-700) 100%); border-radius:var(--r-xl); padding:clamp(36px,5vw,64px) clamp(18px,3vw,48px); }
.f-compare__head{ text-align:center; max-width:640px; margin-inline:auto; }
.f-compare__head h2{ color:#fff; }
.f-compare__head .lead{ color:rgba(255,255,255,.85); margin-top:14px; }
.f-compare__table{ margin-top:42px; background:var(--canvas); border-radius:var(--r-lg); padding:8px; }
.f-compare .cmp thead th{ background:var(--surface); }
.f-compare .cmp thead th:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); }
.f-compare .cmp thead th:last-child{ border-radius:0 var(--r-md) var(--r-md) 0; }
.f-compare .cmp .col-meadow,
.f-compare .cmp thead th.col-meadow{ background:transparent; color:var(--blue); border-radius:0; }
.f-compare .cmp .yes{ color:var(--blue); font-weight:700; }

/* ============================================================
   Support / help center
   ============================================================ */
.support-hero{ text-align:center; padding-bottom:56px; }
.support-hero .container{ max-width:760px; }
.support-hero h1{ color:var(--blue); margin-top:20px; }
.support-hero .lead{ margin-top:16px; }
.faq-search{ position:relative; max-width:520px; margin:30px auto 0; }
.faq-search input{ width:100%; padding:16px 18px 16px 48px; border:1px solid var(--border); border-radius:var(--r-pill); font-family:inherit; font-size:.9375rem; font-weight:500; color:var(--ink); background:var(--canvas); box-shadow:var(--sh-sm); outline:none; transition:border-color .15s, box-shadow .15s; }
.faq-search input:focus{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,101,186,.12); }
.faq-search svg{ position:absolute; left:19px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }

/* ---- Support — category cards ---- */
.support-cats{ display:grid; grid-template-columns:repeat(3,1fr); max-width:920px; margin-inline:auto; }
.support-cat{ text-align:center; padding:26px 22px; }
.support-cat + .support-cat{ border-left:1px solid var(--border); }
.support-cat .chip{ background:var(--blue); color:#fff; width:44px; height:44px; border-radius:12px; margin-inline:auto; }
.support-cat .chip svg{ width:22px; height:22px; }
.support-cat h3{ margin-top:16px; }
.support-cat p{ color:var(--muted); margin-top:8px; }

/* ---- Support — FAQ groups ---- */
.faq-sec{ padding-top:clamp(40px,5vw,64px); }
.faq-sec .container{ max-width:820px; }
.faq-group{ scroll-margin-top:calc(var(--nav-h) + 24px); }
.faq-group + .faq-group{ margin-top:60px; }
.faq-cat__head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.faq-cat__head .ic{ color:var(--blue); display:flex; }
.faq-cat__head .ic svg{ width:20px; height:20px; }
.faq-sec .acc__item{ border:1px solid transparent; border-bottom-color:var(--border); border-radius:0; background:transparent; box-shadow:none; }
.faq-sec .acc__item + .acc__item{ margin-top:0; }
.faq-sec .acc__item.open{ background:var(--blue-wash); border-color:var(--border); border-radius:var(--r-md); box-shadow:none; }
.faq-sec .acc__q{ padding:20px; }
.faq-sec .acc__icon{ width:auto; height:auto; background:transparent; color:var(--muted); }
.faq-sec .acc__item.open .acc__icon{ background:transparent; color:var(--ink); }
.faq-sec .acc__a__inner{ padding:0 20px 20px; }
.faq-empty{ display:none; text-align:center; color:var(--muted); padding:40px; font-weight:600; }
.faq-empty.show{ display:block; }
.acc__item.hidden{ display:none; }

/* ---- Support — still stuck CTA ---- */
/* Copy on the left, action on the right, on one line — the panel that used to
   fill the second column is gone, so a two-column grid just left dead space. */
.support-cta{ background:linear-gradient(120deg, var(--blue) 0%, var(--blue-700) 100%); border-radius:var(--r-lg); padding:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; gap:20px clamp(24px,4vw,48px); align-items:center; justify-content:space-between; }
.support-cta h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2rem); letter-spacing:-.02em; }
.support-cta p{ color:rgba(255,255,255,.85); margin-top:10px; max-width:72ch; }
.support-cta .btn{ flex-shrink:0; }
.support-panel{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:26px; }
.support-panel h4{ color:#fff; margin-top:20px; }
.support-panel p{ color:rgba(255,255,255,.8); margin-top:6px; }
.avatars{ display:flex; align-items:center; }
.avatars i,
.avatars span{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.45); background:rgba(255,255,255,.6); display:block; }
.avatars > * + *{ margin-left:-12px; }
.avatars span{ background:var(--blue-700); color:#fff; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   Legal pages (cookies · privacy · terms)
   ============================================================ */
.legal-hero{ text-align:center; padding-bottom:52px; }
.legal-hero .container{ max-width:900px; }
.legal-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-tint); color:var(--blue); border-radius:var(--r-pill); padding:8px 16px; font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.legal-badge svg{ width:15px; height:15px; }
.legal-hero h1{ color:var(--blue); margin-top:22px; }
.legal-hero__meta{ margin-top:14px; font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); }
.legal-sec{ padding-top:52px; }

/* ---- Legal — cookie type cards ---- */
.legal-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.legal-card{ background:var(--blue-wash); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; }
.legal-card .chip{ background:var(--blue); color:#fff; width:40px; height:40px; border-radius:11px; }
.legal-card .chip svg{ width:20px; height:20px; }
.legal-card h4{ color:var(--ink); margin-top:18px; }
.legal-card p{ color:var(--muted); margin-top:8px; }

/* ---- Legal — cookie inventory table ---- */
/* These tables have a floor width no phone can meet: the first column is nowrap
   (names like __Secure-3PAPISID, "Support Communications") and the rest carry
   prose. Without a scroll box the table widens the whole document and the entire
   page scrolls sideways — which is why the footer and hero bands stopped short
   of the right edge rather than spanning it.
   No min-width here on purpose: the table keeps `width:100%`, so it fills the
   box when it fits and falls back to its own min-content — scrolling by exactly
   the amount it overruns — when it does not. The four-column cookie inventory
   needs ~515px, the three-column retention table only ~435px, and neither
   scrolls at all on a desktop. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:22px; }
.table-scroll .cookie-table{ margin-top:0; }
.cookie-table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:22px; font-size:.9375rem; line-height:1.6; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.cookie-table th, .cookie-table td{ text-align:left; padding:14px 18px; border-top:1px solid var(--border); vertical-align:top; }
.cookie-table thead th{ border-top:none; background:var(--surface); font-size:.75rem; line-height:1.4; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.cookie-table td{ color:var(--ink-2); font-weight:500; }
.cookie-table td:first-child{ font-family:'DM Mono', monospace; font-weight:700; color:var(--blue); white-space:nowrap; }
.cookie-tag{ display:inline-block; font-size:.75rem; line-height:1.4; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.legal-body code{ font-family:'DM Mono', monospace; font-size:.92em; font-weight:700; color:var(--blue); }

/* On a phone, four columns of prose is not a table any more — the scroll box
   above keeps it off the document width, but every column is still too narrow
   to read and most of the row sits off-screen. Below this width each row
   becomes its own card and each cell carries the column heading it belongs to,
   so the whole entry is readable in one pass with no sideways scrolling.
   The headings come from :nth-child rather than a data-label on all 84 cells;
   they mirror the <thead> of each table and must be kept in step with it. */
@media (max-width: 600px){
  .table-scroll{ overflow-x:visible; }
  .cookie-table{ border:none; background:transparent; border-radius:0; font-size:.875rem; }
  /* Visually hidden, not display:none — the headings still name the columns for
     a screen reader reading the table in its normal order. */
  .cookie-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .cookie-table tbody,
  .cookie-table tr,
  .cookie-table td{ display:block; }
  .cookie-table tr{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); padding:4px 16px 14px; }
  .cookie-table tr + tr{ margin-top:12px; }
  .cookie-table td{ border-top:none; padding:10px 0 0; }
  .cookie-table td::before{
    display:block; margin-bottom:3px;
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    font-size:.75rem; line-height:1.4; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted);
  }
  /* Cookie names are long and unbreakable; with the row now only one column
     wide they have to be allowed to wrap. */
  .cookie-table td:first-child{ white-space:normal; overflow-wrap:anywhere; }

  .cookie-table td:nth-child(1)::before{ content:'Cookie'; }
  .cookie-table td:nth-child(2)::before{ content:'Purpose'; }
  .cookie-table td:nth-child(3)::before{ content:'Type'; }
  .cookie-table td:nth-child(4)::before{ content:'Duration'; }
  /* Same specificity as the four above, so these must stay after them to win
     for the retention table, which carries both classes. */
  .legal-table td:nth-child(1)::before{ content:'Data category'; }
  .legal-table td:nth-child(2)::before{ content:'Retention period'; }
  .legal-table td:nth-child(3)::before{ content:'Purpose'; }
}

/* ---- Legal — paired info cards ---- */
.legal-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.legal-note{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); padding:20px 22px; position:relative; overflow:hidden; }
/* Nested callout inside a legal section — the .h5 rung, not the card title. */
.legal-note__label{ display:flex; align-items:center; gap:8px; font-size:1.0625rem; line-height:1.35; letter-spacing:-.015em; font-weight:800; color:var(--blue); }
.legal-note__label svg{ width:16px; height:16px; }
.legal-note ul{ margin-top:14px; padding-left:18px; display:flex; flex-direction:column; gap:10px; }
.legal-note p{ position:relative; z-index:1; }
.legal-note__mark{ position:absolute; right:18px; bottom:14px; color:var(--surface-2); z-index:0; }
.legal-note__mark svg{ width:74px; height:74px; }

/* ---- Legal — highlight panel ---- */
.legal-panel{ background:var(--blue-wash); border:1px solid var(--border); border-radius:var(--r-md); padding:24px 26px; margin-top:22px; }
.legal-checks{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin-top:18px; list-style:none; padding:0; }
.legal-checks li{ display:flex; gap:10px; align-items:flex-start; }
.legal-checks .tick{ flex-shrink:0; color:var(--blue); display:flex; margin-top:1px; }
.legal-checks .tick svg{ width:17px; height:17px; }

/* ---- Legal — centered feature cards ---- */
.legal-cards--center .legal-card{ background:var(--canvas); text-align:center; }
.legal-cards--center .chip{ background:var(--blue-tint); color:var(--blue); margin-inline:auto; }
.legal-cards--center p{ margin-top:14px; }
.legal-feature{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:28px 30px; text-align:center; max-width:460px; margin-inline:auto; }
.legal-feature .chip{ background:var(--blue-tint); color:var(--blue); margin-inline:auto; }
.legal-feature h4{ color:var(--blue); margin-top:16px; }
.legal-feature p{ margin-top:12px; }

/* ---- Legal — retention table ---- */
.legal-table thead th{ background:var(--canvas); color:var(--blue); font-weight:800; }
.legal-table td:first-child{ font-family:inherit; color:var(--ink); }

/* ---- Legal — contact cards ---- */
.legal-contact{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.legal-contact__card{ background:var(--blue-wash); border:1px solid var(--border); border-radius:var(--r-md); padding:22px 24px; }
.legal-contact__card .ic{ color:var(--blue); display:flex; }
.legal-contact__card .ic svg{ width:20px; height:20px; }
.legal-contact__card h4{ color:var(--ink); margin-top:16px; }
.legal-contact__card p{ margin-top:8px; }
.legal-contact__card a{ display:inline-block; margin-top:12px; font-size:.9375rem; font-weight:700; color:var(--blue); }

/* ---- Legal — terms section cards ---- */
.terms-card{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:clamp(22px,3vw,32px); position:relative; overflow:hidden; }
.terms-card > *{ position:relative; z-index:1; }
.terms-card__glow{ position:absolute; z-index:0; top:-70px; right:-50px; width:190px; height:190px; border-radius:50%; background:var(--blue-wash); }
.legal-body .terms-card h2{ margin-top:0; }
.terms-note{ border-left:3px solid var(--blue); background:var(--blue-wash); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 18px; margin-top:20px; }
/* Nested callout inside a .terms-card — the .h5 rung, not the card title. */
.terms-note h4{ font-size:1.0625rem; line-height:1.35; letter-spacing:-.015em; color:var(--ink); }
.terms-note p{ margin-top:6px; }

.terms-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.legal-body .terms-pair{ margin-top:48px; }
.legal-body .terms-pair + section{ margin-top:48px; }
.terms-card--sm{ padding:22px 24px; }
.terms-card--sm .ic{ color:var(--blue); display:flex; }
.terms-card--sm .ic svg{ width:22px; height:22px; }
.legal-body .terms-card--sm h2{ margin-top:14px; }
.terms-card--sm p{ margin-top:10px; }

.terms-card--blue{ background:linear-gradient(120deg, var(--blue) 0%, var(--blue-700) 100%); border-color:transparent; }
.legal-body .terms-card--blue h2{ color:#fff; display:flex; align-items:center; gap:12px; }
.terms-card--blue h2 svg{ width:24px; height:24px; }
.terms-card--blue p{ color:rgba(255,255,255,.88); }

.terms-card--alert{ background:#FDF4F1; border-color:#F1D8D0; box-shadow:none; }
.legal-body .terms-card--alert h2{ color:var(--bad); }
.terms-card--alert .terms-label{ display:block; font-size:.75rem; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--ink-2); margin-top:14px; }
.terms-card--alert p{ text-transform:uppercase; font-weight:600; margin-top:8px; }

.terms-card--tint{ background:var(--blue-wash); box-shadow:none; }
.legal-body .terms-card--tint h2{ color:var(--blue); }
.terms-card--tint p{ margin-top:10px; }

.terms-cta{ text-align:center; }
.terms-cta .ic{ color:#fff; display:flex; justify-content:center; }
.terms-cta .ic svg{ width:32px; height:32px; }
.legal-body .terms-cta h2{ color:#fff; justify-content:center; margin-top:16px; }
.terms-cta p{ max-width:48ch; margin-inline:auto; margin-top:12px; }
.terms-cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* ---- Legal — contact callout ---- */
.legal-callout{ background:var(--blue-wash); border:1px solid var(--border); border-radius:var(--r-md); padding:26px 28px; margin-top:22px; }
/* Set large and bold, so a longer support address outgrows a phone-width card
   unless it is allowed to wrap and break. */
.legal-callout__mail{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; max-width:100%; margin-top:16px; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:800; color:var(--blue); letter-spacing:-.01em; overflow-wrap:anywhere; }
.legal-callout__mail svg{ width:20px; height:20px; }

/* ============================================================
   Error pages (404 · 500 · 403 …)
   ============================================================ */
.error-wrap{ position:relative; overflow:hidden; }
.err-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; }
.err-eyebrow::after{ content:""; width:18px; height:1.5px; background:var(--blue); display:inline-block; }
.error-code{ background:none; background-clip:border-box; -webkit-background-clip:border-box; -webkit-text-fill-color:currentColor; color:var(--blue); }
.err-title{ margin-top:8px; }
.err-lead{ margin-top:14px; max-width:50ch; }

/* ---- Error pages — floating ghost cards ---- */
.err-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.err-deco > div{ position:absolute; background:var(--canvas); border-radius:24px; box-shadow:0 40px 90px rgba(15,31,79,.12); padding:26px; }
.err-deco i{ display:block; border-radius:999px; background:var(--surface-2); }
.err-deco__doc{ left:-1%; top:24%; width:215px; height:300px; transform:rotate(-8deg); }
.err-deco__doc i:nth-child(1){ width:34px; height:34px; border-radius:50%; background:var(--blue-tint); }
.err-deco__doc i:nth-child(2){ height:13px; width:82%; margin-top:26px; }
.err-deco__doc i:nth-child(3){ height:13px; width:56%; margin-top:11px; }
.err-deco__card{ right:-2%; top:26%; width:290px; height:185px; transform:rotate(7deg); }
.err-deco__card i:nth-child(1){ width:30px; height:30px; border-radius:50%; background:var(--blue-tint); }
.err-deco__card i:nth-child(2){ height:16px; width:46%; margin-top:22px; }
.err-deco__card i:nth-child(3){ height:26px; width:78%; margin-top:12px; background:var(--blue-tint-2); }

/* ---- Error pages — search ---- */
.err-search{ position:relative; width:100%; max-width:440px; margin-top:30px; }
.err-search input{ width:100%; font-family:inherit; font-size:.9375rem; font-weight:500; color:var(--ink); padding:16px 20px 16px 48px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--canvas); box-shadow:var(--sh-sm); outline:none; transition:border-color .15s, box-shadow .15s; }
.err-search input:focus{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,101,186,.12); }
.err-search .ic{ position:absolute; left:19px; top:50%; transform:translateY(-50%); color:var(--muted); display:flex; }
.err-search .ic svg{ width:18px; height:18px; }

/* ---- Error pages — actions & quick nav ---- */
.err-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.err-actions .btn{ border-radius:var(--r-pill); }
.btn-gradient{ background:linear-gradient(90deg, var(--blue) 0%, var(--navy) 100%); color:#fff; box-shadow:var(--sh-blue); }
.btn-gradient:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-tint{ background:var(--blue-tint); color:var(--blue); }
.btn-tint:hover{ background:var(--blue-tint-2); transform:translateY(-2px); }
.err-quick{ margin-top:64px; text-align:center; }
.err-quick__label{ font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.err-quick__links{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.err-quick__links a{ padding:11px 22px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:.9375rem; font-weight:600; color:var(--ink); background:var(--canvas); transition:border-color .15s, color .15s; }
.err-quick__links a:hover{ border-color:var(--blue); color:var(--blue); }
.err-note{ margin-top:30px; font-weight:500; }
.err-note a{ font-weight:700; }
.err-note code{ font-family:'DM Mono', monospace; }

/* ============================================================
   App download page
   ============================================================ */
.dl-hero{ padding-top:calc(var(--nav-h) + 64px); padding-bottom:clamp(56px,7vw,90px); }
.dl-hero__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:center; }
.dl-badge{ display:inline-flex; align-items:center; gap:9px; background:var(--blue-tint); color:var(--blue); border-radius:var(--r-pill); padding:7px 16px 7px 7px; font-size:.8125rem; line-height:1.55; font-weight:700; }
.dl-badge .ic{ width:20px; height:20px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; }
.dl-badge .ic svg{ width:12px; height:12px; }
.dl-hero h1{ margin-top:22px; max-width:13ch; }
.dl-hero h1 .accent{ color:var(--blue); }
.dl-hero__lead{ margin-top:20px; max-width:44ch; }
.dl-badges{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.dl-badges .store-badge{ padding:13px 22px; }
.dl-trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; }
.dl-trust__avatars{ display:flex; }
.dl-trust__avatars span{ width:30px; height:30px; border-radius:50%; background:var(--blue-tint); color:var(--blue); border:2px solid var(--canvas); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.dl-trust__avatars span + span{ margin-left:-10px; }
.dl-trust__rating{ display:flex; align-items:center; gap:8px; font-size:.8125rem; line-height:1.55; font-weight:600; color:var(--ink-2); }
.dl-trust__stars{ display:flex; gap:1px; color:#F2B705; }
.dl-shot{ width:100%; height:auto; display:block; }

.dl-why{ background:var(--blue-wash); }
.dl-why__head{ text-align:center; max-width:640px; margin-inline:auto; }
.dl-why__head .lead{ margin-top:16px; }
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(36px,5vw,60px); }
.dl-card{ background:var(--canvas); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-sm); }
.dl-card .chip{ background:var(--blue-wash); color:var(--blue); width:44px; height:44px; border-radius:12px; }
.dl-card .chip svg{ width:21px; height:21px; }
.dl-card h3{ margin-top:26px; }
.dl-card p{ color:var(--muted); margin-top:12px; }

/* ============================================================
   Tenant invitation landing page
   ============================================================ */
.invite-sec{ padding-top:calc(var(--nav-h) + 56px); padding-bottom:clamp(56px,7vw,96px); }
.invite-card{ width:100%; max-width:620px; margin-inline:auto; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:clamp(30px,5vw,52px); text-align:center; }
.invite-card .chip{ margin-inline:auto; width:56px; height:56px; border-radius:16px; }
.invite-card .chip svg{ width:27px; height:27px; }
.invite-card .chip--warn{ background:#FDF3E3; color:var(--warn); }
.invite-card .chip--bad{ background:#FBEFE9; color:var(--bad); }
.invite-card .chip--good{ background:var(--good-bg); color:var(--good); }
.invite-title{ font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.025em; margin-top:22px; }
.invite-greet{ font-size:.9375rem; line-height:1.6; font-weight:700; color:var(--blue); margin-top:14px; }
.invite-lead{ margin-top:14px; max-width:46ch; margin-inline:auto; }
.invite-details{ text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:6px 18px; margin-top:26px; }
.invite-details div{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:13px 0; }
.invite-details div + div{ border-top:1px solid var(--border); }
.invite-details dt{ font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); flex-shrink:0; }
.invite-details dd{ margin:0; font-size:.8125rem; line-height:1.55; font-weight:700; color:var(--ink); text-align:right; word-break: break-all;}
.invite-next{ margin-top:30px; font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.invite-badges{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.invite-badges .store-badge{ flex:1 1 220px; max-width:280px; justify-content:center; }
.invite-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:28px; }
.invite-note{ margin-top:22px; font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); }
.invite-note a{ color:var(--blue); font-weight:700; }

/* ============================================================
   Maintenance page (503)
   ============================================================ */
.maint{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(40px,7vw,80px) 20px; }
.maint__logo{ height:30px; width:auto; display:block; }
.maint__title{ font-size:clamp(2.3rem,5.2vw,4rem); line-height:1.08; letter-spacing:-.035em; max-width:16ch; margin:clamp(40px,6vw,70px) auto 0; }
.maint__title .accent{ color:var(--blue); }
.maint__card{ position:relative; overflow:hidden; width:100%; max-width:900px; margin-top:clamp(32px,5vw,56px); background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:clamp(30px,5vw,56px); }
.maint__card::after{ content:""; position:absolute; z-index:0; top:0; right:-40px; width:230px; height:230px; border-radius:50%; background:var(--blue-wash); }
.maint__card > *{ position:relative; z-index:1; }
.maint__lead{ font-size:clamp(1rem,1.6vw,1.15rem); font-weight:500; color:var(--ink-2); line-height:1.7; max-width:56ch; margin-inline:auto; }
.maint__label{ margin-top:clamp(28px,4vw,44px); font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-400); }
.maint__eta{ margin-top:16px; font-size:clamp(1.9rem,4vw,3rem); font-weight:400; letter-spacing:-.02em; color:var(--ink); }
.maint__eta b{ color:var(--blue); font-weight:800; }
.maint__bar{ width:min(420px,90%); height:5px; border-radius:999px; background:var(--surface-2); margin:clamp(28px,4vw,42px) auto 0; overflow:hidden; }
.maint__bar i{ display:block; height:100%; width:62%; border-radius:999px; background:linear-gradient(90deg, var(--blue), var(--blue-400)); }
.maint__status{ margin-top:16px; font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); }
.maint__contacts{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:clamp(26px,4vw,36px); }
.maint__contact{ display:flex; align-items:center; gap:12px; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 24px 9px 9px; box-shadow:var(--sh-xs); text-align:left; transition:transform .18s, box-shadow .18s; }
.maint__contact:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); }
.maint__contact .ic{ width:38px; height:38px; border-radius:50%; background:var(--surface); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.maint__contact .ic svg{ width:18px; height:18px; }
.maint__contact .l,
.maint__contact .v{ display:block; }
.maint__contact .l{ font-size:.75rem; line-height:1.4; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.maint__contact .v{ font-size:.9375rem; line-height:1.6; font-weight:800; color:var(--ink); margin-top:2px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .about-hero__grid{ grid-template-columns:1fr; }
  .err-deco{ display:none; }
  .dl-hero__grid{ grid-template-columns:1fr; }
  .dl-hero__media{ order:-1; }
  .dl-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px){
  /* One column and no brand panel — as the portal login does — and let the page
     scroll normally rather than trapping the form in a viewport-height box on a
     short phone screen. The logo and copyright move into the form column. */
  .reg-wrap{ grid-template-columns:1fr; height:auto; min-height:100dvh; }
  .reg-brand{ display:none; }
  .reg-main{ padding-top:28px; overflow-y:visible; }
  .reg-card{ margin-block:0; }
  .reg-card__brand{ display:block; }
  .reg-foot{ display:block; }
}

/* Two three-up rows of small-type cards used to hold three columns all the way
   down to 600px. Their copy is set at 12.5px, so by the bottom of that range
   each column was ~135px wide and lines broke after two or three words. They
   hold up to roughly tablet-portrait width, then stack — stacking rather than
   going two-up because three cards in two columns strands one at half width. */
@media (max-width: 768px){
  .legal-cards{ grid-template-columns:1fr; }
  .support-cats{ grid-template-columns:1fr; }
  .support-cat + .support-cat{ border-left:none; border-top:1px solid var(--border); }
}

@media (max-width: 600px){
  /* The shared .form-row is 1fr 1fr at every width, which squeezes the two-up
     name and email/phone pairs on a phone. Scoped to this form only. */
  .reg-form .form-row{ grid-template-columns:1fr; gap:14px; }
  .legal-split,
  .legal-checks,
  .legal-contact,
  .terms-pair{ grid-template-columns:1fr; }
  .dl-grid{ grid-template-columns:1fr; }
  .f-payout{ grid-template-columns:1fr; }
  .f-payout__side{ margin-top:0; }
}