/* Shared brand styles for KEVIN sub-pages (about / privacy / terms / app). */
@font-face { font-family:'Hanken Grotesk'; font-weight:400 900; font-display:swap; src:url("assets/asset_5_7747eecd.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

:root{ --onOrange:#002B4C;
  --bg:#FFFFFF; --card:#FFFFFF; --recess:#E8F3FA; --green:#002B4C; --greenDeep:#001B31;
  --teal:#0B4A78; --orange:#F59E71; --cream:#FFFFFF; --ink:#002B4C; --mid:#4E6273;
  /* --orangeInk: WCAG-AA-safe orange for text + solid buttons on light backgrounds. */
  --orangeInk:#F59E71;
  --light:#6E8497; --border:#DCE7EF; --sand:#C0EBFF; --success:#1E8E5A; --successBg:#DDF3E8;
  --overdue:#AE4B3D; --sand8:#C0EBFF;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:var(--teal);text-decoration:none;} a:hover{text-decoration:underline;}
.wrap{max-width:840px;margin:0 auto;padding:0 24px;}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(243,239,232,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.site-head .in{max-width:1140px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:inline-flex;align-items:center;gap:10px;font:900 22px/1 'Hanken Grotesk';color:#6E8497;}
.brand .mark{width:46px;height:46px;border-radius:11px;display:block;flex-shrink:0;}
.brand .i-wrap{position:relative;display:inline-block;}
.brand .i-wrap .idot{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:999px;background:var(--orange);}
.head-links{display:flex;gap:6px;align-items:center;}
.head-links a{font:700 14px/1 'Hanken Grotesk';color:var(--mid);padding:9px 13px;border-radius:10px;}
.head-links a:hover{background:var(--recess);color:var(--green);text-decoration:none;}
/* .head-links a wins specificity over .btn-primary and was greying out button text */
.head-links a.btn-primary,.head-links a.btn-primary:hover{color:var(--cream);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 14px/1 'Hanken Grotesk';padding:11px 18px;border-radius:11px;cursor:pointer;border:none;transition:transform .16s,box-shadow .2s;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--orangeInk);color:#002B4C;box-shadow:0 4px 14px rgba(245,158,113,.30);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--green);}
.btn-ghost:hover{background:var(--green);color:var(--cream);}

/* content page */
.page{padding:52px 0 60px;}
.eyebrow{font:800 16px/1 'Hanken Grotesk';letter-spacing:.16em;text-transform:uppercase;color:var(--teal);}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--orange);vertical-align:middle;animation:dotPulse 1.6s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.8}}
@media (prefers-reduced-motion: reduce){.dot{animation:none}}
h1.title{font:900 46px/1.04 'Hanken Grotesk';letter-spacing:-0.035em;margin:14px 0 10px;}
.lede{font:500 19px/1.55 'Hanken Grotesk';color:var(--mid);margin-bottom:10px;max-width:640px;}
.updated{color:var(--mid);font:600 13px/1.5 'Hanken Grotesk';margin-bottom:30px;}
.prose h2{font:800 22px/1.25 'Hanken Grotesk';color:var(--ink);margin:36px 0 12px;letter-spacing:-0.01em;}
.prose h3{font:800 16px/1.3 'Hanken Grotesk';margin:22px 0 8px;color:var(--ink);}
.prose p,.prose li{font:400 16px/1.65 'Hanken Grotesk';color:#3a423f;margin-bottom:12px;}
.prose ul{margin:0 0 14px 22px;}
.prose strong{font-weight:800;color:var(--ink);}
.prose a{font-weight:700;}
.note{background:var(--recess);border-radius:14px;padding:15px 18px;font:500 14px/1.6 'Hanken Grotesk';color:var(--mid);margin:22px 0;border-left:3px solid var(--orange);}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 26px;margin-bottom:18px;}

/* footer */
.site-foot{border-top:1px solid var(--border);padding:30px 0;margin-top:36px;background:var(--green);color:var(--sand8);}
.site-foot .in{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 13px/1.5 'Hanken Grotesk';}
.site-foot a{color:var(--sand8);margin-right:16px;}
@media(max-width:640px){ h1.title{font-size:34px;} .head-links a:not(.btn){display:none;} }


/* ---- Liquid-glass icon nav (Kevin's design) — shared by my.html + app.html ---- */
nav.myn { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 34px; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.tab-circles { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.85); border-radius:999px; padding:7px 10px; backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 8px 28px rgba(0,43,76,0.10), inset 0 1px 0 rgba(255,255,255,0.9); }
.tc { width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; transition:all .15s; position:relative; z-index:2; background:rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7); }
.tc svg { transition:transform .25s cubic-bezier(0.22,1,0.36,1); }
.tc:hover svg { transform:scale(1.22); }
.tc.active { background:rgba(221,238,228,0.9); }
.tc.shop { background:linear-gradient(160deg,#F59E71,#F59E71); box-shadow:0 4px 14px rgba(245,158,113,0.45), inset 0 1px 0 rgba(255,255,255,0.55); }
.tc.shop:hover { background:linear-gradient(160deg,#F59E71,#F59E71); }
.lens { position:absolute; top:50%; left:0; width:52px; height:52px; border-radius:999px; transform:translate(-50%,-50%); z-index:3; pointer-events:none; opacity:0; transition:left .32s cubic-bezier(0.22,1,0.36,1), opacity .2s; backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.09); -webkit-backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.09); background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0.02) 60%); border:1.5px solid rgba(255,255,255,0.9); box-shadow:0 10px 24px rgba(0,43,76,0.18), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 -6px 12px rgba(0,43,76,0.08); }
.lens::before { content:""; position:absolute; top:6px; left:9px; width:20px; height:11px; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0)); transform:rotate(-18deg); }
.tab-circles.lit .lens { opacity:1; }
.tip { position:absolute; top:calc(100% + 12px); left:0; transform:translateX(-50%) translateY(-4px); z-index:4; pointer-events:none; opacity:0; transition:left .32s cubic-bezier(0.22,1,0.36,1), opacity .18s, transform .18s; white-space:nowrap; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,0.78); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); border:1px solid rgba(255,255,255,0.9); box-shadow:0 10px 26px rgba(0,43,76,0.14), inset 0 1px 0 rgba(255,255,255,0.9); font:800 11px/1 'Hanken Grotesk'; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); }
.tab-circles.lit .tip { opacity:1; transform:translateX(-50%) translateY(0); }
.mylogo { display:inline-flex; align-items:center; gap:10px; }
.mylogo img { width:32px; height:32px; border-radius:8px; display:block; }
.avatar { width:38px; height:38px; border-radius:999px; background:var(--green); color:var(--cream); display:flex; align-items:center; justify-content:center; font:800 14px/1 'Hanken Grotesk'; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-link { font:700 13px/1 'Hanken Grotesk'; color:var(--mid); padding:8px 4px; cursor:pointer; background:none; border:none; font-family:'Hanken Grotesk',sans-serif; }
.nav-link:hover { color:var(--orange); }
.tc[data-tab]{border:none;cursor:pointer;padding:0;}
.tc.active svg{transform:scale(1.08);}
@media (max-width:980px){ .tab-circles{position:static;transform:none;margin:0 10px;} }
@media (max-width:640px){ nav.myn{padding:10px 14px;flex-wrap:wrap;gap:10px;} .tab-circles{order:3;width:100%;justify-content:center;gap:6px;padding:6px;} .tc{width:36px;height:36px;} .tip{display:none;} }

/* ---- Logged-in word tabs: same look as the homepage nav links ---- */
.tab-words{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;}
.tab-words .tw{position:relative;display:inline-flex;align-items:center;font:700 14px/1 'Hanken Grotesk';color:var(--mid);cursor:pointer;background:none;border:none;padding:9px 14px;border-radius:11px;transition:color .22s;z-index:1;text-decoration:none;white-space:nowrap;}
.tab-words .tw::before{content:'';position:absolute;inset:0;border-radius:10px;background:var(--card);border:2px solid var(--green);opacity:0;transform:scale(.82);transition:opacity .24s,transform .24s;z-index:-1;}
.tab-words .tw:hover{color:var(--green);text-decoration:none;}
.tab-words .tw:hover::before{opacity:1;transform:scale(1);}
.tab-words .tw.active{color:var(--green);}
.tab-words .tw.active::before{opacity:1;transform:scale(1);}
@media (max-width:980px){ .tab-words{position:static;transform:none;margin:0 10px;} }
@media (max-width:640px){ .tab-words{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:2px;} .tab-words .tw{padding:8px 10px;font-size:13px;} }

/* Ocean palette (2026-09-20): Summer Orange fills carry dark-ocean text. */
.btn-primary,.btn-primary:hover,.acct-btn.solid,.neg-primary,.kbtn,.drop-btn,.pf-refer,.pf-refer .pf-t span,.stile.orange,.stile.orange .st-sub,.est-next .acct-btn.solid,.ph-save,.go-btn,.tc.shop,.nav-cta,.savepill,.neg-netwin,.cta-band .btn-primary{color:var(--onOrange)!important}
.stile.orange .st-badge{color:var(--onOrange)!important;background:rgba(0,43,76,.12)!important}
.nav-cta,.btn-primary{text-shadow:none}