/* ============================================================
   D&D Audio Mixer — shared stylesheet for every page.
   Edit design here ONCE and it changes site-wide.
   ============================================================ */

/* ============================================================
   D&D Audio Mixer — landing page
   Design system mirrored from the app itself:
   dark charcoal, candlelight gold, warm old-style serif, Apple-clean.
   ============================================================ */

:root{
  --bg:#141518;
  --bg-2:#17181c;
  --bg-raise:#1a1c20;
  --card:#1e2126;
  --card-hover:#23262c;
  --field:#24272d;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);
  --text:#ebebef;
  --text-2:#a7a9b1;
  --text-3:#71737c;
  --accent:#c9a55f;
  --accent-bright:#e0bd77;
  --accent-ink:#221806;
  --danger:#e5675f;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-float:0 4px 12px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.5);
  --radius:14px;
  --serif:"Iowan Old Style","Palatino","Book Antiqua","Newsreader",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,sans-serif;
  --ease-out:cubic-bezier(.22,.9,.32,1);
  --wrap:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font:400 16px/1.6 var(--sans);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent; /* no grey mobile tap flash */
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Ambient candlelight glow behind the whole page */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 620px at 78% -6%, rgba(201,165,95,.14), transparent 62%),
    radial-gradient(760px 560px at 8% 4%, rgba(201,165,95,.07), transparent 60%),
    var(--bg);
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.serif{font-family:var(--serif)}

/* ---------- Top nav ---------- */
#nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 26px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.brand .name{font-size:15.5px;font-weight:600;letter-spacing:.01em}
.brand .name em{font-style:normal;font-weight:400;color:var(--text-2)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  padding:8px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-2);
  transition:background 140ms var(--ease-out),color 140ms var(--ease-out);
}
.nav-links a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav-links a.nav-cta{
  background:var(--accent);color:var(--accent-ink);font-weight:600;
}
.nav-links a.nav-cta:hover{background:var(--accent-bright);color:var(--accent-ink)}
.nav-links .only-wide{display:inline-flex}
@media (max-width:720px){ .nav-links .only-wide{display:none} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;border-radius:12px;
  font-size:15.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);
  transition:background 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 120ms ease-out,box-shadow 150ms var(--ease-out);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{background:rgba(255,255,255,.1);border-color:var(--line-strong)}
.btn:active{transform:scale(.975)}
.btn.primary{
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  border-color:transparent;color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px rgba(201,165,95,.28);
}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 40px rgba(201,165,95,.38)}
.btn.small{height:44px;padding:0 18px;font-size:14.5px;border-radius:10px}
.btn .sub{font-weight:500;opacity:.72;font-size:12.5px}

/* ---------- Hero ---------- */
#hero{padding:78px 0 40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.15fr);gap:56px;align-items:center}
.hero-grid>*{min-width:0}
.hero-copy .eyebrow{margin-bottom:18px}
.hero-copy h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(40px,5.4vw,62px);line-height:1.03;letter-spacing:-.015em;
  margin-bottom:22px;
}
.hero-copy h1 .glow{color:var(--accent-bright)}
.hero-copy .lede{font-size:19px;line-height:1.55;color:var(--text-2);max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.reassure{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;
  font-size:13.5px;color:var(--text-3);
}
.reassure span{display:inline-flex;align-items:center;gap:7px}
.reassure svg{width:15px;height:15px;color:var(--accent);flex:none}


/* ---------- App window mockup ---------- */
.mock-wrap{position:relative}
.mock-wrap::after{ /* soft glow under the window */
  content:"";position:absolute;inset:auto 6% -26px 6%;height:60px;
  background:radial-gradient(60% 100% at 50% 0,rgba(201,165,95,.22),transparent 70%);
  filter:blur(14px);z-index:-1;
}
.win{
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--bg);
  box-shadow:var(--shadow-float);
}
.win-bar{
  height:46px;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.traffic{display:flex;gap:8px}
.traffic i{width:12px;height:12px;border-radius:50%;display:block}
.traffic .r{background:#ff5f57}.traffic .y{background:#febc2e}.traffic .g{background:#28c840}
.win-bar .wm{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.win-bar .wm svg{width:16px;height:16px;color:var(--accent)}
.win-bar .wm em{font-style:normal;font-weight:400;color:var(--text-2)}
.win-bar .spacer{flex:1}
.win-bar .pill{font-size:11.5px;color:var(--text-3);border:1px solid var(--line);padding:3px 9px;border-radius:999px}

.win-body{padding:20px 20px 18px;background:
  radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.03), transparent 60%);}
.win-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.win-tabs .t{padding:7px 12px 11px;font-size:12.5px;font-weight:500;color:var(--text-3);position:relative}
.win-tabs .t.on{color:var(--text)}
.win-tabs .t.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.win-title{
  font-family:var(--serif);font-size:20px;font-weight:600;text-align:center;
  margin:2px 0 18px;letter-spacing:-.01em;
}

.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.scene{
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.scene .sc-head{display:flex;align-items:center;gap:8px;padding:9px 9px 8px 10px}
.scene .num{
  width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:11px;font-weight:600;color:var(--text-2);
}
.scene .sc-name{flex:1;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .sc-media{position:relative;aspect-ratio:16/9.4;margin:0 9px;border-radius:8px;overflow:hidden;background:#17181c;border:1px solid rgba(255,255,255,.05)}
.scene .sc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.scene .sc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,16,19,.34))}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.play .pb{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text);background:rgba(18,19,22,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.play .pb svg{width:15px;height:15px}
.scene .sc-layers{font-size:10.5px;color:var(--text-3);font-weight:500;padding:7px 10px 9px}
/* playing state */
.scene.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.scene.on{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 0 28px rgba(201,165,95,.15)}
.scene.on .pb{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:11px}
.eq i{width:3px;border-radius:2px;background:var(--accent);animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:55%;animation-delay:-.2s}
.eq i:nth-child(2){height:100%;animation-delay:-.55s}
.eq i:nth-child(3){height:70%;animation-delay:-.85s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* mini player inside the mock */
.mini{
  margin:16px 6px 2px;height:52px;border-radius:14px;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:rgba(26,28,32,.9);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);
}
.mini .art{width:32px;height:32px;border-radius:7px;overflow:hidden;flex:none;border:1px solid var(--line)}
.mini .art img{width:100%;height:100%;object-fit:cover}
.mini .mtxt{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.mini .mt{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .ms{display:block;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .vol{display:flex;align-items:center;gap:8px;color:var(--text-3)}
.mini .vol svg{width:14px;height:14px}
.mini .track{width:78px;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.mini .track i{display:block;height:100%;width:68%;background:var(--accent);border-radius:4px}
.mini .stopb{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-2);border:1px solid var(--line);border-radius:9px;padding:6px 11px}
.mini .stopb svg{width:10px;height:10px}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.band{padding:92px 0}
.band.tight{padding:70px 0}
.sec-head{max-width:680px;margin:0 auto 54px;text-align:center}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,42px);line-height:1.1;letter-spacing:-.015em;margin-bottom:16px}
.sec-head p{font-size:17.5px;color:var(--text-2);line-height:1.55}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 28px;box-shadow:var(--shadow-card);
}
.step .n{
  font-family:var(--serif);font-size:15px;color:var(--accent);font-weight:600;
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.step .n::before{content:"";width:34px;height:34px;border-radius:9px;flex:none;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  display:flex;align-items:center;justify-content:center}
.step .n[data-n]::before{content:attr(data-n)}
.step h3{font-size:18px;font-weight:600;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--text-2);line-height:1.6}
.flow-arrow{color:var(--text-3)}

/* ---------- Features: interactive explorer ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px;align-items:stretch}

/* left: clickable list */
.ex-list{display:flex;flex-direction:column;gap:8px}
.ex-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 14px;border-radius:13px;border:1px solid var(--line);
  background:var(--card);color:var(--text);
  transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),transform 110ms var(--ease-out);
}
.ex-item:hover{background:var(--card-hover);border-color:var(--line-strong)}
.ex-item:active{transform:scale(.99)}
.ex-ic{
  flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--text-3);background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:color 180ms,background 180ms,border-color 180ms;
}
.ex-ic svg{width:20px;height:20px}
.ex-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ex-txt b{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.ex-txt i{font-style:normal;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-arrow{flex:none;color:var(--accent);opacity:0;transform:translateX(-5px);transition:opacity 180ms,transform 180ms}
.ex-arrow svg{width:17px;height:17px}
.ex-item.is-active{background:color-mix(in srgb,var(--accent) 11%,var(--card));border-color:color-mix(in srgb,var(--accent) 44%,transparent)}
.ex-item.is-active .ex-ic{color:var(--accent-ink);background:var(--accent);border-color:transparent}
.ex-item.is-active .ex-txt i{color:var(--accent-bright);opacity:.92}
.ex-item.is-active .ex-arrow{opacity:1;transform:none}

/* right: stage */
.ex-stage{
  position:relative;min-height:398px;scroll-margin-top:74px;
  border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;
  background:radial-gradient(130% 100% at 50% -15%,rgba(201,165,95,.09),transparent 55%),var(--bg-raise);
  box-shadow:var(--shadow-card);
}
.ex-panel{display:none;flex-direction:column;min-height:398px}
.ex-panel.is-active{display:flex;animation:panel-in .5s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ex-visual{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 28px 8px;min-height:0}
.ex-caption{padding:14px 28px 26px}
.ex-caption h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.ex-caption p{font-size:14px;color:var(--text-2);line-height:1.55;max-width:54ch}

/* extras row */
.ex-extras{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:26px}
.ex-extras-lbl{font-size:13px;color:var(--text-3);font-weight:500}
.xpill{
  font-size:13px;font-weight:500;color:var(--text-2);padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  transition:color 140ms,border-color 140ms,background 140ms,transform 110ms var(--ease-out);
}
.xpill:hover{color:var(--text);border-color:var(--line-strong);background:var(--card-hover);transform:translateY(-1px)}

/* --- visual: layers --- */
.v-layers{width:100%;max-width:430px;display:flex;flex-direction:column;gap:9px}
.vl-head{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.vl-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;background:var(--card);border:1px solid var(--line);opacity:0;transform:translateY(8px);animation:vl-in .5s var(--ease-out) forwards}
.ex-panel.is-active .vl-row:nth-child(2){animation-delay:.04s}
.ex-panel.is-active .vl-row:nth-child(3){animation-delay:.12s}
.ex-panel.is-active .vl-row:nth-child(4){animation-delay:.2s}
.ex-panel.is-active .vl-row:nth-child(5){animation-delay:.28s}
@keyframes vl-in{to{opacity:1;transform:none}}
.vl-ic{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.vl-ic svg{width:15px;height:15px}
.vl-name{flex:1;font-size:13.5px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-wave{display:inline-flex;align-items:flex-end;gap:2.5px;height:17px}
.vl-wave i{width:3px;border-radius:2px;background:var(--accent);animation:eq 1.15s ease-in-out infinite}
.vl-wave i:nth-child(1){height:40%;animation-delay:-.1s}
.vl-wave i:nth-child(2){height:80%;animation-delay:-.5s}
.vl-wave i:nth-child(3){height:55%;animation-delay:-.8s}
.vl-wave i:nth-child(4){height:95%;animation-delay:-.3s}
.vl-wave i:nth-child(5){height:65%;animation-delay:-.65s}

/* --- visual: crossfade --- */
.v-xfade{width:100%;max-width:440px;display:flex;flex-direction:column;gap:15px}
.vx-imgs{position:relative;height:158px;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong)}
.vx-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-imgs .top{animation:vx-fade 6s ease-in-out infinite}
@keyframes vx-fade{0%,38%{opacity:1}62%,100%{opacity:0}}
.vx-tag{position:absolute;left:12px;bottom:11px;z-index:2;font-family:var(--serif);font-size:15px;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.vx-imgs::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,16,19,.55))}
.vx-bar{position:relative;height:6px;border-radius:5px;background:rgba(255,255,255,.12)}
.vx-bar .knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5);transform:translate(-50%,-50%);left:12%;animation:vx-knob 6s ease-in-out infinite}
@keyframes vx-knob{0%,38%{left:8%}62%,100%{left:92%}}
.vx-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);font-weight:500}
.vx-labels b{color:var(--text-2);font-weight:600}

/* --- visual: mixer (draggable) --- */
.v-mixer{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.vm-hint{font-size:11.5px;color:var(--accent);font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin-bottom:2px}
.vm-row{display:flex;align-items:center;gap:13px}
.vm-name{width:66px;flex:none;font-size:13px;color:var(--text-2)}
.vm-row input[type="range"]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
.vm-row input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--fill,50%),rgba(255,255,255,.15) var(--fill,50%))}
.vm-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-5.5px;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform 120ms ease-out}
.vm-row input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.18)}
.vm-row input[type="range"]::-moz-range-track{height:5px;border-radius:4px;background:rgba(255,255,255,.15)}
.vm-row input[type="range"]::-moz-range-progress{height:5px;border-radius:4px;background:var(--accent)}
.vm-row input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vm-mute{flex:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-3);border:1px solid var(--line);background:rgba(255,255,255,.04);transition:color 140ms,background 140ms,border-color 140ms}
.vm-mute svg{width:16px;height:16px}
.vm-mute:hover{color:var(--text);background:rgba(255,255,255,.08)}
.vm-mute.muted{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.vm-row.off .vm-name{color:var(--text-3)}
.vm-row.off input[type="range"]{opacity:.45}

/* --- visual: youtube import --- */
.v-yt{width:100%;max-width:430px;display:flex;flex-direction:column;gap:12px}
.vy-url{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:9px;background:var(--field);border:1px solid var(--line);font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.vy-url svg{width:15px;height:15px;color:#ff5f57;flex:none}
.vy-url .caret{width:1.5px;height:15px;background:var(--accent);animation:vy-caret 1s steps(1) infinite}
@keyframes vy-caret{50%{opacity:0}}
.vy-card{display:flex;gap:11px;padding:10px;border-radius:11px;background:var(--card);border:1px solid var(--line)}
.vy-thumb{position:relative;width:92px;height:54px;border-radius:7px;overflow:hidden;flex:none;border:1px solid var(--line)}
.vy-thumb img{width:100%;height:100%;object-fit:cover}
.vy-thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.vy-thumb .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:24px;height:24px;border-radius:50%;background:rgba(255,0,0,.85);display:flex;align-items:center;justify-content:center}
.vy-thumb .pl svg{width:11px;height:11px;color:#fff;margin-left:1px}
.vy-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.vy-title{font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vy-sub{font-size:11.5px;color:var(--text-3)}
.vy-trimlbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin-top:2px}
.vy-trimlbl b{color:var(--text-2);font-variant-numeric:tabular-nums}
.vy-trim{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.vy-trim .sel{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:5px;animation:vy-trim 6s ease-in-out infinite}
@keyframes vy-trim{0%{left:6%;right:70%}45%,55%{left:22%;right:38%}100%{left:22%;right:38%}}
.vy-foot{display:flex;align-items:center;gap:12px;margin-top:2px}
.vy-prog{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.vy-prog .bar{height:100%;width:0;background:var(--accent);border-radius:4px;animation:vy-prog 6s ease-in-out infinite}
@keyframes vy-prog{0%,58%{width:0}88%,100%{width:100%}}
.vy-done{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent-bright);white-space:nowrap}
.vy-done svg{width:15px;height:15px}

/* --- visual: mini player --- */
.v-mini{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:16px}
.v-mini .browsehint{font-size:11.5px;color:var(--text-3);font-weight:500;display:flex;align-items:center;gap:7px}
.v-mini .browsehint svg{width:14px;height:14px;color:var(--accent)}
.v-mini .mini{position:static;margin:0;width:100%;transform:none;opacity:1}

/* --- visual: offline --- */
.v-offline{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.vo-shield{width:92px;height:92px;color:var(--accent);animation:vo-pulse 3s ease-in-out infinite}
.vo-shield svg{width:100%;height:100%}
@keyframes vo-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,165,95,0))}50%{transform:scale(1.04);filter:drop-shadow(0 6px 22px rgba(201,165,95,.35))}}
.vo-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.vo-stat{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);font-weight:500;padding:8px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.vo-stat svg{width:15px;height:15px;color:var(--accent);flex:none}
.vo-stat b{color:var(--text);font-weight:600}

/* ---------- Platform download cards ---------- */
.dl-choice{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;max-width:640px;margin:0 auto;
}
.dl-os{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 18px 18px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.os-head{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text-2);
}
.os-head svg{width:18px;height:18px;color:var(--accent-bright)}
.dl-os .btn{width:100%;padding:0 12px;font-size:14.5px}
.os-reqs{list-style:none;display:flex;flex-direction:column;gap:4px;text-align:center}
.os-reqs li{font-size:12.5px;color:var(--text-3);line-height:1.4}
.dl-meta{margin-top:24px}

/* ---------- First-time setup, per platform ---------- */
.os-guides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.os-guide h4{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:15px;
}
.os-guide h4 svg{width:15px;height:15px}
.os-guide .inst{gap:14px}
.os-guide .inst li{font-size:13.5px}
.setup-note{
  margin-top:24px;font-size:13px;color:var(--text-3);line-height:1.6;
  border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-left:13px;
}

/* ---------- Download ---------- */
#download{scroll-margin-top:74px}
.dl-panel{
  border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% -20%, rgba(201,165,95,.14), transparent 60%),
    var(--bg-raise);
  box-shadow:var(--shadow-float);
}
.dl-top{padding:52px 44px 40px;text-align:center;border-bottom:1px solid var(--line)}
.dl-top .mark{width:74px;height:74px;border-radius:18px;margin:0 auto 22px;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.dl-top h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em;margin-bottom:14px}
.dl-top p{font-size:17px;color:var(--text-2);max-width:520px;margin:0 auto 28px;line-height:1.55}
.dl-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:22px;font-size:13.5px;color:var(--text-3)}
.dl-meta span{display:inline-flex;align-items:center;gap:7px}
.dl-meta svg{width:15px;height:15px;color:var(--accent);flex:none}

.dl-cols{display:grid;grid-template-columns:1.25fr 1fr}
.dl-install{padding:40px 44px}
.dl-install h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:22px}
.inst{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:20px}
.inst li{position:relative;padding-left:44px;font-size:14.5px;color:var(--text-2);line-height:1.55}
.inst li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-2px;width:29px;height:29px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--accent-bright);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
}
.inst li b{color:var(--text);font-weight:600}
.inst .note{
  margin-top:6px;font-size:13px;color:var(--text-3);
  border-left:2px solid var(--line-strong);padding-left:12px;
}
.dl-support{padding:40px 40px;border-left:1px solid var(--line);
  background:radial-gradient(120% 90% at 100% 0,rgba(201,165,95,.08),transparent 60%);
  display:flex;flex-direction:column}
.dl-support .coffee-ic{width:46px;height:46px;color:var(--accent-bright);margin-bottom:16px}
.dl-support h3{font-family:var(--serif);font-size:23px;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.dl-support p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:22px}
.bmc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:56px;padding:0 24px;border-radius:14px;font-size:16px;font-weight:700;
  background:#ffdd00;color:#141518;
  box-shadow:0 10px 30px rgba(255,221,0,.22);
  transition:transform 130ms ease-out,box-shadow 150ms var(--ease-out),filter 150ms;
}
.bmc-btn:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 14px 40px rgba(255,221,0,.32)}
.bmc-btn:active{transform:translateY(0) scale(.98)}
.bmc-btn svg{width:24px;height:24px}
.dl-support .free-note{margin-top:16px;font-size:13px;color:var(--text-3);line-height:1.55}
.coffee-goal{
  display:flex;gap:10px;margin-top:20px;padding:13px 14px;
  border-radius:11px;font-size:12.5px;line-height:1.55;color:var(--text-3);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.coffee-goal svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
.coffee-goal b{color:var(--text-2);font-weight:600}

/* ---------- Contact / from the developer ---------- */
#contact{scroll-margin-top:74px}
.contact-panel{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 130% at 15% -20%, rgba(201,165,95,.11), transparent 58%),var(--bg-raise);
  box-shadow:var(--shadow-float);
}
.contact-note{padding:44px 42px}
.contact-note .eyebrow{margin-bottom:14px}
.contact-note h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:-.015em;line-height:1.12;margin-bottom:18px}
.contact-note p{font-size:15px;color:var(--text-2);line-height:1.65;margin-bottom:14px;max-width:52ch}
.contact-note p:last-child{margin-bottom:0}
.patience{
  display:flex;gap:11px;margin-top:20px;padding:14px 16px;border-radius:12px;
  font-size:13.5px;line-height:1.6;color:var(--text-2);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.patience svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:2px}
.contact-side{
  padding:44px 38px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 90% at 100% 0,rgba(201,165,95,.07),transparent 60%);
}
.contact-side h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:16px;letter-spacing:-.01em}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.contact-list li{display:flex;gap:11px;font-size:14px;color:var(--text-2);line-height:1.5}
.contact-list svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:2px}
.mail-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 20px;border-radius:12px;
  font-size:15px;font-weight:600;text-align:center;word-break:break-word;
  color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px rgba(201,165,95,.24);
  transition:filter 150ms var(--ease-out),transform 120ms ease-out,box-shadow 150ms var(--ease-out);
}
.mail-btn svg{width:18px;height:18px;flex:none}
.mail-btn:hover{filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 40px rgba(201,165,95,.34)}
.mail-btn:active{transform:scale(.98)}
.contact-side .reply-note{margin-top:14px;font-size:12.5px;color:var(--text-3);line-height:1.55}

/* ---------- Buy Me a Coffee — in-page popup ---------- */
.bmc-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.bmc-modal.open{display:flex}
.bmc-scrim{position:absolute;inset:0;background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bmc-fade .22s ease-out}
@keyframes bmc-fade{from{opacity:0}to{opacity:1}}
.bmc-dialog{position:relative;width:min(400px,92vw);height:min(680px,86vh);border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-float);animation:bmc-pop .3s var(--ease-out)}
@keyframes bmc-pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.bmc-close{position:absolute;top:11px;right:11px;z-index:3;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(20,21,24,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);transition:background 140ms,transform 120ms ease-out}
.bmc-close:hover{background:rgba(20,21,24,.82)}
.bmc-close:active{transform:scale(.94)}
.bmc-close svg{width:15px;height:15px}
.bmc-framewrap{position:absolute;inset:0;background:#fff}
.bmc-framewrap iframe{width:100%;height:100%;border:0;display:block}
.bmc-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#8a6d2f;font-size:14px;font-weight:500;background:#fff}
.bmc-loading .spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(201,165,95,.25);border-top-color:var(--accent);animation:bmc-spin .8s linear infinite}
@keyframes bmc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bmc-scrim,.bmc-dialog{animation:none}.bmc-loading .spin{animation:none}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0 20px;transition:border-color 160ms var(--ease-out),background 160ms var(--ease-out);
}
.faq details[open]{border-color:var(--line-strong);background:var(--card-hover)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 0;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:18px;height:18px;color:var(--text-3);flex:none;transition:transform 200ms var(--ease-out)}
.faq details[open] summary .chev{transform:rotate(180deg);color:var(--accent)}
.faq .ans{padding:0 0 20px;font-size:14.5px;color:var(--text-2);line-height:1.65}
.faq .ans a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:2px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:46px 0 54px;margin-top:20px}
.foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand img{width:30px;height:30px;border-radius:8px}
.foot-brand .fn{font-size:14.5px;font-weight:600}
.foot-brand .fn em{font-style:normal;color:var(--text-3);font-weight:400}
.foot-right{display:flex;flex-wrap:wrap;gap:20px;align-items:center;font-size:13.5px;color:var(--text-3)}
.foot-right a{color:var(--text-2)}
.foot-right a:hover{color:var(--text)}
.foot-note{margin-top:26px;font-size:12.5px;color:var(--text-3);max-width:640px;line-height:1.6}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero-copy{text-align:center}
  .hero-copy .lede{margin-left:auto;margin-right:auto}
  .hero-cta,.reassure{justify-content:center}
  .steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .explorer{grid-template-columns:minmax(0,1fr);gap:16px}
  .ex-txt i{white-space:normal}
  .dl-cols{grid-template-columns:1fr}
  .dl-support{border-left:0;border-top:1px solid var(--line)}
  .contact-panel{grid-template-columns:minmax(0,1fr)}
  .contact-side{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .band{padding:66px 0}
  #hero{padding:52px 0 30px}
  .steps,.features{grid-template-columns:1fr}
  .scenes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .scene{min-width:0}
  .mini .vol{display:none}
  .dl-top,.dl-install,.dl-support{padding-left:26px;padding-right:26px}
  .dl-choice{grid-template-columns:minmax(0,1fr)}
  .os-guides{grid-template-columns:minmax(0,1fr);gap:30px}
  .contact-note,.contact-side{padding:32px 26px}
  .mail-btn{font-size:14px}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- Spotlight strip: the two differentiators, under How it works ---------- */
.spotlight{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:34px}
.spot-item{padding:24px 26px;border-radius:var(--radius);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.spot-k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:12px}
.spot-item p{font-size:15px;line-height:1.65;color:var(--text-2)}
.spot-item b{color:var(--text);font-weight:600}
@media (max-width:940px){ .spotlight{grid-template-columns:minmax(0,1fr)} }

/* ---------- Article / comparison pages ---------- */
/* Articles run in one narrow, centred reading column: prose, tables, cards and
   the CTA all share the same left and right edge, so nothing looks stranded. */
.cmp-hero>.wrap,.cmp-body>.wrap{max-width:740px}
.cmp-hero{padding:120px 0 56px}
.cmp-hero h1{font-family:var(--serif);font-size:clamp(38px,6vw,60px);line-height:1.05;letter-spacing:-.02em;margin:14px 0 18px;max-width:20ch}
.cmp-lede{font-size:19px;line-height:1.6;color:var(--text-2);margin:0}
.cmp-body{padding:0 0 40px}
.cmp-body h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);line-height:1.2;letter-spacing:-.015em;margin:56px 0 14px}
.cmp-body h2:first-child{margin-top:0}
.cmp-body p{font-size:17px;line-height:1.7;color:var(--text-2);margin:0 0 16px}
.cmp-body strong{color:var(--text);font-weight:600}
.answer{background:var(--card);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:26px 30px;margin:0 0 8px}
.answer p:last-child{margin-bottom:0}
.tbl-scroll{overflow-x:auto;margin:8px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.cmp{width:100%;border-collapse:collapse;min-width:600px;font-size:15.5px}
table.cmp th,table.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:var(--bg-raise)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{color:var(--text);font-weight:500;width:26%}
table.cmp td{color:var(--text-2)}
.tbl-note{font-size:13.5px;color:var(--text-3);margin:0 0 8px}
.cmp-list{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.cmp-list li{position:relative;padding-left:26px;color:var(--text-2);font-size:16.5px;line-height:1.6}
.cmp-list li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cmp-list li b{color:var(--text);font-weight:600}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 8px}
.pick-card{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px 26px}
.pick-card h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:0 0 10px;color:var(--text)}
.pick-card p{font-size:15.5px;margin:0;color:var(--text-2)}
.cmp-cta{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:34px;margin:48px 0 0;text-align:center}
.cmp-cta h2{margin:0 0 10px!important}
.cmp-cta p{margin:0 auto 22px;max-width:52ch}
.cmp-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.disclose{font-size:14px;color:var(--text-3);border-top:1px solid var(--line);padding-top:20px;margin-top:52px}
@media(max-width:720px){.pick{grid-template-columns:1fr}.cmp-hero{padding:96px 0 40px}}


/* ---------- Changelog page ---------- */
.page-head{max-width:680px;margin:0 auto;text-align:center;padding:78px 0 54px}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(34px,4.4vw,50px);line-height:1.06;letter-spacing:-.015em;
  margin-bottom:16px;
}
.page-head p{font-size:17px;color:var(--text-2);line-height:1.6}
.log{max-width:680px;margin:0 auto;position:relative;padding:0 0 8px 30px}
.log::before{
  content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1.5px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 45%,transparent),var(--line) 80%);
}
.log-item{position:relative;padding:0 0 38px}
.log-item:last-child{padding-bottom:0}
.log-item::before{
  content:"";position:absolute;left:-27.5px;top:7px;width:10px;height:10px;border-radius:50%;
  background:var(--bg);border:2px solid var(--text-3);
}
.log-item.latest::before{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}
.log-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:9px}
.log-ver{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.log-item.latest .log-ver{color:var(--accent-bright)}
.log-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:var(--text-2);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.log-tag svg{width:12px;height:12px;color:var(--accent-bright)}
.log-tag.both{
  color:var(--accent-bright);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
}
.log-date{font-size:12.5px;color:var(--text-3);margin-left:auto;font-variant-numeric:tabular-nums}
.log-note{font-size:15px;color:var(--text-2);line-height:1.65;max-width:56ch}
.log-note b{color:var(--text);font-weight:600}
.get-latest{
  max-width:680px;margin:64px auto 0;text-align:center;
  padding:34px 28px;border-radius:18px;
  background:radial-gradient(120% 140% at 50% -20%, rgba(201,165,95,.12), transparent 60%),var(--bg-raise);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-card);
}
.get-latest h2{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.get-latest p{font-size:14.5px;color:var(--text-2);margin-bottom:20px}
main{padding-bottom:96px}
.log{padding-left:26px}
.log-date{margin-left:0;width:100%}