/* =====================================================================
   PlannerMY brand theme (website, shop, account, activation pages).
   Colours from the logo: pink → orange gradient, navy ink.
   Loaded after each page's own styles. (The planner app itself is untouched.)
   ===================================================================== */
:root{
  --brand-pink:#F81039; --brand-coral:#FF4D4F; --brand-orange:#FF9A3C; --navy:#152238;
  --brand-grad:linear-gradient(120deg,#F81039 0%,#FF4D4F 42%,#FF9A3C 100%);
  --brand-grad-soft:linear-gradient(120deg,#FFE3E7 0%,#FFEDE2 100%);
  --bg:#FFF9F6; --bg-2:#FFF0EA; --card:#FFFFFF; --line:#F3E3DC;
  --ink:#152238; --ink-2:#3A4459; --muted:#6B7385;
  --sage:#EE2A4D; --sage-2:#FF7A3D; --sage-soft:#FFE9E4;
  /* soft card tints: light navy and warm peach only (no pink or lilac) */
  --p-mint:#FFEFE4; --p-butter:#FFF3DF; --p-sky:#E8EEF8; --p-peach:#FFEADB; --p-rose:#EAEFF7; --p-lilac:#E6ECF6;
  --serif:"Outfit","Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(21,34,56,.05),0 16px 36px -20px rgba(21,34,56,.25);
  --shadow-lg:0 40px 80px -36px rgba(238,42,77,.30);
}
body{background:var(--bg);color:var(--ink)}
::selection{background:#FFD3DB;color:var(--navy)}
/* headings: rounded geometric, like the wordmark */
h1,h2,h3,.page-title{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
h1 em,h2 em,h3 em,h1 i,h2 i{font-style:normal;color:#E8264B}
/* logo */
.brand,.sf-logo{display:inline-flex;align-items:center;line-height:0}
.brand img,.sf-logo img{height:30px;width:auto;display:block}
.sf-logo img{height:34px}
/* buttons */
.pill.sage,.gbtn,.btn.pri{background:var(--brand-grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 12px 26px -14px rgba(248,16,57,.7)}
.pill.sage:hover,.gbtn:hover,.btn.pri:hover{filter:brightness(1.05) saturate(1.05);transform:translateY(-1px)}
.pill.dark{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.pill.line:hover{border-color:var(--sage)!important;color:var(--sage)!important}
/* top banner, labels, highlights */
.bar{background:var(--brand-grad)!important;color:#fff}
.bar a{color:#fff}
.kicker,.lg-kick,.lab{color:var(--sage)!important}
.lg-kick::before{background:var(--brand-grad)!important}
.badge{background:var(--brand-grad)!important;color:#fff!important}
.plan.pop{border-color:transparent!important;box-shadow:0 0 0 2px #FF6B57,var(--shadow-lg)!important}
.plan .amt b{color:var(--navy)}
a{accent-color:var(--sage)}
input:focus,select:focus,textarea:focus,.input:focus{border-color:#FF6B57!important;box-shadow:0 0 0 3px rgba(255,107,87,.18)!important;outline:none}
/* shop & account */
.acc-tabs a.on{background:var(--brand-grad)!important}
.meter span{background:var(--brand-grad)!important}
.flash{background:#FFEDE8!important;color:#C21B3C!important}
.n,.ig-n,.ns .n{background:var(--brand-grad)!important;color:#fff!important}
.keybox{border-color:#FFB7A8!important;background:#FFF6F3!important}
.keybox .key{color:var(--navy)}
.lost-link .lucide,.lost-link svg,.help-q summary>.lucide:first-child,.help-q summary>svg:first-child,.ac-top>.lucide,.ac-top>svg{color:var(--sage)!important}
/* footer */
.sfoot{background:#fff;border-top:1px solid var(--line)}
.sf-col a:hover{color:var(--sage)}
.sf-social a:hover{color:var(--sage);border-color:var(--sage)}

/* header: Log in / My account button (landing + inner pages) */
.acct-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 13px;border-radius:999px;border:1.5px solid #152238;background:#fff;color:#152238;font:600 14px "Outfit",var(--sans,system-ui),sans-serif;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.acct-btn .lucide,.acct-btn svg{width:18px;height:18px;stroke-width:2.2}
.acct-btn:hover,.acct-btn:focus-visible{background:#152238;color:#fff}
.top .acct-btn{margin-left:4px}
@media (max-width:720px){
  .acct-btn{width:40px;height:40px;padding:0;justify-content:center}
  .acct-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:480px){
  .nav .brand img,.top .brand img{height:22px}
  .nav .wrap,.top .wrap{gap:8px}
  .nav .nav-cta{gap:6px}
  .nav .lang button,.top .lang a{padding:0 7px}
  .nav .menu-btn{width:40px;height:40px}
}
@media (max-width:374px){
  .nav .brand img,.top .brand img{height:19px}
  .nav .lang button,.top .lang a{padding:0 5px}
  .nav .wrap,.top .wrap{gap:6px}
}
@media (max-width:340px){ .nav .brand img,.top .brand img{height:16px} .nav .nav-cta{gap:4px} .nav .lang button,.top .lang a{padding:0 4px;font-size:12px} }

/* header icons: cart + profile — identical on every page */
.hdr-acts{display:flex;align-items:center;gap:8px;flex:none}
.hdr-ic{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1.5px solid #E5DCD2;background:#fff;color:#141A2A;text-decoration:none;transition:border-color .15s,background .15s}
.hdr-ic:hover{border-color:#141A2A}.hdr-ic svg{width:20px;height:20px;stroke-width:2}
.hdr-ic b{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:linear-gradient(135deg,#F81039,#FF8A3D);color:#fff;font:700 11px/19px Outfit,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.hdr-ic b[hidden]{display:none}
.hdr-login{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:#141A2A;color:#fff;font:600 14.5px Outfit,system-ui,sans-serif;text-decoration:none;transition:background .15s}.hdr-login:hover{background:#000}