/* I Hear You website. Palette and type follow DESIGN.md ("The Sealed Meter"). */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/barlow_regular.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow_semibold.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow_bold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow_condensed_semibold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow_condensed_bold.ttf) format("truetype")}

:root{
  --ground:#E4E7DB;--plate:#EDEFE5;--plate-alt:#DFE2D5;--recess:#D2D6C7;
  --ink:#14170F;--ink-muted:#4C5247;--rule:#B0B6A6;--rule-strong:#8C9383;
  --seal:#B23A1E;--on-seal:#F7F4E7;--live:#256B45;
  --band:#14170F;--on-band:#EDEFE5;--on-band-muted:#C3C8B8;
  --shot-rule:#B0B6A6;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#15180F;--plate:#1C2016;--plate-alt:#222719;--recess:#0F120B;
    --ink:#ECE9DA;--ink-muted:#A9AE9F;--rule:#3B4134;--rule-strong:#59604E;
    --seal:#E8633F;--on-seal:#15180F;--live:#74C596;
    --band:#ECE9DA;--on-band:#15180F;--on-band-muted:#3B4134;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.5 "Barlow",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--seal);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:10}
.skip:focus{left:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

/* header */
.top{border-bottom:1px solid var(--rule-strong)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:12px;padding-bottom:12px}
.wordmark{font:700 22px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;margin-right:auto}
.nav{display:flex;flex-wrap:wrap;gap:4px 16px;font:600 11px/1 "Barlow",sans-serif;letter-spacing:.13em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink-muted);padding:10px 0}
.nav a:hover{color:var(--ink);text-decoration:underline}
.lang{display:flex;gap:0;font:600 11px/1 "Barlow",sans-serif;letter-spacing:.13em}
.lang a,.lang span{padding:11px 10px;border:1px solid var(--rule-strong);margin-left:-1px;text-decoration:none;min-width:44px;text-align:center;background:var(--plate)}
.lang span{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.lang a:hover{background:var(--plate-alt)}

/* label, stamp, keys */
.label{font:600 11px/1.4 "Barlow",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.stamp{display:inline-block;border:2px solid var(--seal);color:var(--seal);font:600 11px/1 "Barlow",sans-serif;letter-spacing:.13em;text-transform:uppercase;padding:6px 9px;border-radius:2px}
.key{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:var(--plate);color:var(--ink);border:1px solid var(--rule-strong);border-bottom:3px solid var(--rule-strong);border-radius:2px;font:600 14px/1.2 "Barlow",sans-serif;text-decoration:none;text-align:center}
.key:hover{background:var(--plate-alt);text-decoration:none}
.key:active{transform:translateY(2px);border-bottom-width:1px}
.key.primary{background:var(--seal);color:var(--on-seal);border-color:var(--seal);border-bottom-color:#7c2812}
.key.primary:hover{filter:brightness(1.06)}
.key.off{opacity:.62;pointer-events:none;border-style:dashed}
.keys{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{padding:32px 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.hero h1{font:700 clamp(40px,9vw,68px)/1 "Barlow Condensed",sans-serif;margin:14px 0 16px;text-wrap:balance}
.lead{font-size:19px;max-width:34em;margin:0 0 24px}
.shot{border:1px solid var(--rule-strong);border-radius:4px;background:var(--plate);padding:8px;max-width:300px;width:100%;margin:0 auto}
.shot img{border-radius:2px}
.shot-cap{margin-top:8px}
@media(min-width:780px){
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
  .shot{margin:0 0 0 auto}
}

/* notice */
.notice{border:1px solid var(--rule-strong);background:var(--plate-alt);padding:16px;margin:0 0 0;font-size:16px}
.notice strong{font-weight:700}
.notice-wrap{padding:0 0 8px}

/* sections */
section{padding:48px 0;border-top:1px solid var(--rule)}
h2{font:700 clamp(30px,6vw,44px)/1.05 "Barlow Condensed",sans-serif;margin:8px 0 16px;text-wrap:balance}
h3{font:600 18px/1.25 "Barlow",sans-serif;margin:0 0 6px}
p{margin:0 0 14px;max-width:40em}
.intro{font-size:18px;max-width:40em}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
@media(min-width:640px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plate{position:relative;border:1px solid var(--rule-strong);background:var(--plate);border-radius:2px;padding:24px 14px 14px}
.plate>.label{position:absolute;top:-7px;left:10px;background:var(--plate);padding:0 6px;line-height:14px}
.plate p:last-child{margin-bottom:0}
.plate p{max-width:none}

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@media(min-width:780px){.split{grid-template-columns:minmax(0,1fr) 300px}.split.rev{grid-template-columns:300px minmax(0,1fr)}.split.rev .shot{order:-1}}
.split .shot{margin:0}

.rows{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rows .num{grid-row:span 2;min-width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--recess);border:1px solid var(--rule);border-radius:2px;font:700 34px/1 "Barlow Condensed",sans-serif;font-feature-settings:"tnum"}
.rows p{margin:0;max-width:36em}
.rows h3{margin:0}
.gestures{display:grid;gap:8px;margin:20px 0;padding:0;list-style:none}
@media(min-width:560px){.gestures{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gestures li{border:1px solid var(--rule-strong);background:var(--plate);padding:10px 12px;border-radius:2px}
.gestures b{display:block;font-weight:600;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:8px 0 0;padding:0}
.chips li{background:var(--plate-alt);border:1px solid var(--rule);padding:5px 10px;font-size:15px;border-radius:2px}
.dest{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.dest li{border-left:3px solid var(--rule-strong);padding:2px 0 2px 12px}
.dest b{font-weight:600}

/* OSTT band */
.band{background:var(--band);color:var(--on-band);border-top:0;border-bottom:0}
.band h2{color:var(--on-band)}
.band .label{color:var(--on-band-muted)}
.band p{font-size:18px}
.band .key{background:var(--on-band);color:var(--band);border-color:var(--on-band);border-bottom-color:var(--on-band-muted)}
.band .key:hover{background:var(--plate-alt)}
.band .stamp{border-color:var(--on-band);color:var(--on-band)}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:780px){.band-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center}}
.band ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--on-band-muted)}
.band li{padding:10px 0;border-bottom:1px solid var(--on-band-muted);font-size:16px}

/* get */
.get-note{color:var(--ink-muted);font-size:15px}
.dl{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
@media(min-width:640px){.dl{grid-template-columns:repeat(2,minmax(0,1fr))}}

footer{border-top:1px solid var(--rule-strong);padding:32px 0 48px;font-size:15px;color:var(--ink-muted)}
footer p{max-width:46em}
footer a{color:var(--ink)}
.tick{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--live);margin-right:8px;vertical-align:middle}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.key:active{transform:none}}

/* hearing aids, install, pairing, support */
@media(min-width:860px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plate .key{margin-top:6px}
.plate.pick{border-color:var(--seal);border-width:2px}
.fine{color:var(--ink-muted);font-size:14px;margin-top:20px}
.fine code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--ink)}
.qr{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:24px 0 0;padding:0}
.qr li{border:1px solid var(--rule-strong);background:var(--plate);border-radius:2px;padding:8px;width:218px}
.qr img{width:200px;height:200px;background:#fff;border-radius:2px}
.qr b{display:block;font-weight:600;font-size:15px;margin-top:8px}
.qr a{font-size:14px}