@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bitter:opsz,wght@8..144,600;8..144,700&display=swap');

/* Polar Beacon Tools v15 — quiet utility studio */
:root{
  --bg:#101521;
  --bg2:#121925;
  --panel:#171e2b;
  --panel2:#1c2534;
  --line:#2c3749;
  --text:#f5f1e8;
  --muted:#b9c1cc;
  --accent:#f0c84b;
  --accent2:#77b7cf;
  --accent3:#d18da2;
  --good:#70c99b;
  --bad:#e58a93;
  --shadow:0 10px 28px rgba(0,0,0,.2);
  --radius:14px;
  --radius-sm:9px;
  --body-font:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --display-font:"Bitter",Georgia,serif;
}

html{color-scheme:dark;scroll-behavior:smooth}
body{
  font-family:var(--body-font)!important;
  background:var(--bg)!important;
  color:var(--text);
  line-height:1.45;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.6;
  background:
    radial-gradient(circle at 12% -10%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 24%);
  mask-image:none;
}
body[data-suite-mood="focus"]{--bg:#0d1821;--bg2:#101e29;--panel:#15222d;--panel2:#1a2935;--accent:#9bd8bd;--accent2:#78b5d5}
body[data-suite-mood="calm"]{--bg:#101923;--bg2:#15212c;--panel:#182630;--panel2:#1e2d38;--accent:#c5d98e;--accent2:#83c5b9}
body[data-suite-mood="bright"]{--bg:#19151d;--bg2:#211923;--panel:#251d27;--panel2:#2c2330;--accent:#f1c84b;--accent2:#d9a2ad}
body[data-suite-mood="night"]{--bg:#090d14;--bg2:#0d121b;--panel:#121925;--panel2:#17202e;--accent:#93cdb8;--accent2:#8d9ed0}

h1,h2,h3,h4,.home-hero h1,.hero h1,.calc-hero h1,.track-hero h1,.draw-hero h1,.challenge-hero h1,
.suite-brand-copy,.tool-card h2,.modal-card h2{
  font-family:var(--display-font)!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
}
button,input,textarea,select,.suite-pill,.suite-menu-item{font-family:var(--body-font)!important}

/* Deliberate scale: pages should reveal the tool quickly. */
.hero,.calc-hero,.track-hero,.draw-hero,.challenge-hero,.account-hero,.pricing-hero{padding:18px 0 22px!important;text-align:left!important}
.hero h1,.calc-hero h1,.track-hero h1,.draw-hero h1,.challenge-hero h1,.account-hero h1,.pricing-hero h1{
  font-size:clamp(2.2rem,5vw,4.25rem)!important;
  line-height:1!important;
  max-width:860px;
  margin:0!important;
}
.hero p,.calc-hero p,.track-hero p,.draw-hero p,.challenge-hero p,.account-hero p,.pricing-hero p{
  max-width:620px!important;
  margin:10px 0 0!important;
  font-size:1rem!important;
  line-height:1.45!important;
}
.eyebrow{
  font-family:var(--body-font)!important;
  text-transform:none!important;
  letter-spacing:.015em!important;
  font-size:.76rem!important;
  color:var(--muted)!important;
  font-weight:700!important;
}
.section-title{margin:22px 0 10px!important}
.section-title h2{font-size:clamp(1.35rem,3vw,1.85rem)!important;letter-spacing:-.025em!important;margin:0!important}
.section-title p{margin:5px 0 0!important;line-height:1.4!important;max-width:600px!important}

.card{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;backdrop-filter:none!important}
.panel,.account-card,.story-card,.pricing-card{padding:18px!important}
.soft-card,.route-card,.smart-card,.progress-card,.feature-list div,.confidence-strip div,.result-panel,.calc-step,.history-entry,
.pin-option,.note-card-actions button,.tracker-actions button,.pack-library-card{
  border-radius:var(--radius-sm)!important;
}
.btn,.suite-pill,.suite-back-link,.mission-back,.tab,.chip{
  border-radius:var(--radius-sm)!important;
}
.btn{padding:9px 13px!important;font-weight:700!important}
.btn-primary,.key.equals{
  background:var(--accent)!important;
  color:#241f10!important;
  border:1px solid color-mix(in srgb,var(--accent) 70%,#fff)!important;
  box-shadow:none!important;
}
.btn-secondary,.suite-pill,.btn-quiet{
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
button:hover,.btn:hover,.suite-pill:hover{filter:brightness(1.08)!important;transform:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 70%,white)!important;
  outline-offset:2px!important;
}
.field{background:#0f1622!important;border-color:var(--line)!important;border-radius:var(--radius-sm)!important}

/* Header and menus */
.suite-header-wrap{padding-top:14px!important}
.suite-topbar{margin-bottom:12px!important}
.suite-brand{gap:8px!important}
.suite-brand-mark{width:32px!important;height:32px!important;border-radius:8px!important;background:#202938!important;border-color:#3a4659!important}
.suite-brand-copy{font-size:.98rem!important}
.suite-brand-copy strong{color:var(--accent)!important}
.suite-brand-app{font-family:var(--body-font)!important;font-size:.76rem!important;color:var(--muted)!important}
.suite-actions{gap:6px!important}
.suite-pill{min-height:38px!important;padding:8px 11px!important;font-size:.82rem!important}
.suite-menu-panel{background:#141b27!important;border-color:#354154!important;border-radius:12px!important;box-shadow:0 18px 45px rgba(0,0,0,.38)!important;padding:7px!important}
.suite-menu-item{border-radius:8px!important;padding:9px 10px!important;font-size:.86rem!important}
.suite-menu-item-copy small{font-size:.73rem!important;color:var(--muted)!important}
.suite-menu-item-icon{display:grid!important;place-items:center!important;width:22px!important;color:var(--muted)!important}
.suite-menu-item-icon svg,.suite-brand-mark svg,.suite-notification-bell svg{width:18px;height:18px;display:block}
.suite-menu-item.current .suite-menu-item-icon{color:var(--accent)!important}
.suite-account-summary{border-radius:9px!important;background:#1b2433!important}
.suite-plus-pill[data-plan="free"]{background:#282413!important;color:#f4d56c!important;border-color:#5c5129!important}
.suite-plus-pill[data-plan="plus"]{background:var(--accent)!important;color:#241f10!important}

/* Notification center */
.suite-notification-menu[hidden]{display:none!important}
.suite-notification-bell{position:relative;width:40px;padding:0!important;flex:none}
.suite-notification-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#231f11;border:2px solid var(--bg);font-size:.66rem;line-height:14px;font-weight:700;display:grid;place-items:center}
.suite-notification-badge[hidden]{display:none!important}
.suite-notification-panel{width:min(380px,94vw)!important;max-height:min(75vh,620px)!important}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 10px;border-bottom:1px solid var(--line)}
.notification-panel-head b{font-family:var(--display-font);font-size:1rem}.notification-panel-head button{background:transparent;color:var(--muted);font-size:.76rem;padding:5px}
.notification-list{display:grid;gap:4px;padding-top:4px}
.notification-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;padding:10px;border-radius:9px;text-decoration:none;color:var(--text);border:1px solid transparent}
.notification-item:hover{background:var(--panel2)}
.notification-item.unread{background:#1d2735;border-color:#354458}
.notification-item-icon{width:30px;height:30px;border-radius:8px;background:#222d3d;display:grid;place-items:center;color:var(--accent);font-size:.9rem}
.notification-item b{display:block;font-size:.87rem}.notification-item span{display:block;color:var(--muted);font-size:.75rem;line-height:1.35;margin-top:2px}.notification-item time{display:block;color:#8994a4;font-size:.67rem;margin-top:4px}
.notification-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:.84rem}
.notification-panel-footer{display:flex;justify-content:space-between;gap:8px;padding:9px 8px 3px;border-top:1px solid var(--line);margin-top:5px}.notification-panel-footer a{font-size:.76rem;color:var(--muted)}
.notifications-page{width:min(900px,94vw);margin:auto;padding:20px 0 60px}.notifications-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px}.notification-page-list{display:grid;gap:8px}.notification-page-list .notification-item{background:var(--panel);border-color:var(--line);padding:14px}.notification-settings{padding:17px;position:sticky;top:12px;height:max-content}.notification-setting{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.notification-setting:last-child{border-bottom:0}.notification-setting input{margin-top:3px;accent-color:var(--accent)}.notification-setting b,.notification-setting small{display:block}.notification-setting small{color:var(--muted);margin-top:2px}

/* Help */
.pb-help{border-radius:6px!important;background:#202938!important;border-color:#455266!important;color:var(--muted)!important;font-family:var(--body-font)!important}
.pb-help-popover{background:#151d29!important;border-color:#3d4a5e!important;border-radius:10px!important}
.pb-help-more{display:inline-flex;margin-top:10px;color:var(--accent);font-weight:700;text-decoration:none}
.learn-shell{width:min(880px,94vw);margin:auto;padding:20px 0 60px}.learn-index{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 26px}.learn-section{padding:20px;margin:12px 0;scroll-margin-top:20px}.learn-section h2{margin:0 0 8px}.learn-section p,.learn-section li{color:var(--muted);line-height:1.55}.learn-section ul{padding-left:20px}

/* Homepage */
.home-shell{width:min(1120px,94vw)!important;margin:auto!important;padding:18px 0 54px!important}
.home-hero{padding:clamp(30px,6vw,65px) 0 26px!important;text-align:left!important}
.home-hero h1{font-size:clamp(2.7rem,7vw,4.8rem)!important;line-height:.95!important;letter-spacing:-.045em!important;max-width:820px!important}
.home-hero p{margin:12px 0 0!important;max-width:520px!important;font-size:1.1rem!important;line-height:1.4!important}
.home-tools-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:8px 0 12px}
.home-tools-head h2{margin:0;font-size:1.45rem}.home-tools-head p{margin:3px 0 0;color:var(--muted)}
.tool-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important}
.tool-card{display:flex!important;flex-direction:column!important;position:relative!important;min-width:0!important;min-height:190px!important;padding:18px!important;box-shadow:none!important;text-decoration:none!important;color:var(--text)!important;overflow:hidden!important}
.tool-card:hover{border-color:#4a586d!important;background:var(--panel2)!important}
.tool-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#202a39;color:var(--accent);font-size:0!important}
.tool-icon svg{width:22px;height:22px}
.tool-card h2{font-size:1.35rem!important;margin:13px 0 5px!important}
.tool-card p{font-size:.9rem!important;line-height:1.4!important;margin:0 0 14px!important}
.tool-card .tool-action{margin-top:auto!important;font-size:.83rem!important;color:var(--accent)!important;font-weight:700!important}
.home-more{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:24px;padding:17px}.home-more p{margin:0;color:var(--muted)}
.site-footer{display:flex!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important;border-top:1px solid var(--line);margin-top:28px;padding:20px 2px 0!important;color:var(--muted)!important;font-size:.82rem!important}.site-footer nav{display:flex!important;gap:12px!important;flex-wrap:wrap!important}.site-footer a{color:var(--muted)!important}

/* Reduce visual noise across existing app layouts. */
.compact-utility-hero{padding:17px!important}
.compact-utility-hero h2{font-size:clamp(1.5rem,4vw,2.35rem)!important;line-height:1.08!important;margin:0 0 6px!important}
.compact-utility-hero p{font-size:.9rem!important;line-height:1.4!important}
.route-grid{gap:8px!important}.route-card{padding:12px!important}.route-card span:last-child{font-size:.73rem!important}
.side-nav{padding:9px!important}.side-nav button,.side-nav a{padding:10px!important;border-radius:8px!important}.side-nav .nav-copy small{font-size:.7rem!important}
.smart-card{min-height:154px!important;padding:14px!important;border-radius:11px!important}.smart-card h3{margin:8px 0 4px!important}.smart-card p{font-size:.8rem!important}.smart-card .smart-category{bottom:10px!important;left:13px!important}
.pack-library-grid,.mission-grid{gap:9px!important}.pack-library-card,.mission-card{box-shadow:none!important}
.modal-card,.pb-tutorial-card{border-radius:13px!important;background:#161e2b!important}
.pb-tutorial-visual{min-height:88px!important}.pb-tutorial-icon{font-size:2.35rem!important}.pb-tutorial-body{padding:18px!important}.pb-tutorial-body h2{font-size:1.7rem!important}.pb-tutorial-body p{line-height:1.4!important}.pb-tutorial-list{gap:6px!important}.pb-tutorial-list div{padding:8px 10px!important;border-radius:8px!important}
.pb-toast{border-radius:10px!important;background:#151d29!important}
.mini-calculator{border-radius:10px!important}

/* Status labels stay useful, not decorative. */
.beta-badge,.pack-state,.tool-badge{border-radius:6px!important;text-transform:none!important;letter-spacing:0!important}
.release-status{display:inline-flex;padding:4px 7px;border-radius:6px;border:1px solid var(--line);font-size:.68rem;font-weight:700;color:var(--muted)}
.release-status.available{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))}.release-status.seasonal{color:var(--accent);border-color:#5a4f28}.release-status.coming{color:var(--accent2);border-color:#345366}.release-status.archived{color:#9aa3af}

@media(max-width:900px){
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .notifications-grid{grid-template-columns:1fr}.notification-settings{position:static}
}
@media(max-width:700px){
  .suite-header-wrap{width:min(96vw,1180px)!important}.suite-actions{gap:5px!important}.suite-pill{padding:8px 9px!important}.suite-notification-panel{position:fixed!important;left:3vw!important;right:3vw!important;top:62px!important;width:auto!important}
  .home-hero{padding-top:28px!important}.tool-card{min-height:170px!important}
}
@media(max-width:560px){
  .suite-plus-pill .suite-pill-label-wide{display:inline!important}.suite-plus-pill svg{display:none!important}
  .tool-grid{grid-template-columns:1fr!important}.home-tools-head{align-items:flex-start;flex-direction:column}.home-hero h1{font-size:clamp(2.65rem,14vw,4.2rem)!important}
  .suite-brand-app{display:none!important}.suite-pill-label-wide{display:none!important}.suite-notification-bell{width:38px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pb-toast,.beacon-glow,*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
