/* getrunjack.com — shared styles
Palette + type inherited from the getrunjack-v2 prototype, which already matched
docs/runjack-design-system.md exactly (amber #E5AB4A, slate-900 #0F172A).
No iOS-default colors. No remote fonts, no remote CSS. */
@font-face{font-family:'DM Serif Display';src:url('fonts/dmserifdisplay-normal-400.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('fonts/dmserifdisplay-italic-400.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-normal-400-700.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-italic-400-700.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-normal-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-normal-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
--night:#0B1220; --night-2:#080D17; --slate:#0F172A;
--panel:#151F33; --panel-2:#1B2740; --line-d:#243049;
--bone:#F4EFE5; --bone-2:#ECE5D6; --card:#FBF8F1; --line-l:#DCD2BE;
--ink:#1A2030; --ink-soft:#59617A; --dim:#9AA6BC;
/* --faint is the quietest text on the page: .hint, .foot-legal, .scene-mark,
.bub-time, .plan .alt, .plan li.muted. A single value cannot clear WCAG AA
on both the cream and the night surfaces — the old #66748E measured 3.76:1
on --bone-2, 3.97:1 on --night and 4.45:1 on --card, i.e. it failed
everywhere it was used, at 11-13px. So it is a surface-scoped token: this
is the light-surface value, and dark surfaces redefine it below. Nothing
that reads var(--faint) had to change. */
--faint:#5C657E;
--amber:#E5AB4A; --amber-deep:#C98F2B; --amber-ink:#805C10; --amber-soft:#F2CE8B;
/* --amber-ink is the brand amber readable on cream. #8A6414 measured
4.28:1 on --bone-2 — under AA at the 12px the eyebrows use. #805C10
is 4.85:1 there and 5.73:1 on --card, and still reads amber. */
--emerald:#6EE7B7; --emerald-ink:#067049;
--serif:'DM Serif Display',Georgia,serif;
--sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
--wrap:1120px; --gut:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background-color:var(--bone);color:var(--ink);
font-family:var(--sans);font-size:17px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.008em}
h1{font-size:clamp(2.1rem,6vw,4rem)}
h2{font-size:clamp(1.7rem,4.2vw,2.8rem)}
h3{font-size:clamp(1.2rem,2.05vw,1.46rem);line-height:1.22}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--amber-ink);margin:0 0 .9rem}
/* .hero and .scene are dark surfaces but carry neither .dark nor .on-dark,
so the eyebrow was painting --amber-ink (a dark brown) onto night. */
.on-dark .eyebrow,.dark .eyebrow,.hero .eyebrow,.scene .eyebrow,
.legal-head .eyebrow{color:var(--amber)}
.lede{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-soft);max-width:60ch}
.dark .lede{color:var(--dim)}
section{padding-block:clamp(3.5rem,8vw,6rem)}
.dark{background-color:var(--night);color:#fff}
/* Dark-surface value for --faint (see the token note above). Custom properties
resolve through the cascade, so every descendant using var(--faint) picks
this up with no rule changes: 6.1:1 on --night, 6.3:1 on --night-2,
5.3:1 on --panel. */
.dark,.hero,.scene,.site-foot,.strip,.formwrap,.legal-head{--faint:#8793AC}
.dark h1,.dark h2,.dark h3{color:#fff}
/* ---- skip link + focus ---- */
.skip{position:absolute;left:-9999px;top:0;background-color:var(--amber);color:var(--slate);
padding:12px 18px;font-weight:700;z-index:999;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
/* ---- buttons (44px min touch target) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:48px;padding:.85rem 1.5rem;border-radius:10px;font-weight:700;font-size:1rem;
text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;font-family:var(--sans)}
/* The primary CTA was a single flat amber with a flat amber hover — no light
in it at any size, which is what made it read as a coloured rectangle rather
than something to press. Three small changes, deliberately restrained:
a top-lit gradient so the button has a direction, a warm shadow so it sits
ABOVE the surface instead of inside it, and an inset highlight on the top
edge that reads as a lit lip. Hover lifts it 1px and warms the glow; active
drops it back so the press is felt. */
.btn-primary{
background:linear-gradient(180deg,#F0BC63 0%,var(--amber) 52%,#D99C35 100%);
color:var(--slate);
box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
0 6px 16px -6px rgba(201,143,43,.55),
0 2px 4px -2px rgba(11,18,32,.3);
}
.btn-primary:hover{
background:linear-gradient(180deg,#F6C877 0%,var(--amber) 50%,var(--amber-deep) 100%);
transform:translateY(-1px);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
0 10px 22px -8px rgba(201,143,43,.7),
0 3px 6px -3px rgba(11,18,32,.35);
}
.btn-primary:active{transform:translateY(0);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
0 3px 8px -4px rgba(201,143,43,.5);}
.btn-ghost{background-color:transparent;color:var(--ink);border-color:var(--line-l)}
/* Dark surfaces: .hero and .scene are dark but are NOT .dark, so they must be
listed explicitly or the ghost button renders near-black on near-black. */
.dark .btn-ghost,.hero .btn-ghost,.scene .btn-ghost{color:#fff;border-color:#49556F}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.scene .btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-ghost:hover{border-color:var(--amber)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}
/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:60;background-color:rgba(11,18,32,.92);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d)}
.site-head .bar{display:flex;align-items:center;gap:1.4rem;min-height:64px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:#fff;text-decoration:none;letter-spacing:0}
.brand span{color:var(--amber)}
.nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav a{color:var(--dim);text-decoration:none;font-size:.95rem;font-weight:500;padding:.4rem 0}
.nav a:hover,.nav a[aria-current=page]{color:#fff}
.nav .btn{margin-left:.4rem}
/* The nav CTA is a link AND a button; `.nav a` (0,1,1) outranks `.btn` (0,1,0),
so every property `.nav a` sets has to be restated here or the button loses
it. Colour was already caught. PADDING was not: `.nav a{padding:.4rem 0}` was
winning, so the amber pill hugged its own label with zero side padding at
every width. Restate both. */
.nav a.btn{padding:.85rem 1.5rem}
.nav a.btn-primary{color:var(--slate)}
.nav a.btn-primary:hover{color:var(--slate)}
/* was also restating a flat amber-deep hover fill, which now sits uselessly
behind .btn-primary:hover's gradient. The nav CTA and the page CTA should
be the same object. */
.nav a.btn-ghost{color:#fff}
@media(max-width:860px){.nav a:not(.btn){display:none}}
/* ---- hero ---- */
.hero{position:relative;background-color:var(--night);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero-bg::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,18,32,.75) 0%,rgba(11,18,32,.88) 55%,var(--night) 100%)}
/* Asymmetric on purpose. The generous TOP padding gives the hero presence.
The bottom was the same value, and it stacks with the next section's own
top padding — on a dark hero flowing into a dark section there is no visual
break between them, so ~208px of combined space read as something having
failed to load rather than as breathing room. */
.hero .wrap{position:relative;z-index:1;
padding-block:clamp(3.5rem,10vw,7rem) clamp(2rem,4.5vw,3.25rem)}
.hero h1{max-width:11.6em}
.hero .lede{margin-top:1.2rem;color:#D7DEEA;font-size:clamp(1.1rem,2.2vw,1.35rem)}
.hero-note{margin-top:1.1rem;font-size:.95rem;color:var(--dim)}
/* ladder strip */
.ladder{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;margin-top:2.4rem;
border-top:1px solid var(--line-d);padding-top:1.5rem}
.rung{flex:1 1 180px;background-color:var(--panel);border:1px solid var(--line-d);
border-radius:12px;padding:.9rem 1rem;min-width:0}
.rung b{display:block;font-family:var(--mono);font-size:1.05rem;color:var(--amber);font-weight:600}
.rung span{display:block;font-size:.88rem;color:var(--dim);margin-top:.2rem;line-height:1.4}
/* ---- trust strip ---- */
.strip{background-color:var(--night-2);color:var(--dim);border-block:1px solid var(--line-d);
padding-block:1.4rem;font-size:.9rem}
.strip .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;justify-content:center;text-align:center}
.strip b{color:#fff;font-weight:600}
/* ---- generic grid ---- */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* ---- cards ---- */
.card{background-color:var(--card);border:1px solid var(--line-l);border-radius:14px;padding:1.4rem}
.dark .card{background-color:var(--panel);border-color:var(--line-d)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.97rem;margin:0}
.dark .card p{color:var(--dim)}
/* ---- steps ---- */
.step{position:relative;padding-left:3.2rem}
.step-n{position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;border-radius:50%;
background-color:var(--amber);color:var(--slate);display:grid;place-items:center;
font-family:var(--mono);font-weight:600;font-size:1rem}
/* ---- capability groups ---- */
.cap{background-color:var(--panel);border:1px solid var(--line-d);border-radius:14px;padding:1.4rem 1.5rem}
.cap h3{color:#fff;margin-bottom:.9rem;font-size:1.3rem}
.cap ul{list-style:none;margin:0;padding:0}
.cap li{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;
padding:.58rem 0;border-top:1px solid var(--line-d);color:#E4E9F2;font-size:.96rem;line-height:1.45}
.cap li:first-child{border-top:0}
.tag{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;padding:.2rem .45rem;border-radius:4px;white-space:nowrap;
background-color:rgba(229,171,74,.16);color:var(--amber-soft);border:1px solid rgba(229,171,74,.35)}
.tag-all{background-color:rgba(16,185,129,.14);color:#6EE7B7;border-color:rgba(16,185,129,.35)}
.tag-soon{background-color:rgba(154,166,188,.14);color:var(--dim);border-color:rgba(154,166,188,.3)}
/* ---- pricing ---- */
.toggle{display:inline-flex;background-color:var(--bone-2);border:1px solid var(--line-l);
border-radius:999px;padding:4px;gap:4px;margin:1.6rem 0 .6rem}
.dark .toggle{background-color:var(--panel);border-color:var(--line-d)}
.toggle button{min-height:44px;padding:.5rem 1.2rem;border:0;border-radius:999px;background-color:transparent;
font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink-soft);cursor:pointer}
.dark .toggle button{color:var(--dim)}
.toggle button[aria-pressed=true]{background-color:var(--amber);color:var(--slate)}
.save-note{font-size:.9rem;color:var(--ink-soft);margin:0 0 2rem}
.dark .save-note{color:var(--dim)}
.plans{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:stretch}
.plan{background-color:var(--card);border:1px solid var(--line-l);border-radius:16px;
padding:1.5rem;display:flex;flex-direction:column;height:100%}
.dark .plan{background-color:var(--panel);border-color:var(--line-d)}
.plan.feature{border-color:var(--amber);border-width:2px;box-shadow:0 10px 36px rgba(11,18,32,.1)}
.plan-flag{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--amber-ink);margin-bottom:.5rem}
.dark .plan-flag{color:var(--amber)}
.plan h3{font-size:1.52rem}
.plan .price{font-family:var(--serif);font-weight:700;font-size:2.7rem;line-height:1;margin:.65rem 0 .15rem;letter-spacing:-.015em}
.plan .per{font-size:.9rem;color:var(--ink-soft);margin-bottom:.1rem}
.dark .plan .per{color:var(--dim)}
.plan .alt{font-size:.85rem;color:var(--faint);min-height:1.2em}
.plan .who{font-size:.95rem;color:var(--ink-soft);margin:.9rem 0 1.1rem;line-height:1.5}
.dark .plan .who{color:var(--dim)}
.plan ul{list-style:none;margin:0 0 1.4rem;padding:0;flex:1}
.plan li{position:relative;padding:.4rem 0 .4rem 1.5rem;font-size:.94rem;line-height:1.45}
.plan li::before{content:'';position:absolute;left:0;top:.82em;width:9px;height:9px;
border-radius:50%;background-color:var(--amber)}
.plan li.muted{color:var(--faint)}
.plan li.muted::before{background-color:var(--line-l)}
.plan .btn{margin-top:auto}
/* Two of the four cards carry a "what a day looks like" link under the CTA.
Reserve that line on every card so the BUTTONS align across the row, not
the bottoms of differing trailing content. */
.plan .btn + .hint{margin-top:.7rem}
.plan .btn:last-child{margin-bottom:calc(.7rem + 1.4em)}
/* ---- comparison matrix ---- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-l);border-radius:14px;background-color:var(--card)}
.dark .scroller{border-color:var(--line-d);background-color:var(--panel)}
table.matrix{border-collapse:collapse;width:100%;min-width:720px;font-size:.92rem}
table.matrix th,table.matrix td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line-l)}
.dark table.matrix th,.dark table.matrix td{border-color:var(--line-d)}
table.matrix thead th{position:sticky;top:0;background-color:var(--bone-2);font-size:.78rem;
font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;font-weight:600;z-index:1}
.dark table.matrix thead th{background-color:var(--panel-2);color:#fff}
table.matrix td:not(:first-child),table.matrix th:not(:first-child){text-align:center;width:14%}
table.matrix tbody th{font-weight:500;font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.92rem}
.mgroup td{background-color:var(--bone-2);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;font-weight:600;color:var(--amber-ink)}
.dark .mgroup td{background-color:var(--panel-2);color:var(--amber)}
/* The tick and the dash ARE the comparison — they have to be legible.
--emerald on cream measured 2.39:1 and --line-l 1.41:1; both were
decorative-grade colour doing load-bearing work. */
.yes{color:var(--emerald-ink);font-weight:700}
.no{color:var(--faint)}
.dark .yes{color:var(--emerald)}
.dark .no{color:var(--faint)}
.hint{font-size:.85rem;color:var(--faint);margin-top:.8rem}
/* ---- savings ---- */
.rungcard{background-color:var(--card);border:1px solid var(--line-l);border-radius:14px;padding:1.4rem}
.dark .rungcard{background-color:var(--panel);border-color:var(--line-d)}
.rungcard .vs{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
/* A display heading in a , so it was inheriting the body's 1.6 leading: at
2.05rem that is 53px of line box for 33px of type. It wraps to two lines on
all three cards ("about $75-95 a / month"), and the gap read as two separate
blocks rather than one heading. The larger DM cut made it obvious. */
.rungcard .big{font-family:var(--serif);font-weight:700;font-size:2.05rem;letter-spacing:-.008em;line-height:1.15;margin:.3rem 0}
.rungcard .big em{font-style:normal;color:var(--amber-ink)}
.dark .rungcard .big em{color:var(--amber)}
details.math{margin-top:1.6rem;border:1px solid var(--line-l);border-radius:12px;background-color:var(--card)}
.dark details.math{border-color:var(--line-d);background-color:var(--panel)}
details.math>summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;min-height:48px;display:flex;align-items:center}
details.math .inner{padding:0 1.2rem 1.2rem}
/* ---- showcase ---- */
.shot{background-color:var(--card);border:1px solid var(--line-l);border-radius:14px;overflow:hidden}
.dark .shot{background-color:var(--panel);border-color:var(--line-d)}
.shot .frame{position:relative;background-color:var(--night-2);aspect-ratio:16/10;overflow:hidden}
.shot .frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot .meta{padding:1rem 1.2rem}
.shot .meta b{display:block;font-family:var(--serif);font-size:1.22rem;letter-spacing:-.004em}
.shot .meta span{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:.15rem}
.dark .shot .meta span{color:var(--dim)}
/* photo tiles */
.tile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background-color:var(--panel)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .9rem;
background:linear-gradient(180deg,transparent,rgba(8,13,23,.9));color:#fff;
font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line-l)}
.dark .faq{border-color:var(--line-d)}
.faq details{border-bottom:1px solid var(--line-l)}
.dark .faq details{border-color:var(--line-d)}
.faq summary{cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;font-weight:600;font-size:1.05rem;
position:relative;list-style:none;min-height:48px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.3rem;font-family:var(--mono);
font-size:1.4rem;color:var(--amber-ink);line-height:1}
.dark .faq summary::after{color:var(--amber)}
.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 0 1.2rem;color:var(--ink-soft);max-width:68ch}
.dark .faq .a{color:var(--dim)}
/* ---- form ---- */
.formwrap{background-color:var(--panel);border:1px solid var(--line-d);border-radius:16px;padding:clamp(1.3rem,3vw,2rem)}
.field{margin-bottom:.95rem}
.field label{display:block;font-size:.88rem;font-weight:600;color:#E4E9F2;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.75rem .9rem;
border-radius:10px;border:1px solid var(--line-d);background-color:var(--night-2);color:#fff;
font-family:var(--sans);font-size:16px}
.field textarea{min-height:92px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 .5rem}
.consent input{width:22px;height:22px;min-width:22px;margin-top:2px;accent-color:var(--amber);flex-shrink:0}
.consent label{font-size:.84rem;line-height:1.5;color:var(--dim)}
.consent a{color:var(--amber-soft)}
.fineprint{font-size:.78rem;color:var(--faint);line-height:1.5;margin:.7rem 0 0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:.9rem;font-size:.92rem;min-height:1.3em}
.formnote.ok{color:#6EE7B7}
.formnote.err{color:#FCA5A5}
/* ---- footer ---- */
.site-foot{background-color:var(--night-2);color:var(--dim);border-top:1px solid var(--line-d);
padding-block:2.6rem;font-size:.9rem}
.site-foot a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.site-foot a:hover{color:var(--amber)}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-bottom:1.8rem}
.foot-grid b{display:block;color:#fff;font-size:.78rem;font-family:var(--mono);
letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{padding:.22rem 0}
.foot-legal{border-top:1px solid var(--line-d);padding-top:1.4rem;font-size:.82rem;color:var(--faint);line-height:1.6}
/* chat launcher sits bottom-right; keep page CTAs clear of it on phones */
@media(max-width:600px){.chat-safe{padding-bottom:5.5rem}}
/* ---- long-form legal / prose pages --------------------------------------
privacy.html · sms-terms.html · sms-opt-in.html · terms.html · refunds.html
Light, high-contrast reading surface. Kept here rather than inline so the
five legal pages can never drift apart from one another. */
.legal-head{background-color:var(--night);color:#fff;padding-block:clamp(2.4rem,6vw,3.6rem)}
.legal-head h1{color:#fff;max-width:13.6em}
.legal-head .updated{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--dim);margin:.9rem 0 0}
.legal-body{padding-block:clamp(2.2rem,5vw,3.4rem)}
.legal-body .wrap{max-width:820px}
.prose{background-color:var(--card);border:1px solid var(--line-l);border-radius:16px;
padding:clamp(1.3rem,4vw,2.6rem);font-size:1rem;line-height:1.7;color:var(--ink)}
.prose h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:2.2rem 0 .8rem;padding-bottom:.5rem;
border-bottom:1px solid var(--line-l)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;margin:1.6rem 0 .5rem;letter-spacing:0}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--amber-ink);text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:700}
.prose code{font-family:var(--mono);font-size:.88em;background-color:var(--bone-2);
border:1px solid var(--line-l);padding:.08em .38em;border-radius:4px}
.prose table{border-collapse:collapse;width:100%;min-width:460px;font-size:.94rem}
.prose table th,.prose table td{padding:.65rem .8rem;text-align:left;
border-bottom:1px solid var(--line-l);vertical-align:top}
.prose table thead th{background-color:var(--bone-2);font-family:var(--mono);font-size:.74rem;
letter-spacing:.08em;text-transform:uppercase;font-weight:600}
/* callouts */
.note{border-radius:12px;padding:1rem 1.2rem;margin:1.4rem 0;font-size:.97rem;line-height:1.6}
.note p:last-child{margin-bottom:0}
.note-key{background-color:#FDF4E2;border:1px solid var(--amber);color:#4A3608}
.note-stop{background-color:#FFF7E6;border:1px solid var(--amber-deep);color:#4A3608}
.note-ok{background-color:#ECFDF5;border:1px solid #6EE7B7;color:#0A5742}
.note-plain{background-color:var(--bone-2);border:1px solid var(--line-l);color:var(--ink)}
.legal-nav{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
font-size:.92rem;justify-content:center}
.legal-nav a{color:var(--amber-ink);text-underline-offset:3px}
.toc{margin:0 0 1.8rem;padding:1rem 1.2rem;background-color:var(--bone-2);
border:1px solid var(--line-l);border-radius:12px}
.toc b{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--amber-ink);margin-bottom:.5rem}
.toc ol{margin:0;padding-left:1.2rem;font-size:.94rem;columns:2;column-gap:2rem}
@media(max-width:560px){.toc ol{columns:1}}
.toc li{margin-bottom:.25rem;break-inside:avoid}
/* ---- cinematic treatment -------------------------------------------------
Used by the plan pages (office.html, growth.html) and the per-trade pages.
Started life inline in office.html; promoted here once five pages needed it.
Opt-in by class, so the any-SMB homepage stays plainer on purpose. */
.scene{position:relative;background-color:var(--night);color:#fff;overflow:hidden}
.scene-mark{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--faint);margin:0 0 1.4rem}
.big-line{font-family:var(--serif);font-weight:700;letter-spacing:-.012em;line-height:1.06;
font-size:clamp(2rem,6.4vw,4.2rem);max-width:11em;margin:0}
.big-line em{font-style:italic;color:var(--amber)}
.quiet{color:var(--dim);max-width:52ch;font-size:clamp(1.02rem,1.9vw,1.2rem);margin-top:1.3rem}
.thread{max-width:420px;margin-top:2.2rem}
.bub{border-radius:16px;padding:.8rem 1.05rem;margin-bottom:.6rem;font-size:.97rem;line-height:1.45;max-width:86%}
.bub-in{background-color:#28344F;color:#EEF2F8;border-bottom-left-radius:5px}
.bub-out{background-color:var(--amber);color:var(--slate);margin-left:auto;border-bottom-right-radius:5px;font-weight:500}
.bub-time{font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.08em;margin:.1rem 0 1rem}
.ruleflag{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
color:#6EE7B7;background-color:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);
padding:.42rem .7rem;border-radius:999px}
.ledger{border-top:1px solid var(--line-d);margin-top:2rem}
.ledger div{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line-d);
font-size:.95rem;color:#E4E9F2;align-items:baseline}
.ledger time{font-family:var(--mono);font-size:.76rem;color:var(--amber);min-width:5.2rem;flex-shrink:0}
/* ---- per-trade hero -------------------------------------------------------
The homepage and Office heroes sit on deliberately dark night photography,
so .3 opacity reads fine. The trade photos are daylight shots and at .3 they
turned to mud — you could not tell a roof from a bathroom. Lifted here, with
the gradient eased to match, so the photo still says which trade. */
.hero.trade .hero-bg img{opacity:.5}
.hero.trade .hero-bg::after{
background:linear-gradient(180deg,rgba(11,18,32,.62) 0%,rgba(11,18,32,.84) 58%,var(--night) 100%)}
/* Linked card titles: the underline on a serif heading read as a mistake. */
.shot .meta b a{text-decoration:none}
.shot .meta b a:hover,.shot .meta b a:focus-visible{color:var(--amber-ink)}
.dark .shot .meta b a:hover,.dark .shot .meta b a:focus-visible{color:var(--amber)}
/* The footer contact line is a real
— semantic, and the AEO checks look
for one. UA stylesheets italicise it; the rest of the footer is not italic. */
.site-foot address{font-style:normal;display:block}
/* ---- inline links in quiet text -------------------------------------------
`.hint`, `.lede` and `.prose` all carry occasional links. They were being
coloured inline, one at a time, which meant guessing the surface — and
pricing.html guessed wrong: --amber-ink (a dark brown) on a dark plan panel
measured 3.07:1. One rule, surface-aware, instead. */
.hint a,.lede a{color:var(--amber-ink);text-underline-offset:3px}
.dark .hint a,.dark .lede a,.hero .hint a,.hero .lede a,
.scene .hint a,.scene .lede a{color:var(--amber-soft)}
/* The opt-in page puts a dark .formwrap inside a light .prose, and
`.prose a{color:var(--amber-ink)}` was winning inside the form. */
.prose .formwrap a{color:var(--amber-soft)}
/* ---- the Custom tier has no price -----------------------------------------
Its price slot holds a phrase, not a number. The serif display size is
tuned for "$19.99"; "Let's talk" at 2.5rem overwhelms the card and pushes
the column out of rhythm with the three priced ones beside it. */
/* line-height is chosen so the smaller phrase occupies the SAME line box as a
2.5rem price — otherwise everything under it rides ~13px high and the
fourth column falls out of rhythm with the three beside it. */
.plan .price-talk{font-size:1.7rem;line-height:1.47;letter-spacing:-.02em}
/* Links inside a .cap panel inherit the panel's body colour, which makes them
indistinguishable from the sentence around them. Match the dark-surface link
colour the rest of the site uses. */
.cap a{color:var(--amber-soft);text-underline-offset:3px}
/* ==========================================================================
HOMEPAGE + PRICING REBUILD — 2026-10-17
Built to the Figma board (file mAwGAwo4Pahbr698BL2wmB, homepage 102:5,
pricing 106:2). Everything below is additive: no existing rule was changed,
so the legal pages, the trade pages and the layout fixes above are untouched.
Two deliberate departures from the Figma, both recorded in README.md:
the logo stays a plain wordmark (no boxed "R" tile), and no tier claims
unlimited seats — the board's own design note says the code enforces
1/3/8+ and to re-gate before advertising it.
========================================================================== */
/* New dark surfaces have to join the two surface-scoped lists above, or
--faint lands at its light value on night and the eyebrows go brown. */
.pricetop,.appband,.estimator,.scene-card.dark{--faint:#8793AC}
.pricetop .eyebrow,.appband .eyebrow{color:var(--amber)}
/* ---- nav: grouped disclosure menus -------------------------------------
The Figma shows Features/Solutions/Resources dropdowns. Most of those
destinations do not exist on this site, so the two menus here are the two
whose every item is a real page. Built on so they need no JS and
keep native keyboard + screen-reader behaviour. */
.navmenu{position:relative}
.navmenu>summary{list-style:none;cursor:pointer;color:var(--dim);font-size:.95rem;
font-weight:500;padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem;
min-height:44px}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary::after{content:'';width:0;height:0;border:4px solid transparent;
border-top-color:currentColor;margin-top:4px}
.navmenu[open]>summary,.navmenu>summary:hover{color:#fff}
.navmenu .pop{position:absolute;top:calc(100% + .5rem);left:-1rem;min-width:230px;
background-color:var(--panel);border:1px solid var(--line-d);border-radius:12px;
padding:.5rem;box-shadow:0 18px 44px rgba(3,6,14,.5);z-index:70}
.navmenu .pop a{display:block;padding:.6rem .7rem;border-radius:8px;color:#E4E9F2;
font-size:.93rem;text-decoration:none;min-height:auto}
.navmenu .pop a:hover{background-color:var(--panel-2);color:var(--amber)}
.navmenu .pop a span{display:block;color:var(--faint);font-size:.8rem;margin-top:.1rem}
.nav .login{color:#fff}
@media(max-width:1000px){.navmenu{display:none}}
@media(max-width:860px){.nav .login{display:none}}
/* ---- split hero ---------------------------------------------------------
The single biggest gap against the Figma: the old hero was a dimmed
full-bleed photo that described the product. This one shows it working. */
.hero-split .wrap{display:grid;gap:clamp(2rem,5vw,3.4rem);align-items:center;
grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
@media(max-width:900px){.hero-split .wrap{grid-template-columns:1fr}}
.hero-split h1{max-width:9.55em}
.hero-split h1 em{font-style:normal;color:var(--amber)}
.hero-art{position:relative;isolation:isolate}
.hero-art>img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:18px;
box-shadow:0 26px 60px rgba(3,6,14,.55)}
/* "Answered · 7:42pm" */
.ans-badge{position:absolute;top:1rem;right:1rem;background-color:var(--amber);color:var(--slate);
font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;
padding:.45rem .7rem;border-radius:8px;box-shadow:0 6px 18px rgba(3,6,14,.4)}
/* The floating proof card. It is a LIGHT card on a dark hero, so every colour
inside it is set explicitly rather than inherited from the night surface. */
.proof-float{position:absolute;left:-1.6rem;bottom:-1.4rem;max-width:310px;
background-color:#fff;color:var(--ink);border-radius:14px;padding:1rem 1.1rem;
box-shadow:0 20px 48px rgba(3,6,14,.45)}
.proof-float .st{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;
color:var(--emerald-ink);margin-bottom:.4rem}
.proof-float .st::before{content:'';width:8px;height:8px;border-radius:50%;background-color:var(--emerald-ink);flex:none}
.proof-float b{display:block;font-size:1rem;margin-bottom:.25rem;color:var(--ink)}
.proof-float p{margin:0;font-size:.87rem;line-height:1.45;color:var(--ink-soft)}
@media(max-width:900px){
/* Absolute positioning on a phone would park the card over the subject's
face. Below 900px it becomes a normal block under the photo. */
.proof-float{position:static;max-width:none;margin-top:.9rem;box-shadow:0 10px 26px rgba(3,6,14,.3)}
.hero-art>img{aspect-ratio:16/11}
}
/* ---- segment tabs ------------------------------------------------------- */
.segtabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1.8rem}
.segtabs button{min-height:44px;padding:.55rem 1.05rem;border-radius:999px;cursor:pointer;
font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink-soft);
background-color:var(--card);border:1px solid var(--line-l);transition:background .15s,color .15s}
.segtabs button:hover{border-color:var(--amber)}
.segtabs button[aria-selected=true]{background-color:var(--slate);color:#fff;border-color:var(--slate)}
.segpanel[hidden]{display:none}
.segpanel .tilerow{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.segnote{text-align:center;color:var(--ink-soft);font-size:.95rem;margin:1.3rem 0 0}
/* ---- real-tenant proof --------------------------------------------------
Two businesses, not four. Permission is granted for Grey Wolf and Final
Finish only (owner, 2026-10-17) — see README. Designed for two so the row
reads as deliberate rather than as a grid with holes in it. */
.tenants{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.tenant{display:flex;gap:1.1rem;align-items:flex-start;background-color:var(--card);
border:1px solid var(--line-l);border-radius:16px;padding:1.4rem 1.5rem}
.dark .tenant{background-color:var(--panel);border-color:var(--line-d)}
.tenant .av{width:52px;height:52px;flex:none;border-radius:13px;display:grid;place-items:center;
font-family:var(--mono);font-weight:600;font-size:1rem;color:#fff;letter-spacing:.02em}
.tenant .av-gw{background-color:#6B5B4A}
.tenant .av-ff{background-color:#B4521F}
.tenant b{display:block;font-family:var(--serif);font-size:1.28rem;letter-spacing:-.004em}
.tenant .trade{display:block;font-size:.82rem;color:var(--faint);margin:.1rem 0 .55rem;
font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tenant p{margin:0 0 .6rem;font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.dark .tenant p{color:var(--dim)}
.tenant .visit{font-size:.9rem;font-weight:600;color:var(--amber-ink);text-underline-offset:3px}
.dark .tenant .visit{color:var(--amber-soft)}
/* ---- the five scenes ---------------------------------------------------- */
.scenes-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.scene-card{background-color:var(--card);border:1px solid var(--line-l);border-radius:14px;
overflow:hidden;display:flex;flex-direction:column}
.scene-card>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.scene-card .body{padding:1rem 1.1rem 1.2rem}
.scene-card h3{font-size:1.09rem;margin:.65rem 0 .4rem;line-height:1.22}
.scene-card p{margin:0;font-size:.89rem;line-height:1.5;color:var(--ink-soft)}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;
padding:.3rem .6rem;border-radius:999px;background-color:#E9F8F1;color:var(--emerald-ink);
border:1px solid #B7E6D2;line-height:1.3}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background-color:var(--emerald-ink);flex:none}
/* ---- capability columns ------------------------------------------------- */
.capcols{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.capcol>h3{font-size:1.08rem;font-family:var(--sans);letter-spacing:0;
padding-bottom:.6rem;border-bottom:2px solid var(--amber);margin-bottom:.85rem}
.capitem{background-color:var(--card);border:1px solid var(--line-l);border-radius:11px;
padding:.75rem .9rem;margin-bottom:.6rem}
.dark .capitem{background-color:var(--panel);border-color:var(--line-d)}
.capitem span{display:block;font-size:.93rem;font-weight:600;line-height:1.35}
.pill{display:inline-block;margin-top:.4rem;font-family:var(--mono);font-size:.63rem;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .42rem;border-radius:4px}
.pill-inc{background-color:#E9F8F1;color:var(--emerald-ink);border:1px solid #B7E6D2}
.pill-office{background-color:#FDF2DE;color:var(--amber-ink);border:1px solid var(--amber-soft)}
.pill-growth{background-color:#E8EEFB;color:#2A4A8F;border:1px solid #BFD0F0}
.pill-custom{background-color:#F0E9F7;color:#5B3B86;border:1px solid #D5C4E8}
.dark .pill-inc{background-color:rgba(16,185,129,.14);color:var(--emerald);border-color:rgba(16,185,129,.35)}
.dark .pill-office{background-color:rgba(229,171,74,.16);color:var(--amber-soft);border-color:rgba(229,171,74,.35)}
.dark .pill-growth{background-color:rgba(120,160,235,.16);color:#AFC6F2;border-color:rgba(120,160,235,.35)}
.dark .pill-custom{background-color:rgba(170,130,220,.16);color:#D4BCF0;border-color:rgba(170,130,220,.35)}
/* ---- AI marquees (alternating image / copy) ----------------------------- */
.marquee{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;
grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.marquee:last-of-type{margin-bottom:0}
.marquee>img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:16px}
/* Flip every other row. Only above the stacking breakpoint — once the grid is
one column, order:-1 would put the image above the copy on some rows and
below on others, which reads as a bug. */
@media(min-width:760px){.marquee.flip>img{order:2}}
.marquee h3{font-size:clamp(1.46rem,2.7vw,1.92rem);font-family:var(--serif);margin:.7rem 0 .6rem}
.marquee p{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0 0 .8rem;max-width:46ch}
.dark .marquee p{color:var(--dim)}
.arrowlink{font-weight:700;font-size:.95rem;color:var(--amber-ink);text-underline-offset:3px}
.dark .arrowlink{color:var(--amber-soft)}
/* ---- mobile-app band ---------------------------------------------------- */
.appband{background-color:var(--night);border-radius:18px;padding:clamp(1.3rem,3vw,1.9rem);
display:grid;gap:1.4rem;align-items:center;
grid-template-columns:132px minmax(0,1fr);color:#fff}
@media(max-width:620px){.appband{grid-template-columns:1fr}}
.appband>img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.appband h3{color:#fff;font-size:1.35rem;margin:.6rem 0 .5rem}
.appband p{color:var(--dim);margin:0;font-size:.96rem;max-width:62ch}
/* ==========================================================================
PRICING PAGE
========================================================================== */
/* The signature of the Figma pricing board: a dark band that the plan cards
overhang, so the row of cards straddles the boundary instead of sitting
inside one flat block. */
.pricetop{background-color:var(--night);color:#fff;text-align:center;
padding-block:clamp(2.6rem,6vw,4rem) 0}
.pricetop h1{color:#fff;max-width:12.3em;margin-inline:auto}
.pricetop .lede{color:#D7DEEA;margin-inline:auto;margin-top:1.1rem;max-width:56ch}
.seatnote{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
background-color:rgba(229,171,74,.14);border:1px solid rgba(229,171,74,.4);color:var(--amber-soft);
border-radius:999px;padding:.55rem 1.1rem;font-size:.9rem;font-weight:600;text-align:left}
.pricetop .toggle{margin-bottom:0}
/* The overhang itself: the dark band keeps 120px of padding under the toggle,
and the card row is pulled back up over it by the same amount. */
.pricetop .pad{height:clamp(90px,12vw,130px)}
.plans-overlap{margin-top:calc(-1 * clamp(90px,12vw,130px));position:relative;z-index:2}
.plan .usage{list-style:none;margin:1rem 0 .9rem;padding:.9rem 0 0;border-top:1px solid var(--line-l)}
.dark .plan .usage{border-color:var(--line-d)}
.plan .usage li{padding:.3rem 0 .3rem 1.6rem;position:relative;font-size:.9rem}
.plan .usage li::before{content:none}
.plan .usage li em{position:absolute;left:0;top:.35em;font-style:normal;font-size:.9rem;line-height:1}
.plan .usage b{font-weight:700}
.plan .usage li.off{color:var(--faint)}
/* Starter genuinely has no phone line (voice_minutes 0, max_phone_numbers 0).
Saying so on the card is cheaper than a refund request later. */
.plan-callout{background-color:#FDF4E2;border:1px solid var(--amber);border-radius:10px;
padding:.7rem .85rem;font-size:.85rem;line-height:1.45;color:#4A3608;margin:1rem 0 0}
.dark .plan-callout{background-color:rgba(229,171,74,.12);border-color:rgba(229,171,74,.45);color:var(--amber-soft)}
.plan-callout b{font-weight:700}
.plan ul.ticks{margin:1rem 0 1.4rem}
.plan ul.ticks li{padding-left:1.5rem}
.plan ul.ticks li::before{content:'✓';background:none;border-radius:0;width:auto;height:auto;
top:.38em;color:var(--emerald-ink);font-weight:700;font-size:.9rem;line-height:1}
.dark .plan ul.ticks li::before{color:var(--emerald)}
/* ---- usage explainer + estimator ---------------------------------------- */
.duo{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));align-items:start}
.usagebox{background-color:var(--card);border:1px solid var(--line-l);border-radius:16px;padding:clamp(1.2rem,3vw,1.7rem)}
.usagebox h3{font-family:var(--sans);letter-spacing:0;font-size:1.15rem;margin-bottom:1.1rem}
.usteps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin-bottom:1.2rem}
.ustep b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:6px;
background-color:var(--slate);color:#fff;font-family:var(--mono);font-size:.82rem;margin-bottom:.5rem}
.ustep strong{display:block;font-size:.95rem;margin-bottom:.25rem}
.ustep span{font-size:.87rem;color:var(--ink-soft);line-height:1.5}
.estimator{background-color:var(--night);border-radius:16px;padding:clamp(1.2rem,3vw,1.7rem);color:#fff}
.estimator h3{color:#fff;font-family:var(--sans);letter-spacing:0;font-size:1.15rem}
.estimator>p{color:var(--dim);font-size:.93rem;margin:.5rem 0 1.2rem}
.estimator .q{font-weight:600;font-size:.95rem;margin-bottom:.7rem;display:block}
.estbtns{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr));margin-bottom:1.1rem}
.estbtns button{min-height:48px;border-radius:10px;cursor:pointer;font-family:var(--sans);
font-weight:600;font-size:.92rem;background-color:var(--panel);color:#E4E9F2;border:1px solid var(--line-d)}
.estbtns button:hover{border-color:var(--amber)}
.estbtns button[aria-pressed=true]{background-color:var(--amber);color:var(--slate);border-color:var(--amber)}
.estout{background-color:rgba(229,171,74,.1);border:1px solid rgba(229,171,74,.35);border-radius:12px;
padding:.95rem 1.05rem;font-size:.93rem;line-height:1.55;color:#EDE2CC;margin:0}
.estout b{color:var(--amber)}
.reassure{background-color:#ECFDF5;border:1px solid #6EE7B7;border-radius:12px;padding:.95rem 1.1rem;
font-size:.93rem;line-height:1.55;color:#0A5742;margin:0}
.reassure b{font-weight:700}
/* ---- matrix: the Figma's darker header + highlighted Office column ------- */
table.matrix.rich thead th{background-color:var(--slate);color:#fff;font-size:.8rem}
table.matrix.rich thead th span{color:var(--dim)}
table.matrix.rich thead th.feat{background-color:#3A2C0C;color:var(--amber)}
table.matrix.rich thead th.feat span{color:var(--amber-soft)}
table.matrix.rich tbody td:nth-child(3){background-color:#FDFAF0}
.dark table.matrix.rich tbody td:nth-child(3){background-color:rgba(229,171,74,.06)}
table.matrix.rich tbody th .sub{display:block;font-size:.78rem;color:var(--faint);margin-top:.15rem}
/* ---- browser chrome above a customer-site screenshot --------------------
The Figma frames each real tenant site in a stripped-down browser bar with
the domain in it. It matters: it says "this is a live site", not "this is a
picture we made". */
.shot .urlbar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;
background-color:var(--bone-2);border-bottom:1px solid var(--line-l)}
.dark .shot .urlbar{background-color:var(--panel-2);border-color:var(--line-d)}
.shot .urlbar i{width:9px;height:9px;border-radius:50%;background-color:var(--line-l);flex:none}
.dark .shot .urlbar i{background-color:var(--line-d)}
.shot .urlbar span{font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-left:.5rem}
/* ---- two-column FAQ (pricing) -------------------------------------------
The Figma runs the pricing FAQ in two columns. `.faq` puts its rule on the
container's top edge; in a grid that rule would sit above only the first
column, so it moves to each row instead. */
@media(min-width:820px){
.faq2{display:grid;grid-template-columns:1fr 1fr;column-gap:2.6rem;border-top:0}
.faq2 details{border-top:1px solid var(--line-l)}
.dark .faq2 details{border-top-color:var(--line-d)}
}
/* ---- rebuild: fixes from the first visual pass --------------------------- */
/* The split hero centres a short copy column against a tall art column, so the
inherited 7rem top padding stacked on top of that centring and left ~170px
of dead space above the eyebrow. The Figma's hero is tighter than that. */
.hero-split .wrap{padding-block:clamp(2.2rem,5.5vw,4rem) clamp(2rem,4.5vw,3.25rem)}
/* The ladder is a single horizontal strip in the Figma. `.rung{flex:1 1 180px}`
is sized for a full-width hero; inside the ~480px left column of the split
hero only two fitted, so the third dropped to its own row and the strip read
as broken. Narrower basis here only. */
@media(min-width:900px){
.hero-split .rung{flex:1 1 120px;padding:.75rem .85rem}
.hero-split .rung b{font-size:.95rem}
.hero-split .rung span{font-size:.8rem}
}
/* Five scenes, one row. The 210px minimum needed 1119px of track for five
columns and the wrap is 1120px minus gutters — so it fell to four plus a
stranded fifth. */
.scenes-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr))}
/* Seven tabs on one row at desktop width. */
.segtabs button{padding:.55rem .85rem;font-size:.88rem}
/* Capability cards: a one-line label and a two-line label produced boxes of
different heights, so the four columns stopped lining up row for row. */
.capitem{min-height:78px;display:flex;flex-direction:column;justify-content:center}
/* `.plan ul{flex:1}` was written when a card held exactly one list. The usage
block is also a , so it inherited the grow and swallowed the card's
spare space — which pushed each card's tick list down by a different amount
and broke the row-to-row alignment across the four cards. Only the feature
list should grow. */
.plan ul.usage{flex:0 0 auto}
/* The two usage panels are a pair, so they should end level. The estimator has
less copy than the explainer; let it stretch and push its answer box to the
bottom rather than leaving a tall gap beside a short card. */
.duo{align-items:stretch}
.estimator{display:flex;flex-direction:column}
/* Empty space reads better below the answer than wedged between the
buttons and it, so the panel stretches but the content stays together. */
/* Three steps across, as in the Figma: a 150px minimum only fitted two in the
panel's ~370px of inner width. */
.usteps{grid-template-columns:repeat(auto-fit,minmax(min(100%,108px),1fr))}
/* ==========================================================================
TYPE: the display face is DM Serif Display — 2026-10-19
--------------------------------------------------------------------------
The owner, twice: the J in RunJack and the f in "for" look squiggly. He was
right, and it was not fixable inside Fraunces.
It is not WONK. The previous pass re-cut the files with WONK=0 / SOFT=0
pinned, and WONK only ever touched n, m, h, s and &. Reading the shipped
file settles the rest: GSUB carried `liga` and nothing else — no stylistic
sets, no alternates, 239 glyphs with no f.alt. There was nothing left to
switch. What he was reacting to is the shape itself: Fraunces' J and f at
wght 700 finish in heavy ball terminals that curl back on themselves, and
the italic J and f drop 0.20em below the baseline with a left hook.
DM Serif Display (OFL, Colophon/Google) is the replacement. Its roman f has
no descender and its J sits on the baseline. Its single weight is sturdier
than Fraunces' 700 hairlines, which is what the amber needed. Files are
subset from the upstream TTFs to the same codepoint set the Fraunces files
carried, self-hosted, nothing hotlinked.
ONE WEIGHT, declared as a range. DM Serif Display ships 400 only. The
@font-face says `font-weight:400 700` so the 700 every display rule asks
for resolves to this file as an exact match — if it were declared 400, the
browser would synthesise a smeared faux-bold instead.
WHAT HAD TO MOVE WITH IT. Three metric facts, each of which broke something
tuned to Fraunces:
1. `ch` is the width of the font's ZERO, and DM's is 0.502em against
Fraunces' 0.678em — 26% narrower. Every display `max-width:NNch` silently
tightened by a quarter and the hero went 3 lines to 4. Those measures are
now in `em`, which is font-size-relative but not glyph-relative, so the
line length survives the next face too. The sans `ch` measures (.lede,
.quiet, .faq .a, the inline ones in the HTML) are untouched — they
resolve against Instrument Sans and never moved.
2. Sidebearings are about half Fraunces' (H: .022em a side against .044em),
so Fraunces' -.02em / -.03em tracking crowded DM. Tracking is relaxed
roughly by half everywhere the display face is used.
3. Cap height is 0.660em against 0.700em, while the x-heights match almost
exactly (0.481 / 0.482). So lowercase-dominant headings hold their
apparent size and need no bump, but anything led by capitals or figures
loses ~6% — which is why the wordmark, the price figures and the savings
figure are bumped more than the headings are.
Tried and reverted: `text-wrap:balance` on the hero h1, to recover the
"Still open / for business." break at 390px. It orphans "Still" on line 2
at every desktop width and pushes 1024 to four lines. The natural wrap is
better. Don't re-try it.
========================================================================== */
/* ==========================================================================
DEPTH: light has a direction — 2026-10-18
--------------------------------------------------------------------------
Every surface here was one flat value: flat navy sections, flat cream
sections, flat card fills separated by hairlines. Nothing had a lit edge,
so nothing read as a physical object sitting on a page — which is what
"we're very flat in our colour" was describing.
No new hues. The rule is a light source: it arrives from above, so every
surface catches a little of it along its top edge and settles to its own
colour below, and anything raised casts a soft shadow underneath. On the
cream surfaces that light is white. On the night surfaces it is warm —
--amber-soft at very low alpha — because the light in this brand IS amber:
the CTA, the eyebrows, the accents. A warm highlight on navy says the lamp
is the same one lighting the button.
The catch-light is additive and fades to nothing, so two bands of the same
colour stacked together still read as two panels rather than one stripe.
========================================================================== */
:root{
/* On a warm cream ground a blue-grey shadow reads cold and dirty, so the
shadow colour is --amber-deep taken down to a shadow value, not --night. */
--sheen:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 58%);
--band:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 360px);
--edge:rgba(255,255,255,.9);
--lift:0 1px 1px rgba(62,47,22,.05),0 12px 26px -16px rgba(62,47,22,.34);
--lift-hi:0 2px 3px rgba(62,47,22,.07),0 24px 48px -22px rgba(62,47,22,.46);
}
/* Dark surfaces redefine the same four tokens, exactly the way --faint does,
so every rule below is written once and resolves correctly on both grounds. */
.dark,.hero,.scene,.site-foot,.strip,.formwrap,.legal-head,.pricetop,.appband,
.estimator,.scene-card.dark,section[style*="--night"]{
--sheen:linear-gradient(180deg,rgba(242,206,139,.07) 0%,rgba(242,206,139,0) 58%);
--band:linear-gradient(180deg,rgba(242,206,139,.055) 0%,rgba(242,206,139,0) 300px);
--edge:rgba(242,206,139,.09);
--lift:0 1px 1px rgba(3,6,14,.5),0 14px 30px -18px rgba(3,6,14,.85);
--lift-hi:0 2px 4px rgba(3,6,14,.55),0 26px 52px -24px rgba(3,6,14,.95);
}
/* Bands. Sections carry inline `background-color` now rather than the
`background` shorthand, which is what lets this layer over them. */
section,.site-foot,.legal-head{background-image:var(--band)}
/* Raised objects: lit lip on the top edge, soft shadow underneath. */
.card,.rungcard,.plan,.capitem,.tenant,.shot,.scene-card,.usagebox,.cap,.rung,
.formwrap,.scroller,.prose,details.math,.toc,.navmenu .pop{
background-image:var(--sheen);
box-shadow:inset 0 1px 0 var(--edge),var(--lift);
}
/* The nav popover is already carrying a deliberate drop shadow. Keep it,
and add only the lit lip. */
.navmenu .pop{box-shadow:inset 0 1px 0 var(--edge),0 18px 44px rgba(3,6,14,.5)}
/* The reading surfaces stay calm on purpose: a long prose page does not want
a lit edge on every paragraph block, only the one under the whole column. */
.prose{background-image:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 200px)}
/* Spend the boldness where it earns attention: the recommended plan is the
one card on the page that should look lit rather than merely raised. */
.plan.feature{
background-image:linear-gradient(180deg,rgba(242,206,139,.3) 0%,rgba(255,255,255,0) 44%),var(--sheen);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
0 2px 4px rgba(201,143,43,.14),
0 28px 56px -26px rgba(201,143,43,.6);
}
.dark .plan.feature{
background-image:linear-gradient(180deg,rgba(229,171,74,.16) 0%,rgba(229,171,74,0) 44%),var(--sheen);
box-shadow:inset 0 1px 0 rgba(242,206,139,.22),
0 2px 4px rgba(3,6,14,.5),
0 28px 56px -26px rgba(3,6,14,.95);
}
/* The trust strip sits in the seam between the hero and the first cream band.
Shading its own top and bottom edges turns it into a recessed channel,
which is what makes the hero above it read as raised. */
.strip{box-shadow:inset 0 9px 14px -12px rgba(3,6,14,.95),inset 0 -9px 14px -12px rgba(3,6,14,.95)}
/* The header floats over the page rather than sitting in it. */
.site-head{box-shadow:inset 0 1px 0 rgba(242,206,139,.06),0 12px 30px -20px rgba(3,6,14,.95)}
/* Amber objects get the same lamp as the primary CTA, or the button looks
like it belongs to a different page from the badges and step markers. */
.step-n,.ans-badge,.ustep b,.toggle button[aria-pressed=true],
.estbtns button[aria-pressed=true],.segtabs button[aria-selected=true]{
background-image:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 55%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px -4px rgba(201,143,43,.55);
}
/* The selected segment tab is slate, not amber, so its shadow is cold. */
.segtabs button[aria-selected=true]{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 10px -5px rgba(11,18,32,.45)}
/* Photographic tiles were flat-edged rectangles butted against the ground. */
.tile,.marquee>img,.scene-card>img,.appband>img{box-shadow:var(--lift)}
.tile{box-shadow:var(--lift-hi)}
/* ---- the hero gets an actual lamp ----------------------------------------
The hero was a photo at .3 opacity under one flat top-to-bottom scrim, so
the brightest and darkest points of a 700px-tall surface were four percent
apart. Three layers now, in paint order: a warm glow up and to the left,
roughly where the headline sits and where the amber CTA under it would be
catching light from; a cold pool in the opposite bottom corner so the
photo has somewhere to fall away to; then the original scrim, eased.
White on this ground still measures over 15:1 — the glow is nowhere near
strong enough to touch legibility, and it is the only place on the page
given this much licence. */
.hero-bg::after{
background:
radial-gradient(118% 86% at 16% -6%,rgba(229,171,74,.15) 0%,rgba(229,171,74,.05) 34%,rgba(229,171,74,0) 64%),
radial-gradient(86% 72% at 88% 112%,rgba(3,6,14,.6) 0%,rgba(3,6,14,0) 62%),
linear-gradient(180deg,rgba(11,18,32,.7) 0%,rgba(11,18,32,.86) 55%,var(--night) 100%);
}
/* The trade heroes get the warm glow and NOT the cold pool. They are the one
place on the site where the photograph is carrying information — which roof,
which bathroom — and the 2026-10-17 pass had already lifted them from .3 to
.5 for exactly that reason. Measured: the vignette put the darkest corner
back to flat --night and the roof disappeared again. Light only, here. */
.hero.trade .hero-bg::after{
background:
radial-gradient(118% 86% at 16% -6%,rgba(229,171,74,.13) 0%,rgba(229,171,74,.04) 34%,rgba(229,171,74,0) 64%),
linear-gradient(180deg,rgba(11,18,32,.62) 0%,rgba(11,18,32,.84) 58%,var(--night) 100%);
}
/* The dark sections immediately under the hero would otherwise drop straight
back to flat. One faint warm wash at the very top of the first one keeps
the light travelling down the page instead of stopping at the fold. */
.hero + .strip{background-image:linear-gradient(180deg,rgba(242,206,139,.045),rgba(242,206,139,0) 120px)}
/* The pricing card row is pulled up over the dark band above it by a negative
margin-top. That section has `padding-top:0`, so the margin collapsed
THROUGH it and moved the section's own background box up by the same 130px.
It was invisible while the section had no background at all. The moment
every section started catching light along its top edge, that stray
movement painted a pale wash straight across the dark overhang. flow-root
keeps the margin inside: the cards still overhang, the background does not. */
.pricetop + section{display:flow-root}
/* ==========================================================================
SCROLL REVEALS — 2026-10-18
--------------------------------------------------------------------------
Read the gate before changing anything here. There is no resting state in
this stylesheet that hides content. `[data-reveal]` is an attribute that
ONLY app.js writes, and it only writes it after it has checked three
things: that IntersectionObserver exists, that the visitor has not asked
for reduced motion, and that the element in question is below the fold
right now. So with JavaScript off, blocked, or broken, nothing carries the
attribute and the page is complete and readable exactly as it is served.
Never move this to a class the markup carries.
The media query is the second of three guards on reduced motion — app.js
checks it too, and the global `prefers-reduced-motion` rule at the top of
this file flattens every transition on the page regardless.
Transform and opacity only. Nothing here can reflow, so nothing here can
shift the layout while the visitor is reading. */
@media (prefers-reduced-motion:no-preference){
[data-reveal]{opacity:0;transform:translate3d(0,14px,0);
transition:opacity .6s ease,transform .6s cubic-bezier(.22,.72,.26,1)}
[data-reveal="in"]{opacity:1;transform:none}
}