/* CAPTAIN 1120: teal + lime copy of theme-tw-tw1023h.css (the original stays for rooms/Check) */
/* Quiet Accounts · THE TRIPLE WHALE PALETTE (Jack, Oct 23 2026, 2:07 AM: "go through their website and take their color scheme…
   don't fix what's not broken"). Values read from triplewhale.com's own CSS variables:
   deep ocean #012939 · deeper ocean #011922 · sky #A8E300 · beach #F2F0EA · shell #DAD6C9 · dark gray #71797E · gray #98A2A8 · ocean blue #0E5A73
   Their pattern, copied: a light beach hero with a gray lead-in and a deep-ocean payoff; deep-ocean bands with sky highlights;
   deep-ocean buttons on light, sky buttons on deep ocean; 5px corners. Type stays our original Archivo pairing (Jack 2:16 AM: easier to read).
   Load AFTER every other stylesheet. */
:root{
  --navy:#012939;--navy-deep:#011922;--violet:#012939;--violet-deep:#011922;--violet-soft:#A8E300;
  --lav-wash:#F2F0EA;--lav-tint:#F1F9D2;--border:#DAD6C9;--amber:#A8E300;
  --text:#4A5257;--muted:#71797E;--on-dark:#C3D2D8;--on-dark-muted:#A3BEC6;
  --ink:#012939;--head:#012939;--body:#4A5257;--line:#DAD6C9;--bg2:#F2F0EA;--violet50:#F1F9D2;--violetText:#012939;
  --onDark:#A3BEC6;--amberEdge:#0E5A73;--hl:#A8E300;
  --glow:#012939;
}
body{color:#14181F}
::selection{background:#A8E300;color:#012939}

/* headlines: Archivo, our original pairing (Jack 2:16 AM); on light the payoff is deep ocean and the lead-in dark gray (their hero), elsewhere deep ocean with a gray tail */
.h2{color:#012939}
.h2 em,.h1 em{color:#71797E}
.dark .h2,.close .h2{color:#FFFFFF}
.dark .h2 em,.dark .h1 em,.close .h2 em{color:#A8E300}
.k{color:#71797E}
.tlink,.tlink b{color:#0E5A73}

/* buttons: their shape (5px) */
.btn,.topnav .start,.menu .btn,.sticky .btn{border-radius:5px;box-shadow:none}
.btn{background:#012939;color:#FFFFFF}
.btn:hover{background:#011922;color:#FFFFFF}
.dark .btn,.close .btn,.sticky .btn,.menu .btn{background:#A8E300;color:#012939}
.dark .btn:hover,.close .btn:hover,.sticky .btn:hover,.menu .btn:hover{background:#C6FF3A;color:#012939}

/* top bar: white, like theirs */
.topnav{background:#FFFFFF;box-shadow:inset 0 -1px 0 #DAD6C9}
.topnav .logo{color:#012939}
.topnav .navl a{color:#012939}
.topnav .navl a:hover{color:#0E5A73}
.topnav .start{background:#A8E300;color:#012939}
.topnav .start:hover{background:#011922;color:#FFFFFF}
.burger span,.burger span:before,.burger span:after{background:#012939}

/* THE HERO: their light beach hero */
.th{background:#F2F0EA;color:#14181F}
.th-kick{color:#71797E}
.th h1{color:#71797E}
.th h1 em{color:#012939}
.th[data-tpl="for22"] h1 em{display:inline}
.th-sub{color:#4A5257}
.th-sub b{color:#012939}
.th-tiles div{background:#FFFFFF;border:1px solid #DAD6C9;box-shadow:none}
.th-tiles strong{color:#012939}
.th-tiles span{color:#71797E}
.th-tiles div.dk{background:#012939;border-color:#012939}
.th-tiles div.dk strong{color:#A8E300}
.th-tiles div.dk span{color:#C3D2D8}
.th .btn{background:#012939;color:#FFFFFF}
.th .btn:hover{background:#011922;color:#FFFFFF}
.th-ticks,.th-ticks span{color:#71797E}
.th-proof{background:#FFFFFF;border:1px solid #DAD6C9;box-shadow:none;color:#4A5257}
.th-proof b{color:#012939}
.th-proof i{background:#012939;color:#A8E300}
.th .tj-line,.th .tj-line a,.th-ask,.th-ask a{color:#71797E}
.th .tj-line a{text-decoration:none}
.th .tj-line a b{color:#0E5A73;text-decoration:underline;text-underline-offset:3px}
.th-ex{color:#98A2A8}
.th .qg{box-shadow:0 30px 60px -24px rgba(1,41,57,.28),0 0 0 1px #DAD6C9}
.th .qg-trk{background:#E4DDD0}
.th .qg-fill{background:#012939}
@keyframes thStep{0%{color:#012939}24.8%{color:#012939}25%{color:#98A2A8}100%{color:#98A2A8}}
.qg-bar i{background:#D9D2C4!important}

/* REDUCE MOTION (Jack 2:28 AM: "why isn't the graphic animated on mobile?"). Phones with Reduce Motion on (iPhone: Settings → Accessibility → Motion)
   used to get a frozen last screen. Now they get the same 4 screens on the same 12 s loop, with plain fades only: nothing slides, drops or zooms
   (the same swap Apple's own Reduce Motion makes). Overrides the old "animation:none" block. The inline animation-delay on each element still applies. */
@media (prefers-reduced-motion:reduce){
  .qg-sc{animation:qgSceneFade 12s infinite}
  .qg-ln{animation:qgLineFade 12s infinite}
  .qg-pop{animation:qgDropFade 12s infinite}
  .qg-bk{animation:qgPopFade 12s infinite}
  .qg-ok{animation:qgPopShortFade 12s infinite}
  .qg-hl{animation:qgRow 12s infinite}
  .qg-out{animation:qgOut 12s infinite}
  .qg-sa{animation:qgSwapA 12s infinite}
  .qg-sb{animation:qgSwapB 12s infinite}
  .qg-fill{animation:qgFill 12s infinite linear}
  .qg-lb{animation:qgStep 12s infinite}
  .th .qg-lb{animation:thStep 12s infinite}
  /* the old block also set start-up colors and showed the last screen; put back the normal starting state so the first loop opens on screen 1 */
  .qg-sc,.qg-sc.s4,.qg-sc.s4 .qg-pop,.qg-sc.s4 .qg-bk{opacity:0}
  .qg-lb{color:rgba(255,255,255,.55)}
  .th .qg-lb{color:#98A2A8}
}
@keyframes qgSceneFade{0%{opacity:0}4%{opacity:1}23%{opacity:1}26%{opacity:0}100%{opacity:0}}
@keyframes qgLineFade{0%{opacity:0}4%{opacity:1}20%{opacity:1}23%{opacity:0}100%{opacity:0}}
@keyframes qgDropFade{0%{opacity:0}4%{opacity:1}21%{opacity:1}24%{opacity:0}100%{opacity:0}}
@keyframes qgPopFade{0%{opacity:0}4%{opacity:1}14%{opacity:1}17%{opacity:0}100%{opacity:0}}
@keyframes qgPopShortFade{0%{opacity:0}4%{opacity:1}9%{opacity:1}11%{opacity:0}100%{opacity:0}}

/* the results card */
.tp-card{box-shadow:0 24px 50px -28px rgba(1,41,57,.35),0 0 0 1px #DAD6C9}
.tp-who b{text-wrap:balance}
.tp-stats b{color:#012939}

/* light sections alternate white and beach; cards are white with a shell line */
.tl-c{border-color:#DAD6C9}
.tl-fix{background:#012939}
.tl-fix i{background:#A8E300;color:#012939}
#how .yw-h .y{color:#0E5A73}
.qc-free small{color:#0E5A73}
.qc-steps li.hl i{border-color:#C9EC7A}
.qc-steps i{border-bottom-color:#E0D9CC}
.tp-k{color:#1E7A4C}

/* the video section: calm caption, a plain tab */
.wfh-h{text-transform:none;letter-spacing:-.01em;font-size:clamp(24px,3.4vw,34px);line-height:1.2}
.wfh .wfh-tag{transform:none;text-transform:none;letter-spacing:0;font-size:18px;font-weight:800;line-height:1.2;padding:.45em .9em;left:0;border-radius:5px 5px 0 0;box-shadow:none;background:#012939;color:#A8E300}
.wfh-box.is-playing .wfh-tag{transform:translateY(-8px)}

/* footer: deeper ocean, like theirs */
footer,.foot,.ft{background:#011922}

/* BUILDER (contrast): the phones' sticky Start bar is white, so its button is deep ocean (sky only on deep ocean) */
.sticky .btn{background:#012939;color:#FFFFFF}
.sticky .btn:hover{background:#011922;color:#FFFFFF}
/* BUILDER: the burger's three lines are drawn with white shadows; on the white bar they are deep ocean */
.burger span{background:#012939;box-shadow:0 8px 0 #012939,0 -8px 0 #012939}
.burger[aria-expanded=true] span{background:transparent;box-shadow:none}
.burger[aria-expanded=true] span:before,.burger[aria-expanded=true] span:after{background:#012939}
/* BUILDER (Jack: "the mobile site... wouldn't fit the screen"): on 320-px phones (iPhone SE, Display Zoom) the "How you pay" card was 28 px wider
   than the screen (its price lines can't wrap), so the whole page zoomed out. Let the lines wrap and tighten the card there; nothing changes above 380 px. */
.qc-grid>*{min-width:0}
@media (max-width:380px){.qc{padding-left:16px;padding-right:16px}.qc-l{white-space:normal}.qc-steps li{gap:8px}.qc-top{gap:8px}}
/* BUILDER (CAPTAIN 0305): the homepage hero has no kicker now, so its headline starts at the top; the question line looks like the
   cleaning page's (only "Text us · 603..." underlined, in ocean blue) */
.hA h1 .big:first-child{margin-top:0}
.hero-tj a{text-decoration:none;color:#71797E}
.hero-tj a b{color:#0E5A73;text-decoration:underline;text-underline-offset:3px}
/* BUILDER (CAPTAIN 1920): the homepage player holds the story graphic now: no forced 16:9, padding, dark frame or shadow around it */
.watch-player.qsg-host,.wfh-film .watch-player.qsg-host{aspect-ratio:auto;border-radius:0;overflow:visible;background:none;box-shadow:none;border:0;padding:0}
.wfh-box:has(.qsg-host):before{display:none}
main p,main li,main h1,main h2,main h3{overflow-wrap:break-word}   /* BUILDER: a long email address (how-to) can break instead of running off a small phone */
.hA h1 .big{font-size:clamp(36px,11vw,112px);overflow-wrap:break-word}   /* BUILDER (Jack 8:40 PM, iPhone screenshot): the 56px floor ran "customers" off a 390 screen in Safari */
.th-gfx>[data-qsg]{width:100%;align-self:stretch}   /* the cleaning hero column doesn't stretch its children; the graphic sizes from its width */
/* BUILDER (room): CAPTAIN's "footer{deep ocean}" rule is for the site footer; the room's own footer (the Questions? fold) stays light */
footer.s-foot,footer.pa-foot{background:transparent}
/* BUILDER: the three purples qa-room.js injects into the Start sheet (Show, the email-fix Save, the spinner) */
.qa-eye{color:#0E5A73}
.qa-ne-row .qa-ne-save{background:#012939;border-color:#012939}
#done .qa-spin{border-color:rgba(1,41,57,.18);border-top-color:#012939}