/* =========================================================================
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 */
--td-orange:#f4921d;
--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) */
--td-sunrise:linear-gradient(100deg,#fec800 0%,#f4921d 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 ---------- */
.site-header{position:sticky;top:0;z-index:60;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);}
.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);}
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;}
table.data thead th{background:var(--td-black);color:#fff;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 ---------- */
.figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.figure img{width:100%;}
.figure figcaption{font-size:.85rem;color:var(--td-grey);padding:10px 14px;background:#fff;}
/* 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;}
.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);}
.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:1240px;}
.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;}
@media(max-width:640px){
.embed--home iframe{height:1270px;}
.embed--daynight iframe{height:850px;}
.embed--flow iframe{height:720px;}
.embed--flow2 iframe{height:640px;}
}
/* ---------- 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(244,146,29,.18);}
.field textarea{min-height:120px;resize:vertical;}
.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);}
.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;}
.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(244,146,29,.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;}
.band-orange h2 .lede{display:block;color:#fff;font-weight:600;font-size:.72em;opacity:.9;}
.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;}
.metric dd{margin:0;font-size:clamp(1.35rem,3.4vw,1.9rem);font-weight:900;color:var(--td-deep);display:flex;align-items:center;gap:.35em;}
.metric dd::before{content:"\2192";color:var(--td-orange);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;}
body.dark .band-orange p,body.dark .band-orange li,body.dark .band-orange strong{color:#2c2119;}
.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);}
.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;}
@media(min-width:760px){
.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;}
.mosaic figure{aspect-ratio:auto;height:100%;}
.mosaic figure:nth-child(1){grid-column:span 1;}
.mosaic figure:nth-child(3){grid-column:span 2;grid-row:span 2;}
.mosaic figure:nth-child(4){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;}
body.dark .section+.section::before,
body.dark .section+.credstrip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(244,146,29,.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(244,146,29,.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(244,146,29,.42);}
body.dark .path-card{background:#15100c;border-color:rgba(244,146,29,.42);box-shadow:none;}
body.dark .callout{background:rgba(244,146,29,.08);border-color:rgba(244,146,29,.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(244,146,29,.35);}
body.dark table.data{background:#120e0b;color:#d3c8bf;}
body.dark table.data thead th{background:var(--td-sunrise);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(244,146,29,.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(244,146,29,.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(244,146,29,.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(244,146,29,.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(244,146,29,.4);padding-left:28px;}}
.figures--stack p{margin:0;}
.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(244,146,29,.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;}
/* 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:flex;align-items:flex-start;gap:10px;
margin:0;padding:7px 0;font-size:.95rem;font-weight:400;line-height:1.45;cursor:pointer;
}
.field--group .choice input{width:auto;margin:3px 0 0;flex:none;accent-color:var(--td-deep);}
/* On mobile these rows came out ~36px tall, under the 44px thumb target both
Apple and Google recommend, on a 12-field form where a mis-tap costs a
lead. Desktop keeps the tighter rhythm. */
@media(max-width:640px){.field--group .choice{padding:11px 0;}}
.field--group .choice__other{margin-top:8px;}
body.dark .field--group legend{color:#e6ddd5;}
body.dark .field--group .choice{color:#cfc5bc;}
/* 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(244,146,29,.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;}
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;}