/* GetKnowen facelift, Oct 2026. Loads last on the app, website and HQ.
   Same look, same colours, same fonts. This pass tightens the finish:
   text contrast, solid headings, calmer hierarchy, browser-surface theming
   and one consistent motion scale (transitions.dev tokens). */

:root{
  /* motion scale */
  --duration-stagger:40ms;--duration-quick:150ms;--duration-fast:250ms;--duration-slow:400ms;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1);
  --distance-base:8px;--distance-medium:12px;--blur-small:2px;--blur-medium:3px;
  --scale-large:.96;--scale-small:.98;
  /* brand bits used below */
  --fl-accent:#b8461a;--fl-accent-rgb:184,70,26;
  --fl-ink:#1b1713;--fl-ink-2:#4a4238;--fl-ink-3:#675d51;
}

/* ---------- browser surfaces: all pages ---------- */
::selection{background:rgba(var(--fl-accent-rgb),.22);color:var(--fl-ink)}
input,textarea,[contenteditable]{caret-color:var(--fl-accent)}
html{scrollbar-color:rgba(122,86,46,.38) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(122,86,46,.32);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(122,86,46,.5);background-clip:content-box;border:3px solid transparent}
:focus-visible{outline:2px solid var(--fl-accent);outline-offset:3px;border-radius:inherit}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.clock-chip,.wx-t,.wx-lbl,.kpi,.bank-amt,.price .amt,td,.num{font-variant-numeric:tabular-nums}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
button{-webkit-tap-highlight-color:transparent}

/* ---------- app ---------- */
.app .topbar h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--fl-ink);color:var(--fl-ink);font-weight:600;letter-spacing:-.04em}

/* secondary text was fading into the glass; lift it a notch */
.app{--ink-3:var(--fl-ink-3);--ink-2:var(--fl-ink-2)}
.empty-soft,.muted{color:var(--fl-ink-3)}
.empty-soft{font-size:14.5px;line-height:1.5;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(120,70,30,.07)}
.wx-lbl{color:var(--fl-ink-3)}
.wx-today .wx-lbl{color:#9c3a12}

/* section labels: one clear step down from page titles, more air above than below */
.stage>.view>h2,.stage>.view>.section-label,.view>h2.section-label{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fl-ink-2);margin:28px 0 12px}
.panel h2{color:var(--fl-ink-2);font-weight:600}

/* rail */
.nav-btn{font-size:12px;letter-spacing:.005em}
.nav-btn span,.nav-btn .nav-lbl{font-size:12px}
.nav-kicker{font-size:10px;color:#a79d8f}

/* depth: tinted, offset, soft. Cards lift a hair on hover instead of sitting dead flat */
.panel,.wx-day,.person-card,.ls-card,.ch-card,.sc-card{transition:transform var(--duration-slow) var(--ease-smooth-out),box-shadow var(--duration-slow) var(--ease-smooth-out)}
@media (hover:hover){
  .wx-day:hover,.person-card:hover,.ls-card:hover,.ch-card:hover{transform:translateY(-2px)}
}

/* one authored moment: a view settles in (fade + 12px rise + 3px blur) with a 40ms stagger */
@keyframes fl-settle{from{opacity:0;transform:translateY(var(--distance-medium));filter:blur(var(--blur-medium))}to{opacity:1;transform:none;filter:blur(0)}}
.view.active>*{animation:fl-settle var(--duration-slow) var(--ease-smooth-out) both}
.view.active>*:nth-child(2){animation-delay:var(--duration-stagger)}
.view.active>*:nth-child(3){animation-delay:calc(var(--duration-stagger)*2)}
.view.active>*:nth-child(4){animation-delay:calc(var(--duration-stagger)*3)}
.view.active>*:nth-child(5){animation-delay:calc(var(--duration-stagger)*4)}
.view.active>*:nth-child(n+6){animation-delay:calc(var(--duration-stagger)*5)}

/* press feedback, same scale everywhere */
.cta:active,.tiny:active,.fab:active,.top-add:active,.nav-btn:active,.chip:active,.icon-btn:active{transform:scale(var(--scale-small))}

/* sheets and dialogs open with the modal token: scale .96 -> 1, smooth-out */
@keyframes fl-sheet{from{opacity:0;transform:scale(var(--scale-large))}to{opacity:1;transform:none}}
@media (min-width:901px){.sheet{animation:fl-sheet var(--duration-fast) var(--ease-smooth-out) both}}
.toast{transition:opacity var(--duration-medium,350ms) var(--ease-smooth-out),transform var(--duration-medium,350ms) var(--ease-smooth-out)}

/* mobile: floating tab bar must never cover the last row of content */
@media (max-width:900px){.stage{padding-bottom:132px}}

@media (prefers-reduced-motion:reduce){
  .view.active>*,.sheet{animation:none!important}
  .panel,.wx-day,.person-card,.ls-card,.ch-card,.sc-card{transition:none}
  .wx-day:hover,.person-card:hover,.ls-card:hover,.ch-card:hover{transform:none}
}

/* ---------- website ---------- */
.hx-hero h1{letter-spacing:-.045em}
.hx-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;max-width:620px}
.hx-actions .hx-btn{justify-content:space-between;width:100%}
.hx-meta li{color:var(--fl-ink-2)}
.hx-lead{color:var(--fl-ink-2)}
.hx-btn{transition:transform var(--duration-slow) var(--ease-smooth-out),box-shadow var(--duration-slow) var(--ease-smooth-out),background var(--duration-slow) var(--ease-smooth-out)}
.hx-btn:active{transform:scale(var(--scale-small))}
@media (hover:hover){.hx-btn:hover{transform:translateY(-1px)}}

/* ---------- HQ ---------- */
.hq-root,body:has(#login){--muted:#5f564b;--dust:#7d4f33}
.hq-root .eyebrow{color:var(--dust)}
.hq-root table td,.hq-root table th{font-variant-numeric:tabular-nums}
.hq-root table tbody tr{transition:background var(--duration-quick) var(--ease-smooth-out)}
.hq-root table tbody tr:hover{background:rgba(var(--fl-accent-rgb),.045)}
.hq-root button:active,.hq-root .btn:active{transform:scale(var(--scale-small))}
@media (prefers-reduced-motion:reduce){.hq-root table tbody tr{transition:none}}

/* =====================================================================
   v2: a proper facelift. Same world (warm glass, terracotta, Plus Jakarta),
   more confident: an ember hero card that ties the content to the rail,
   bigger headlines, sentence-case section titles, a dark HQ rail, a dark
   Family+ price card.
   ===================================================================== */

/* ---------- app ---------- */
.app .topbar h1{font-size:clamp(40px,4.2vw,60px);letter-spacing:-.05em;line-height:1}

/* section + panel titles: sentence case, readable, no tiny tracked caps */
.stage>.view>.section-label,.stage>.view>h2,.view>h2.section-label{font-size:18px;font-weight:650;letter-spacing:-.015em;text-transform:none;color:var(--fl-ink);margin:32px 0 14px}
.panel h2,.panel .section-label{font-size:16px;font-weight:650;letter-spacing:-.01em;text-transform:none;color:var(--fl-ink);margin-bottom:14px}

/* panels: softer, rounder, warmer shadow */
.panel,.wx-day,.family-strip>*,.three-col>*{border-radius:28px}
.panel{padding:24px}

/* the hero card on Today: smoked ember glass, same family as the rail */
.hero-row>.panel:first-child{
  color:#f6efe4;
  background:
    radial-gradient(520px 320px at 100% 0%,rgba(255,122,69,.34),transparent 62%),
    radial-gradient(420px 260px at 0% 110%,rgba(230,180,76,.16),transparent 64%),
    linear-gradient(155deg,#2c231b,#171210)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06),0 40px 70px -36px rgba(60,26,8,.7)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-row>.panel:first-child .section-label,.hero-row>.panel:first-child h2{color:#e9dccb}
.hero-row>.panel:first-child .dayname{color:#fff8ee;font-size:clamp(52px,5.6vw,84px);letter-spacing:-.055em}
.hero-row>.panel:first-child .date,.hero-row>.panel:first-child .tagline,.hero-row>.panel:first-child p{color:#d8c9b6}
.hero-row>.panel:first-child .linkish{color:#ffb98f}
.hero-row>.panel:first-child .empty-soft,.hero-row>.panel:first-child .menu-chip{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#e3d5c2}
.hero-row>.panel:first-child .menu-chip{background:rgba(255,122,69,.16);color:#ffd2b5}
.hero-row>.panel:first-child .event-row{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#f6efe4}
.hero-row>.panel:first-child .event-row *{color:inherit}
.hero-row>.panel:first-child .event-row:hover{background:rgba(255,255,255,.14)}

/* weather: today is a solid ember tile */
.wx-today{background:linear-gradient(160deg,#ee6a38,#b8461a)!important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 44px -22px rgba(229,143,110,.8)!important}
.wx-today .wx-lbl,.wx-today .wx-t,.wx-today .wx-lo,.wx-today *{color:#fff!important}
.wx-t{font-size:22px;font-weight:650;letter-spacing:-.03em}

/* rail: warmer, labels a notch bigger, ember glow under the active item */
.sidenav{background:radial-gradient(260px 220px at 50% 100%,rgba(255,122,69,.22),transparent 70%),linear-gradient(180deg,#2a2119 0%,#15110e 100%)}
.nav-btn{font-size:12.5px;font-weight:550;color:#d9ccbb}
.nav-btn.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 30px -8px rgba(255,122,69,.7)}

/* buttons */
.top-add,.cta{font-weight:650;letter-spacing:-.01em}
.person-card .avatar,.avatar{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 8px 18px -8px rgba(80,40,10,.5)}
.jump-panel{transition:transform var(--duration-slow) var(--ease-smooth-out),box-shadow var(--duration-slow) var(--ease-smooth-out)}
@media (hover:hover){.jump-panel:hover{transform:translateY(-3px)}}

@media (max-width:900px){
  .app .topbar h1{font-size:25px;white-space:nowrap;letter-spacing:-.04em}
  .hero-row>.panel:first-child .dayname{font-size:52px}
}

/* ---------- website ---------- */
.hx-hero h1{font-size:clamp(54px,7.3vw,108px);line-height:.94;letter-spacing:-.055em}
.hx-hero h1 em{font-style:normal}
.hx-sec h2,.hx-sec .hx-h2{font-size:clamp(38px,5vw,70px);letter-spacing:-.05em;line-height:1}
.hx-tag{background:none!important;box-shadow:none!important;padding:0!important;font-size:12px;letter-spacing:.16em;margin-bottom:18px}
.hx-hero-photo,.hx-hero-photo .core,.hx-hero-photo img{border-radius:40px}
.hx-hero-photo{box-shadow:0 60px 100px -50px rgba(120,48,14,.55)}
.hx-sec{padding-block:clamp(72px,9vw,140px)}
/* Family+ is the dark, lit price card */
.hx-price.feat>div{background:radial-gradient(420px 260px at 100% 0%,rgba(255,122,69,.3),transparent 64%),linear-gradient(160deg,#2c231b,#15110e)!important;color:#f6efe4;box-shadow:0 50px 90px -46px rgba(80,30,8,.8)}
.hx-price.feat h3,.hx-price.feat .amt,.hx-price.feat .amt *,.hx-price.feat b,.hx-price.feat>div>*{color:#fff8ee!important}
.hx-price.feat p,.hx-price.feat li,.hx-price.feat li *,.hx-price.feat .amt small,.hx-price.feat .hx-tag,.hx-price.feat .hx-tag *{color:#e3d5c2!important}
.hx-price.feat .hx-btn,.hx-price.feat .hx-btn *{color:#fff!important}
.hx-price.feat li::before{background-color:rgba(255,255,255,.14)}
.hx-price.feat .hx-btn{background:linear-gradient(180deg,#ff8a56,#e0502a 60%,#c4401c);color:#fff}
.hx-price .amt{font-size:clamp(44px,4.4vw,60px)}

/* ---------- HQ ---------- */
.hq-side{background:radial-gradient(240px 200px at 50% 100%,rgba(255,122,69,.2),transparent 70%),linear-gradient(180deg,#2a2119,#15110e)!important;border-right:0!important;color:#e9dccb}
.hq-side .hq-brand,.hq-side .hq-brand *{color:#f6efe4}
.hq-nav-label{color:#a79a88!important;letter-spacing:.14em}
.hq-nav-item{color:#d9ccbb!important;transition:background var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast) var(--ease-smooth-out)}
.hq-nav-item:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.hq-nav-item.on,.hq-nav-item[aria-current],.hq-nav-item.active{background:linear-gradient(180deg,#ff8a56,#e0502a 60%,#c4401c)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -10px rgba(255,122,69,.7)}
.hq-nav-item.on svg,.hq-nav-item.on *{color:#fff!important}
.hq-side-foot,.hq-side-foot *,.hq-who{color:#b9ac9a!important}
.hq-side-foot a:hover,.hq-side-foot button:hover{color:#fff!important}
.hq-head h1{font-size:clamp(38px,3.6vw,52px);letter-spacing:-.05em;font-weight:600;line-height:1.02}
.hq-eyebrow{display:none}
.hq-main .card.kpi{border-radius:24px}
.hq-main .card.kpi .n{font-size:38px;letter-spacing:-.05em;font-weight:600;font-variant-numeric:tabular-nums}
.hq-main .card.kpi.accent{background:linear-gradient(160deg,#ee6a38,#b8461a)!important;color:#fff;box-shadow:0 26px 50px -26px rgba(229,143,110,.8)!important}
.hq-main .card.kpi.accent *{color:#fff!important}

/* =====================================================================
   v3: glass and motion, high end. Ambient aurora, pointer-lit glass with a
   lit specular edge, hero tilt, scroll-linked reveals on the website,
   floating chips, a rotating-light Family+ card. All progressive: reduced
   motion and touch get the still version.
   ===================================================================== */

/* contrast fix on the ember hero card */
.hero-row>.panel:first-child>.section-label:first-child,.hero-row>.panel:first-child .section-label{color:#f1e4d2!important}

/* ---- ambient aurora behind everything (desktop, motion-ok) ---- */
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 22%,rgba(255,138,86,.40),transparent 70%),
    radial-gradient(34% 34% at 82% 14%,rgba(255,206,122,.38),transparent 70%),
    radial-gradient(40% 40% at 72% 86%,rgba(226,106,128,.26),transparent 70%),
    radial-gradient(30% 30% at 28% 88%,rgba(255,176,110,.30),transparent 70%);
  filter:blur(28px);animation:fl-drift 34s ease-in-out infinite alternate;will-change:transform}
@keyframes fl-drift{0%{transform:translate3d(-2%,-1%,0) rotate(0) scale(1)}100%{transform:translate3d(3%,3%,0) rotate(7deg) scale(1.1)}}
@media (max-width:900px){body::before{animation:none;inset:0;filter:none}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---- pointer-lit glass: soft light inside, a lit hairline on the edge ---- */
:is(.panel,.wx-day,.person-card,.jump-panel,.ls-card,.ch-card,.sc-card,.hx-price>div,.hx-cell,.hx-facts li,.card){position:relative}
:is(.panel,.wx-day,.person-card,.jump-panel,.ls-card,.ch-card,.sc-card,.hx-price>div,.hx-cell,.hx-facts li,.card)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.5),transparent 62%);
  mix-blend-mode:soft-light;transition:opacity var(--duration-slow) var(--ease-smooth-out)}
:is(.panel,.wx-day,.person-card,.jump-panel,.ls-card,.ch-card,.sc-card,.hx-price>div,.hx-cell,.hx-facts li,.card)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(255,138,86,.85),rgba(255,138,86,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--duration-slow) var(--ease-smooth-out)}
@media (hover:hover){
  :is(.panel,.wx-day,.person-card,.jump-panel,.ls-card,.ch-card,.sc-card,.hx-price>div,.hx-cell,.hx-facts li,.card):hover::before{opacity:1}
  :is(.panel,.wx-day,.person-card,.jump-panel,.ls-card,.ch-card,.sc-card,.hx-price>div,.hx-cell,.hx-facts li,.card):hover::after{opacity:1}
}
/* the dark hero card gets an ember light instead of a white one */
.hero-row>.panel:first-child::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,150,100,.38),transparent 62%);mix-blend-mode:screen}

/* ---- richer glass: more blur + saturation, a specular top edge ---- */
.panel,.wx-day,.person-card{backdrop-filter:blur(34px) saturate(1.9) brightness(1.03);-webkit-backdrop-filter:blur(34px) saturate(1.9) brightness(1.03)}
.hx-nav-pill,.topbar .chip,.who-chip,.clock-chip,.wall-btn{backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 14px 34px -18px rgba(90,40,10,.4)}
@media (max-width:900px){.panel,.wx-day,.person-card{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---- app motion ---- */
@keyframes fl-pop{from{opacity:0;transform:translateY(10px) scale(.94);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
.view.active .wx-day{animation:fl-pop var(--duration-very-slow,500ms) var(--ease-smooth-out) both}
.view.active .wx-day:nth-child(2){animation-delay:100ms}.view.active .wx-day:nth-child(3){animation-delay:140ms}.view.active .wx-day:nth-child(4){animation-delay:180ms}
.view.active .wx-day:nth-child(5){animation-delay:220ms}.view.active .wx-day:nth-child(6){animation-delay:260ms}.view.active .wx-day:nth-child(n+7){animation-delay:300ms}
.view.active .event-row,.view.active .person-card{animation:fl-pop var(--duration-very-slow,500ms) var(--ease-smooth-out) both;animation-delay:160ms}
.nav-btn.active{animation:fl-pop 400ms var(--ease-smooth-out) both}
@media (hover:hover){.nav-btn:not(.active):hover{background:rgba(255,255,255,.07);transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.view.active .wx-day,.view.active .event-row,.view.active .person-card,.nav-btn.active{animation:none}}

/* ---- website: floating chips, hero tilt + parallax, scroll-linked reveals ---- */
@keyframes fl-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hx-chip{animation:fl-bob 7s ease-in-out infinite;backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 24px 46px -20px rgba(90,40,10,.5)}
.hx-chip.c2{animation-duration:8.5s;animation-delay:-2s}.hx-chip.c3{animation-duration:6.5s;animation-delay:-4s}
.hx-hero-photo{transform:perspective(1200px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) rotate(1deg);transition:transform var(--duration-very-slow,500ms) var(--ease-smooth-out);will-change:transform}
.hx-hero-photo.is-tilting{transition-duration:var(--duration-fast)}
@supports (animation-timeline:view()){
  .hx-hero-photo img{animation:fl-par linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes fl-par{from{scale:1.02;translate:0 0}to{scale:1.12;translate:0 5%}}
  .hx-cell img,.hx-cell video{animation:fl-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes fl-zoom{from{scale:1.16}to{scale:1}}
  .hx-price{animation:fl-rise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  @keyframes fl-rise{from{translate:0 44px;scale:.96}to{translate:0 0;scale:1}}
  .hx-table{animation:fl-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
}
@media (prefers-reduced-motion:reduce){.hx-chip,.hx-hero-photo img,.hx-cell img,.hx-price>div,.hx-table{animation:none!important}.hx-hero-photo{transform:rotate(1deg)}}

/* Family+ card: a slow rotating edge of light */
@property --fl-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes fl-spin{to{--fl-ang:360deg}}
.hx-price.feat>div::after{opacity:1!important;padding:1.5px;background:conic-gradient(from var(--fl-ang),rgba(255,138,86,0) 0deg,rgba(255,150,100,.95) 60deg,rgba(255,206,122,.9) 110deg,rgba(255,138,86,0) 180deg,rgba(255,138,86,0) 360deg);animation:fl-spin 7s linear infinite}
@media (prefers-reduced-motion:reduce){.hx-price.feat>div::after{animation:none}}

/* ---- HQ: glass cards + the same ambient light ---- */
.hq-main .card{backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 24px 50px -30px rgba(90,40,10,.4)}
.hq-main .kpi{transition:transform var(--duration-slow) var(--ease-smooth-out)}
@media (hover:hover){.hq-main .kpi:hover{transform:translateY(-3px)}}
.view.active>*,.hq-main>*{will-change:auto}

/* =====================================================================
   v4: every screen gets the new finish, not just Today. Calendar, lists,
   chores, chat, forms, sheets, chips and buttons; website mid-sections.
   ===================================================================== */
:root{
  --gl-bg:linear-gradient(155deg,rgba(255,255,255,.80),rgba(255,255,255,.38) 62%,rgba(255,236,218,.46));
  --gl-edge:inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(214,120,70,.14),inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(80,40,10,.05),0 30px 60px -34px rgba(140,60,20,.5);
  --smoke:linear-gradient(160deg,#352a21,#17120f);
  --ember:linear-gradient(180deg,#ff8a56,#e0502a 60%,#c4401c);
}

/* controls: glass pills; primary actions lit; dark buttons are smoked glass */
.app .cta.ghost,.app .icon-btn,.app .chip{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 10px 24px -14px rgba(90,40,10,.4);color:var(--fl-ink)}
.app .chip.on{background:var(--ember);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -10px rgba(255,122,69,.7)}
.app .tiny{background:var(--smoke);color:#fff6ea;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(30,16,4,.7)}
.app .tiny:hover{background:linear-gradient(160deg,#42342a,#1e1814)}
.app .seg,.app .kc-tabs{background:rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border-radius:999px;padding:4px;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 10px 24px -16px rgba(90,40,10,.4)}
.app .seg button,.app .kc-tabs button{border-radius:999px;transition:background var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out)}
.app .seg button.on,.app .kc-tabs button.on{background:var(--smoke);color:#fff6ea;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px -8px rgba(30,16,4,.7)}

/* forms */
.app .field input,.app .field select,.app .field textarea,.app .ls-add input,.app .ls-new input,.app .item-add input,.app .chat-compose input,.app .chat-compose textarea{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(120,70,30,.14)!important}
.app .field input:focus,.app .field select:focus,.app .field textarea:focus,.app .ls-add input:focus,.app .ls-new input:focus,.app .item-add input:focus,.app .chat-compose input:focus,.app .chat-compose textarea:focus{box-shadow:inset 0 0 0 1.5px #e0502a,0 0 0 6px rgba(224,80,42,.14)!important;outline:0}

/* calendar: the month is one glass sheet, days are tiles, today is lit */
.month-title{font-size:clamp(24px,2.4vw,34px);font-weight:650;letter-spacing:-.04em}
.cal-toolbar{gap:10px}
.month-grid{background:var(--gl-bg);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border-radius:34px;padding:14px;gap:8px;box-shadow:var(--gl-edge)}
.month-grid .dow{font-size:11.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--fl-ink-3);padding:6px 4px}
.day-cell{border-radius:20px;background:rgba(255,255,255,.62)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(120,70,30,.07)!important;transition:transform var(--duration-slow) var(--ease-smooth-out),box-shadow var(--duration-slow) var(--ease-smooth-out),background var(--duration-slow) var(--ease-smooth-out)}
.day-cell.out{background:rgba(255,255,255,.28)!important}
@media (hover:hover){.day-cell:hover{transform:translateY(-3px) scale(1.012);background:rgba(255,255,255,.92)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,122,69,.4),0 20px 36px -20px rgba(180,70,20,.5)!important;z-index:2}}
.day-cell .day-num{font-weight:650;font-variant-numeric:tabular-nums}
.day-cell.today{background:linear-gradient(165deg,rgba(255,226,196,.95),rgba(255,176,128,.62))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1.5px rgba(224,80,42,.55),0 22px 40px -22px rgba(224,80,42,.8)!important}
.day-cell.today .day-num{background:var(--ember);color:#fff;box-shadow:0 8px 16px -6px rgba(224,80,42,.8)}
.ev-pill{border-radius:11px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 12px -8px rgba(60,30,10,.6)}

/* lists + chores */
.ls-card,.ch-card{background:var(--gl-bg)!important;backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border-radius:30px;box-shadow:var(--gl-edge)!important}
.ls-title{font-size:19px;font-weight:650;letter-spacing:-.025em}
.ls-ico{border-radius:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 10px 20px -12px rgba(90,40,10,.5)}
.ls-empty{color:var(--fl-ink-3)}
.ls-new{padding:8px;border-radius:26px;background:rgba(255,255,255,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 18px 36px -24px rgba(90,40,10,.4)}
.ls-ideas .chip{font-weight:550}

/* chat: a glass split, ember selection, pill composer */
.chat-app{border-radius:34px;background:var(--gl-bg);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--gl-edge);overflow:hidden}
.chat-rail{background:rgba(255,255,255,.34)!important;border-right:1px solid rgba(255,255,255,.55)}
.chat-item{border-radius:18px;transition:background var(--duration-fast) var(--ease-smooth-out)}
.chat-item.on{background:linear-gradient(160deg,rgba(255,226,196,.95),rgba(255,176,128,.6))!important;box-shadow:inset 0 0 0 1px rgba(224,80,42,.35)}
.chat-head{background:rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.6)}
.chat-compose{background:rgba(255,255,255,.42)}

/* sheets and dialogs */
.sheet{background:var(--gl-bg)!important;backdrop-filter:blur(40px) saturate(1.9);-webkit-backdrop-filter:blur(40px) saturate(1.9);border-radius:36px;box-shadow:var(--gl-edge),0 60px 120px -40px rgba(60,26,8,.6)!important}
.overlay{background:radial-gradient(900px 600px at 50% 40%,rgba(255,150,100,.18),rgba(30,16,8,.45))!important;backdrop-filter:blur(14px) saturate(1.2)}

/* mobile tab bar: smoked glass with an ember pill */
@media (max-width:900px){
  .tabbar,.bottom-nav,nav.tabs{background:rgba(32,24,18,.72)!important;backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -16px rgba(30,16,8,.7)}
  .month-grid{padding:8px;gap:4px;border-radius:26px}.day-cell{border-radius:14px}
}

/* ---------- website: the rest of the page ---------- */
.hx-cell{border-radius:38px}
.hx-cell>.core,.hx-cell .core{border-radius:32px}
.hx-facts li{background:var(--gl-bg);backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);border-radius:26px;box-shadow:var(--gl-edge);padding:18px 20px}
.hx-table{border-radius:38px;box-shadow:var(--gl-edge)}
.hx-faq details,.hx-faq .hx-q,.hx-faq li{border-radius:22px}
.hx-sec h2{font-weight:600}
.hx-nav-pill{background:rgba(255,255,255,.55)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 24px 50px -24px rgba(90,40,10,.5)}
.hx-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 36px -16px rgba(224,80,42,.75)}
.hx-btn.ghost{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 14px 30px -18px rgba(90,40,10,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ===== v5: GSAP owns the motion; switch off the CSS-only equivalents ===== */
.gsap-on .view.active .wx-day,.gsap-on .view.active .event-row,.gsap-on .view.active .person-card,.gsap-on .nav-btn.active{animation:none!important}
.gsap-on .hx-hero-photo img,.gsap-on .hx-cell img,.gsap-on .hx-cell video,.gsap-on .hx-price,.gsap-on .hx-table{animation:none!important}
.gsap-on .hx-chip{animation:none!important}

/* ===== v5.1: FAQ intro is plain text, not a card ===== */
.hx-faq>div:first-child{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
.hx-faq>div:first-child::before,.hx-faq>div:first-child::after{content:none!important}
.hx-faq>div:last-child{background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
.hx-faq>div:last-child::before,.hx-faq>div:last-child::after{content:none!important}

/* ===== v5.2: pastel terracotta everywhere =====
   --accent stays a softened, readable terracotta for text/borders; every filled
   surface switches to a pastel peach with dark ink text for contrast. */
:root{--accent:#bd5b3b;--accent-2:#a84d30;--accent-soft:#fcebe2;--pt-grad:linear-gradient(180deg,#f8c3aa,#ec9879);--pt-ink:#3a1a0c;--pt-shadow:0 12px 26px -14px rgba(229,143,110,.75)}
.cta:not(.ghost),.cta.ghost.on,.tiny,.bubble.mine,.topbar .top-add,.hp-tab.on,.day-cell.today .day-num,.nav-btn.active,.chat-back em,.fr-list li.done .fr-tick,
.hx-btn:not(.ghost):not(.light),.hx-btn.light,.hx-price.feat .hx-btn,.hq-nav-item.on,.hq-nav-item[aria-current],.hq-nav-item.active,.btn.primary,.em-item.on,.pill.paid,
.hp-tick.on{background:var(--pt-grad)!important;color:var(--pt-ink)!important;border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--pt-shadow)!important;text-shadow:none!important}
.hx-btn .ic,.hq-nav-item.on *,.nav-btn.active *,.topbar .top-add *{color:var(--pt-ink)!important;stroke:currentColor}
.hx-btn .ic{background:rgba(255,255,255,.55)!important}
.bubble.mine small,.bubble.mine *{color:rgba(58,26,12,.72)!important}
.wx-today,.hq-main .card.kpi.accent{background:linear-gradient(160deg,#fbcdb8,#ee9d7e)!important;color:var(--pt-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 44px -22px rgba(229,143,110,.8)!important}
.wx-today *,.hq-main .card.kpi.accent *{color:var(--pt-ink)!important}
.dd-track i,.ob-bar i,.fuel-bar i,.hp-tab.on i{background:linear-gradient(90deg,#f6b79b,#e98f6f)!important}
.hx-facts li b,.hx-tag,.eyebrow,.linkish,.hx-sub a{color:var(--accent)}
.hx-hero h1 em,.hx-sec h2 em{color:#d9805f;-webkit-text-fill-color:#d9805f}
.day-card.today,.day-cell.today{box-shadow:inset 0 0 0 2px #eca98f,0 12px 30px -16px rgba(229,143,110,.7)!important}
.hx-hero h1,.hx-sec h2{color:var(--ink,#1b1713)}
.gk-split{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important}
.hx-hero h1.gk-split,.hx-sec h2.gk-split{color:#1b1713!important}
.hx-hero h1.gk-split em,.hx-hero h1.gk-split em *,.hx-sec h2.gk-split em,.hx-sec h2.gk-split em *{color:#e08a68!important;-webkit-text-fill-color:#e08a68!important}
.hx-hero h1.gk-split span,.hx-sec h2.gk-split span{color:inherit!important;-webkit-text-fill-color:currentColor!important}
.hx-hero h1.gk-split em span,.hx-sec h2.gk-split em span{color:#e08a68!important;-webkit-text-fill-color:#e08a68!important}
html body .cta:not(.ghost),html body button.cta[type=submit],html body .chat-app .cta{background:var(--pt-grad)!important;color:var(--pt-ink)!important;border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--pt-shadow)!important}

/* ===== v5.3: facts strip = four matching rounded tiles ===== */
body .hx-facts{background:none!important;box-shadow:none!important;padding:0!important;gap:14px!important;border-radius:0!important}
body .hx-facts li,body .hx-facts li:first-child,body .hx-facts li:last-child,body .hx-facts li:nth-child(n){border-radius:24px!important;box-shadow:var(--gl-edge)!important}

/* ===== v5.4: masonry for list + chore cards — they pack tight whatever their height ===== */
.ls-grid,.ch-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important;gap:20px!important;align-items:start!important;columns:auto!important}
.ls-grid.gk-mason,.ch-grid.gk-mason{grid-auto-rows:4px!important;row-gap:0!important;grid-auto-flow:row dense}
.ls-grid.gk-mason>*,.ch-grid.gk-mason>*{margin:0!important;align-self:start}
.ch-grid.gk-mason>p.muted{grid-column:1/-1}

@media (max-width:700px){.ls-grid,.ch-grid{grid-template-columns:minmax(0,1fr)!important}.ls-grid>*,.ch-grid>*{min-width:0}}

/* ===== v5.5: readable text everywhere (restore intentional coloured cards, darken weak labels) ===== */
body .th-card.tonight{background:#2a7a6a!important;box-shadow:0 18px 36px -20px #2a7a6a!important}
body .th-card.tonight .k{color:#d4f5ec!important}
body .th-card.tonight b{color:#fff!important}
body .th-card.tonight small{color:#e6f8f2!important}
body .hx-fwd-to{background:rgba(255,255,255,.78)!important;color:var(--ink,#1b1713)!important;box-shadow:inset 0 0 0 1px rgba(184,100,70,.25)!important}
body .lt-pop{background:linear-gradient(135deg,#d93a74,#e87a12)!important}
body .tw-fire{background:linear-gradient(160deg,#e4602a,#c7285a)!important}
body .hx-tag{color:#a34a2c!important}
body .hx-cell .k,body .hx-fwd-card .k,body .hx-meal-card .k,body .th-card .k{opacity:1!important}
body .hx-hero h1.gk-split em,body .hx-hero h1.gk-split em *{color:#cf6544!important;-webkit-text-fill-color:#cf6544!important}
body .hx-sec h2.gk-split em,body .hx-sec h2.gk-split em *{color:#cf6544!important;-webkit-text-fill-color:#cf6544!important}
body .th-day small,body .th-day em{opacity:1!important}
:root{--accent:#b04f31;--accent-2:#9b4328}
body .cell.dark,body .hx-cell.dark{color:#2b160c!important}
body .cell.dark .k,body .hx-cell.dark .k{color:#8f3d22!important;opacity:1!important}
body .cell.dark .big,body .cell.dark h3,body .cell.dark p,body .cell.dark b,body .hx-cell.dark h3,body .hx-cell.dark p,body .hx-cell.dark b{color:#2b160c!important;-webkit-text-fill-color:#2b160c!important}
body .hx-hero h1.gk-split em,body .hx-hero h1.gk-split em *,body .hx-sec h2.gk-split em,body .hx-sec h2.gk-split em *{color:#c2523a!important;-webkit-text-fill-color:#c2523a!important}
body .hx-tag{color:#8f3d22!important}

/* ===== v5.6: app readability ===== */
html body .cta:not(.ghost),html body .tiny,html body .topbar .top-add,html body .hp-tab.on,html body .nav-btn.active,html body .hx-btn:not(.ghost):not(.light),html body .hq-nav-item.on,html body .btn.primary{-webkit-text-fill-color:var(--pt-ink)!important;color:var(--pt-ink)!important}
html body .cta:disabled,html body .cta[disabled]{opacity:.72!important}
.wx-today,.wx-today *,.hq-main .card.kpi.accent,.hq-main .card.kpi.accent *{-webkit-text-fill-color:var(--pt-ink)!important;color:var(--pt-ink)!important}
html body label,html body .field label{color:#5b4c40!important}
html body .wall-state{color:#6a5a4d!important}
html body .ev-pill{text-shadow:0 1px 1px rgba(0,0,0,.38)}
html body .ev-pill[style*="d4a017" i],html body .chip.on[style*="d4a017" i]{background:#a67a0b!important}
html body .ev-pill[style*="c47a1a" i],html body .chip.on[style*="c47a1a" i]{background:#a5600f!important}
html body .chip.on{text-shadow:0 1px 1px rgba(0,0,0,.35)}
html body .day-cell.out{opacity:.7!important}
html body .day-cell.out .dnum,html body .day-cell.out>span:first-child{color:#6a5a4d!important}
:root,.app,body,html body.app{--ember:linear-gradient(180deg,#f8c3aa,#ec9879)!important}
html body .app .cta:not(.ghost),html body.app .cta:not(.ghost),html body .app .chip.on,html body .app .fab,html body .app .primary,html body .app .btn.primary,html body #notif-banner .nb-on,html body .day-cell.today .day-num{background:var(--pt-grad)!important;background-image:var(--pt-grad)!important;color:var(--pt-ink)!important;-webkit-text-fill-color:var(--pt-ink)!important;border-color:transparent!important}
html body .ob-tcount,html body .dd-row small,html body .hq-main small{color:#675749!important}
/* today: the circle gets the colour, not the whole date bar */
html body .day-cell.today .day-num{background:none!important;background-image:none!important;box-shadow:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important}
html body .day-cell.today .day-num span:first-child{background:var(--pt-grad)!important;color:var(--pt-ink)!important;-webkit-text-fill-color:var(--pt-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 16px -8px rgba(229,143,110,.9)!important}
html body .day-cell.out{opacity:1!important}
html body .day-cell.out>*{opacity:.72}
html body .day-cell.out .ev-pill{opacity:.9}
html body .day-cell.out .day-num span{color:#6a5a4d!important}
html body .day-cell.out>*{opacity:1}
html body .day-cell.out .day-num span{color:#5b4c40!important}
html body .ev-pill{filter:brightness(.82) saturate(1.1)}
html body .day-cell.out .ev-pill{opacity:1}
html body .hero-row>.panel:first-child .linkish,html body .meals .linkish,html body .linkish{color:#8f3d22!important}
html body p.muted{color:#675749!important}