/* GetKnowen premium glass, v3 (Oct 2026).
   Same palette and layout as before; this layer only refines surfaces, light, type and motion.
   Loads LAST on app.html, hq.html and the marketing pages.
   Honest label: this is a web approximation of Apple-style layered glass (backdrop-filter, specular
   gradients, hairline edges). It is not Apple's Liquid Glass material, which has no public web version.

   Lighting model (one light, top-left):
     1. specular sheen  : bright radial at the top-left edge of every glass surface
     2. hairline        : 1px warm ring + 1px white inner edge (the "bezel")
     3. ambient shadow  : three stacked, warm-tinted, low-opacity shadows (contact, mid, far)
   Radius scale: 14 controls / 20 inner / 30 surfaces / pill. */

:root{
  --pg-ease:cubic-bezier(.32,.72,0,1);
  --pg-spring:cubic-bezier(.34,1.4,.64,1);
  --pg-r-ctl:14px; --pg-r-in:20px; --pg-r:30px;
  --pg-ink:#1c1814; --pg-ink-2:#5a4f43; --pg-ink-3:#8a7d6e;
  --pg-hot:#ff7a45; --pg-glow:rgba(214,86,42,.38);
  --pg-edge:rgba(120,70,30,.11);
  --pg-sheen:radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.92),rgba(255,255,255,0) 46%);
  --pg-fill:linear-gradient(158deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.44) 58%,rgba(255,238,222,.5) 100%);
  --pg-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.52),
    inset 0 -14px 24px -18px rgba(214,120,70,.16),
    0 0 0 1px var(--pg-edge),
    0 1px 2px rgba(90,45,15,.05),
    0 10px 26px -12px rgba(120,60,20,.14),
    0 46px 90px -46px rgba(150,70,25,.34);
}

/* ---------- ground: calmer, more luminous ---------- */
body{
  background:
    radial-gradient(1100px 760px at 4% -14%,rgba(255,168,118,.5),transparent 62%),
    radial-gradient(900px 640px at 100% -6%,rgba(255,214,140,.42),transparent 60%),
    radial-gradient(1000px 760px at 92% 108%,rgba(232,120,120,.2),transparent 64%),
    radial-gradient(900px 640px at 28% 112%,rgba(255,200,140,.34),transparent 66%),
    #f8f0e5;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- surfaces (app + HQ) ---------- */
.panel,.wx-day,.family-strip>*,.three-col>*,.board,.ls-card,.ch-card,.ph-shelf,.sc-card,.cp-card,
.card,.table-wrap,.member,.link-grid a,.login-card{
  border:0!important;
  border-radius:var(--pg-r)!important;
  background:var(--pg-sheen),var(--pg-fill)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.9);backdrop-filter:blur(34px) saturate(1.9);
  box-shadow:var(--pg-shadow)!important;
}
.panel{padding:26px 28px}
.wx-day{border-radius:22px!important}
.hero-row,.settings-grid,.ls-grid,.ch-grid,.ph-shelves{gap:24px}
.stage>*+*{margin-top:4px}

/* warm hero surface (keeps the terracotta accent) */
.wx-today,.kpi.accent{
  background:var(--pg-sheen),linear-gradient(158deg,rgba(255,228,200,.96),rgba(255,176,128,.62))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1.5px rgba(214,90,40,.42),0 18px 40px -22px var(--pg-glow),0 46px 80px -48px rgba(214,90,40,.5)!important;
}

/* inner rows sit one step down: concentric radius, softer lift */
.event-row,.th-row,.te-row,.chore-row,.list-row{
  border-radius:var(--pg-r-in)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5))!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(120,70,30,.07),0 1px 2px rgba(90,45,15,.04);
  transition:transform .55s var(--pg-ease),background .4s var(--pg-ease),box-shadow .5s var(--pg-ease);
}
.event-row:hover{transform:translateY(-1px);background:rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,122,69,.28),0 16px 34px -20px rgba(180,70,20,.4)}

/* ---------- type ---------- */
/* small caps labels read as engineering. Apple sets these in plain sentence case. */
.panel h2,.section-label{
  text-transform:none!important;letter-spacing:-.005em!important;
  font-size:14px!important;font-weight:600!important;color:var(--pg-ink-2)!important;margin-bottom:14px;
}
.panel h2.hp-title,.panel h2.hp-name{font-size:inherit!important;color:var(--pg-ink)!important}
.topbar h1{font-weight:650;letter-spacing:-.05em;line-height:1.02}
.big-when .dayname{font-weight:620;letter-spacing:-.05em}
.big-when .dayname+*{color:var(--pg-ink-3)}
.wx-t,.kc-big,.bank-amt,.kpi .v,.amt,td.num,.t-num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.wx-lbl{letter-spacing:.06em;font-weight:600}
.panel p,.muted{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- controls ---------- */
.cta,.btn,.fab,.primary,.tiny{
  transition:transform .5s var(--pg-ease),box-shadow .5s var(--pg-ease),background .4s var(--pg-ease),filter .4s var(--pg-ease);
}
.cta{border-radius:999px;height:44px;padding-inline:22px;position:relative;isolation:isolate}
.cta:not(.ghost):not(.sm),.fab,.btn.primary{
  background:linear-gradient(180deg,#ff8a56 0%,#e0502a 58%,#c4401c 100%)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(120,30,0,.25),0 0 0 1px rgba(196,64,28,.5),0 14px 32px -12px var(--pg-glow)!important;
}
.cta:not(.ghost):hover,.fab:hover,.btn.primary:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.03)}
.cta:active,.fab:active,.btn:active,.tiny:active,.primary:active{transform:scale(.97);transition-duration:.12s}
.cta.ghost,.btn:not(.primary){
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58))!important;color:var(--pg-ink)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(120,70,30,.13),0 6px 16px -10px rgba(90,45,15,.3)!important;border:0!important;
}
.cta.ghost:hover,.btn:not(.primary):hover{background:#fff!important;transform:translateY(-1px)}
.tiny{border-radius:999px;background:linear-gradient(180deg,#2a241e,#171310);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -10px rgba(30,16,4,.6)}

input,textarea,select,.field input,.field textarea,.field select,.item-add input{
  border-radius:var(--pg-r-ctl)!important;
  background:rgba(255,255,255,.7)!important;
  border:1px solid rgba(120,70,30,.14)!important;
  box-shadow:inset 0 1px 2px rgba(90,45,15,.06),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:border-color .3s var(--pg-ease),box-shadow .4s var(--pg-ease),background .3s var(--pg-ease);
}
input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.field select:focus{
  background:#fff!important;border-color:rgba(224,80,42,.6)!important;
  box-shadow:0 0 0 4px rgba(255,122,69,.2),inset 0 1px 2px rgba(90,45,15,.04)!important;outline:0;
}
.field label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--pg-ink-3)}
:focus-visible{outline:2px solid var(--pg-hot);outline-offset:3px;border-radius:12px}

.topbar .chip:not(.on),.clock-chip,.wall-btn,.who-chip:not(.on),.chip:not(.on),.seg{
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55))!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--pg-edge),0 10px 26px -16px rgba(90,45,15,.4)!important;
}

/* ---------- rail: smoked glass that lets the aurora through ---------- */
.sidenav,.side{
  -webkit-backdrop-filter:blur(34px) saturate(1.7);backdrop-filter:blur(34px) saturate(1.7);
  border-radius:34px;
}
.sidenav{
  background:linear-gradient(185deg,rgba(52,40,32,.9),rgba(26,19,15,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -20px 40px -30px rgba(255,140,80,.18),0 40px 80px -36px rgba(40,18,4,.6)!important;
}
.nav-btn{border-radius:20px;color:#cfc3b4}
.nav-btn:hover{background:rgba(255,248,236,.08)}
.nav-btn.active{
  background:linear-gradient(180deg,#ff8a56,#e0502a 62%,#c4401c)!important;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 28px -10px var(--pg-glow)!important;
}
.nav-btn.active svg{color:#fff!important}
.nav-btn svg{stroke-width:1.6}

/* ---------- sheets: glass, spring in ---------- */
.overlay{background:rgba(40,24,12,.34)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.sheet,.modal-card,.drawer-card{
  background:var(--pg-sheen),linear-gradient(165deg,rgba(255,252,247,.9),rgba(255,244,232,.82))!important;
  -webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8);
  border-radius:34px!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px var(--pg-edge),0 60px 120px -40px rgba(60,28,8,.55)!important;
  animation:pgSheet .5s var(--pg-ease);
}
.sheet h2{font-weight:620;letter-spacing:-.035em}
@keyframes pgSheet{from{transform:translateY(34px) scale(.985);opacity:0}to{transform:none;opacity:1}}

/* ---------- toasts ---------- */
.toast{border-radius:999px!important;background:rgba(28,24,20,.82)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 50px -20px rgba(30,16,4,.6)!important}

/* ---------- phones ---------- */
@media (max-width:900px){
  body{background-attachment:scroll}
  .panel,.wx-day,.board,.ls-card,.ch-card,.ph-shelf,.sc-card,.cp-card,.card,.table-wrap,.member,.link-grid a{
    -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    border-radius:26px!important;
  }
  .panel{padding:20px 20px}
  /* floating glass dock instead of a full-width bar */
  .bottomnav{
    left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-radius:30px;border-top:0!important;
    background:linear-gradient(185deg,rgba(52,40,32,.82),rgba(26,19,15,.88))!important;
    -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(40,18,4,.7);
    padding:8px 6px 8px!important;
  }
  .bottomnav button{border-radius:22px;transition:background .4s var(--pg-ease),transform .3s var(--pg-ease)}
  .bottomnav button.active{background:linear-gradient(180deg,#ff8a56,#e0502a 62%,#c4401c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
  .stage{padding-bottom:110px}
  .sheet{border-radius:34px 34px 0 0!important}
  .sheet::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:rgba(120,70,30,.22);margin:-8px auto 14px}
}
@media (prefers-reduced-transparency:reduce){
  .panel,.wx-day,.card,.table-wrap,.member,.sidenav,.side,.sheet,.bottomnav,.overlay,.chip,.seg,.who-chip{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .panel,.wx-day,.card,.table-wrap,.member,.sheet,.chip,.seg{background:#fffaf3!important}
  .bottomnav,.sidenav,.side{background:#2a241e!important}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.modal-card,.drawer-card{animation:none}
  .cta,.btn,.fab,.event-row,.nav-btn{transition:none}
}

/* ---------- marketing pages ---------- */
.hx-cell,.hx-bezel,.th-card,.auth-card{
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
}
.hx-cell{transition:transform .8s var(--pg-ease),box-shadow .8s var(--pg-ease)}
.hx-cell:hover{transform:translateY(-4px)}
.hx-btn{transition:transform .6s var(--pg-ease),box-shadow .6s var(--pg-ease),filter .4s var(--pg-ease)}
.hx-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.hx-btn:active{transform:scale(.975);transition-duration:.12s}
.hx-btn .ic,.hx-btn svg{transition:transform .6s var(--pg-ease)}
.hx-btn:hover .ic,.hx-btn:hover svg{transform:translate(2px,-2px)}
.eyebrow,.hx-tag{letter-spacing:.1em}
.rv{transition-timing-function:var(--pg-ease)!important}

/* ---------- landing: calmer hero, deeper glass ---------- */
.hx-nav-pill{
  -webkit-backdrop-filter:blur(36px) saturate(1.9);backdrop-filter:blur(36px) saturate(1.9);
  background:var(--pg-sheen),linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,248,240,.56))!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px var(--pg-edge),0 24px 56px -24px rgba(120,60,20,.4)!important;
}
.hx-hero{padding:148px 0 72px}
.hx-hero h1{font-size:clamp(40px,4.7vw,68px);letter-spacing:-.052em;line-height:1.02;margin:24px 0 26px}
.hx-hero .hx-body,.hx-hero p{max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--pg-ink-2)}
.hx-hero-photo{transform:none!important}
.hx-hero-photo,.hx-bezel{
  border-radius:38px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--pg-edge),0 0 0 8px rgba(255,255,255,.34),0 60px 120px -50px rgba(120,55,20,.55)!important;
}
.hx-hero-photo img{border-radius:30px}
.hx-sec{padding-top:clamp(72px,9vw,132px);padding-bottom:clamp(40px,5vw,72px)}
.hx-cell,.th-card,.auth-card,.hx-card,.hx-price,.hx-faq>*,.hx-fwd-card,.hx-meal-card{
  border-radius:32px!important;
  background:var(--pg-sheen),var(--pg-fill)!important;
  box-shadow:var(--pg-shadow)!important;
}
.hx-cell h3,.hx-sec h2{letter-spacing:-.045em;font-weight:620}
.hx-sec h2{text-wrap:balance}
@media (max-width:760px){
  .hx-hero{padding:112px 0 40px}
  .hx-hero-photo,.hx-bezel{border-radius:28px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--pg-edge),0 0 0 5px rgba(255,255,255,.34),0 40px 70px -34px rgba(120,55,20,.5)!important}
  .hx-cell,.th-card,.hx-card,.hx-price{border-radius:26px!important}
}

.chip.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -10px rgba(90,45,15,.5)}

/* corkboard notes: keep each note one solid colour (no glass input panel inside) */
.sticky textarea,.cork .sticky textarea{
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;
}
.sticky textarea:focus{background:transparent!important;box-shadow:none!important;outline:0}
.who-chip.on{color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -10px rgba(90,45,15,.5)}

/* bare inline inputs that rely on no field wrapper */
input[data-act="rename-person"]{min-height:42px;padding:10px 14px;font:inherit;font-size:15px}
input[type="color"]{min-height:42px;min-width:52px;padding:4px!important;cursor:pointer}