/* Tinnitus Sounds — shared styles for the marketing and account pages.
   Light and clean by default: paper-white ground, navy text, Quality Estimates blue for highlights
   and a deeper QE green on action buttons (white text passes 4.5:1). Dark mode only when the
   viewer's device asks for it. The tool (app.html) carries the same tokens inline. */
:root{
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#F8FAFD; --sunk:#EEF3F9; --line:#DBE4F0; --fg:#14202F; --muted:#5C6B80;
  --accent:#1E5AA8; --accent-2:#14406E; --accent-ink:#FFFFFF; --accent-soft:rgba(30,90,168,.08); --glow:rgba(30,90,168,.10);
  --go:#2E7D23; --go-2:#36842A; --go-ink:#FFFFFF; --go-soft:rgba(46,125,35,.12);
  --amber:#B9790A; --right:#C23B3B; --left:#1E5AA8; --warn:#8A5A06; --warn-bg:#FFF8E6;
  --lift:0 20px 50px rgba(20,32,47,.10), 0 2px 6px rgba(20,32,47,.05);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#0E1622; --surface:#141F2E; --surface-2:#16263A; --sunk:#0C1A2B; --line:rgba(199,213,232,.12); --fg:#E6EDF6; --muted:#93A4BC;
  --accent:#4D8FD6; --accent-2:#9DB6D4; --accent-ink:#FFFFFF; --accent-soft:rgba(77,143,214,.14); --glow:rgba(30,90,168,.30);
  --go:#2E7D23; --go-2:#36842A; --go-ink:#FFFFFF; --go-soft:rgba(54,132,42,.20);
  --amber:#E0A43A; --right:#F07A6A; --left:#7FB0F0; --warn:#E0A43A; --warn-bg:rgba(224,164,58,.10);
  --lift:0 40px 100px rgba(0,0,0,.35); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body);
  background-image:radial-gradient(1200px 500px at 78% -10%, var(--glow), transparent 60%);background-repeat:no-repeat}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}

/* glass nav */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px}
.bar .wrap{display:flex;justify-content:center}
.bar .shell{flex:1;max-width:1160px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb, var(--bg) 70%, transparent);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--fg);text-decoration:none;letter-spacing:-.02em}
.brand img{width:28px;height:28px;border-radius:8px}
.bar nav{display:flex;align-items:center;gap:6px;font-size:15px}
.bar nav a.lnk{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px}
.bar nav a.lnk:hover{color:var(--fg);background:var(--accent-soft)}
@media (max-width:700px){.bar nav .lnk{display:none}}
.brand,.bar .btn{white-space:nowrap}
@media (max-width:400px){.bar .shell{padding-left:12px}.brand{font-size:16px;gap:8px}.brand img{width:24px;height:24px}.bar .btn.small{padding:8px 12px;font-size:14px}}

.btn{font:inherit;font-weight:700;border:1px solid var(--line);background:color-mix(in srgb, var(--fg) 5%, var(--surface));color:var(--fg);padding:13px 22px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2;transition:transform .12s, box-shadow .2s, border-color .2s}
.btn:hover{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg, var(--go-2), var(--go));border-color:transparent;color:var(--go-ink);box-shadow:0 10px 28px var(--go-soft)}
.btn.primary:hover{box-shadow:0 12px 36px color-mix(in srgb, var(--go) 45%, transparent)}
.btn.small{padding:9px 16px;font-size:15px}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.buy-note{font-size:14px;color:var(--warn);margin-top:8px}
.is-pro .free-only{display:none!important}
html:not(.is-pro) .pro-only{display:none!important}
html:not(.has-trial) .trial-only{display:none!important}
.has-trial .no-trial{display:none!important}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:56ch}
section{padding-block:96px}
@media (max-width:640px){section{padding-block:60px}}
.sec-head{display:grid;gap:14px;margin-bottom:40px;max-width:66ch}
.sec-head h2{font-size:clamp(32px,4.6vw,54px);font-weight:800;line-height:1.02;letter-spacing:-.035em}

/* simple content pages */
.page{max-width:720px;margin:0 auto;padding-inline:24px;padding-block:48px 96px;display:grid;gap:18px}
@media (max-width:520px){.page{padding-inline:16px}}
.page h1{font-size:clamp(34px,5.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.page h2{font-size:22px;margin-top:14px}
.page ul{margin:0;padding-left:22px;display:grid;gap:6px}
.page p,.page li{color:color-mix(in srgb, var(--fg) 86%, var(--muted))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
input[type=email],input[type=text]{font:inherit;color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
input[type=email]:focus,input[type=text]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.msg{font-size:15px;border-radius:14px;padding:12px 16px;background:var(--accent-soft)}
.msg.err{background:var(--warn-bg)}
.muted{color:var(--muted)}

/* guide articles */
.article{max-width:760px;margin:0 auto;padding-inline:24px;padding-block:40px 88px}
@media (max-width:520px){.article{padding-inline:16px;padding-block:24px 64px}}
.crumbs{font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent)}
.article h1{font-size:clamp(34px,5.6vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin-bottom:16px}
.article .meta{color:var(--muted);font-size:14.5px;margin-bottom:28px}
.article .lede{margin-bottom:8px}
.article h2{font-size:clamp(24px,3.2vw,30px);font-weight:700;letter-spacing:-.025em;margin:44px 0 12px}
.article h3{font-size:20px;font-weight:700;margin:28px 0 8px}
.article p,.article li{font-size:18px;line-height:1.72;max-width:68ch;color:color-mix(in srgb, var(--fg) 90%, var(--muted))}
.article p + p{margin-top:14px}
.article ul,.article ol{padding-left:24px;display:grid;gap:8px;margin:12px 0}
.article ol.steps li::marker{font-family:var(--mono);color:var(--accent);font-weight:500}
.article strong{color:var(--fg)}
.callout{border:1px solid var(--line);background:var(--accent-soft);border-radius:18px;padding:18px 20px;margin:24px 0}
.callout p{margin:0}
.callout.warn{background:var(--warn-bg);border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.ctabox{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:24px;margin:36px 0;display:grid;gap:14px;justify-items:start;box-shadow:var(--lift)}
.ctabox h3{margin:0}
.toc{border:1px solid var(--line);border-radius:18px;padding:16px 20px;background:var(--surface);margin:8px 0 8px}
.toc p{font-family:var(--mono);font-size:13px;color:var(--muted);margin:0 0 6px}
.toc ol{margin:0;gap:4px}.toc li{font-size:16px}.toc a{text-decoration:none}
.sources{margin-top:48px;border-top:1px solid var(--line);padding-top:20px}
.sources li{font-size:15px;line-height:1.55}
.sources h2{font-size:20px;margin-top:0}
table.simple{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
table.simple th,table.simple td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.simple th{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-weight:500}
.tablewrap{overflow-x:auto}
.guidegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.guidecard{display:grid;gap:8px;align-content:start;border:1px solid var(--line);border-radius:22px;padding:22px;background:var(--surface);text-decoration:none;color:var(--fg);transition:border-color .2s, transform .2s}
.guidecard:hover{border-color:color-mix(in srgb, var(--accent) 45%, transparent);transform:translateY(-2px)}
.guidecard h2{font-size:22px;margin:0;letter-spacing:-.02em}
.guidecard p{color:var(--muted);font-size:16px}
.guidecard span{font-family:var(--mono);font-size:13px;color:var(--accent)}
@media (prefers-reduced-motion: reduce){.guidecard{transition:none}.guidecard:hover{transform:none}}

footer{border-top:1px solid var(--line);padding-block:40px 56px;font-size:14.5px;color:var(--muted)}
footer .wrap{display:grid;gap:16px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--fg)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn,.btn .arr{transition:none}.btn:active{transform:none}}