/* =========================================================================
Thermal Dawn, site v2 stylesheet
Brand tokens follow Thermal-Dawn-CI-Guide-17122025-V1.
Montserrat (self-hosted woff2). Mobile-first.
========================================================================= */
/* ---------- Fonts ---------- */
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/Montserrat-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}
/* ---------- Tokens ---------- */
:root{
/* Primary */
/* Brand accent. Gage set this to #FF9C00 on 12 Aug 2026 and Nick adopted it
sitewide on 13 Aug, replacing #f4921d. Change it HERE and nowhere else:
the -rgb channel form feeds every rgba() tint (borders, hairlines, glows),
which is what let the old value drift into 16 separate literals. The
--td-sunrise gradient below was brought onto the same orange on 13 Aug,
so there is no longer a second accent anywhere in the system. */
--td-orange-rgb:255,156,0;
--td-orange:rgb(var(--td-orange-rgb));
/* Same hue as the accent (37deg, full saturation), darkened for use ON
LIGHT surfaces. #FF9C00 on the cream metric card is 1.96:1, which fails
even the 3:1 large-text bar; this is 3.30:1, matching what --td-deep
used to score there. Use it wherever accent-coloured TEXT sits on paper
or cream. On dark backgrounds use --td-orange, which scores 9.5:1. */
--td-orange-ink:#C27800;
--td-amber:#eda81d;
--td-gold:#fec800;
--td-deep:#ea5b13;
/* Neutrals */
--td-black:#1d1e1c;
--td-black2:#1c1514;
--td-ink:#010101;
--td-grey:#6e6965;
--td-grey-2:#B5B3B1;
--td-blue:#3dafe5; /* used sparingly */
--td-paper:#ffffff;
--td-paper-2:#f6f4f2;
--td-paper-3:#efeae6;
--td-line:#e2ddd8;
/* Sunrise gradient (rising-sun motif) */
/* Mid stop moved #f4921d -> #FF9C00 (13 Aug 2026) so the gradient and the
flat accent are the same orange. Side benefit: the hue ramp is now even,
47deg -> 37deg -> 20deg, where the old mid sat at 33deg and bunched
toward the deep end. Endpoints are Gage's, untouched. */
--td-sunrise:linear-gradient(100deg,#fec800 0%,#FF9C00 52%,#ea5b13 100%);
--td-sunrise-soft:linear-gradient(180deg,#fff7e8 0%,#ffffff 100%);
/* Dark overlay for background photos */
--td-photo-overlay:linear-gradient(180deg,rgba(28,21,20,.55) 0%,rgba(29,30,28,.82) 100%);
/* Type */
--font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
/* Spacing / layout */
--wrap:1160px;
--wrap-narrow:760px;
--radius:14px;
--radius-sm:9px;
--shadow:0 10px 34px rgba(29,30,28,.10);
--shadow-lg:0 20px 60px rgba(29,30,28,.18);
--header-h:70px;
}
/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px;}
body{
margin:0;font-family:var(--font);font-weight:400;
color:var(--td-black);background:var(--td-paper);
line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--td-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-weight:900;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em;color:var(--td-black);}
h1{font-size:clamp(2.1rem,6vw,3.5rem);}
h2{font-size:clamp(1.65rem,4.2vw,2.5rem);}
h3{font-size:clamp(1.2rem,2.6vw,1.55rem);font-weight:800;}
h4{font-size:1.05rem;font-weight:800;}
p{margin:0 0 1.1em;}
strong,b{font-weight:700;}
hr{border:0;border-top:1px solid var(--td-line);margin:2.5rem 0;}
ul,ol{margin:0 0 1.2em;padding-left:1.25em;}
li{margin:.35em 0;}
:focus-visible{outline:3px solid var(--td-blue);outline-offset:2px;border-radius:4px;}
/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.narrow{max-width:var(--wrap-narrow);margin-left:auto;margin-right:auto;}
.section{padding:64px 0;}
.section.tight{padding:44px 0;}
.section.pad-lg{padding:88px 0;}
.section--paper2{background:var(--td-paper-2);}
.section--paper3{background:var(--td-paper-3);}
.section--dark{background:var(--td-black);color:#efe9e4;}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark a{color:var(--td-gold);}
.section--ink{background:var(--td-ink);color:#e9e4df;}
.center{text-align:center;}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--td-deep);margin:0 0 .7rem;}
.section--dark .eyebrow{color:var(--td-gold);}
.lead{font-size:1.18rem;color:#33322f;}
.section--dark .lead{color:#d9d2cc;}
.muted{color:var(--td-grey);}
.mt0{margin-top:0;}.mb0{margin-bottom:0;}
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr;}.grid-3{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.grid-4{grid-template-columns:repeat(4,1fr);}}
.split{display:grid;gap:34px;align-items:center;}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr;}.split.media-right .media{order:2;}}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font-family:var(--font);font-weight:800;font-size:1rem;line-height:1;
padding:15px 26px;border-radius:var(--btn-radius);border:2px solid transparent;cursor:pointer;
text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
/* border-box keeps the gradient from tiling into the transparent border
(which showed as inverted-colour slivers at the pill's rounded ends) */
.btn--primary{background:var(--td-sunrise) border-box;color:#1c1514;box-shadow:0 8px 22px rgba(234,91,19,.32);}
.btn--primary:hover{box-shadow:0 12px 30px rgba(234,91,19,.42);color:#1c1514;}
.btn--dark{background:var(--td-black);color:#fff;}
.btn--dark:hover{background:#000;color:#fff;}
.btn--ghost{background:transparent;color:var(--td-black);border-color:var(--td-black);}
.btn--ghost:hover{background:var(--td-black);color:#fff;}
.section--dark .btn--ghost{color:#fff;border-color:#fff;}
.section--dark .btn--ghost:hover{background:#fff;color:var(--td-black);}
.hero .btn--ghost{color:#fff;border-color:#fff;}
.hero .btn--ghost:hover{background:#fff;color:var(--td-black);}
.btn--sm{padding:11px 18px;font-size:.92rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}
.btn-row.center{justify-content:center;}
.arrow::after{content:"\2192";font-weight:800;}
/* ---------- Header / nav ---------- */
/* Sticky lives on the outer #site-header, further down. It was on this inner
div, whose parent is exactly as tall as it is, so it had no distance to
travel and scrolled away like a static element. */
.site-header{background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--td-line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.nav__logo img{height:26px;width:auto;}
.nav__toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav__toggle span{width:26px;height:2.5px;background:var(--td-black);border-radius:2px;transition:.2s;}
.nav__menu{list-style:none;margin:0;padding:0;display:none;}
.nav__menu a{color:var(--td-black);font-weight:600;font-size:.97rem;text-decoration:none;padding:8px 2px;display:block;}
.nav__menu a:hover,.nav__menu a.is-active{color:var(--td-deep);}
.nav__cta{display:none;}
.nav__has-sub>a::after{content:"\25be";font-size:.7em;margin-left:.35em;color:var(--td-grey);}
/* mobile drawer */
.nav__menu.open{display:block;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--td-line);padding:12px 22px 22px;box-shadow:var(--shadow);}
.nav__menu.open li{border-bottom:1px solid var(--td-paper-3);}
.nav__menu.open a{padding:14px 2px;font-size:1.05rem;}
.nav__menu.open .nav__sub{padding-left:14px;}
.nav__menu.open .nav__sub a{font-size:.98rem;color:var(--td-grey);}
.nav__menu.open .nav__cta-mob{margin-top:14px;}
.nav__menu.open .nav__cta-mob a{background:var(--td-sunrise);color:#1c1514;border-radius:var(--btn-radius);text-align:center;font-weight:800;padding:14px;}
@media(min-width:1000px){
.nav__toggle{display:none;}
.nav__cta-mob{display:none;} /* drawer-only CTA, hidden on desktop */
.nav__menu{display:flex;align-items:center;gap:26px;}
.nav__menu>li{position:relative;}
.nav__sub{list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:-14px;min-width:220px;background:#fff;border:1px solid var(--td-line);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;}
.nav__has-sub:hover .nav__sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav__sub a{white-space:nowrap;padding:9px 10px;border-radius:8px;}
.nav__sub a:hover{background:var(--td-paper-2);}
.nav__cta{display:inline-flex;}
}
/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--td-photo-overlay);}
.hero__inner{position:relative;z-index:1;padding:96px 0 84px;}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero .subhead{font-size:1.22rem;max-width:620px;color:#f2ece6;}
.hero--plain{background:var(--td-black);}
.hero--sunrise{background:var(--td-sunrise);color:#1c1514;}
.hero--sunrise h1,.hero--sunrise .subhead{color:#1c1514;text-shadow:none;}
.hero__inner .btn-row{margin-top:26px;}
.supporting{margin-top:20px;font-weight:600;color:#fff;}
.hero--sunrise .supporting{color:#1c1514;}
/* proof bar */
.proofbar{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.9rem;font-weight:600;}
.proofbar span{display:inline-flex;align-items:center;gap:.4em;background:rgba(0,0,0,.28);padding:7px 13px;border-radius:999px;}
.hero--sunrise .proofbar span{background:rgba(28,21,20,.12);}
/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
/* opt-in lift for interactive-feeling card grids (pricing capabilities) */
.card--lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card--lift:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.16);border-color:rgba(var(--td-orange-rgb),.6);}
body.dark .card--lift:hover{box-shadow:0 12px 26px rgba(0,0,0,.55);border-color:rgba(var(--td-orange-rgb),.75);}
.section--dark .card{background:#26251f;border-color:#37342c;color:#e9e4df;}
.card h3{margin-top:0;}
.card--pad-lg{padding:32px;}
/* gradient top strip via pseudo-element; border-image ignored border-radius
and squared the card corners */
.card__accent{position:relative;overflow:hidden;}
.card__accent::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--td-sunrise);}
.card--flag{border:2px solid var(--td-orange);position:relative;}
.tag{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;padding:5px 11px;border-radius:999px;background:var(--td-sunrise);color:#1c1514;}
/* stat tiles */
.stats{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr);}}
.stat{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);padding:26px 22px;text-align:center;box-shadow:var(--shadow);}
.section--dark .stat{background:#26251f;border-color:#37342c;}
.stat b{display:block;font-size:2.05rem;font-weight:900;line-height:1.05;color:var(--td-deep);}
.section--dark .stat b{color:var(--td-gold);}
.stat span{display:block;margin-top:6px;font-size:.95rem;color:var(--td-grey);}
.section--dark .stat span{color:#c9c2bb;}
/* ---------- Draft/verify placeholder marker ----------
Subtle inline highlight (no absolutely-positioned badge, which overlapped
neighbouring text). The dashed underline + tint signals "provisional". */
.draft{
background:rgba(61,175,229,.12);color:#0b6a92;
border-bottom:1px dashed var(--td-blue);
border-radius:3px;padding:0 .25em;font-weight:700;white-space:normal;overflow-wrap:break-word;cursor:help;
}
.section--dark .draft{color:#bfe6f7;background:rgba(61,175,229,.18);}
.draft-note{font-size:.85rem;color:#0b6a92;font-weight:600;display:inline-flex;align-items:center;gap:.4em;}
/* Live savings counter indicator, unhidden by live-stats.js when the
platform endpoint answers. Green pulse = numbers on screen are live. */
[data-live-stat]{font-variant-numeric:tabular-nums;}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1f8f63;vertical-align:middle;}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#2ec68a;animation:td-livepulse 2s ease-in-out infinite;}
.band-orange .live-dot,.section--dark .live-dot{color:#8ff0c8;}
@keyframes td-livepulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.draft-note::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--td-blue);display:inline-block;flex:none;}
.section--dark .draft-note{color:#bfe6f7;}
/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:0 0 1.4em;border-radius:var(--radius);border:1px solid var(--td-line);}
/* A two-column comparison stretched across a full-width wrap reads as a
spreadsheet. Cap it and centre it so it sits with the prose. */
.table-wrap--narrow{max-width:760px;margin-left:auto;margin-right:auto;}
table.data{width:100%;border-collapse:collapse;font-size:.96rem;min-width:460px;background:#fff;}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--td-line);vertical-align:top;}
/* Designer, 12 Aug 2026: table headers are a SOLID accent, never a gradient.
The dark-mode override further down was the sunrise gradient; it is now the
same flat colour, so the two themes agree. */
table.data thead th{background:var(--td-orange);color:#1c1514;font-weight:700;}
table.data tbody tr:nth-child(even){background:var(--td-paper-2);}
table.data td:first-child{font-weight:600;}
/* ---------- Media / figures ---------- */
/* Designer, 12 Aug 2026: side-by-side figures must show matching rounded
corners on their captions. In a grid the figures stretch to equal height,
so a shorter image left a gap BELOW its caption, and the rounded bottom
corners showed the figure's own (empty) background instead of the caption.
Making the figure a flex column and letting the caption grow means the
caption always reaches the bottom, whatever the image aspect ratio. */
.figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.figure img{width:100%;flex:0 0 auto;}
.figure figcaption{font-size:.85rem;color:var(--td-grey);padding:10px 14px;background:#fff;flex:1 1 auto;}
/* media placeholder (missing Wix assets) */
.media-ph{
border:2px dashed var(--td-orange);border-radius:var(--radius);
background:repeating-linear-gradient(45deg,#fff7ec,#fff7ec 12px,#fdefd9 12px,#fdefd9 24px);
color:#9a5a12;padding:34px 24px;text-align:center;font-weight:600;
display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:180px;
}
.media-ph .media-ph__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--td-deep);}
.media-ph .media-ph__desc{font-size:.95rem;max-width:420px;}
.media-ph::before{
content:"";width:38px;height:38px;display:block;
background:url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
/* app screenshot frame */
.phone{max-width:280px;margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:var(--shadow-lg);border:8px solid #14130f;background:#14130f;}
/* The V2 phone artwork is ALREADY a rendered device, bezel and drop shadow on
transparency, so it must not sit inside .phone or it gets a second frame
drawn around it. Device plus shadow fills only 78% x 82% of the canvas, so
the box has to run bigger than the old 280px .phone frame for the device
itself to read at the same size. 560px fills the split column at desktop
and puts the device around 730px tall. */
.device-shot{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;}
/* Proof band only: match the sizing of the reference design, where the phone
runs about 780px tall and sits near the section's left edge rather than
being centred in a column. Our split column is only ~541px, so the shot
grows past it and bleeds LEFT into the wrap padding; calc keeps the bleed
proportional as the column narrows instead of hardcoding a width that
would collide with the copy on a small laptop. max-width is cleared
because the 560px cap above would otherwise win. */
@media(min-width:880px){
/* #proof, NOT .band-orange: the intelligence app band is also a
.band-orange with a .device-shot, but its composition is different (the
cream applist runs right, out behind the phone) and was tuned to a 34px
gap. Widening the shot there closed that gap to 14px. Scoped. */
#proof .device-shot{
/* Bleed is CLAMPED to the gutter that actually exists beside the wrap,
never a flat -60px. The wrap maxes at 1160, so the room either side is
(100vw - 1160)/2; min() caps the bleed at 60, max() floors it at 0 so
narrow desktops get no bleed instead of a negative one. A fixed -60px
put the phone's left edge at -38px on a 885px viewport, clipping it. */
--bleed:max(0px, min(60px, (100vw - 1160px) / 2));
width:calc(100% + var(--bleed));
max-width:none;
margin-left:calc(-1 * var(--bleed));
margin-right:0;
}
}
.phone img{border-radius:22px;}
/* ---------- Quote / testimonial ---------- */
.quote{border-left:5px solid var(--td-orange);padding:8px 0 8px 22px;font-size:1.3rem;font-weight:600;font-style:italic;color:var(--td-black);margin:0 0 .6em;}
.section--dark .quote{color:#fff;}
.quote-attr{font-weight:800;font-style:normal;color:var(--td-deep);}
/* Big single-line statement. For a sentence that carries the whole argument
on its own, so it is not competing with a heading or buried in a para. */
.statement{max-width:900px;margin:0 auto;text-align:center;font-weight:800;
line-height:1.22;letter-spacing:-.01em;font-size:clamp(1.35rem,3.4vw,2.1rem);
color:var(--td-black);}
.statement em{font-style:normal;color:var(--td-orange);}
.statement__sub{text-align:center;margin:12px auto 0;max-width:640px;font-size:.95rem;
color:var(--td-grey);}
.section--dark .statement,body.dark .statement{color:#fff;}
/* body.dark em is more specific than .statement em, so restate it here */
.section--dark .statement em,body.dark .statement em{color:var(--td-orange);}
.section--dark .statement__sub,body.dark .statement__sub{color:#b6a89b;}
.section--dark .quote-attr{color:var(--td-gold);}
/* ---------- Animation embed ----------
Heights are matched to each animation's rendered content so there are no
empty voids or clipping. Mobile heights differ (content reflows). */
.embed{position:relative;width:100%;max-width:920px;margin-left:auto;margin-right:auto;background:#0a0a0a;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid #2a2822;}
.embed iframe{width:100%;border:0;display:block;height:820px;}
.embed__cap{font-size:.85rem;color:var(--td-grey);margin-top:10px;text-align:center;}
.embed--home iframe{height:1150px;}
.embed--daynight iframe{height:950px;}
.embed--flow iframe{height:820px;}
/* flow-v2 standalone (scene only; add ?controls=1 for the control bar) */
.embed--flow2 iframe{height:750px;}
.embed--beforeafter iframe{height:945px;}
@media(max-width:640px){
.embed--home iframe{height:1160px;}
.embed--daynight iframe{height:850px;}
.embed--flow iframe{height:720px;}
.embed--flow2 iframe{height:640px;}
.embed--beforeafter iframe{height:775px;}
}
/* ---------- Callout / notes ---------- */
.callout{background:var(--td-paper-2);border:1px solid var(--td-line);border-left:5px solid var(--td-orange);border-radius:var(--radius-sm);padding:18px 22px;margin:0 0 1.3em;}
.callout--info{border-left-color:var(--td-blue);background:rgba(61,175,229,.07);}
.micro{font-size:.9rem;color:var(--td-grey);}
/* logos strip */
.logos{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:center;color:var(--td-grey);}
.logos span{font-weight:700;font-size:.95rem;padding:8px 14px;border:1px solid var(--td-line);border-radius:999px;background:#fff;}
.section--dark .logos span{background:#26251f;border-color:#37342c;color:#d9d2cc;}
/* two-path routing cards */
.path-card{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.path-card h3{margin-top:0;}
.path-card .btn{margin-top:auto;align-self:flex-start;}
/* pricing tiers */
.tier{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;}
.tier--best{border:2px solid var(--td-orange);box-shadow:var(--shadow-lg);}
.tier__flag{position:absolute;top:-14px;left:30px;}
.tier__price{font-size:2.2rem;font-weight:900;color:var(--td-black);}
.tier__price small{font-size:1rem;font-weight:600;color:var(--td-grey);}
.tier ul{list-style:none;padding:0;margin:16px 0 22px;}
.tier li{padding-left:1.6em;position:relative;margin:.55em 0;}
.tier li::before{content:"\2713";position:absolute;left:0;color:var(--td-deep);font-weight:900;}
.tier .btn{margin-top:auto;}
/* forms */
.form{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);}
.section--dark .form{color:var(--td-black);}
.field{margin-bottom:18px;}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem;}
.field .req{color:var(--td-deep);}
.field input,.field textarea,.field select{
width:100%;font-family:var(--font);font-size:1rem;padding:13px 14px;
border:1px solid var(--td-line);border-radius:var(--radius-sm);background:#fff;color:var(--td-black);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--td-orange);outline:none;box-shadow:0 0 0 3px rgba(var(--td-orange-rgb),.18);}
.field textarea{min-height:120px;resize:vertical;}
/* Consent stated at the point of action. Replaced the opt-in tickboxes on
25 Aug: people scrolled past them, and on the subscribe form the box also
shared the name "optin" with the hidden field and overwrote it. */
.form-consent{grid-column:1/-1;margin:10px 0 0;font-size:.82rem;line-height:1.5;color:var(--td-grey);}
.next-orange .form-consent{color:rgba(28,21,20,.75);}
body.dark .form-consent{color:#a2968c;}
.field--check{display:flex;gap:10px;align-items:flex-start;}
.field--check input{width:auto;margin-top:5px;}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden;}
.form__note{font-size:.85rem;color:var(--td-grey);margin-top:4px;}
/* breadcrumb */
.crumbs{font-size:.85rem;color:var(--td-grey);padding:16px 0 0;}
.crumbs a{color:var(--td-grey);}
/* ---------- Blog ---------- */
.post-grid{display:grid;gap:26px;grid-template-columns:1fr;}
@media(min-width:680px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:980px){.post-grid{grid-template-columns:repeat(3,1fr);}}
.post-card{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.post-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;}
.post-card__thumb{aspect-ratio:16/9;background:var(--td-sunrise);position:relative;overflow:hidden;}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;}
.post-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post-card__kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--td-deep);}
.post-card h3{font-size:1.12rem;margin:0;}
.post-card p{font-size:.94rem;color:var(--td-grey);margin:0;}
.post-card__more{margin-top:auto;font-weight:700;color:var(--td-deep);padding-top:8px;}
.badge-soon{background:var(--td-grey-2);color:#3a3733;}
/* article body */
.article{max-width:760px;margin:0 auto;}
.article h2{margin-top:1.8em;}
.article h3{margin-top:1.5em;}
.article>p:first-of-type{font-size:1.15rem;}
.article ul,.article ol{padding-left:1.3em;}
.article .table-wrap{margin:1.6em 0;}
.article-meta{color:var(--td-grey);font-size:.92rem;font-style:italic;margin-bottom:1.6em;}
.keep-reading a{display:block;padding:12px 0;border-bottom:1px solid var(--td-line);font-weight:600;}
/* ---------- Footer ---------- */
.site-footer{background:var(--td-black);color:#c9c2bb;padding:56px 0 30px;}
.site-footer a{color:#e4ded8;}
.site-footer a:hover{color:var(--td-gold);}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:760px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr;}}
.footer-logo img{height:24px;margin-bottom:14px;}
.footer-col h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col li{margin:.5em 0;}
.footer-col a{color:#d7d0ca;}
.footer-col address{font-style:normal;color:#c9c2bb;line-height:1.7;margin-top:12px;}
.footer-bottom{border-top:1px solid #37342c;margin-top:38px;padding-top:22px;font-size:.85rem;color:#9a938c;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;}
.footer-social{display:flex;gap:18px;margin-top:4px;}
.footer-social a{font-weight:600;}
/* =========================================================================
v3, live-site look (dark header, cocoa sections, orange proof band)
Matches the design of the current thermaldawn.com.au homepage.
========================================================================= */
:root{
--td-cocoa:#2b1a0f; /* warm dark brown section base */
--td-cocoa-2:#1a0f08;
--td-shell:#14100d; /* header / footer near-black */
--td-cocoa-grad:linear-gradient(180deg,#3a2312 0%,#25150b 55%,#1a0f08 100%);
--td-orange-flat:#f5860f; /* flat orange band */
--btn-radius:8px; /* one radius for every button, sitewide */
}
/* ---------- Header: dark shell + gradient hairline ---------- */
.site-header{background:var(--td-shell);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:none;}
.site-header::before{content:"";display:block;height:3px;background:var(--td-sunrise);}
/* The header is a direct child of body, so it is the only element here with
room to stay put for the length of the page. */
#site-header{position:sticky;top:0;z-index:60;}
.site-header{transition:background .25s ease,backdrop-filter .25s ease;}
/* Once the page has moved, let content pass behind the bar instead of hiding
under a solid slab. --td-shell is #14100d. */
#site-header.is-scrolled .site-header{background:rgba(20,16,13,.82);backdrop-filter:saturate(150%) blur(12px);}
/* Without this a sticky bar parks itself over whatever an anchor jumps to. */
html{scroll-padding-top:92px;}
@media(prefers-reduced-motion:reduce){.site-header{transition:none;}}
.nav__menu a{color:#f3ece6;}
.nav__menu a:hover,.nav__menu a.is-active{color:var(--td-orange);}
.nav__toggle span{background:#fff;}
.nav__has-sub>a::after{color:rgba(255,255,255,.55);}
@media(min-width:1000px){
.nav__menu{gap:30px;}
.nav__menu>li>a{font-size:.9rem;font-weight:600;letter-spacing:.01em;}
.nav__sub{background:#1d1712;border-color:rgba(255,255,255,.12);}
.nav__sub a:hover{background:rgba(255,255,255,.08);color:#fff;}
}
.nav__menu.open{background:var(--td-shell);border-bottom-color:rgba(255,255,255,.1);}
.nav__menu.open li{border-bottom-color:rgba(255,255,255,.08);}
.nav__menu.open .nav__sub a{color:#bdb4ac;}
/* ---------- Buttons: squared variants used on the homepage ---------- */
.btn--rect{border-radius:var(--btn-radius);}
.btn--light{background:#fff;color:#1c1514;}
.btn--light:hover{background:#fff;color:#1c1514;box-shadow:0 10px 26px rgba(0,0,0,.28);}
.btn--outline-light{background:transparent;color:#fff;border-color:#fff;}
.btn--outline-light:hover{background:#fff;color:#1c1514;}
.btn--flat{background:var(--td-orange-flat);color:#1c1514;box-shadow:none;}
.btn--flat:hover{background:#ff9820;color:#1c1514;}
.btn--blue{background:var(--td-blue);color:#0d2b3a;}
.btn--blue:hover{background:#57bdee;color:#0d2b3a;}
/* ---------- Hero: centred, heavy dusk overlay ---------- */
.hero--center{text-align:center;}
.hero--center .hero__bg::after{background:linear-gradient(180deg,rgba(24,13,7,.74) 0%,rgba(20,11,6,.86) 60%,rgba(16,9,5,.94) 100%);}
.hero--center .hero__inner{padding:110px 0 96px;}
.hero--center h1{font-size:clamp(2rem,5vw,3.05rem);letter-spacing:-.015em;margin-bottom:.55em;}
.hero--center h1 .accent{color:var(--td-orange);display:block;}
.hero--center .subhead{margin:0 auto;max-width:520px;font-size:.98rem;font-weight:600;line-height:1.6;color:#e7ded6;}
.hero--center .btn-row{justify-content:center;margin-top:30px;}
.hero__note{margin:34px auto 0;max-width:520px;font-style:italic;font-weight:600;font-size:.95rem;color:#cfc4ba;line-height:1.9;}
/* ---------- Credibility strip ---------- */
.credstrip{padding:44px 0 40px;background:#fff;}
.credstrip__grid{display:grid;gap:34px;grid-template-columns:1fr;text-align:center;}
@media(min-width:760px){.credstrip__grid{grid-template-columns:repeat(3,1fr);}}
.credstrip__title{font-weight:900;font-size:1.12rem;color:var(--td-orange);margin:0 0 4px;}
.credstrip__sub{font-size:.92rem;color:var(--td-grey);margin:0 0 14px;}
.credstrip__item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
/* Columns carry different content (button / logo+button / three logos), so
without this the buttons float at whatever height the text above left
them: 71px in one column, 97px in the next. Pin them to the bottom. */
.credstrip__item .btn{margin-top:auto;}
.credstrip__item .plogos{margin-bottom:14px;}
.credstrip__logos{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:center;}
.credstrip__logos span{font-size:.72rem;font-weight:700;color:var(--td-grey);border:1px solid var(--td-line);border-radius:6px;padding:6px 10px;max-width:180px;line-height:1.3;}
.credstrip__wordmark{font-weight:900;font-size:1.35rem;letter-spacing:-.02em;color:var(--td-black);}
/* ---------- Dark showcase panel (animation on a light page) ---------- */
.showcase{background:#fff;padding:10px 0 64px;}
.panel-dark{background:#100c09;border-radius:22px;padding:26px 18px;box-shadow:var(--shadow-lg);}
@media(min-width:760px){.panel-dark{padding:34px 30px;}}
.panel-dark .embed{background:transparent;border:0;box-shadow:none;border-radius:14px;}
/* ---------- Cocoa (warm dark) sections ---------- */
.section--cocoa{background:var(--td-cocoa-grad);color:#e9ded4;position:relative;overflow:hidden;}
.section--cocoa::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 320px at 12% 0%,rgba(var(--td-orange-rgb),.16),transparent 62%);}
.section--cocoa>*{position:relative;z-index:1;}
.section--cocoa h1,.section--cocoa h2,.section--cocoa h3,.section--cocoa h4{color:#fff;}
.section--cocoa .lead{color:#e5d8cc;}
.section--cocoa .micro{color:#b6a89b;}
.section--cocoa a{color:var(--td-orange);}
.hl{color:var(--td-orange);}
/* chart pair on cocoa */
.chart-panel h3{font-size:clamp(1.05rem,2vw,1.28rem);text-align:center;margin-bottom:14px;}
.chart-panel .micro{text-align:center;}
/* ---------- Alternatives: icon rows ---------- */
.altrow{display:grid;gap:22px;align-items:center;grid-template-columns:1fr;padding:26px 0;}
@media(min-width:760px){
.altrow{grid-template-columns:132px 1fr;gap:34px;}
.altrow--flip{grid-template-columns:1fr 132px;}
.altrow--flip .altrow__icon{order:2;}
}
.altrow__icon{width:104px;height:104px;border-radius:50%;border:1px solid var(--td-line);background:var(--td-paper-2);display:flex;align-items:center;justify-content:center;margin:0 auto;}
.altrow__icon svg{width:46px;height:46px;}
.altrow h3{margin-bottom:.45em;}
.altrow p{margin:0;color:#4a4642;}
.altrow--flip{text-align:left;}
@media(min-width:760px){.altrow--flip{text-align:right;}}
/* ---------- Orange proof band ---------- */
.band-orange{background:var(--td-orange-flat);color:#1c1514;padding:60px 0;}
.band-orange h2{color:#fff;font-size:clamp(1.8rem,4.4vw,2.7rem);line-height:1.12;}
/* Nick 19 Aug: the heading runs BLACK on the orange band, like the live
site, rather than a white setup line. Only the homepage proof band
uses .lede, so this does not touch the intelligence band. */
.band-orange h2 .lede{display:block;color:#1c1514;font-weight:600;font-size:.72em;opacity:.75;}
.band-orange .split{align-items:center;}
.band-orange .phone{border-color:#241a13;}
.metric-card{background:#fdf7ef;border-radius:12px;padding:24px 26px;box-shadow:0 16px 40px rgba(60,26,4,.22);max-width:520px;}
.metric-card__intro{font-size:.9rem;color:#4a4642;margin:0 0 16px;}
.metric{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #ece0d1;}
.metric:last-of-type{border-bottom:0;}
.metric dt{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6e6965;}
/* Designer, 12 Aug 2026: proof figures and their arrows carry the accent, so
the numbers lift off the band rather than sinking into --td-deep. These sit
on the cream metric card, so they take the on-light form of the accent:
same hue Gage picked, dark enough to actually read. These are the savings
figures, the most persuasive numbers on the site. */
.metric dd{margin:0;font-size:clamp(1.35rem,3.4vw,1.9rem);font-weight:900;color:var(--td-orange-ink);display:flex;align-items:center;gap:.35em;}
.metric dd::before{content:"\2192";color:var(--td-orange-ink);font-weight:900;}
.band-orange .btn-row{margin-top:20px;}
.band-orange .micro{color:#5c3d1f;}
body.dark .band-orange{color:#1c1514;}
body.dark .band-orange h2,body.dark .band-orange h3{color:#fff;}
/* Designer, 12 Aug 2026: copy sitting directly on the orange band is white.
The cream panels that sit ON TOP of the band (.applist, .metric-card) are a
different surface and keep their dark text, restored immediately below.
Order matters here: those two rules tie on specificity with this one and
win by coming later, so do not reorder them. */
body.dark .band-orange p,body.dark .band-orange li,body.dark .band-orange strong{color:#fff;}
body.dark .band-orange .applist li,body.dark .band-orange .applist strong{color:#2c2119;}
body.dark .band-orange .metric-card p,body.dark .band-orange .metric-card strong{color:#4a4642;}
/* Homepage proof band, rebuilt 19 Aug 2026 to the live-site layout: hero
stat, live totals row, then one card per home. Cream panels on the orange,
same surface as .metric-card, so accent TEXT here takes --td-orange-ink. */
.proof-panel{background:#fdf7ef;border-radius:12px;padding:22px 24px;box-shadow:0 16px 40px rgba(60,26,4,.22);}
.proof-stat{font-weight:900;font-size:clamp(1.75rem,4.4vw,2.45rem);line-height:1.05;color:var(--td-orange-ink);margin:0 0 10px;}
.proof-home{font-size:1.05rem;font-weight:900;color:var(--td-orange-ink);margin:0 0 8px;}
.proof-since{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6e6965;margin:18px 0 0;}
.proof-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid #ece0d1;}
.proof-totals b{display:block;font-weight:900;font-size:clamp(1rem,2.3vw,1.3rem);line-height:1.15;color:var(--td-orange-ink);}
/* Label spans are DIRECT children of the cell div. The value's live-stat
span sits inside ; the old bare `.proof-totals span` caught it too and
stacked "$" over grey .76rem digits. Scope tightly and belt-and-brace the
value span back to inheriting. */
.proof-totals>div>span{display:block;font-size:.76rem;color:#6e6965;margin-top:2px;}
.proof-totals b span{display:inline;font-size:inherit;color:inherit;margin:0;}
@media(max-width:420px){.proof-totals{grid-template-columns:1fr;gap:8px;}}
.band-orange .applist{list-style:none;margin:0;padding:16px 22px;background:#fdf7ef;border-radius:12px;box-shadow:0 16px 40px rgba(60,26,4,.2);}
/* Designer, 12 Aug 2026: the applist's cream panel runs on under the phone
rather than stopping at the column edge. The negative right margin is
-(one column + the grid gap), so the panel reaches the far edge of the
split; the matching padding keeps the text where it was. The phone is
lifted above it. Must come AFTER the rule above, which sets margin:0.
Two-column only: on mobile the split stacks and the panel is already
full width. */
@media(min-width:880px){
.band-orange .applist{position:relative;z-index:1;margin-right:calc(-100% - 34px);padding-right:calc(100% + 34px);border-top-right-radius:0;border-bottom-right-radius:0;}
.band-orange .split .media{position:relative;z-index:2;}
}
.band-orange .applist li{font-size:.9rem;padding:9px 0;border-bottom:1px solid #ece0d1;margin:0;}
.band-orange .applist li:last-child{border-bottom:0;}
.band-orange .applist strong,body.dark .band-orange .applist strong{color:var(--td-deep);}
/* ---------- Big centred quote ---------- */
.quote-hero{max-width:860px;margin:0 auto;text-align:center;}
.quote-hero blockquote{margin:0 0 .5em;border:0;padding:0;font-size:clamp(1.25rem,3vw,1.85rem);font-weight:800;font-style:italic;line-height:1.3;color:var(--td-black);}
.quote-hero blockquote .hl{color:var(--td-black);}
.quote-hero .quote-attr{font-weight:600;color:var(--td-grey);font-size:1rem;}
/* ---------- Photo mosaic ---------- */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
.mosaic figure{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3;}
/* FIVE tiles that tile exactly into 4 columns x 2 rows, so default row
auto-placement leaves no holes and needs no `dense`. Cells: 4+1+1+1+1 = 8.
If you change the photo count, redo that sum or the grid will gap.
Nick 19 Aug: same photos as the live site, ute at dawn as the hero. */
@media(min-width:760px){
.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:235px;}
.mosaic figure{aspect-ratio:auto;height:100%;}
.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2;} /* hero */
}
/* Below 760 the grid is two up; the hero still runs full width so the
opening shot keeps its weight on a phone. */
.mosaic figure:nth-child(1){grid-column:span 2;}
/* ---------- About split (dark) ---------- */
.about-split{display:grid;gap:34px;grid-template-columns:1fr;align-items:start;}
@media(min-width:880px){.about-split{grid-template-columns:minmax(0,420px) 1fr;gap:48px;}}
.about-split img{border-radius:10px;width:100%;}
.about-split .media-ph{min-height:320px;}
/* ---------- "What's next" orange block ---------- */
.next-orange{background:var(--td-orange-flat);color:#1c1514;padding:60px 0 66px;}
.next-orange h2{color:#fff;margin-bottom:8px;}
.next-orange h3{color:#1c1514;font-size:1.15rem;margin:0 0 6px;}
.next-orange .rule{border:0;border-top:2px solid rgba(28,21,20,.35);max-width:120px;margin:0 0 28px;}
.next-block{display:grid;gap:16px 30px;grid-template-columns:1fr;align-items:center;padding:22px 0;border-top:1px solid rgba(28,21,20,.18);}
.next-block:first-of-type{border-top:0;}
@media(min-width:820px){.next-block{grid-template-columns:1fr auto;}}
.next-block p{margin:0;font-size:.95rem;color:#3a2c20;max-width:60ch;}
.next-orange .field label{font-size:.85rem;}
.next-orange .field input[type=email]{border-color:rgba(28,21,20,.25);}
.next-orange .nl-form{display:grid;gap:12px;grid-template-columns:1fr;align-items:end;}
@media(min-width:820px){.next-orange .nl-form{grid-template-columns:1fr auto;}}
.next-orange .field{margin-bottom:0;}
.next-orange .field--check{grid-column:1/-1;font-size:.85rem;}
/* ---------- Footer: centred lockup ---------- */
.site-footer{background:var(--td-shell);text-align:center;padding:52px 0 28px;}
/* width:auto is required, the img carries width/height attributes, and
without it the 26px height squashes the wordmark to a 240px-wide smear */
.footer-center__logo img{height:26px;width:auto;margin:0 auto 20px;}
.footer-social--icons{justify-content:center;gap:14px;margin:0 0 22px;}
.footer-social--icons a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--td-shell);}
.footer-social--icons a:hover{background:var(--td-orange);color:#1c1514;}
.footer-social--icons svg{width:17px;height:17px;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.88rem;margin:0 0 18px;}
.footer-address{font-style:normal;font-weight:700;color:#efe7e0;font-size:.92rem;margin-bottom:8px;}
.footer-legal{font-size:.78rem;color:#8d857e;}
/* =========================================================================
Dark theme (body class="dark"), the look of the live interior pages:
near-black page, cocoa alternates, centred type, orange accents.
========================================================================= */
body.dark{background:#0d0908;color:#cfc5bc;}
body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:#fff;}
body.dark a{color:var(--td-orange);}
body.dark strong,body.dark b{color:#efe6de;}
body.dark .lead{color:#e0d5ca;}
body.dark .micro,body.dark .muted{color:#a2968c;}
body.dark em{color:#cfc5bc;}
/* section rhythm: alternate near-black / cocoa, hairline rule between */
body.dark .section{background:#0d0908;padding:72px 0;position:relative;}
/* The :not(.section--photo) matters. This hairline uses the `background`
SHORTHAND, which resets background-image, and at (0,3,3) it outranks
.section--photo::before at (0,1,1). Without the exclusion it silently wipes
every photo background on a section that follows another section, which is
most of them. Found 12 Aug 2026 when the new backgrounds rendered as a bare
hairline; it had already been breaking the one pre-existing use on
hydronic/. A photo section brings its own visual boundary, so it does not
need the divider anyway. */
body.dark .section+.section:not(.section--photo)::before,
body.dark .section+.credstrip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--td-orange-rgb),.55),transparent);}
body.dark .section--paper2,body.dark .section--paper3{background:var(--td-cocoa-grad);color:#e2d7cd;}
body.dark .section--dark{background:#080605;}
body.dark .section--cocoa{background:var(--td-cocoa-grad);}
/* centred layout is the house style on these pages, headings and short
intros centre, but prose and lists stay left-aligned and measure-limited
so they're actually readable. */
body.dark .section>.wrap{text-align:center;}
body.dark .narrow{margin-left:auto!important;margin-right:auto!important;}
body.dark .section .card,body.dark .section .table-wrap,body.dark .section .form,
body.dark .section .tier,body.dark .section .path-card,body.dark .section .article,
body.dark .section .split,body.dark .section .altrow,body.dark .section .faq{text-align:left;}
/* lists never centre, ragged bullets are hard to scan */
body.dark .section ul,body.dark .section ol{text-align:left;max-width:66ch;margin-left:auto;margin-right:auto;}
body.dark .section ol{padding-left:1.5em;}
body.dark .section li{margin:.6em 0;padding-left:.2em;}
body.dark .section ol li::marker{color:var(--td-orange);font-weight:800;}
body.dark .section ul:not(.applist):not(.stays ul):not(.footer-col ul){list-style:none;padding-left:0;}
body.dark .section ul:not(.applist):not(.stays ul)>li{position:relative;padding-left:1.4em;}
body.dark .section ul:not(.applist):not(.stays ul)>li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--td-orange);}
body.dark .section .article ul,body.dark .section .article ol{list-style:disc;padding-left:1.3em;text-align:left;max-width:none;}
body.dark .section .article ul>li{padding-left:0;}
body.dark .section .article ul>li::before{display:none;}
body.dark .section .card ul,body.dark .section .tier ul{text-align:left;}
body.dark .section .tier ul>li::before{display:none;}
/* body prose gets a comfortable measure even inside a centred wrap */
body.dark .section>.wrap>p,body.dark .section>.wrap>.narrow>p{max-width:70ch;margin-left:auto;margin-right:auto;}
body.dark .section .btn-row{justify-content:center;}
body.dark .section .quote{border-left:0;border-top:2px solid var(--td-orange);padding:16px 0 0;display:inline-block;}
/* .quote defaults to near-black, invisible on a dark page */
body.dark .quote{color:#fff;}
body.dark .quote-attr{color:var(--td-orange);}
body.dark blockquote{color:#fff;}
/* draft markers: the light-page blue is ~2.5:1 on near-black */
body.dark .draft{color:#bfe6f7;background:rgba(61,175,229,.18);}
body.dark .draft-note{color:#bfe6f7;}
/* cards: dark fill, orange keyline, orange heading */
body.dark .card{background:#15100c;border:1px solid rgba(var(--td-orange-rgb),.42);box-shadow:none;color:#cfc5bc;}
body.dark .card h3,body.dark .card h4{color:var(--td-orange);font-size:1rem;}
body.dark .section--dark .card{background:#15100c;border-color:rgba(var(--td-orange-rgb),.42);}
body.dark .path-card{background:#15100c;border-color:rgba(var(--td-orange-rgb),.42);box-shadow:none;}
body.dark .callout{background:rgba(var(--td-orange-rgb),.08);border-color:rgba(var(--td-orange-rgb),.35);border-left-color:var(--td-orange);color:#d9cec5;}
/* stats: borderless, big orange figures */
body.dark .stat{background:transparent;border:0;box-shadow:none;padding:10px 6px;}
body.dark .stat b{color:var(--td-orange);font-size:1.55rem;}
body.dark .stat span{color:#a2968c;}
/* tables: orange header, dark body */
body.dark .table-wrap{border-color:rgba(var(--td-orange-rgb),.35);}
body.dark table.data{background:#120e0b;color:#d3c8bf;}
body.dark table.data thead th{background:var(--td-orange);color:#1c1514;}
body.dark table.data th,body.dark table.data td{border-bottom-color:rgba(255,255,255,.09);}
body.dark table.data tbody tr:nth-child(even){background:#171210;}
body.dark table.data td:first-child{color:#efe6de;}
/* misc surfaces */
body.dark .figure figcaption{background:#15100c;color:#a2968c;}
body.dark .logos span{background:#15100c;border-color:rgba(255,255,255,.14);color:#c6bab0;}
body.dark .pill{background:#1d1713;color:#e6ddd5;}
body.dark .embed{background:#0a0806;border-color:rgba(255,255,255,.09);}
body.dark .form{background:#15100c;border-color:rgba(var(--td-orange-rgb),.3);}
body.dark .field label{color:#e6ddd5;}
body.dark .field input,body.dark .field textarea,body.dark .field select{background:#0f0c0a;border-color:rgba(255,255,255,.18);color:#efe6de;}
body.dark .crumbs,body.dark .crumbs a{color:#8f857c;}
body.dark .tier{background:#15100c;border-color:rgba(var(--td-orange-rgb),.42);box-shadow:none;}
body.dark .tier__price{color:#fff;}
body.dark .tier li::before{color:var(--td-orange);}
body.dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.75);}
body.dark .btn--ghost:hover{background:#fff;color:#1c1514;}
body.dark .post-card{background:#15100c;border-color:rgba(var(--td-orange-rgb),.3);box-shadow:none;}
body.dark .post-card p{color:#a2968c;}
/* Buttons on dark pages.
`body.dark a` (0-1-2) outranks `.btn--primary` (0-1-0), which rendered
button labels orange-on-orange. These restate the label colours at a
specificity that wins. */
body.dark .btn--primary,body.dark .btn--primary:hover,
body.dark .btn--dark,body.dark .btn--dark:hover,
body.dark .btn--flat,body.dark .btn--flat:hover,
body.dark .btn--light,body.dark .btn--light:hover,
body.dark .nav__menu.open .nav__cta-mob a{color:#1c1514;}
body.dark .btn--outline-light,body.dark .btn--ghost{color:#fff;}
body.dark .btn--outline-light:hover,body.dark .btn--ghost:hover{color:#1c1514;}
body.dark .btn--blue,body.dark .btn--blue:hover{color:#0d2b3a;}
/* btn--dark has no meaning on a dark page, render it as the sunrise CTA */
body.dark .btn--dark{background:var(--td-sunrise) border-box;}
body.dark .btn--dark:hover{background:var(--td-sunrise) border-box;}
/* hero on dark pages */
body.dark .hero--plain{background:#0d0908;}
body.dark .hero--plain .hero__inner{padding:86px 0 70px;}
body.dark .faq-block{position:relative;}
body.dark .faq-block::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--td-orange-rgb),.55),transparent);}
body.dark .hero__bg::after{background:linear-gradient(180deg,rgba(13,9,8,.72) 0%,rgba(13,9,8,.88) 60%,rgba(13,9,8,.97) 100%);}
/* ---------- Shared components used by the dark pages ---------- */
/* two-line headings: second line in orange */
.h-accent{display:block;color:var(--td-orange);}
/* orange figure row (value + caption), e.g. "$800–$1,500/yr" */
.figures{display:grid;gap:26px;grid-template-columns:1fr;text-align:center;margin:26px 0;}
@media(min-width:720px){.figures{grid-template-columns:repeat(3,1fr);}}
.figures__v{display:block;font-weight:900;font-size:1.15rem;color:var(--td-orange);margin-bottom:6px;}
.figures__l{display:block;font-size:.86rem;color:#a2968c;line-height:1.5;max-width:26ch;margin:0 auto;}
.figures--stack{grid-template-columns:1fr;text-align:left;gap:22px;margin:0;}
@media(min-width:720px){.figures--stack{grid-template-columns:1fr;border-left:1px solid rgba(var(--td-orange-rgb),.4);padding-left:28px;}}
.figures--stack p{margin:0;}
/* ── Cost equation (homepage 6b) ────────────────────────────────────────
Two things you'd otherwise buy, joined by real operators, resolving into
the accent-ringed answer. Replaces a centered .figures row whose third
"value" was a full sentence and read as a broken column. */
.cost-eq{display:grid;gap:12px;margin:26px 0;text-align:left;}
@media(min-width:760px){.cost-eq{grid-template-columns:1fr auto 1fr auto 1.12fr;gap:14px;align-items:stretch;}}
.cost-card{background:#fff;border:1px solid var(--td-line);border-radius:var(--radius-sm);padding:20px 22px;}
.cost-card b{display:block;font-weight:900;font-size:1.24rem;letter-spacing:-.01em;color:var(--td-black);margin-bottom:7px;}
.cost-card p{margin:0;font-size:.9rem;color:var(--td-grey);line-height:1.55;}
.cost-card--td{border:2px solid var(--td-orange);}
.cost-card--td b{color:var(--td-orange-ink);}
.cost-op{font-weight:900;font-size:1.45rem;color:var(--td-grey-2);align-self:center;justify-self:center;line-height:1;}
/* ── Fossil-fuels band (homepage 6a) ────────────────────────────────────
Was an .altrow--flip: right-aligned text against a floating icon circle.
Now one card, icon left, text left, same copy. */
.fossil-card{display:grid;gap:18px;align-items:center;background:#fff;border:1px solid var(--td-line);border-radius:var(--radius-sm);padding:22px 24px;}
@media(min-width:640px){.fossil-card{grid-template-columns:auto 1fr;gap:24px;}}
.fossil-card .altrow__icon{width:84px;height:84px;margin:0;}
.fossil-card .altrow__icon svg{width:38px;height:38px;}
.fossil-card h3{margin:0 0 .35em;}
.fossil-card p{margin:0;color:#4a4642;}
.figures--stack .figures__l{margin:0;max-width:34ch;}
/* numbered steps with an orange rule */
.steps{display:grid;gap:0;margin-top:26px;text-align:left;}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);}
.step:first-child{border-top:0;}
.step__n{font-weight:900;font-size:1.5rem;color:var(--td-orange);line-height:1;padding-right:18px;border-right:2px solid var(--td-orange);white-space:nowrap;}
.step h3{margin:0 0 .4em;font-size:1.1rem;}
.step p{margin:0;color:#b9aea5;font-size:.95rem;}
@media(min-width:820px){
.step{grid-template-columns:120px 1fr;gap:30px;align-items:center;}
.step__n{font-size:2rem;text-align:right;}
}
/* solid sunrise cards (pricing comparison trio) */
.card--orange{background:var(--td-sunrise) border-box;border:0;color:#1c1514;border-radius:10px;padding:24px;box-shadow:0 14px 34px rgba(234,91,19,.22);}
body.dark .card--orange{background:var(--td-sunrise) border-box;border:0;color:#231a12;}
.card--orange h3,body.dark .card--orange h3{color:#3a2408;font-size:1.05rem;margin-top:0;}
.card--orange p,.card--orange li{color:#3a2408;}
/* numbered benefit list with an orange spine */
.benefits{max-width:760px;margin:24px auto 0;text-align:left;border-left:2px solid var(--td-orange);padding-left:24px;}
.benefits__item{padding:14px 0;}
.benefits__item h3{margin:0 0 .35em;font-size:1rem;color:var(--td-orange);}
.benefits__item p{margin:0;font-size:.94rem;color:#b9aea5;}
.benefits__n{font-weight:900;color:var(--td-orange);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px;}
/* stays / goes lists */
.stays{display:grid;gap:24px;grid-template-columns:1fr;text-align:left;max-width:720px;margin:26px auto 0;}
@media(min-width:640px){.stays{grid-template-columns:1fr 1fr;}}
.stays h3{font-size:1.05rem;margin-bottom:.6em;}
.stays--keep h3{color:var(--td-orange);}
.stays ul{list-style:none;margin:0;padding:0;}
.stays li{margin:.45em 0;font-size:.95rem;}
.stays--keep li{color:var(--td-orange);}
.stays--drop li{color:#cfc5bc;}
/* stacked question list with rules above/below (site-assessment style) */
.qlist{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:22px 0;margin:26px auto;max-width:720px;}
.qlist p{margin:.7em 0;font-weight:700;color:#efe6de;}
/* FAQ accordion (light block at the foot of the dark pages) */
.faq-block{background:#fff;color:var(--td-black);padding:60px 0 70px;}
.faq-block h2{color:var(--td-black);text-align:left;}
.faq{max-width:900px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--td-line);}
.faq details[open]{border-bottom-color:var(--td-orange);}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:700;font-size:.98rem;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--td-grey);border-bottom:2px solid var(--td-grey);transform:rotate(45deg);transition:transform .18s ease;}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq details p{font-size:.92rem;color:#4c4742;margin:0 0 18px;max-width:80ch;}
/* responsive 16:9 video embed */
.video{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.1);}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video__cap{font-size:.85rem;color:var(--td-grey);margin-top:10px;text-align:center;}
body.dark .video__cap,.section--cocoa .video__cap,.section--dark .video__cap{color:#a2968c;}
/* hour-by-hour timeline */
.timeline{max-width:900px;margin:34px auto 0;position:relative;text-align:left;}
.tl{display:grid;grid-template-columns:1fr;gap:6px 40px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);}
.tl:first-child{border-top:0;}
.tl__label{font-weight:900;font-size:clamp(1.35rem,3vw,1.9rem);color:var(--td-orange);line-height:1.1;}
.tl h3{margin:0 0 .4em;font-size:1.05rem;}
.tl p{margin:0;font-size:.94rem;color:#b9aea5;}
@media(min-width:820px){
.timeline::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:rgba(var(--td-orange-rgb),.35);}
.tl{grid-template-columns:1fr 1fr;align-items:center;border-top:0;padding:26px 0;}
.tl__label{grid-column:1;text-align:right;padding-right:30px;}
.tl__body{grid-column:2;padding-left:30px;}
.tl--r .tl__label{grid-column:2;grid-row:1;text-align:left;padding:0 0 0 30px;}
.tl--r .tl__body{grid-column:1;grid-row:1;text-align:right;padding:0 30px 0 0;}
}
/* photo-backed dark section, set --img inline: style="--img:url(/assets/img/x.webp)" */
.section--photo{position:relative;background:#0d0908;color:#e2d7cd;overflow:hidden;}
.section--photo::before{
content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;
opacity:.28;filter:saturate(.7);
}
.section--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,9,8,.72),rgba(13,9,8,.9));}
.section--photo>*{position:relative;z-index:1;}
body.dark .section--photo,body.dark .section--photo>.wrap{color:#e2d7cd;}
.section--photo h2,.section--photo h3{color:#fff;}
/* section--photo is dark regardless of body theme, so small text needs its
light colour HERE, not only under body.dark. Without this, the homepage
(body.home) chart attributions fell back to .micro's #6e6965, dark grey on
near-black. Mirrors the .section--cocoa .micro rule this section style
replaced on that page. */
.section--photo .micro{color:#b6a89b;}
/* oversized vertical watermark word */
.watermark{position:relative;}
.watermark__word{
position:absolute;left:-14px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
font-weight:900;font-size:clamp(3rem,7vw,5.4rem);letter-spacing:.02em;line-height:1;
color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);pointer-events:none;user-select:none;
}
@media(max-width:900px){.watermark__word{display:none;}}
/* =========================================================================
v4, typographic hierarchy
Nearly everything sat at 800–900, so nothing led and the proof figures
didn't pop. Step the chrome down and reserve the heaviest weight for the
numbers and the hero. Load-bearing figures keep 900 deliberately.
========================================================================= */
h2{font-weight:800;}
h3{font-weight:700;}
h4{font-weight:700;}
.btn{font-weight:700;}
.eyebrow{font-weight:700;}
.credstrip__title{font-weight:700;}
.quote-hero blockquote{font-weight:600;}
.card h3,body.dark .card h3,body.dark .card h4{font-weight:700;}
.metric dt{font-weight:700;}
.step h3,.tl h3,.benefits__item h3,.stays h3{font-weight:700;}
.ic-title{font-weight:700;}
/* these are the numbers, they keep the weight */
.figures__v,.stat b,.metric dd,.tier__price,.tl__label,.step__n,h1{font-weight:900;}
/* .figures was tuned for dark sections; on a light one the caption grey
dropped to ~2.6:1 */
body:not(.dark) .figures__l{color:var(--td-grey);}
/* .btn--flat is the flat-orange CTA, which is exactly the colour of the
orange bands, on them it rendered at 1.00:1 with no border or shadow, so
it read as bold text rather than a button. Go dark inside those bands. */
.band-orange .btn--flat,.next-orange .btn--flat,
.band-orange .btn--primary,.next-orange .btn--primary{
background:var(--td-black);color:#fff;box-shadow:0 8px 22px rgba(60,26,4,.28);
}
.band-orange .btn--flat:hover,.next-orange .btn--flat:hover,
.band-orange .btn--primary:hover,.next-orange .btn--primary:hover{background:#000;color:#fff;}
body.dark .band-orange .btn--flat,body.dark .next-orange .btn--flat,
body.dark .band-orange .btn--primary,body.dark .next-orange .btn--primary{color:#fff;}
/* Flat orange on the white credibility strip gave the button shape only
2.53:1 against the page (WCAG 1.4.11 wants 3:1 for a control's boundary).
The deeper sunrise orange clears it and stays on-brand. */
.credstrip .btn--flat{background:var(--td-deep);}
.credstrip .btn--flat:hover{background:#d24f0c;color:#1c1514;}
/* ---------- Form controls: radio / checkbox groups ----------
Scoped through .field--group so these beat the generic `.field label`
rule above, which would otherwise force each option block and bold. */
.field--group{border:0;padding:0;margin:0 0 22px;}
.field--group legend{display:block;font-weight:700;margin-bottom:10px;font-size:.95rem;padding:0;}
.field--group .choice{
display:inline-flex;align-items:center;gap:8px;position:relative;
margin:0;padding:10px 18px;font-size:.94rem;font-weight:600;line-height:1.2;
cursor:pointer;border:1px solid var(--td-line);border-radius:999px;
background:#fff;color:var(--td-black);transition:all .15s ease;
min-height:44px;
}
/* The real input still does the work: it is only visually hidden, so keyboard
focus, arrow-key groups and form serialisation are untouched. Names and
values are byte-identical to before, because the notification layout is a
contract for the sales agent and now the CRM too. */
.field--group .choice input{
position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.field--group .choice:hover{border-color:rgba(var(--td-orange-rgb),.65);
background:rgba(var(--td-orange-rgb),.05);}
.field--group .choice.is-selected,
.field--group .choice:has(input:checked){
border-color:var(--td-orange);background:rgba(var(--td-orange-rgb),.12);
color:var(--td-deep);box-shadow:0 0 0 1px var(--td-orange) inset;
}
.field--group .choice:has(input:focus-visible){
outline:2px solid var(--td-orange);outline-offset:2px;
}
/* Pills wrap in a row rather than stacking, which is what stops this form
being a very long scroll (Nick, 24 Aug). */
.field--group .choices{display:flex;flex-wrap:wrap;gap:8px;}
.field--group .choice__other{margin-top:10px;flex:1 1 100%;}
/* Two columns for the short text fields, so name/name and suburb/state pair
up instead of eating four rows. Collapses on narrow screens. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}
body.dark .field--group legend{color:#e6ddd5;}
body.dark .field--group .choice{background:#15100c;border-color:rgba(255,255,255,.16);color:#e2d9d1;}
body.dark .field--group .choice:hover{border-color:rgba(var(--td-orange-rgb),.7);background:rgba(var(--td-orange-rgb),.1);}
body.dark .field--group .choice.is-selected,
body.dark .field--group .choice:has(input:checked){
border-color:var(--td-orange);background:rgba(var(--td-orange-rgb),.18);color:#fff;
}
/* the honeypot must be unreachable, not merely invisible */
.hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-error{
margin:14px 0 0;padding:12px 14px;border-radius:var(--radius-sm);
background:rgba(234,91,19,.1);border:1px solid rgba(234,91,19,.45);
color:#a8390a;font-size:.92rem;font-weight:600;
}
.form-error a{color:inherit;text-decoration:underline;}
body.dark .form-error{background:rgba(234,91,19,.14);border-color:rgba(var(--td-orange-rgb),.5);color:#ffcfa8;}
.next-orange .form-error{background:rgba(28,21,20,.1);border-color:rgba(28,21,20,.4);color:#3a2c20;}
/* ---------- Partner / backer logos ----------
Renders the organisation name as text until a real logo file exists at
/assets/img/partners/.svg (or -white.svg on dark sections), then
site.js swaps the image in. See MISSING-MEDIA.md for the file list. */
.plogos{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;}
.plogos--left{justify-content:flex-start;}
.plogo{display:inline-flex;align-items:center;}
/* height, not max-height: brand SVGs often carry only a viewBox with no
intrinsic size, and against max-height those collapse to 0×0. A definite
height lets width:auto resolve through the viewBox aspect ratio. */
.plogo img{height:34px;width:auto;max-width:170px;object-fit:contain;display:block;}
.plogos--sm .plogo img{height:26px;max-width:140px;}
.plogo__txt{font-weight:700;font-size:.8rem;line-height:1.3;color:var(--td-grey);border:1px solid var(--td-line);border-radius:6px;padding:6px 10px;max-width:180px;}
/* Partner badge: just the logo, on the partner's own colour, in a small
rounded chip. Our copy sits OUTSIDE it (Nick, 22 Aug), so their brand
block never looks like it is carrying our words. */
.pbadge-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 0;}
.pbadge{display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;padding:11px 16px;flex:0 0 auto;
box-shadow:0 6px 18px rgba(0,0,0,.22);}
.pbadge--ha{background:#18BCF2;}
.pbadge .plogo img{height:26px;max-width:190px;}
.pbadge .plogo__txt,body.dark .pbadge .plogo__txt{color:#fff;
border-color:rgba(255,255,255,.55);font-size:.9rem;padding:5px 10px;max-width:none;}
.pbadge-row__cap{margin:0;flex:1 1 300px;min-width:240px;line-height:1.5;}
@media(max-width:560px){
.pbadge{padding:9px 13px;}
.pbadge .plogo img{height:22px;max-width:160px;}
.pbadge-row{gap:14px;}
}
body.dark .plogo__txt,.section--dark .plogo__txt,.section--cocoa .plogo__txt{color:#c6bab0;border-color:rgba(255,255,255,.18);background:#15100c;}
/* ---------- Utility ---------- */
.hide{display:none!important;}
.pill{display:inline-block;background:var(--td-paper-3);border-radius:999px;padding:5px 13px;font-size:.82rem;font-weight:700;color:var(--td-black);}
.anchor{scroll-margin-top:90px;}
.text-links a{font-weight:600;}
@media(max-width:520px){body{font-size:16px;}.section{padding:48px 0;}.hero__inner{padding:70px 0 60px;}}
/* =========================================================================
v5, lighter rhythm
Diffed against the live Wix homepage: it runs lighter and quieter, orange
held back for CTAs and small accents, tight display tracking, light body
copy. Step toward that without undoing the v3 look: one orange band
instead of two, h1 down from Black, tighter heading tracking, softer
hero copy, display sizes a step smaller.
========================================================================= */
/* Display type: tighter tracking and one step smaller, closer to the Wix cut */
h1,h2{letter-spacing:-.022em;}
h1{font-weight:800;font-size:clamp(2rem,5.2vw,3.15rem);}
h2{font-size:clamp(1.6rem,4vw,2.3rem);}
.hero--center h1{font-size:clamp(1.9rem,4.6vw,2.85rem);letter-spacing:-.022em;}
body{font-size:16.5px;}
/* Hero copy carried too much weight for supporting text */
.hero--center .subhead{font-weight:500;}
.hero__note{font-weight:500;}
/* "What's next" drops from second orange band to paper, leaving the proof
band as the page's single orange moment. (The Wix page works the same
trick in reverse: one dark moment on an otherwise light page.) */
.next-orange{background:var(--td-paper-2);color:var(--td-black);}
.next-orange h2{color:var(--td-black);}
.next-orange h3{color:var(--td-black);}
.next-orange .rule{border-top-color:var(--td-orange);}
.next-block{border-top-color:var(--td-line);}
.next-block p{color:#4a4642;}
.next-orange .field input[type=email]{border-color:var(--td-line);}
.next-orange .form-error{background:rgba(234,91,19,.1);border-color:rgba(234,91,19,.45);color:#a8390a;}
/* =========================================================================
v6, accent rationing + two-button system (homepage first)
Lessons from the Tesla teardown, kept in Thermal Dawn's voice: the
sunrise CTA, hero accent line and proof band stay loud; the orange just
stops doing six jobs at once. Two buttons only: primary (sunrise,
remapped to dark inside the orange band by the v4 rules) and secondary
(ghost/outline, flips per background). Subtitles go small and quiet
under the big headings.
========================================================================= */
/* Orange rationing: credstrip titles read fine in ink, the accent belongs
to CTAs and proof numbers */
.credstrip__title{color:var(--td-black);}
/* -------------------------------------------------------------------------
v7, the same rules sitewide (was homepage-scoped in v6)
Orange keeps four jobs: CTAs, heading accent words, the proof numbers,
and the proof band. It gives up body text, list items, eyebrows and
sub-headings, where it was competing with itself.
------------------------------------------------------------------------- */
/* Quiet subtitles. Source order matters: .hero .subhead and
.hero--center .subhead tie on specificity with the v3 rules above, so
these win by coming later, and center wins over plain by coming last. */
.hero .subhead{font-size:1.05rem;font-weight:400;color:#dcd3ca;}
.hero--center .subhead{font-size:.95rem;font-weight:400;color:#dcd3ca;}
.hero__note{font-size:.85rem;font-weight:400;color:#b3a89e;}
.supporting{font-size:.9rem;font-weight:500;color:#cfc4ba;}
.hero--sunrise .subhead,.hero--sunrise .supporting{color:#1c1514;}
.lead{font-size:1.05rem;font-weight:400;}
/* Accent giving up its extra jobs */
.eyebrow{color:var(--td-grey);}
.section--dark .eyebrow,.section--cocoa .eyebrow,body.dark .eyebrow{color:#9d928a;}
.benefits__item h3{color:#fff;}
body:not(.dark) .benefits__item h3{color:var(--td-black);}
.stays--keep li{color:#cfc5bc;}
body:not(.dark) .stays--keep li{color:#4a4642;}
.section--cocoa .lead strong.hl,.section--dark .lead strong.hl{color:#fff;}
/* -------------------------------------------------------------------------
Secondary button follows its SURFACE, not the page.
`body.dark .btn--ghost` paints it white. That is correct on the dark
sections, and correct on .section--paper2/paper3 too, because those are
repainted with the cocoa gradient on dark pages (see body.dark rule
above). It is WRONG on the surfaces that stay white on every page
(.credstrip, .showcase, .faq-block) and on flat orange, where white
sits at about 2.2:1. Re-ink only those.
Specificity: body.dark .x .btn--ghost (0,3,1) beats body.dark
.btn--ghost (0,2,1), so each surface is named on the dark side too.
------------------------------------------------------------------------- */
body.dark .credstrip .btn--ghost,
body.dark .showcase .btn--ghost,
body.dark .faq-block .btn--ghost,
body.dark .band-orange .btn--ghost,
body.dark .next-orange .btn--ghost,
.band-orange .btn--ghost,
.next-orange .btn--ghost{color:var(--td-black);border-color:var(--td-black);}
body.dark .credstrip .btn--ghost:hover,
body.dark .showcase .btn--ghost:hover,
body.dark .faq-block .btn--ghost:hover,
body.dark .band-orange .btn--ghost:hover,
body.dark .next-orange .btn--ghost:hover,
.band-orange .btn--ghost:hover,
.next-orange .btn--ghost:hover{background:var(--td-black);color:#fff;border-color:var(--td-black);}
/* The next-orange band is paper since v5, so the dark-button remap that
protected contrast on flat orange no longer applies there */
.next-orange .btn--flat,.next-orange .btn--primary{background:var(--td-sunrise) border-box;color:#1c1514;box-shadow:0 8px 22px rgba(234,91,19,.32);}
.next-orange .btn--flat:hover,.next-orange .btn--primary:hover{background:var(--td-sunrise) border-box;color:#1c1514;}