/* suttonwealth.com — from the approved prototype board (2026-09-01).
   System: Plus Jakarta Sans 300/800, IBM Plex Mono labels, 18px body, 84px display,
   paper #FAFAFA, charcoal #1D252C, Sutton red #DD0000 once per screen, 8px radius,
   ruled rows over cards, no shadows. */

*{box-sizing:border-box}
/* Sky colours from the design team (2026-09-24): top #CCEFFF, bottom #FFFFFF */
:root{--sky:linear-gradient(180deg,#CCEFFF 0%,#FFFFFF 100%)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:300;font-size:18px;line-height:1.55;color:#1D252C;background:#FAFAFA;-webkit-font-smoothing:antialiased}
b,strong,h1,h2,h3{font-weight:800}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1;text-wrap:balance}
h1{font-weight:300;font-size:88px;line-height:.95;letter-spacing:-.03em;max-width:12ch}
h2{font-weight:300;font-size:48px;line-height:1.05;letter-spacing:-.025em;max-width:22ch}
h1 b,h2 b{font-weight:800}
h3{font-size:22px;letter-spacing:-.01em;line-height:1.2}
p{margin:0;max-width:56ch}
p+p{margin-top:18px}
a{color:inherit}
img{max-width:100%;height:auto}
.eb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5B6670;margin-bottom:22px}
.dark .eb{color:#A2A9AD}
.pl{margin-top:28px}
.btn{display:inline-block;font-family:inherit;background:#DD0000;color:#fff;font-weight:800;font-size:18px;line-height:1;padding:18px 28px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;margin-top:36px;-webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .15s ease,opacity .15s ease}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:#1D252C}
.btn.sm{font-size:16px;padding:16px 22px;margin:0}
.btn.wide{width:100%;text-align:center;margin-top:22px}
.wrap{max-width:1160px;margin:0 auto;padding:0 48px}
.band{padding:112px 0}
.dark{background:#1D252C;color:#FAFAFA}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.grid2.even{grid-template-columns:1fr 1fr}
.grid2.wide-right{grid-template-columns:.85fr 1.15fr}
.sub{margin-top:22px;color:#5B6670;font-size:16px}
u{text-underline-offset:4px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #DD0000;outline-offset:2px}

/* Header */
/* Header: the designer's charcoal bar (2026-09-02), chrome Sutton Wealth logo (2026-09-15), white nav, red button. */
header{background:linear-gradient(180deg,#1F272F 0%,#141C25 100%);color:#FAFAFA}
.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:34px 48px;max-width:1160px;margin:0 auto}
.wm{font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1;text-decoration:none}
.wm img{height:42px;width:auto;display:block}
.wm span{font-weight:300;letter-spacing:.14em;font-size:15px;margin-left:6px}
.navlinks{display:flex;gap:32px;align-items:center;font-size:18px;flex:none}
.navlinks a{text-decoration:none;color:#FAFAFA;transition:color .15s ease;white-space:nowrap}
.navlinks a.btn{margin-left:16px}
.navlinks a.btn{color:#fff}
.menubtn{display:none;font:inherit;font-weight:800;font-size:15px;background:none;border:1px solid #3A4650;border-radius:8px;padding:11px 14px;cursor:pointer;color:#FAFAFA;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,transform .15s ease}
.menubtn:active{transform:scale(.97)}
.mobilemenu{display:none;border-top:1px solid rgba(255,255,255,.14);padding:8px 24px 20px;flex-direction:column;gap:2px}
.mobilemenu a{display:block;padding:12px 0;text-decoration:none;color:#FAFAFA;border-bottom:1px solid rgba(255,255,255,.14);font-size:17px}
.mobilemenu a:last-child{border-bottom:0}
.mobilemenu.open{display:flex;animation:rise-in .2s ease-out}

/* Hover styles only where a real pointer can hover (no sticky hover on touch). */
@media (hover:hover) and (pointer:fine){
 .btn:hover{background:#B80000}
 .navlinks a:hover{color:#C9CED2}
 .navlinks a.btn:hover{color:#fff}
 .menubtn:hover{border-color:#A2A9AD}
 footer nav a:hover{text-decoration:underline;text-underline-offset:4px}
}

/* One shared entrance: fade + small settle from above. */
@keyframes rise-in{from{opacity:0;transform:translateY(-4px)}}

/* Hero */
.hero{padding:96px 0 128px}
.hero .grid2 h1{font-size:72px}
.dark p{color:#C9CED2}
.dark .row b,.dark h3{color:#FAFAFA}
.cardcol img{width:100%;max-width:520px;display:block;margin-left:auto}

/* Stat band: the page's real numbers, said once, in mono */
.statband{padding:56px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 48px}
.statgrid>div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.statgrid.three{grid-template-columns:repeat(3,1fr)}
.rows.narrow .row{grid-template-columns:210px 1fr}
.statgrid>div .sl{margin:8px 0 0}
.statgrid .sl{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B6670;margin-bottom:8px}
.statgrid b{font-size:26px;letter-spacing:-.02em;line-height:1.15;display:block}

/* Statement sheet */
.sheet{position:relative;background:#fff;border:1px solid #D8D8D6;border-radius:8px;padding:28px 30px;max-width:520px;margin-left:auto;color:#1D252C;font-size:15px}
.sheet:before{content:"";position:absolute;inset:10px -10px -10px 10px;border:1px solid #D8D8D6;border-radius:8px;z-index:0;background:#FAFAFA}
.sheet>*{position:relative;z-index:1}
.sheet .sh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1D252C;padding-bottom:12px;margin-bottom:14px}
.sheet .sh b{font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.sheet .sh span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670;text-align:right}
.sheet .addr{font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:2px}
.sheet .by{color:#5B6670;margin-bottom:14px}
.sheet .ln{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #D8D8D6}
.sheet .ln:last-of-type{border-bottom:0}
.sheet .ln span:last-child{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet .ln small{display:block;color:#5B6670;font-size:12.5px;font-weight:300}
.sheet .ft{margin-top:12px;padding-top:10px;border-top:1px solid #D8D8D6;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
/* Sheet entrance: rows settle in once, staggered, when the sheet scrolls into view (JS adds .prep then .live). */
.sheet[data-animate] .ln,.sheet[data-animate] .ft{transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1)}
.sheet[data-animate].prep .ln,.sheet[data-animate].prep .ft{opacity:0;transform:translateY(6px)}
.sheet[data-animate].live .ln,.sheet[data-animate].live .ft{opacity:1;transform:none}
.sheet[data-animate] .ln:nth-child(5){transition-delay:.06s}
.sheet[data-animate] .ln:nth-child(6){transition-delay:.12s}
.sheet[data-animate] .ln:nth-child(7){transition-delay:.18s}
.sheet[data-animate] .ft{transition-delay:.24s}

.factline{font-size:30px;line-height:1.35;max-width:calc(75% + 16px);letter-spacing:-.01em}  /* right edge lines up with the centre of the photo below */
.factline b{font-weight:800}
.factline{text-wrap:pretty}

/* Source line under a band of figures */
.srcline{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:#5B6670;margin-top:22px}
.dark .srcline{color:#A2A9AD}

/* Abstracted property statement: real rows, real sources, a verified stamp per row */
.astmt{background:#fff;border:1px solid #D8D8D6;border-radius:8px;padding:26px 28px;max-width:520px;margin-left:auto;color:#1D252C;font-size:15px}
.astmt .ah{display:flex;justify-content:space-between;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670;border-bottom:2px solid #1D252C;padding-bottom:10px;margin-bottom:12px}
.astmt .aaddr{font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.astmt .arow{display:grid;grid-template-columns:1fr auto 76px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #D8D8D6}
.astmt .arow:last-of-type{border-bottom:0}
.astmt .arow b{display:block;font-size:15px}
.astmt .arow small{display:block;color:#5B6670;font-size:12px;font-weight:300;margin-top:2px}
.astmt .av{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.astmt .aft{margin-top:12px;padding-top:10px;border-top:1px solid #D8D8D6;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.vstamp{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#1D252C;justify-self:end;white-space:nowrap}
.vstamp svg{width:18px;height:18px;flex:none}
.vstamp svg circle{fill:none;stroke:currentColor;stroke-width:1.3}
.vstamp svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
[data-stamps].prep .vstamp{opacity:0;transform:scale(.85)}
[data-stamps].prep .vstamp svg path{stroke-dashoffset:14}
[data-stamps] .vstamp{transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1)}
[data-stamps] .vstamp svg path{transition:stroke-dashoffset .3s ease-out .12s}
[data-stamps].live .vstamp{opacity:1;transform:none}
[data-stamps].live .vstamp svg path{stroke-dashoffset:0}
[data-stamps].live .arow:nth-of-type(2) .vstamp{transition-delay:.1s}
[data-stamps].live .arow:nth-of-type(3) .vstamp{transition-delay:.2s}
[data-stamps].live .arow:nth-of-type(4) .vstamp{transition-delay:.3s}
[data-stamps].live .arow:nth-of-type(5) .vstamp{transition-delay:.4s}
[data-stamps].live .arow:nth-of-type(2) .vstamp svg path{transition-delay:.22s}
[data-stamps].live .arow:nth-of-type(3) .vstamp svg path{transition-delay:.32s}
[data-stamps].live .arow:nth-of-type(4) .vstamp svg path{transition-delay:.42s}
[data-stamps].live .arow:nth-of-type(5) .vstamp svg path{transition-delay:.52s}

/* Behind the portfolio: the credential in front, the file fanned behind it */
.stackviz{position:relative;height:470px;max-width:600px;margin:0 auto}
.lay{position:absolute;border-radius:8px;transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .4s ease-out}
.lay .chip{position:absolute;top:-12px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:6px;background:#1D252C;color:#FAFAFA;text-transform:uppercase;white-space:nowrap}
.l-platform{right:0;top:6px;width:82%;background:#1D252C;color:#A2A9AD;padding:20px 22px 16px;border:1px solid #3a4650;transform:rotate(1.4deg)}
.l-platform .mono,.l-sources .mono{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:2}
.l-platform .lt{font-weight:800;color:#FAFAFA;font-size:15px;margin-bottom:4px}
.lay .txt{font-size:14px;line-height:1.5;color:#5B6670;max-width:none}
.l-platform .txt{color:#C9CED2}
.l-sources{right:7%;top:132px;width:78%;background:#fff;border:1px solid #D8D8D6;padding:18px 22px 14px;transform:rotate(-1deg)}
.l-sources .mono{color:#5B6670}
.l-sources .lt{font-weight:800;color:#1D252C;font-size:15px;margin-bottom:4px}
.l-records{right:2%;top:238px;width:66%;background:#fff;border:1px solid #D8D8D6;padding:14px 22px 8px;transform:rotate(.7deg);font-size:14px;color:#1D252C}
.l-records .lt{font-weight:800;font-size:15px;margin:2px 0 6px}
.l-records .rrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #ECECEA}
.l-records .rrow:last-child{border-bottom:0}
.l-records .rrow b{font-size:14px}
.l-records .rrow span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#5B6670;white-space:nowrap;padding-top:3px}
.l-cardv{left:0;bottom:-4px;width:54%}
.l-cardv img{width:100%;border-radius:14px;display:block}
.l-cardv .chip{background:#DD0000}
.stackviz.closed .l-platform{transform:translate(-24%,58%) rotate(1deg);opacity:0}
.stackviz.closed .l-sources{transform:translate(-18%,34%) rotate(-.6deg);opacity:0}
.stackviz.closed .l-records{transform:translate(-30%,6%) rotate(.4deg);opacity:0}

/* Who holds the record (SVG diagram) */
.holders{width:100%;max-width:540px;display:block;margin:0 auto}
.holders text{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;fill:#1D252C}
.holders text.m{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;font-weight:400;fill:#5B6670}
.holders .node{fill:#fff;stroke:#D8D8D6}
.holders .ring{fill:none;stroke:#D8D8D6;stroke-dasharray:3 5}
.holders .spoke{stroke:#D8D8D6}
.holders .owner{fill:#FAFAFA;stroke:#1D252C;stroke-width:1.5}

/* The arc: the relationship after closing */
.arc{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:56px;position:relative;padding-top:26px}
.arc:before{content:"";position:absolute;left:0;right:0;top:8px;border-top:1px solid #D8D8D6}
.arc>div{position:relative}
.arc>div:before{content:"";position:absolute;top:-24px;left:0;width:10px;height:10px;border-radius:50%;background:#1D252C}
.arc>div.now:before{background:#DD0000}
.arc .when{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5B6670;margin-bottom:8px}
.arc b{display:block;font-size:17px;letter-spacing:-.01em;line-height:1.25;margin-bottom:6px}
.arc p{font-size:15px;color:#5B6670;max-width:none}
.dark .arc p,.dark .arc .when{color:#A2A9AD}
.l-records .rrow b{white-space:nowrap}

/* Trust network (SVG diagram) */
.network{width:100%;max-width:520px;display:block;margin:0 auto}
.network text{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;fill:#1D252C}
.network text.m{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;font-weight:400;fill:#5B6670}
.network .node{fill:#fff;stroke:#D8D8D6}
.network .home{fill:#FAFAFA;stroke:#1D252C;stroke-width:1.5}
.network .link{stroke:#D8D8D6}
.network .flag{fill:#DD0000}

/* Placeholder frame for a real screenshot that is still to come */
.placeholder{border:1px dashed #A2A9AD;border-radius:8px;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670;line-height:1.8}
.placeholder{flex-direction:column;gap:10px}
.placeholder .pt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7B868C}
.placeholder .pn{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:#1D252C;line-height:1.2}
.placeholder .pd{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;font-weight:300;letter-spacing:0;text-transform:none;color:#5B6670;line-height:1.5;max-width:38ch}
.placeholder.dark{border-color:#5B6670;color:#A2A9AD}
.placeholder.dark .pn{color:#FAFAFA}
.placeholder.dark .pd{color:#C9CED2}
.grid2>.placeholder{min-height:420px;width:100%}
.tile .art .placeholder{min-height:0;height:100%;width:100%;padding:22px}
.tile .art .placeholder .pd{font-size:13.5px}
.bookrow{margin-top:56px;align-items:center}
.bookrow .placeholder{min-height:260px}
.bookrow h3{font-size:26px}
.bookrow p{margin-top:12px;color:#5B6670;font-size:17px}


/* Sky hero: the brand's clouds and house, headline over the sky */
.skyhero{position:relative;overflow:hidden;background:var(--sky);min-height:720px;display:flex;align-items:center}
.skyhero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:96px;width:100%}
.skyhero .copy{max-width:640px}
.skyhero .lede{margin-top:32px;font-size:19px;color:#5B6670;max-width:44ch;line-height:1.5}
.skyhero .cloud{position:absolute;pointer-events:none;transition:opacity 2.2s ease-out,transform 2.2s ease-out}
.skyhero .c1{width:min(64%,900px);right:-10%;top:-8%}
.skyhero .c2{width:46%;left:-16%;top:36%;opacity:.75}
.skyhero .house{position:absolute;right:2%;bottom:-3px;width:42%;pointer-events:none;transition:opacity 1.6s ease-out .25s,transform 1.6s ease-out .25s}
.skyhero .scene{position:absolute;right:0;bottom:0;width:50%;height:100%;pointer-events:none}
.skyhero .scene .house{right:0;bottom:-3px;width:80%}
.skyhero .scene .maple{position:absolute;right:-5%;bottom:5%;width:22%;transition:opacity 1.6s ease-out .45s,transform 1.6s ease-out .45s}
.skyhero .scene .chairs{position:absolute;left:0;bottom:0;translate:0 16%;width:32%;transition:opacity 1.6s ease-out .6s,transform 1.6s ease-out .6s}
/* Hero scene (2026-09-24, homeowner page; realtor page too as of v3): one composed cutout, full width, standing on the band's bottom edge.
   The left end of its ground plane is faded out so the plane dissolves into the sky instead of ending in a line. */
.skyhero.ho .hoscene{position:absolute;right:0;bottom:0;width:62%;height:auto;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%);
  transition:opacity 1.6s ease-out .25s,transform 1.6s ease-out .25s}
.skyhero.ho .wrap{padding-bottom:120px}
.skyhero.ho .copy{max-width:600px}
.skyhero.ho .sub{margin-top:18px}
@media (prefers-reduced-motion:no-preference){
 .js .skyhero:not(.live) .cloud{opacity:0;transform:translateX(28px)}
 .js .skyhero:not(.live) .house,.js .skyhero:not(.live) .hoscene{opacity:0;transform:translateY(14px)}
 .js .skyhero:not(.live) .maple,.js .skyhero:not(.live) .chairs{opacity:0;transform:translateY(14px)}
 /* After the settle, the clouds drift about 30px with the wind, back and forth, over 45 seconds.
    Uses the separate translate property so it never fights the settle transition on transform. */
 .js .skyhero.live .cloud{animation:cloud-drift 45s ease-in-out 2.4s infinite alternate}
 .js .skyhero.live .c2{animation-duration:60s}
}
@keyframes cloud-drift{from{translate:0 0}to{translate:-30px 0}}

/* Tint fields and the four-tile grid */
.tilefield{background:#EFEFEC;border-radius:8px;padding:44px 40px;display:flex;align-items:center;justify-content:center}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:44px 32px;margin-top:52px}
.tile .art{background:#EFEFEC;border-radius:8px;height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:36px}
.tile .art img{width:88%;display:block}
.tile h3{margin:20px 0 6px}
.tile p{font-size:16px;color:#5B6670;max-width:52ch}
.astmt.compact{padding:18px 20px;font-size:13.5px;max-width:440px;margin:0}
.astmt.compact .aaddr{font-size:16px;margin-bottom:6px}
.astmt.compact .arow{padding:8px 0;gap:10px;grid-template-columns:1fr auto 72px}
.astmt.compact .arow b{font-size:13.5px}
.astmt.compact .arow small{font-size:11px}
.astmt.compact .vstamp{font-size:9px}
.astmt.compact .vstamp svg{width:15px;height:15px}

/* The book list object */
.book{background:#fff;border:1px solid #D8D8D6;border-radius:8px;width:100%;max-width:440px;font-size:13.5px;overflow:hidden;color:#1D252C}
.book .bh{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #D8D8D6}
.book .bh div{padding:12px 14px;border-right:1px solid #D8D8D6}
.book .bh div:last-child{border-right:0}
.book .bh b{display:block;font-size:20px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.book .bh span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#7B868C}
.book .br{display:grid;grid-template-columns:1.1fr 1.2fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid #D8D8D6}
.book .br:last-child{border-bottom:0}
.book .br b{font-weight:800}
.book .br .ad{color:#5B6670}
.book .tag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid #D8D8D6;color:#5B6670;white-space:nowrap}
.book .tag.sent{background:#1D252C;color:#fff;border-color:#1D252C}
.book .tag.prep{border-color:#DD0000;color:#DD0000}
.docs{width:100%;max-width:340px}
.docs .doc{padding:14px 16px}
.docs .doc b{font-size:15px}

/* Compare (ruled, no cards) */
.cmp{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin:44px 0}
.cmp>div{padding:16px 0;border-bottom:1px solid #D8D8D6}
.cmp .ch{font-weight:800;border-bottom:2px solid #1D252C;padding-top:0}
.cmp .l{color:#5B6670}

/* Steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.steps4{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;margin-top:56px}
.num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:#DD0000;margin-bottom:14px}
.steps3 h3,.steps4 h3{margin-bottom:10px}

/* Ruled rows (dark security band and light bands) */
.rows{margin-top:48px;border-top:1px solid rgba(255,255,255,.18)}
.row{display:grid;grid-template-columns:250px 1fr;gap:32px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.row p{max-width:none}
.rows.light{border-top-color:#D8D8D6}
.rows.light .row{border-bottom-color:#D8D8D6}

/* Secured by Cornerstone lockup */
.lockup{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.lockup img{width:44px;height:44px;border-radius:8px;display:block}
.lockup span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#A2A9AD}

/* FAQ */
.faq{margin-top:48px;border-top:1px solid #D8D8D6}
.qa{border-bottom:1px solid #D8D8D6}
.qa summary{display:grid;grid-template-columns:44px 1fr 24px;gap:16px;align-items:baseline;padding:20px 0;cursor:pointer;list-style:none;font-weight:800;font-size:18px;letter-spacing:-.01em;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qn{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:#5B6670;font-weight:400}
.qa summary .tog{font-weight:300;font-size:24px;line-height:1;color:#7B868C;text-align:right;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.qa[open] summary .tog{transform:rotate(45deg)}
.qa .qbody{padding:0 0 24px 60px;max-width:62ch}
/* Accordion body: animate height where the browser can (Chrome 129+); else a short fade. Older browsers keep the instant snap. */
@supports (interpolate-size:allow-keywords){
 html{interpolate-size:allow-keywords}
 .qa::details-content{height:0;overflow:clip;opacity:0;transition:height .25s cubic-bezier(.23,1,.32,1),opacity .2s ease-out,content-visibility .25s allow-discrete}
 .qa[open]::details-content{height:auto;opacity:1}
}
@supports not (interpolate-size:allow-keywords){
 .qa[open] .qbody{animation:rise-in .2s ease-out}
}

/* The home's file: three papers, stamped with source and date */
.docstack{max-width:400px;margin-left:auto}
.doc{background:#fff;border:1px solid #D8D8D6;border-radius:8px;padding:22px 24px;color:#1D252C}
.doc+.doc{margin-top:14px}
.doc:nth-child(1){transform:rotate(-1.2deg)}
.doc:nth-child(2){transform:rotate(.8deg)}
.doc:nth-child(3){transform:rotate(-.4deg)}
.doc b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.doc span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6670}

/* Closing band */
.closing{text-align:center}
.closing h2{max-width:none;margin-left:auto;margin-right:auto}
.closing p{margin-left:auto;margin-right:auto}

/* Split sign-up */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.split .left{padding:96px 64px;display:flex;flex-direction:column;justify-content:center}
.split .right{background:#EFEFEC;padding:64px 48px;display:flex;align-items:flex-start;justify-content:center}
.fcard{background:#fff;border-radius:8px;padding:36px;width:100%;max-width:440px}
.fcard h3{margin-bottom:8px}
.fcard label{display:block;font-size:14px;color:#5B6670;margin-top:14px}
.fcard input,.fcard select,.fcard textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:17px;color:#1D252C;background:#EFEFEC;border:0;border-radius:8px;padding:14px;outline:none}
.fcard textarea{min-height:88px;resize:vertical}
.fcard input:focus,.fcard select:focus,.fcard textarea:focus{box-shadow:0 0 0 2px #1D252C}
.fcard .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fcard .chk{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:16px;color:#1D252C}
.fcard .chk input{width:auto;margin:0;accent-color:#DD0000}
.legal{margin-top:16px;font-size:13px;color:#5B6670}
.fcard .addprop{display:inline-block;margin-top:14px;padding:6px 0;font:inherit;font-size:15px;font-weight:800;color:#1D252C;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.fcard .addprop span{display:inline-block;margin-left:4px;font-weight:300;color:#5B6670}
.fcard .prop{margin-top:22px;padding-top:4px;border-top:1px solid #D8D8D6}
.fcard .prophead{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:14px;font-weight:800;color:#1D252C}
.fcard .rmprop{font:inherit;font-size:14px;font-weight:300;color:#5B6670;background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.what{margin:28px 0 0;padding-left:22px}
.what li{margin-bottom:12px;max-width:44ch}
.notice{display:none;margin-top:14px;padding:12px 14px;border-radius:8px;background:#FAFAFA;border:1px solid #D8D8D6;font-size:14px;color:#1D252C}
.notice.on{display:block;animation:rise-in .2s ease-out}
.formerr{display:none;margin-top:14px;padding:12px 14px;border-radius:8px;border:1px solid #DD0000;font-size:14px;color:#1D252C}
.formerr.on{display:block;animation:rise-in .2s ease-out}
[data-if-yes],[data-if-no]{animation:rise-in .2s ease-out}
.fcard button[disabled]{opacity:.6;cursor:wait}

/* Homeowner Canadiana scene */
.scene{position:relative;height:500px}
.scene .house{position:absolute;right:0;bottom:0;width:80%}
.scene .chairs{position:absolute;left:-2%;bottom:0;width:38%}
.scene .maple{position:absolute;right:-6%;bottom:8%;width:26%}

.tint{background:#EFEFEC}

/* Simple page (thanks, 404, legal) */
.page{min-height:60vh;display:flex;align-items:center}
.page .wrap{padding-top:96px;padding-bottom:96px}
.h-page{font-size:64px}

/* Footer */
footer{background:#1D252C;color:#FAFAFA;padding:64px 0}
footer p{max-width:64ch;color:#A2A9AD;font-size:16px}
footer .lockup{margin:0 0 28px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;font-size:15px}
footer nav a{color:#FAFAFA;text-decoration:none}

/* Intro: sky, house and chairs, then the card rises and the sky goes charcoal, then the choice.
   Hidden by default; main.js shows it (prototype: only with ?intro=1). Stages: .s1 scene lands,
   .s2 card rises + sky to charcoal, .s3 line and buttons. Transforms and opacity only. */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:var(--sky);display:flex;align-items:center;justify-content:center;color:#FAFAFA}
.intro[hidden]{display:none}
.intro.out{opacity:0;transition:opacity .3s ease-out}
.intro:before{content:"";position:absolute;inset:0;background:#1D252C;opacity:0;transition:opacity 1s ease-out}
.intro.s2:before{opacity:1}
.intro-scene{position:absolute;inset:0;pointer-events:none;transition:opacity 1s ease-out}
.intro.s2 .intro-scene{opacity:.2}
.intro-scene img{position:absolute}
.intro-scene .cloud{transition:opacity 1.2s ease-out,transform 1.2s ease-out}
.intro-scene .c1{width:72%;right:-14%;top:-12%}
.intro-scene .c2{width:54%;left:-18%;top:26%;opacity:.75}
.intro-scene .house{left:50%;bottom:-2%;width:40%;max-width:800px;transform:translateX(-50%);transition:opacity 1.2s ease-out .15s,transform 1.2s ease-out .15s}
.intro-scene .chairs{left:17%;bottom:0;translate:0 16%;width:20%;max-width:380px;transition:opacity 1.2s ease-out .35s,transform 1.2s ease-out .35s}
.intro.s1 .intro-scene .cloud{animation:cloud-drift 24s ease-in-out 1.2s infinite alternate}
.intro.s1 .intro-scene .c2{animation-duration:32s}
.intro:not(.s1) .intro-scene .cloud{opacity:0;transform:translateX(28px)}
.intro:not(.s1) .intro-scene .c2{opacity:0}
.intro:not(.s1) .intro-scene .house{opacity:0;transform:translate(-50%,18px)}
.intro:not(.s1) .intro-scene .chairs{opacity:0;transform:translateY(18px)}
.intro-stage{position:relative;z-index:2;width:min(560px,80vw);text-align:center}
.intro-card{transition:opacity .6s ease-out,transform 1s cubic-bezier(.23,1,.32,1)}
.intro-card img{width:100%;display:block;border-radius:14px}
.intro:not(.s2) .intro-card{opacity:0;transform:translateY(46vh) scale(.6)}
.intro-ask{margin-top:36px;transition:opacity .3s ease-out,transform .3s ease-out}
.intro:not(.s3) .intro-ask{opacity:0;transform:translateY(8px);pointer-events:none}
.intro-line{font-size:26px;line-height:1.3;letter-spacing:-.015em;font-weight:300;color:#FAFAFA;max-width:none;margin:0 auto;text-wrap:balance}
.intro-line b{font-weight:800}
.intro-btns{display:flex;gap:14px;justify-content:center;margin-top:28px}
.intro-btns .btn{margin:0}
.btn.ghost{background:transparent;color:#FAFAFA;border:1px solid #FAFAFA;padding:17px 27px}
.intro-skip{position:absolute;top:22px;right:24px;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:10px 12px;cursor:pointer;color:#1D252C;transition:color 1s ease-out;-webkit-tap-highlight-color:transparent}
.intro.s2 .intro-skip{color:#C9CED2}
.intro-skip:focus-visible,.intro .btn:focus-visible{outline:2px solid #FAFAFA;outline-offset:3px}
.intro.quiet .btn:focus-visible{outline:none}
.intro-open,.intro-open body{overflow:hidden}
@media (hover:hover) and (pointer:fine){
 .btn.ghost:hover{background:rgba(250,250,250,.1)}
 .intro-skip:hover{color:#FAFAFA}
 .intro:not(.s2) .intro-skip:hover{color:#5B6670}
}
@media (max-width:700px){
 .intro-scene .c1{width:130%;right:-30%;top:-4%}
 .intro-scene .c2{width:90%;left:-30%;top:22%}
 .intro-scene .house{width:106%;max-width:none;left:50%;transform:translateX(-48%);bottom:-1%}
 .intro-scene .chairs{width:42%;left:-4%}
 .intro:not(.s1) .intro-scene .house{transform:translate(-48%,18px)}
 .intro-stage{width:80vw}
 .intro-ask{margin-top:28px}
 .intro-line{font-size:21px}
 .intro-btns{flex-direction:column;gap:10px}
 .intro-btns .btn{width:100%;text-align:center}
 .intro-skip{top:14px;right:12px}
}

/* Reduced motion: movement off, colour and opacity fades stay. */
@media (prefers-reduced-motion:reduce){
 .mobilemenu.open,.qa[open] .qbody,.notice.on,.formerr.on,[data-if-yes],[data-if-no]{animation:none}
 .btn:active,.menubtn:active{transform:none}
 .qa summary .tog{transition:none}
 .qa::details-content,.qa[open]::details-content{transition:opacity .2s ease-out}
 .sheet[data-animate] .ln,.sheet[data-animate] .ft{transition:none}
 [data-stamps] .vstamp,[data-stamps] .vstamp svg path,.lay{transition:none}
 .stackviz.closed .lay{transform:none;opacity:1}
 .skyhero .cloud,.intro-scene .cloud{animation:none}
 .intro,.intro:before,.intro-scene,.intro-scene img,.intro-card,.intro-ask,.intro-skip{transition:none}
 .intro:not(.s1) .intro-scene .house,.intro:not(.s1) .intro-scene .chairs,.intro:not(.s1) .intro-scene .cloud{transform:none}
 .intro:not(.s2) .intro-card,.intro:not(.s3) .intro-ask{transform:none}
}

@media (max-width:700px){
 h1{font-size:44px;max-width:none}
 .skyhero{min-height:0;padding-bottom:220px}
 .skyhero .wrap{padding-top:40px;padding-bottom:0}
 .skyhero .c1{width:120%;right:-30%;top:-4%}
 .skyhero .c2{display:none}
 .skyhero .house{width:88%;right:-12%}
 .skyhero.ho{padding-bottom:250px}
 .skyhero.ho .hoscene{width:106%;right:-3%}
 .skyhero.ho .wrap{padding-bottom:0}
 .skyhero.ho{padding-bottom:170px}
 .grid4{grid-template-columns:1fr;gap:32px}
 .tile .art{height:280px;padding:22px}
 .tilefield{padding:28px 18px}
 .bookrow{margin-top:36px}
 .hero .grid2 h1{font-size:44px}
 .factline{font-size:20px}
 h1.h-page{font-size:40px}
 h2{font-size:34px;max-width:none}
 .wrap{padding:0 24px}
 .band{padding:64px 0}
 .hero{padding:48px 0 72px}
 .grid2,.grid2.even,.grid2.wide-right{grid-template-columns:1fr;gap:40px}
 .nav{padding:20px 24px}
 .wm img{height:31px}
 .navlinks{display:none}
 .menubtn{display:block}
 .steps3,.steps4{grid-template-columns:1fr;gap:32px}
 .row,.rows.narrow .row{grid-template-columns:1fr;gap:6px}
 .split{grid-template-columns:1fr;min-height:0}
 .split .left{padding:48px 24px 12px}
 .split .left ol.what{display:none}
 .split .right{padding:28px 18px}
 .fcard{padding:26px 20px}
 .fcard .two{grid-template-columns:1fr;gap:0}
 .scene{height:260px}
 .scene .maple{right:0}
 .sheet{margin:0}
 .cmp{column-gap:20px;font-size:15px}
 .statband{padding:48px 0}
 .statgrid{grid-template-columns:1fr 1fr;gap:20px 24px}
 .statgrid b{font-size:22px}
 .statgrid.three{grid-template-columns:1fr}
 .factline{font-size:19px;max-width:none}
 .astmt{margin:0;padding:20px 18px}
 .astmt .arow{grid-template-columns:1fr auto;gap:8px 12px}
 .astmt .vstamp{grid-column:1/-1;justify-self:start}
 .stackviz{height:470px;max-width:100%}
 .stackviz .lay .chip{font-size:9px}
 .l-platform{padding:16px 16px 12px}
 .l-platform .mono,.l-sources .mono{font-size:9.5px;line-height:1.9}
 .l-sources{top:150px;padding:14px 16px 12px}
 .l-records{width:74%;top:268px;padding:12px 16px 6px;overflow:hidden}
 .l-cardv{width:58%}
 .arc{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:26px}
 .arc:before{left:4px;right:auto;top:0;bottom:0;border-top:0;border-left:1px solid #D8D8D6}
 .arc>div:before{top:4px;left:-27px}
 .cardcol img{margin:0 auto}
 .qa summary{grid-template-columns:34px 1fr 20px;gap:10px}
 .qa .qbody{padding-left:44px}
}

/* v2 draft only: review banner, claims awaiting sign-off, secondary text link, header fit */
.textlink{display:inline-block;margin-top:28px;font-weight:800;color:#1D252C;text-decoration:underline;text-underline-offset:4px}
.nav{gap:48px}
.wm{flex:none}
@media (max-width:1180px){.navlinks{gap:24px}.navlinks a{font-size:17px}}
@media (max-width:1060px){.navlinks{display:none}.menubtn{display:block}}


/* Everything you own (homeowner, 2026-09-23): three buildings on the sky, a credential rises out of each, the three cards fan onto the statement.
   --p is scroll progress 0 to 1. Phase 1 (0 to .5) the cards rise. Phase 2 (.5 to 1) they travel to the statement. */
.gather{position:relative;height:260vh;--p:1;--ground:12%;--p1:clamp(0, calc(var(--p) * 2), 1);--p2:clamp(0, calc(var(--p) * 2 - 1), 1)}
.gather .sticky{position:sticky;top:0;height:100vh;min-height:720px;overflow:hidden;background:var(--sky)}
.gather .cloud{position:absolute;width:46%;right:-6%;top:-10%;opacity:.7;pointer-events:none}
.gather .stage{position:relative;max-width:1160px;height:100%;margin:0 auto;padding:88px 48px 0}
.gather .copy{position:relative;z-index:5;max-width:560px}
.gather .copy .pl{color:#5B6670;font-size:18px;max-width:44ch}
.gather .bld{position:absolute;bottom:6%;height:auto;opacity:calc(1 - var(--p2) * .55);transition:none}
.gather .b-cottage{left:2%;width:28%;bottom:calc(var(--ground) + 0.55%)}
.gather .b-house{left:33%;width:34%;bottom:calc(var(--ground) + 0.45%)}
.gather .b-condo{right:4%;width:17%;bottom:calc(var(--ground) + 0.6%)}
/* the statement rises into the middle in phase 2 */
.gather .gstmt{position:absolute;left:50%;bottom:-6%;width:30%;height:auto;z-index:3;
  transform:translateX(-50%) translateY(calc((1 - var(--p2)) * 40%));opacity:var(--p2)}
/* cards: phase 1 rise from each building; phase 2 travel to the statement and fan */
.gather .gcard{position:absolute;width:19%;height:auto;border-radius:10px;z-index:4;
  opacity:var(--p1);
  transform:translate(calc(var(--tx-end) * var(--p2)), calc(var(--ty-start) * (1 - var(--p1)) + var(--ty-end) * var(--p2))) rotate(calc(var(--rot) * var(--p2)))}
.gather .c-cottage{left:6%;bottom:62%;--ty-start:220px;--tx-end:52vw;--ty-end:34vh;--rot:-9deg}
.gather .c-house{left:40%;bottom:66%;--ty-start:240px;--tx-end:6vw;--ty-end:38vh;--rot:0deg}
.gather .c-condo{right:2%;bottom:70%;--ty-start:260px;--tx-end:-40vw;--ty-end:42vh;--rot:9deg}
@media (max-width:1180px){.gather .gstmt{width:36%}}
@media (max-width:700px){
 .gather{height:220vh}
 .gather .sticky{min-height:640px}
 .gather .stage{padding:56px 16px 0}
 .gather{--ground:11%}
 .gather .b-cottage{left:-4%;width:40%}
 .gather .b-house{left:28%;width:46%}
 .gather .b-condo{right:-2%;width:24%}
 .gather .gstmt{width:58%;bottom:-4%}
 .gather .gcard{width:30%}
 .gather .c-cottage{left:2%;bottom:52%;--tx-end:36vw;--ty-end:30vh}
 .gather .c-house{left:36%;bottom:56%;--tx-end:-2vw;--ty-end:34vh}
 .gather .c-condo{right:0;bottom:60%;--tx-end:-34vw;--ty-end:38vh}
}
@media (prefers-reduced-motion:reduce){.gather{--p:1 !important;height:auto}.gather .sticky{position:relative;height:auto;min-height:820px}}
/* gather: cards rest just above their buildings, keep left-to-right order, land mid-statement */
.gather .c-cottage{left:8%;bottom:44%;--ty-start:160px;--tx-end:26vw;--ty-end:14vh;--rot:-9deg}
.gather .c-house{left:41%;bottom:48%;--ty-start:170px;--tx-end:2vw;--ty-end:17vh;--rot:0deg}
.gather .c-condo{right:2%;bottom:54%;--ty-start:180px;--tx-end:-24vw;--ty-end:20vh;--rot:9deg}
.gather .gstmt{bottom:-8%;width:31%}
@media (max-width:700px){
 .gather .c-cottage{left:2%;bottom:39%;--tx-end:22vw;--ty-end:10vh}
 .gather .c-house{left:36%;bottom:43%;--tx-end:-2vw;--ty-end:12vh}
 .gather .c-condo{right:0;bottom:49%;--tx-end:-26vw;--ty-end:14vh}
}
/* gather: wider fan, lands on the lower half of the statement */
.gather .c-cottage{--tx-end:24vw;--ty-end:21vh;--rot:-10deg}
.gather .c-house{--tx-end:4vw;--ty-end:25vh;--rot:-1deg}
.gather .c-condo{--tx-end:-21vw;--ty-end:31vh;--rot:9deg}
@media (max-width:700px){.gather .c-cottage{--tx-end:16vw;--ty-end:12vh}.gather .c-house{--tx-end:0vw;--ty-end:15vh}.gather .c-condo{--tx-end:-18vw;--ty-end:19vh}}

/* v3 draft (2026-09-24): blank picture slots. A plain block shaped like the picture it is waiting for. No text, no dashes. */
.imgslot{display:block;width:100%;aspect-ratio:4/3;border-radius:8px;background:#E3E7EA}
.tint .imgslot{background:#DEDFDB}
.dark .imgslot{background:#2B353E}
.grid2.even.flip>.imgslot{order:-1}
.tile>.imgslot{aspect-ratio:16/10}
.fcard.formcenter{margin:0 auto;max-width:560px}
@media (max-width:700px){
 .grid2.even.flip>.imgslot{order:0}
 #how{padding-top:56px}
}
/* v3: the realtor headline is longer than the old one, so it steps down a size and gets a wider line */
.skyhero h1.h-long{font-size:72px;max-width:16ch}
.skyhero .copy:has(h1.h-long){max-width:720px}
@media (max-width:700px){.skyhero h1.h-long{font-size:40px;max-width:none}}

/* Homeowner tour (2026-09-24, from the call with Gonzalo and the team): one pinned section. Text on the left, one step at a time,
   always in the same spot. A laptop on the right pans or zooms into the part of the app each step is about.
   main.js sets .on on the active step from scroll position; CSS transitions do the fades and the zoom.
   Steps 3 and 4 have no screen yet (grey), step 5 swaps the laptop for the lock picture slot (grey until it lands).
   Without JS the steps simply stack. */
.tour{position:relative}
.tour-anchor{position:absolute;left:0;top:0;width:1px;height:1px}
/* text lines up with the site's 1160px column; the laptop is allowed to run wider to the right */
.tour-inner{max-width:none;margin:0;padding:96px 48px 96px max(48px, calc((100vw - 1160px) / 2 + 48px));display:grid;grid-template-columns:minmax(300px,.7fr) 1.3fr;gap:48px;align-items:center}
.tour-text{display:block}
.tstep+.tstep{margin-top:48px}
.tour h2{font-size:38px}
.tour-visual{position:relative;display:grid;align-items:center}
.lap{position:relative;width:100%;aspect-ratio:2323/1351}
.lap .frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.lap .scr{position:absolute;left:11.5%;top:4.1%;width:76.9%;height:84.8%;overflow:hidden;background:#F4F6F7;z-index:1}
.shot{position:absolute;inset:0;opacity:0}
.shot.on{opacity:1}
.shot img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;transform-origin:0 0;transform:scale(var(--s)) translate(var(--x),var(--y))}
.shot.blank{background:#E3E7EA}
.tour-slot{display:none}

html.js .tour{height:500vh}
html.js .tour-sticky{position:sticky;top:0;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
html.js .tour-inner{width:100%;padding-top:48px;padding-bottom:48px}
/* Stacked titles (2026-09-25, team): earlier headlines stay on screen above; only the current step shows its paragraph.
   Each step is a one-row grid that opens from 0fr to 1fr, and so is each paragraph. */
html.js .tstep{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .6s ease,opacity .45s ease,margin-top .6s ease}
html.js .tstep>.ti{min-height:0;overflow:hidden}
html.js .tstep.past,html.js .tstep.on{grid-template-rows:1fr;opacity:1}
html.js .tstep.past+.tstep.past,html.js .tstep.past+.tstep.on{margin-top:18px}
html.js .tp{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s ease,opacity .4s ease}
html.js .tp>div{min-height:0;overflow:hidden}
html.js .tstep.on .tp{grid-template-rows:1fr;opacity:1}
html.js .tp .pl{margin-top:20px}
html.js .tour-visual>*{grid-area:1/1}
html.js .lap{transition:opacity .6s ease,transform .6s ease}
html.js .lap.off{opacity:0;transform:translateY(16px) scale(.98)}
html.js .tour-slot{display:block;opacity:0;transition:opacity .6s ease .15s;align-self:center;justify-self:center;width:78%}
html.js .tour-slot.on{opacity:1}
html.js .shot{transition:opacity .55s ease}
html.js .shot img{transform:none;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
html.js .shot.on img{transform:scale(var(--s)) translate(var(--x),var(--y));transition-delay:.15s}

@media (max-width:1100px){.tour-inner{grid-template-columns:1fr 1fr;gap:40px;padding-left:48px;padding-right:32px}}
@media (max-width:760px){
 .tour-inner{grid-template-columns:1fr;gap:28px;padding:56px 20px}
 html.js .tour{height:470vh}
 html.js .tour-inner{padding-top:24px;padding-bottom:24px;align-content:center}
 html.js .tour-sticky{min-height:0}
 .tour .pl{font-size:16px;margin-top:16px}
 .tour h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
 html.js .tstep,html.js .tp,html.js .shot,html.js .shot img,html.js .lap,html.js .tour-slot{transition:none}
}

/* Trust Network screen (Hilarie's frame 256:1060): step 3 frames the member list and the invite card,
   step 4 moves in on the spouse and what each person can see. One layer, so the move is continuous. */
.shot.trust{--s:1.338;--x:-15%;--y:-10%}
.tour[data-step="4"] .shot.trust{--s:2;--x:-14%;--y:-35%}
.tour-slot{border-radius:8px;height:auto}

/* v3 heroes (2026-09-24, Ryan): the scene is larger so the house rises into the empty sky above it,
   and the lower-left cloud sits in the bottom corner instead of behind the paragraph. Desktop only. */
@media (min-width:701px){
 .skyhero.ho .c2{width:min(30%,430px);left:max(-18%,-260px);top:30%;bottom:auto;opacity:.75}
}
@media (min-width:1181px){
 .skyhero.ho .hoscene{width:min(72%,max(1060px,42vw));right:0;bottom:8%}
}

/* Security banner (2026-09-24): its own dark band after the demo, as Gonzalo had it.
   The current lock image is a first test on a black-to-white background, so its edges are faded into the band.
   The final should be a transparent PNG and needs no mask. */
.secimg{display:block;width:100%;height:auto}

/* 2026-09-25 team edits */
.h-center{max-width:none;text-align:center;margin-left:auto;margin-right:auto}
#portfolio.band{background:#fff}
/* The whole section fits one screen: headline, video, and the four steps. The video takes what height is left. */
#portfolio.band{padding:56px 0}
#portfolio .h-center{font-size:40px}
.cardvid{display:block;height:clamp(260px,calc(100vh - 470px),520px);width:auto;max-width:100%;aspect-ratio:1300/1080;margin:20px auto 0;background:#fff;
  /* all four edges fade into the page, so the video's slightly grey white never shows a border */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 90%,transparent);
  mask-composite:intersect}
.cardvid::-webkit-media-controls{display:none}
.steps4.four{grid-template-columns:repeat(4,1fr);gap:24px 32px;margin-top:28px}
.steps4.four h3{font-size:20px;margin-bottom:10px}
.steps4.four p{font-size:16px;color:#5B6670}
.slotvid{display:block;width:100%;height:auto;aspect-ratio:1280/842;border-radius:8px;background:#E3E7EA}
.figimg{display:block;width:100%;height:auto}
@media (max-width:1100px){.steps4.four{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.steps4.four{grid-template-columns:1fr;gap:32px} .cardvid{height:auto;width:100%} #portfolio .h-center{font-size:30px}}
#value .grid2.even{grid-template-columns:.85fr 1.15fr}
@media (max-width:900px){#value .grid2.even,#families .grid2.even{grid-template-columns:1fr;gap:40px}}
@media (max-width:700px){#value .figimg{width:calc(100% + 48px);max-width:none;margin-left:-24px}}
/* titles stack downward from a fixed top, instead of the block re-centring on every step */
html.js .tour-text{align-self:start;padding-top:clamp(24px,10vh,110px)}
@media (max-height:700px) and (min-width:761px){.tour h2{font-size:28px} html.js .tstep.past+.tstep.past,html.js .tstep.past+.tstep.on{margin-top:10px} html.js .tp .pl{margin-top:12px;font-size:16px} html.js .tour-inner{padding-top:24px;padding-bottom:24px} html.js .tour-sticky{min-height:0}}
@media (max-width:760px){
 html.js .tstep.past{grid-template-rows:0fr;opacity:0}
 html.js .tstep.past+.tstep.on{margin-top:0}
}
@media (max-height:780px) and (min-width:761px){.tour h2{font-size:32px}}

/* Homeowner tour on dark (2026-09-25, Gonzalo): a 45-degree reflected gradient, #1A1D22 to #4B5056 and back.
   The light middle of the band runs through the top of the laptop screen; main.js measures that point and sets --gpos.
   If the gradient ever misbehaves, the fallback is solid #1A1D22. */
.tour{background:#1A1D22;color:#FAFAFA;--gpos:52%}
.tour-sticky{background:#1A1D22;background:linear-gradient(135deg,#1A1D22 0%,#4B5056 var(--gpos),#1A1D22 100%)}
.tour h2,.tour h2 b{color:#FFFFFF}
.tour .pl{color:rgba(255,255,255,.82)}
/* on short screens, titles already read shrink a step so the current one and its paragraph always fit */

/* Tour, round 2 (Gonzalo, 2026-09-25): type back to the earlier sizes (38px titles, 18px paragraphs),
   the logo as wide as the text column, and the whole section held inside the site's 1160px column
   so the laptop is tucked in instead of running to the right edge of the screen. */
@media (min-width:1101px){
 .tour-inner{grid-template-columns:400px minmax(0,960px);gap:40px}
 .tour-visual{justify-self:start;width:100%}
}
.tour-logo{display:block;width:100%;height:auto;margin:0 0 32px}
/* short screens keep the earlier title steps; only the logo gives up height so everything still fits */
html.js .tour-text{padding-top:clamp(12px,4vh,56px)}
@media (max-width:760px){.tour-logo{width:220px;margin-bottom:20px}}

/* Phone hero (2026-09-25): house sits higher, closer to the button, and the buttons are a size smaller */
@media (max-width:700px){
 .btn{font-size:16px;padding:14px 22px;margin-top:28px}
 .btn.wide{padding:16px 22px;margin-top:20px}
 .skyhero .lede{margin-top:22px}
 .skyhero.ho{padding-bottom:120px}
}

/* 2026-09-25 round (Ashley, mobile + wide screens) */
/* realtor portfolio band: on narrower desktops the steps go two by two, so the video gives up more height to keep one screen */
@media (min-width:701px) and (max-width:1100px){.cardvid{height:clamp(200px,calc(100vh - 580px),440px)}}
/* verification image: its near-black background fades into the dark band on every side */
.verimg{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
@media (max-width:700px){
 /* hero subhead two sizes smaller */
 .skyhero .lede{font-size:16px}
 /* the hero fills the phone screen below the header, text at the top, scene at the bottom */
 .skyhero.ho{min-height:calc(100svh - 87px);align-items:flex-start}
}
@media (max-width:760px){
 /* tour on phones: laptop first, text under it, less space above, body copy the same size as the section below */
 .tour-inner{grid-template-columns:1fr}
 html.js .tour-inner{padding-top:12px;padding-bottom:12px;align-content:start}
 html.js .tour-text{padding-top:4px}
 .tour-logo{width:170px;margin-bottom:14px}
 .tour .pl,html.js .tp .pl{font-size:18px;line-height:1.55}
}
.grid2.even.flip>.figimg{order:-1}
@media (max-width:700px){.grid2.even.flip>.figimg{order:0}}

/* 2026-09-25 team call */
/* realtor: verification image about 20% bigger and leading; text pushed right */
@media (min-width:901px){#verification .grid2.even{grid-template-columns:1.2fr .8fr;gap:72px}}
@media (max-width:900px){#verification .grid2.even{grid-template-columns:1fr;gap:40px} #verification .grid2.even.flip>.figimg{order:1}}
/* realtor: maple and chairs about 20% bigger */
@media (min-width:901px){#families .figimg{width:clamp(100%,calc(100% + (100vw - 1160px) / 2 + 24px),120%);max-width:none}}
/* homeowner closing: the fit line is the heading, the invitation line its paragraph */
#early-access .invite{font-size:26px;line-height:1.35;letter-spacing:-.01em;color:#1D252C;max-width:30ch}
@media (max-width:700px){
 h1{line-height:1.14}                                  /* 20% more space between headline lines */
 .skyhero .lede{font-size:18px}                        /* hero paragraph two points up */
 .factline{font-size:21px;line-height:1.62}            /* numbers band two points up, 20% more line space */
 #early-access .invite{font-size:21px}
}
/* short laptop screens: the logo stays full width, so the spacing and titles give a little instead */
@media (max-height:820px) and (min-width:761px){.tour h2{font-size:34px} .tour-logo{margin-bottom:18px} html.js .tour-text{padding-top:8px}}
@media (max-height:700px) and (min-width:761px){.tour h2{font-size:27px} .tour-logo{margin-bottom:12px} html.js .tstep.past+.tstep.past,html.js .tstep.past+.tstep.on{margin-top:8px}}
@media (max-height:780px) and (min-width:761px){.tour h2{font-size:30px} html.js .tp .pl{margin-top:14px}}
@media (max-height:700px) and (min-width:761px){.tour h2{font-size:27px}}
/* phone hero: a larger scene, and the text centred in the space above it so the leftover room splits evenly (team call) */
@media (max-width:700px){
 .skyhero.ho{flex-direction:column;align-items:stretch;justify-content:center;padding-bottom:calc(47vw + 20px)}
 .skyhero.ho .wrap{padding-top:28px}
 .skyhero.ho .hoscene{width:150%;max-width:none;right:-11%}
}

/* Homeowner header: only the early-access button, so it stays visible on every screen (no one-item menu). */
header.solo .navlinks{display:flex}
@media (max-width:700px){header.solo .nav{gap:12px} header.solo .navlinks a.btn{margin-left:0} header.solo .btn.sm{font-size:14px;padding:11px 14px}}
@media (max-width:420px){header.solo .nav{box-sizing:border-box;min-height:87px} header.solo .wm img{height:23px} header.solo .btn.sm{font-size:13px;padding:10px 12px}}