/* =====================================================================
   time2flow light theme
   ONE place for every site colour. To retune the palette, edit only the
   "Palette" block below; every page links this file last, so it wins.
   Palette sampled from the time2flow logo.
   ===================================================================== */
:root{
  color-scheme: light;
  /* ---- Palette (sampled from the logo) ---- */
  --t2f-sky-50:  #F5F9FD;   /* logo highlight white            */
  --t2f-sky-100: #E9F3FB;   /* logo background, centre          */
  --t2f-sky-200: #D6EBFA;   /* logo background, mid             */
  --t2f-sky-300: #B1E4F9;   /* logo background, edge / water    */
  --t2f-aqua:    #6CD2FC;   /* bright water highlight (decor)   */
  --t2f-aqua-2:  #3EB5F3;   /* lettering blue, light (decor)    */
  --t2f-logo-blue:#227DC3;  /* "2" and wave body blue (decor)   */
  --t2f-action:  #1A66A6;   /* logo blue, deepened for AA text + white-on-blue (6.0:1) */
  --t2f-action-2:#1D6FB0;   /* gradient start for filled buttons (5.3:1 with white) */
  --t2f-deep-logo:#16497C;  /* deepest blue in the lettering: headings, button end (9.2:1) */
  --t2f-ink-text:#1F2328;   /* body text, neutral near-black (15.8:1 on white) */
  --t2f-ink-soft:#3F4752;   /* secondary text (9.4:1)           */
  --t2f-ink-mute:#56606B;   /* muted text (6.4:1)               */
  --t2f-line:    #D3E5F5;   /* hairlines / borders              */
  --t2f-line-2:  #A9CBE8;   /* stronger borders (inputs)        */
  --t2f-field:   #5E86B3;   /* form-control borders, focus-safe UI lines (3.8:1 on white, 3.4:1 on sky-100) */
  --t2f-error:   #B3261E;

  /* ---- Semantic tokens used by the page CSS (do not edit; map to palette) ---- */
  --t2f-band-900: var(--t2f-sky-100);   /* former dark band, now light sky */
  --t2f-band-700: var(--t2f-sky-200);
  --t2f-band-icon:#FFFFFF;
  --t2f-white:#FFFFFF;
  --t2f-cyan: var(--t2f-aqua-2);
  --t2f-blue: var(--t2f-action);
  --t2f-deep: var(--t2f-deep-logo);
  --t2f-text: var(--t2f-ink-text);      /* text that used to sit on the dark bands */
  --t2f-muted: var(--t2f-ink-soft);
  --t2f-surface: var(--t2f-sky-50);
  --t2f-ink: var(--t2f-ink-text);
  --t2f-grad: linear-gradient(135deg,var(--t2f-aqua) 0%,var(--t2f-aqua-2) 45%,var(--t2f-logo-blue) 100%);   /* decor only */
  --t2f-grad-strong: linear-gradient(135deg,var(--t2f-action-2) 0%,var(--t2f-action) 45%,var(--t2f-deep-logo) 100%); /* fills behind white text */
  --t2f-grad-text: linear-gradient(180deg,var(--t2f-action) 0%,var(--t2f-deep-logo) 100%);
  --paper:#FFFFFF;
  --linen: var(--t2f-sky-50);
  --ink: var(--t2f-ink-text);
  --ink-2: var(--t2f-ink-soft);
  --ink-3: var(--t2f-ink-mute);
  --rule: var(--t2f-line);
  --gold: var(--t2f-action);
  --gold-deep: var(--t2f-deep-logo);
  --gold-bright: var(--t2f-action);
  --gold-leaf: var(--t2f-grad-strong);
  --vault: var(--t2f-band-900);
  --vault-2: #FFFFFF;
  --vault-fg: var(--t2f-ink-text);
  --vault-mute: var(--t2f-ink-soft);
  --error: var(--t2f-error);
  --t2f-shadow: 22,73,124;              /* rgb of --t2f-deep-logo, for soft shadows */
}

/* =====================================================================
   Light-theme component layer: colour, background, border and shadow,
   plus the homepage hero layout at the end of this file.
   ===================================================================== */
body{color:var(--ink)}
h1,h2,h3{color:var(--t2f-deep)}
:focus-visible{outline:2px solid var(--t2f-action);box-shadow:0 0 0 4px #FFFFFF}

/* buttons */
.btn-gold{background:var(--t2f-grad-strong);background-size:180% 100%;color:#FFFFFF;text-shadow:none;box-shadow:0 8px 22px -12px rgba(var(--t2f-shadow),.55)}
.btn-gold:hover{box-shadow:0 14px 28px -14px rgba(var(--t2f-shadow),.6)}
.btn-line{background:#FFFFFF;color:var(--t2f-action);border-color:var(--t2f-action)}
.btn-line:hover{background:var(--t2f-action);color:#FFFFFF;border-color:var(--t2f-action)}

/* header: light glass bar so the logo reads cleanly */
.top{background:rgba(255,255,255,.94);border-bottom:1px solid var(--t2f-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.top::after{opacity:.6}
.brand img{border-radius:0}
.brand b{color:var(--t2f-deep)}
.brand small{color:var(--ink-3)}
.back{color:var(--t2f-action)}
.back:hover{color:var(--t2f-deep)}
.nav a{color:var(--ink-2)}
.nav a:not(.btn):hover,.nav a.active{color:var(--t2f-deep)}
.menu-btn{background:#FFFFFF;border-color:var(--t2f-line-2)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:var(--t2f-deep)}
.menu-btn[aria-expanded="true"] span{background:transparent}
@media (max-width:1080px){
  .nav{background:#FFFFFF;border-bottom-color:var(--t2f-line)}
  .nav a{color:var(--ink);border-bottom-color:var(--t2f-line)}
}

/* hero: soft white to sky water gradient */
.hero{background:radial-gradient(620px 420px at 18% 18%,rgba(108,210,252,.22),transparent 65%),radial-gradient(720px 520px at 85% 78%,rgba(62,181,243,.18),transparent 65%),linear-gradient(180deg,#FFFFFF 0%,var(--t2f-sky-100) 100%);color:var(--ink)}
.hero h1{color:var(--t2f-deep)}
.hero .eyebrow{color:var(--t2f-action)}
.hero .lede,.hero-notes{color:var(--ink-2)}
.hero .slogan{color:var(--t2f-deep)}
.hero .btn-line{color:var(--t2f-action);border-color:var(--t2f-action);background:#FFFFFF}
.hero .btn-line:hover{background:var(--t2f-action);color:#FFFFFF}

/* rotating circle (orb) in the new colours */
.orb{background:#FFFFFF;box-shadow:0 18px 40px -18px rgba(var(--t2f-shadow),.45),0 0 0 1px rgba(var(--t2f-shadow),.08)}
.orb .orb-glow{background:radial-gradient(closest-side,rgba(108,210,252,.55),rgba(62,181,243,.22) 60%,transparent 75%)}
.orb::before{background:conic-gradient(from 0deg,var(--t2f-aqua),var(--t2f-aqua-2),var(--t2f-logo-blue),transparent 70%,var(--t2f-aqua))}
.orb::after{background:conic-gradient(from 180deg,var(--t2f-aqua),transparent 35%,var(--t2f-logo-blue) 65%,transparent 90%)}
.ofx-spin{background:conic-gradient(from 0deg,rgba(255,255,255,0) 0turn,rgba(255,255,255,0) .52turn,rgba(255,255,255,.35) .8turn,rgba(255,255,255,.95) .975turn,rgba(255,255,255,0) 1turn),
                     conic-gradient(from 180deg,rgba(108,210,252,0) 0turn,rgba(108,210,252,0) .7turn,rgba(108,210,252,.4) .96turn,rgba(108,210,252,0) 1turn)}
.ofx-flow{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 25%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.12) 75%,rgba(255,255,255,0))}
.ofx-draw{filter:drop-shadow(0 0 4px rgba(62,181,243,.8))}
.ofx-head > i{background:#FFFFFF;box-shadow:0 0 6px 2px rgba(108,210,252,.95),0 0 16px 4px rgba(34,125,195,.5)}
.ofx-pulse{background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(108,210,252,.5) 45%,rgba(34,125,195,0) 100%)}
.ofx-p > i{background:var(--t2f-aqua-2);box-shadow:0 0 5px 1px rgba(62,181,243,.7)}

/* light bands that replaced the old dark bands */
.vault,.quote,.contact,.mission-strip{background:linear-gradient(180deg,var(--t2f-sky-100) 0%,var(--t2f-sky-200) 100%);color:var(--ink)}
.vault .eyebrow,.quote .eyebrow,.contact .eyebrow{color:var(--t2f-action)}
.vault .head h2,.quote .head h2,.contact h2{color:var(--t2f-deep)}
.vault .lede,.quote .head .lede,.contact .lede{color:var(--ink-2)}
.mission-strip blockquote{color:var(--t2f-deep)}
.plan{background:#FFFFFF;border-color:var(--t2f-line);box-shadow:0 18px 40px -30px rgba(var(--t2f-shadow),.45)}
.plan .name,.auto h3{color:var(--t2f-deep)}
.plan .care-opt,.auto,.reach-line,.foot-verses,.legal{border-color:var(--t2f-line)}
.consult-cta .btn-line,.plan:not(.feature) .btn-line,.contact .btn-line,.reach-ctas .btn-line{color:var(--t2f-action);border-color:var(--t2f-action);background:#FFFFFF}
.plan:not(.feature) .btn-line:hover,.contact .btn-line:hover,.consult-cta .btn-line:hover,.reach-ctas .btn-line:hover{background:var(--t2f-action);color:#FFFFFF}
.vault .fine a,.vault .pkg-note a,.reach-line a{color:var(--t2f-action)}
.reach-line a{border-bottom-color:rgba(26,102,166,.45)}
.pkg-note{border-color:var(--t2f-line-2);background:rgba(255,255,255,.6)}

/* footer: light, logo-coloured hairline */
footer{background:var(--t2f-sky-100);color:var(--ink-2)}
footer a{color:var(--t2f-action)}
footer a:hover{color:var(--t2f-deep)}
.foot-slogan,footer .tagline{color:var(--t2f-deep)}
.foot-links a,.foot-legal,.legal{color:var(--ink-2)}
.foot-links a:hover,.foot-legal a:hover{color:var(--t2f-deep)}
.foot-legal a{color:var(--t2f-action)}
.foot-verse blockquote,footer .foot-verses{color:var(--ink)}
.foot-verse figcaption span,footer .foot-verses cite{color:var(--ink-3)}
.foot-brand img{border-radius:0}

/* forms / cards / legal pages */
.card{box-shadow:0 18px 40px -30px rgba(var(--t2f-shadow),.35)}
.field input,.field select,.field textarea,.chip span,.pad-wrap,.typed-preview,.rr-box,.change select{border-color:var(--t2f-field)}
.chip input:checked + span{background:var(--t2f-sky-100);border-color:var(--t2f-action)}
.progress{background:rgba(245,249,253,.95)}
.steps li.ok .n{background:var(--t2f-deep);border-color:var(--t2f-deep);color:#FFFFFF}
.doc{color:var(--ink)}
.doc .scope{border-color:var(--t2f-deep)}
.doc .fill{background:linear-gradient(transparent 62%, rgba(108,210,252,.35) 62%)}
.tabs button[aria-selected="true"]{box-shadow:0 1px 3px rgba(var(--t2f-shadow),.18)}
.apply-modal{box-shadow:0 40px 80px -30px rgba(var(--t2f-shadow),.45)}
.apply-modal::backdrop{background:rgba(var(--t2f-shadow),.35)}

/* time calculator page */
.calc-hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--t2f-sky-100) 100%);color:var(--ink)}
.calc-hero h1{color:var(--t2f-deep)}
.calc-hero .lede{color:var(--ink-2)}
.calc-hero .private{color:var(--ink)}
.result{background:var(--t2f-sky-100);color:var(--ink);border:1px solid var(--t2f-line-2);box-shadow:0 24px 48px -30px rgba(var(--t2f-shadow),.45)}
.result .q-label,.r-task b,.r-lead,.r-main{color:var(--t2f-deep)}
.result-msg,.r-task,.r-chain{color:var(--ink-2)}
.r-share,.r-add-rate,.r-basis,.r-payback,.disclaimer{color:var(--ink)}
.disclaimer,.r-payback{border-left-color:var(--t2f-action);background:rgba(255,255,255,.7)}
.result .btn-line{color:var(--t2f-action);border-color:var(--t2f-action);background:#FFFFFF}
.result .btn-line:hover{background:var(--t2f-action);color:#FFFFFF}
.result-bar{background:#FFFFFF;border-top-color:var(--t2f-action);box-shadow:0 -10px 24px -12px rgba(var(--t2f-shadow),.35)}
.result-bar a{color:var(--t2f-deep)}
.r-table th,.r-table td{color:var(--ink);border-bottom-color:var(--t2f-line-2)}
.r-table thead th{color:var(--ink-3)}
.r-table tbody th{color:var(--t2f-deep)}
input[type=text],select,.chip-btn,.step-btn,.task-row,.mode-opt span,.unit .p{border-color:var(--t2f-field)}

/* new logo sizing (wordmark is taller than the old one: 640x178) */
.brand img{height:54px;width:auto}
@media (max-width:440px){ .brand img{height:40px;width:auto} }
.foot-brand img.foot-logo{height:60px;width:auto}

/* text that used the bright cyan (unreadable on light surfaces) */
.auto-plans .badge{color:var(--t2f-action);background:var(--t2f-sky-100);border-color:var(--t2f-line-2)}
.r-est,.foot-contact a,.foot-verse figcaption,.reach-line a:hover{color:var(--t2f-action)}
.nav a.btn-gold,.nav a.btn-gold:hover,.nav a.btn-gold.active{color:#FFFFFF}

/* orb: keep the symbol crisp on the light theme (softer white shimmer) */
.orb-wrap.fx-on .ofx-spin{opacity:.5}
.ofx-flow{opacity:.45}
.top::after,footer::before,.vault::before,.mission-strip::before{background:var(--t2f-grad)}
/* entry swirl (draw-on ring, comet head, pulse, particles) stays visible on the light hero:
   the old screen blend only showed on a dark backdrop, so only the symbol shimmer keeps it */
.orb-wrap.fx-on .orb-fx{mix-blend-mode:normal}
.orb-wrap.fx-on .ofx-sym,.orb-wrap.fx-on .ofx-pulse{mix-blend-mode:screen}

/* ---- state, contrast and header refinements ---- */
/* keep error / selected / focus states winning over the field-border override above */
.invalid input,.invalid textarea,.invalid select,input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--t2f-error)}
input:focus-visible,select:focus-visible{border-color:var(--t2f-deep)}
/* time calculator: cyan text / white-on-aqua replaced with AA colours */
.calc-hero .eyebrow{color:var(--t2f-action)}
.calc-hero h1 em{background:var(--t2f-grad-text);-webkit-background-clip:text;background-clip:text}
.result .step,.how summary::before{background:var(--t2f-grad-strong);color:#FFFFFF}
.result-bar .bar-go{color:var(--t2f-action)}
.result:focus-visible{outline-color:var(--t2f-action)}
.calc-hero .private::before{background:var(--t2f-grad-strong)}
/* header: faint sky tint so the frosty-white letters of the wordmark keep their edge */
.top{background:rgba(233,243,251,.94)}
/* orb entry pulse: normal blend (screen is invisible on the white orb) */
.orb-wrap.fx-on .ofx-pulse{mix-blend-mode:normal;background:radial-gradient(closest-side,rgba(108,210,252,.55),rgba(62,181,243,.25) 45%,rgba(34,125,195,0) 100%)}
.orb-wrap.fx-on .ofx-sym{mix-blend-mode:screen}
/* homepage hero: first screen = animated logo + headline */
.hero{min-height:calc(100svh - 64px);display:grid;align-items:center}
.hero .orb-wrap{margin:0 auto 28px}
.hero .orb{width:min(62vw,300px)}
.hero h1{margin-top:0}