/* the deep teal for backgrounds painted in the brand teal (made by build_site.dark_css) */
.cta .av{background:var(--teal-deep)}
.logo .mk{background:var(--teal-deep)}
.badge .ctr{background:var(--teal-deep)}
.st.teal{background:var(--teal-deep)}
.proc-list::before{background:repeating-linear-gradient(180deg,var(--gold) 0 1.5px,transparent 1.5px 7px) left/7px 100% no-repeat,repeating-linear-gradient(180deg,var(--gold) 0 1.5px,transparent 1.5px 7px) right/7px 100% no-repeat,var(--teal-deep)}
.pc-head{background:var(--teal-deep)}
.pc-mark{background:var(--teal-deep)}
.tape{background:var(--teal-deep)}
.gl-bar i{background:linear-gradient(90deg,var(--teal-deep),#2F8F6A 60%,var(--leaf))}
.sw-knob{background:var(--teal-deep)}
.acc-i[open] .acc-x{background:var(--teal-deep)}
.ccheck input:checked{background-color:var(--teal-deep)}
.copt input:checked{background:var(--teal-deep)}
.cur-b[aria-pressed="true"]{background:var(--teal-deep)}
.pc-band{background:var(--teal-deep)}
.jump a:hover{background:var(--teal-deep)}
.bz-wl{background:var(--teal-deep)}
.gl-tag{background:var(--teal-deep)}
.bchip[aria-pressed="true"]{background:var(--teal-deep)}
.chz-o:hover{background:var(--teal-deep)}
.pfind:hover{background:var(--teal-deep)}
.lsw-knob{background:var(--teal-deep)}
@media(hover:hover){.tm-top:hover .tm-x{background-color:var(--teal-deep)}}
/* Dark mode (Saad, 10 Nov 2026: "yes thats good" to the sample of the same day). Pages link this file with
   media="(prefers-color-scheme: dark)", so it applies only when the visitor's phone or computer is set to dark, and
   light-mode visitors never wait for it. It is the last stylesheet on every page, so these rules win over the ones
   they replace. The build adds, at the end, every rule that paints a background in the brand teal, with the deep teal:
   here --teal is the lighter teal that text needs on a dark page.
   Colours: page #0A1B19, cards #0F2522, raised #16322E, text #F1ECE0, teal text #62C6BA, gold unchanged. */
:root{color-scheme:dark;
  --bone:#0A1B19;--bone-2:#16322E;--paper:#0F2522;
  --ink:#F1ECE0;--ink-2:#CFC9BA;--ink-3:#B0C1BC;--line:rgba(241,236,224,.14);
  --teal:#6FCDC1;--teal-2:#8AD8CE;--teal-deep:#0B5F5B;
  --gold-lo:#E2C25A;--clay:#E3907A;--clay-hi:#F0A58F;
  --night:#050E0D;--focus:var(--gold)}
.cform,.rvdlg{--focus:var(--gold)}
body{background:var(--bone)}
body::before{background:radial-gradient(52% 46% at 13% 22%,rgba(232,168,52,.2),transparent 72%),radial-gradient(48% 44% at 87% 20%,rgba(31,158,148,.32),transparent 72%),
  radial-gradient(56% 36% at 50% 96%,rgba(240,214,122,.08),transparent 72%)}
::selection{background:rgba(212,175,55,.38);color:#fff}

/* header: the rounded bar */
.hdr .bar{background:var(--paper);box-shadow:0 0 0 1px var(--line),0 14px 32px -20px rgba(0,0,0,.7)}
.hdr.scrolled .bar{box-shadow:0 0 0 1px var(--line),0 18px 38px -18px rgba(0,0,0,.75)}
@media(hover:hover) and (min-width:980px){html:not(.lite) .hdr .bar{background:rgba(15,37,34,.8)}}
.hdr.on-night .bar{background:#050E0D}
.logo .w2{color:var(--gold)}
.hdr .nav a,.hdr .nav,.menu summary,.mb-t{color:var(--ink)}
.menu summary{border-color:var(--line)}
.mb-ic i{background:var(--ink)}
.menu[open] summary{background:var(--gold);color:var(--night);border-color:var(--gold)}
.menu[open] .mb-ic i{background:var(--night)}
.srch-b[aria-expanded="true"]{background:var(--gold);color:var(--night)}
.dd-bg{box-shadow:0 0 0 1px var(--line),0 28px 56px -24px rgba(0,0,0,.8)}
.srch{box-shadow:0 0 0 1px var(--line),0 32px 64px -26px rgba(0,0,0,.85)}
.hdr.srch-on::after,.menu[open]::before{background:rgba(0,0,0,.5)}
.srch-list mark{background:rgba(212,175,55,.3)}

/* surfaces */
.night,.foot{background:#050E0D}
.plans,.nida{background:rgba(15,37,34,.55)}
.pcard{background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.pcard.pc-sig{background:linear-gradient(165deg,#0A2522 0%,#06110F 55%,#040B0A 100%);box-shadow:0 0 0 1px rgba(212,175,55,.45),0 40px 70px -40px rgba(0,0,0,.9)}
.switch,.curs{background:var(--bone-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.sw-opt{color:var(--ink-2)}
.pchips li{background:rgba(241,236,224,.06);box-shadow:inset 0 0 0 1px rgba(98,198,186,.35)}
.jumpbar{background:rgba(10,27,25,.95);border-color:var(--line)}
.jump a{box-shadow:inset 0 0 0 1px rgba(98,198,186,.35)}
.fc.glass{background:linear-gradient(150deg,rgba(26,56,52,.95),rgba(15,37,34,.9));box-shadow:0 26px 44px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(241,236,224,.1)}
.badge{box-shadow:0 16px 30px -18px rgba(0,0,0,.8),inset 0 0 0 1px var(--line)}
.tbl,.ltoc,.bc-paper,.bchip,.biz,.workwith,.person-card,.pq,.sample,.chz,.cform,.rvdlg,.rvdlg-head,.calc-in,.calc-cta-in,.rwband{background:var(--paper)}
.chz-o{background:var(--bone-2)}
.chz-o:hover{background:var(--teal-deep);color:var(--on-night)}
.phero .phero-vis .night,.sample{box-shadow:0 0 0 1px var(--line)}
.bc-paper li{border-bottom-color:rgba(241,236,224,.16)}
.tsteps::before{filter:invert(1) brightness(1.4)}
.rvt-hint b{background:rgba(241,236,224,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(98,198,186,.35)}
.rvdlg-x{background:var(--bone-2);color:var(--ink)}
/* Subscribe | One time: the chosen side takes the card colour, and the track the darker inset of the length switch */
.bz-wl{background:var(--teal-deep);box-shadow:0 0 0 1px rgba(111,205,193,.25),0 30px 60px -36px rgba(0,0,0,.9)}
.psw{box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}.psw-knob{background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.feat .ck{filter:brightness(1.6)}

/* plan cards and prices */
.pcard.pc-sig .bk2{color:var(--gold-hi)}
.feat li::before{border-color:var(--teal)}
.pc-sig .feat li::before{border-color:var(--gold)}
.sw-save{background:var(--gold);color:var(--night)}
.rtg-row.off path:first-child{fill:#5E5230}

/* buttons: gold stays gold; the light that runs round them sits on a darker ring */
.cta{--bbr:rgba(0,0,0,.35);--bbg:rgba(98,198,186,.55)}
.cta .av{background:var(--teal-deep)}
.cta.line{color:var(--teal);--bbr:rgba(98,198,186,.4)}
.cta:hover{box-shadow:0 0 0 1.5px var(--bbg),0 0 22px -2px var(--bbg),0 16px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.5)}

/* forms: dark fields, light text */
.cfield input,.cfield textarea,.cfield select{background:var(--bone);color:var(--ink);border-color:rgba(241,236,224,.2)}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--ink-3)}
.ccheck input,.copt input{background-color:var(--bone);border-color:rgba(241,236,224,.35)}
.cfield.bad input,.cfield.bad textarea,.cfield.bad select{border-color:#F08A7E}

/* tables and article parts */
.ctable thead th,.tbl thead th{color:var(--teal)}
.ctable td,.ctable th,.tbl td,.tbl th{border-color:var(--line)}
a.src{text-decoration-color:rgba(226,194,90,.7)}

/* pictures that are paper (plan pages, client messages) stay light: a soft edge so they sit on the dark page */
.pstack img,.pstack figure,.sp-c,.ps1.gl,.ps1 figcaption{box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(241,236,224,.12)}
.fc.img{box-shadow:0 24px 44px -22px rgba(0,0,0,.8),0 0 0 1px rgba(241,236,224,.1)}

@media print{:root{color-scheme:light}}
/* homepage first screen (49e): the fade over the picture is the dark page colour */
.hero-vid::after{background:linear-gradient(90deg,var(--bone) 0%,rgba(10,27,25,.9) 28%,rgba(10,27,25,.45) 48%,rgba(10,27,25,0) 66%),
  linear-gradient(180deg,rgba(10,27,25,.35) 0%,rgba(10,27,25,0) 16%,rgba(10,27,25,0) 78%,var(--bone) 100%)}
@media(max-width:899px){.hero-vid::after{background:linear-gradient(180deg,rgba(10,27,25,.92) 0%,rgba(10,27,25,.8) 42%,rgba(10,27,25,.25) 64%,rgba(10,27,25,.1) 88%,var(--bone) 100%)}}
.badge{background:rgba(15,37,34,.95);box-shadow:0 16px 30px -18px rgba(0,0,0,.8),inset 0 0 0 1px var(--line)}
/* paper things keep their light colours and dark text */
.plancard,.fb .paper,.c-bone,.f-bone{--ink:#13201E;--ink-2:#465754;--ink-3:#5F6E6A;--line:rgba(19,32,30,.12);--teal:#004B49;--gold-lo:#8F6E1E;--clay:#A25B44;
  --bone:#F4F0E8;--bone-2:#EAE3D4;--paper:#FBF9F4;--focus:var(--gold-lo);color:var(--ink)}
.plancard{box-shadow:0 34px 70px -40px rgba(0,0,0,.85),0 0 0 1px rgba(241,236,224,.12)}
.step .sn{display:inline-block;padding:3px 7px 2px;border-radius:7px;background:rgba(5,14,13,.82)}
.stars label{color:rgba(241,236,224,.24)}
.cfield.bad .stars label{color:rgba(227,144,122,.5)}
.rwstars .off{color:rgba(241,236,224,.18)}
.cf input[type=number],.cf select{background:var(--bone);color:var(--ink);border-color:rgba(241,236,224,.24)}
.cf input[aria-invalid=true]{border-color:#F08A7E;box-shadow:0 0 0 1px #F08A7E}
/* pocket calculator: graphite (brief of 10 Nov 2026, section 2); the LCD is the same in both looks */
.pc{--pc-body:#1A2321;--pc-edge:#0C1211;--pc-top:#2B3835;--pc-print:#9AA7A3;--pc-num:#32403C;--pc-num-lip:#101715;--pc-fn:#263230;--pc-fn-lip:#0C1211;
  --pc-ink:#F1F4F2;--pc-quiet:#B4C0BC;--pc-eq-lip:#8A6C17;--pc-clr-lip:#6B3A2B;--pc-clr-ink:#FFFFFF;--pc-off:#3F4D49;--pc-on:#58D69A;
  --pc-solar:#2A211F;--pc-solar-line:#463833;background:var(--pc-body);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 50px -30px rgba(0,0,0,.85),0 10px 18px -12px rgba(0,0,0,.6)}
.pk{box-shadow:0 3px 0 var(--lip),0 5px 8px -5px rgba(0,0,0,.7)}