/* Pangalin Space Manager — standalone product landing page, in Pangalin's colours (paper, forest green, ink). */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  color-scheme: light dark;
  --bg: #f5f6f1;          /* Pangalin paper */
  --bg-2: #eef2ec;
  --ink: #092f22;         /* Pangalin ink (dark band) */
  --panel: #ffffff;
  --panel-line: #dce4dc;
  --text: #092f22;
  --muted: #4d685c;
  --teal: #026034;        /* accent = Pangalin forest green */
  --mint: #026034;
  --red: #d90c1d;
  --green-soft: rgba(2, 96, 52, .06);
  --grad: linear-gradient(120deg, #026034 0%, #1f7a4d 100%);
  --btn-fg: #ffffff;
  --btn-hover: #092f22;
  --btn-bg: #026034;      /* buttons: corporate forest green in BOTH modes */
  --btn-line: #026034;    /* outline button border + text */
  --band: #092f22;        /* dark band — stays dark in both modes */
  --topbar: rgba(245, 246, 241, .85);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { font-size: 93.75%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { transition: none !important; animation: none !important; } }
body.sm {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Top bar */
.sm-top { position: sticky; top: 0; z-index: 20; background: var(--topbar); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--panel-line); }
.sm-top .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.sm-brand img { width: 34px; }
.sm-brand small { font-weight: 600; color: var(--muted); font-size: .78rem; letter-spacing: 0; }
.sm-top nav { display: flex; align-items: center; gap: 26px; font-size: .88rem; font-weight: 600; }
.sm-top nav a { text-decoration: none; color: var(--muted); }
.sm-top nav a:hover { color: var(--text); }
/* scroll-spy: the section you're reading */
.sm-top nav a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--btn-line); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background-color .2s; cursor: pointer; }
/* long labels ("Buy Pangalin Space Manager · $25/year") wrap to two centred, balanced lines on phones */
.btn { text-align: center; text-wrap: balance; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-ghost { border-color: var(--btn-line); color: var(--btn-line); }
.btn-ghost:hover { background: var(--green-soft); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.fine { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }

/* Hero */
.hero { position: relative; padding: 72px 0 32px; text-align: center; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -120px 0 auto; height: 760px; z-index: -1;
  background: radial-gradient(700px 420px at 50% 30%, rgba(2, 96, 52, .08), transparent 70%); }
.hero .icon { width: 92px; margin: 0 auto 26px; filter: drop-shadow(0 14px 30px rgba(9, 47, 34, .25)); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; margin: 0 auto; max-width: 900px; }
.hero ul { list-style: none; padding: 0; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--muted); font-weight: 600; }
.hero li::before { content: "✓"; color: var(--mint); margin-right: 8px; font-weight: 800; }
.hero .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Trust badges */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 56px auto 0; }
.badge { border-radius: var(--radius); padding: 24px 18px; text-align: center; background: var(--panel); border: 1px solid var(--panel-line); }
.badge b { display: block; font-size: 1.12rem; letter-spacing: -.02em; }
.badge span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: 6px; }
.badge .ico { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.badge { background: var(--panel); }

.caption { color: var(--muted); font-size: .78rem; text-align: center; margin: 14px 0 0; }

/* Section heads */
section { padding: 88px 0; }
.kicker { color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin: 0; }
.center { text-align: center; }
.intro { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 640px; margin: 20px auto 0; }

/* Tabs */
.tabs { margin-top: 48px; }
.tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tablist button { font: inherit; font-size: .9rem; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.tablist button[aria-selected="true"] { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); }
.tabpanel { margin-top: 30px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 28px; padding: clamp(24px, 4vw, 48px); }
.tabpanel[hidden] { display: none; }
.tabpanel h3 { font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px; }
.tabpanel p { color: var(--muted); margin: 0; }
.tabpanel ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tabpanel li { color: var(--text); font-size: .95rem; }
.tabpanel li::before { content: "→"; color: var(--teal); margin-right: 10px; }

/* Feature sections */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature + .feature { margin-top: 96px; }
.feature.flip > :first-child { order: 2; }
.feature h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.feature p.lead { color: var(--muted); font-size: 1rem; margin: 18px 0 0; }
.feature .actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.stat { border-radius: 28px; padding: clamp(28px, 4vw, 44px); background: var(--panel); border: 1px solid var(--panel-line); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; height: 120%; background: radial-gradient(closest-side, rgba(2,96,52,.07), transparent); pointer-events: none; }
.stat .num { font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.stat .what { font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.stat .note { color: var(--muted); font-size: .88rem; margin-top: 10px; }
.stat ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; position: relative; z-index: 1; }
.stat li { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; border-top: 1px solid var(--panel-line); padding-top: 10px; }
.stat li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pills span { font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--green-soft); border: 1px solid var(--panel-line); }

/* Results band */
.results { background: var(--band); color: #fff; }
.results .kicker { color: #04b461; }   /* forest-green hue, bright enough for the dark band (4.7:1+) */
.results .grad-text { background: none; color: #04b461; }
.results .card { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }
.results .card p { color: #c5d6cc !important; }
.results .card a { color: #04b461 !important; }
.results .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.results .card { border-radius: var(--radius); padding: 30px; background: var(--panel); border: 1px solid var(--panel-line); }
.results .card .num { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.results .card p { color: var(--muted); margin: 12px 0 0; font-size: .95rem; }

/* Story */
.story { max-width: 820px; margin: 0 auto; text-align: center; }
.story blockquote { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.story cite { display: block; margin-top: 22px; color: var(--muted); font-style: normal; font-weight: 600; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; max-width: 900px; margin-inline: auto; }
.plans.three { grid-template-columns: repeat(3, 1fr); max-width: 1180px; align-items: stretch; }
@media (max-width: 1020px) { .plans.three { grid-template-columns: 1fr; max-width: 560px; } }
.plan { border-radius: 28px; padding: 36px; background: var(--panel); border: 1px solid var(--panel-line); display: flex; flex-direction: column; }
.plan.pro { background: var(--panel); border: 2px solid var(--teal); }
.plan .tag { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.plan h3 { font-size: 1.45rem; letter-spacing: -.03em; margin: 8px 0 4px; }
.plan .price { color: var(--muted); font-weight: 600; }
.plan ul { margin: 22px 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li::before { content: "✓"; color: var(--mint); margin-right: 10px; font-weight: 800; }
.plan .btn { margin-top: auto; }

/* FAQ */
.faq { max-width: 820px; margin: 48px auto 0; }
.faq details { border-bottom: 1px solid var(--panel-line); padding: 20px 0; }
.faq details[id] { scroll-margin-top: 80px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.faq details p { color: var(--muted); margin: 12px 0 0; }
.faq a { color: var(--teal); }

/* Final CTA */
.final { text-align: center; padding: 96px 0; position: relative; isolation: isolate; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 300px at 50% 55%, rgba(2,96,52,.08), transparent 70%); }
.final img { width: 80px; margin: 0 auto 26px; }
.final .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* Footer */
.sm-foot { border-top: 1px solid var(--panel-line); padding: 36px 0 44px; color: var(--muted); font-size: .84rem; }
.sm-foot .req { text-align: center; margin: 0 0 24px; }
.sm-foot .row2 { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sm-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.sm-foot a { text-decoration: none; } .sm-foot a:hover { color: var(--text); text-decoration: underline; }
.by { display: inline-flex; align-items: center; gap: 8px; }
.by img { width: 36px; }

/* Responsive */
@media (max-width: 900px) {
  .badges { grid-template-columns: repeat(2, 1fr); }
  .win-body { grid-template-columns: 1fr; }
  .win-side { display: none; }
  .tabpanel, .feature { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
  .results .grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  section { padding: 76px 0; }
  .sm-top nav a:not(.btn) { display: none; }
  .hero { padding-top: 60px; }
  .hero .actions .btn, .final .actions .btn { width: 100%; }
  .plans { grid-template-columns: 1fr; }
  .feature + .feature { margin-top: 80px; }
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--band); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 16px; }
.sm-top nav a.btn, .sm-top nav a.btn:hover { color: var(--btn-fg); }

/* Pangalin home link in the product top bar */
.sm-left { display: flex; align-items: center; gap: 14px; }
.home-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.home-link .mark { width: 40px; }
.home-link .word { width: 96px; }
.sm-sep { width: 1px; height: 26px; background: var(--panel-line); }
@media (max-width: 640px) {
  .home-link .word { display: none; }
  .sm-brand small { display: none; }
}
/* Tablets and small laptops: links never wrap onto two lines. The Pangalin logo already goes
   home, so the "More from Pangalin" text link goes first, then the section links, keeping the
   brand, theme switch and Download button on one tidy row at every width. */
.sm-top nav a, .sm-brand span { white-space: nowrap; }
.sm-top nav a[href="/"] { display: none; }   /* the Pangalin logo already goes home; footer keeps the link */
@media (max-width: 1600px) { .sm-top nav { gap: 20px; } }
@media (max-width: 1440px) { .sm-top nav a:not(.btn) { display: none; } }
/* The top bar's ghost Buy button keeps its own colour (the plain nav-link colour would hide it). */
.sm-top nav a.btn-ghost { color: var(--btn-line); }
.sm-top nav a.btn-ghost:hover { color: var(--btn-line); }
/* The top bar's Buy button sits beside Download on every width except the narrowest phones. */
@media (max-width: 480px) { .sm-top nav .buy-top { display: none; } }
/* Narrow phones: the app icon alone names the product, so the top bar never collides. */
@media (max-width: 420px) {
  .sm-brand span { display: none; }
  .sm-top nav .btn-sm { white-space: nowrap; }
}
section[id], .hero[id] { scroll-margin-top: 72px; }

/* Coloured app-icon squares in the tab-panel lists */
.sq { width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; color: #fff; font-size: 10px; flex: none; }
.c-violet { background: #7d4fe0; }
.c-green { background: #1d8a4c; } .c-orange { background: #e8731a; } .c-teal { background: #0f8f8a; }
.c-indigo { background: #5856d6; }
.mac-list { border: 1px solid #e5e5ea; border-radius: 10px; padding: 6px; background: #fafafa; }
.mac-row { display: grid; grid-template-columns: 22px 1fr auto 12px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; }
.mac-row.on { background: #ebebed; }
.mac-row small { color: #6e6e73; font-size: 11px; margin-left: 8px; }
.mac-row .sz { color: #6e6e73; font-size: 12px; font-variant-numeric: tabular-nums; }
.mac-row .chev { color: #b0b0b5; }
/* Tab-panel lists reuse the mac-list look */
.tabpanel .mac-list { background: #fff; }
@media (max-width: 640px) { .mac-row small { display: none; } }

/* More features grid */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.more-grid .card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 26px; }
.more-grid .ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--green-soft); color: var(--teal); font-weight: 800; margin-bottom: 14px; }
.more-grid h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -.02em; }
.more-grid p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Honest comparison table */
.compare { margin: 40px auto 0; max-width: 900px; overflow-x: auto; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); }
.compare table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.compare th, .compare td { padding: 14px 20px; text-align: left; border-top: 1px solid var(--panel-line); }
.compare thead th { border-top: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare thead th:last-child { color: var(--teal); }
.compare tbody th { font-weight: 600; }
.compare td.yes { color: var(--teal); font-weight: 700; }
.compare td.no { color: var(--muted); }
.compare td:last-child, .compare thead th:last-child { background: var(--green-soft); }
/* only Pangalin Space Manager's column carries the brand green; macOS's ticks stay neutral */
.compare td.yes:not(:last-child) { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .more-grid { grid-template-columns: 1fr; } }
.results .grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
.results .card p + p { margin-top: 10px; }
.more-grid .card p.small { margin-top: 10px; font-size: .85rem; font-style: italic; }
.panel-cap { color: var(--muted); font-size: .78rem; margin: 10px 0 0; text-align: center; }
@media (max-width: 900px) { .results .grid.grid-4 { grid-template-columns: 1fr; } }

/* ---- Dark mode: same roles, night palette (Pangalin green lifted for contrast) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1511;
    --bg-2: #101b16;
    --panel: #13201a;
    --panel-line: #26382e;
    --text: #e8efe9;
    --muted: #a9beb2;
    --teal: #039b54;      /* forest green brightened to read on black */
    --mint: #039b54;
    --green-soft: rgba(3, 155, 84, .12);
    --grad: linear-gradient(120deg, #039b54 0%, #04b461 100%);
    --btn-fg: #ffffff;
    --btn-hover: #0a7a45;
    --btn-line: #039b54;  /* same hue, brightened so a thin border reads on black */
    --band: #0f3a2a;
    --topbar: rgba(12, 21, 17, .85);
  }
  :root:not([data-theme="light"]) .hero::before { background: radial-gradient(700px 420px at 50% 30%, rgba(3, 155, 84, .10), transparent 70%); }
  :root:not([data-theme="light"]) .hero .icon { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); }
  :root:not([data-theme="light"]) .results .card { background: rgba(255,255,255,.05) !important; }
}
:root[data-theme="dark"] {
    --bg: #0c1511;
    --bg-2: #101b16;
    --panel: #13201a;
    --panel-line: #26382e;
    --text: #e8efe9;
    --muted: #a9beb2;
    --teal: #039b54;      /* forest green brightened to read on black */
    --mint: #039b54;
    --green-soft: rgba(3, 155, 84, .12);
    --grad: linear-gradient(120deg, #039b54 0%, #04b461 100%);
    --btn-fg: #ffffff;
    --btn-hover: #0a7a45;
    --btn-line: #039b54;  /* same hue, brightened so a thin border reads on black */
    --band: #0f3a2a;
    --topbar: rgba(12, 21, 17, .85);
  }
:root[data-theme="dark"] .hero::before { background: radial-gradient(700px 420px at 50% 30%, rgba(3, 155, 84, .10), transparent 70%); }
:root[data-theme="dark"] .hero .icon { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); }
:root[data-theme="dark"] .results .card { background: rgba(255,255,255,.05) !important; }
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* Keyboard focus for every interactive element, not just links and buttons */
summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }


/* Even line breaks for display text */
h1, h2, h3, .stat .what, .story blockquote { text-wrap: balance; }

/* Real app screenshots */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--panel-line); box-shadow: 0 24px 60px -28px rgba(9, 47, 34, .35); background: #fff; }
.shot-hero { max-width: 1060px; margin: 56px auto 0; }
.shot-hero img { border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(9, 47, 34, .4), 0 0 0 1px rgba(0,0,0,.06); }
.shot-small { margin-bottom: 16px; position: relative; z-index: 1; }
.shot-small img { box-shadow: none; }
.tabpanel .shot img { box-shadow: 0 12px 30px -18px rgba(9, 47, 34, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot img { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 60px -28px rgba(0,0,0,.8); }
}
:root[data-theme="dark"] .shot img { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 60px -28px rgba(0,0,0,.8); }
/* Panels with a real screenshot: text above, screenshot full width so it stays legible */
.tabpanel.has-shot { grid-template-columns: 1fr; gap: 28px; }
.tabpanel.has-shot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* hero shot is cropped under the list; fade its lower edge instead of a hard cut */
.shot-hero img { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); border-bottom-color: transparent; }

/* Walkthrough video */
.video-frame { margin: 36px auto 0; max-width: 1060px; }
.video-frame video { display: block; width: 100%; height: auto; border-radius: 14px; background: #f5f6f1; border: 1px solid var(--panel-line); box-shadow: 0 30px 80px -30px rgba(9, 47, 34, .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .video-frame video { border-color: rgba(255,255,255,.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
}
:root[data-theme="dark"] .video-frame video { border-color: rgba(255,255,255,.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }

/* A saved choice also sets the browser's own form controls and scrollbars */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- Light/dark switch (assets/theme.js). Moon = "go dark", sun = "go light". ---- */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--panel-line); background: transparent; color: var(--text); cursor: pointer; flex: none; transition: border-color .2s, color .2s; }
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* Small "Pro" marker on feature cards (Pangalin Uninstaller) */
.pro-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); border: 1px solid currentColor; }
.plan code { font-size: .9em; }

/* Conversion: bundle card, reassurance under Buy buttons, mid-page Buy band, phone bottom bar */
.plans:has(.plan.both) { grid-template-columns: repeat(3, 1fr); max-width: 1180px; }
.plans:has(.plan.both) .plan { padding: 30px; }
.plan.both .tag { color: var(--btn-line); }
.assure { margin: 10px 0 0; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.4; }
.plan-note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: .85rem; color: var(--muted); }
.buy-band { padding: 72px 0 0; }
.buy-band-box { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: 32px 36px; border-radius: 28px; background: var(--panel); border: 2px solid var(--teal); }
.buy-band-text { flex: 1 1 380px; }
.buy-band-text h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.03em; margin: 0 0 8px; }
.buy-band-text p { margin: 0; color: var(--muted); }
.buy-band-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mbar { display: none; }
@media (max-width: 980px) {
  .plans:has(.plan.both) { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 768px) {
  .buy-band-box { padding: 26px 22px; text-align: center; }
  .buy-band-cta { width: 100%; }
  .buy-band-cta .btn { width: 100%; }
  .mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--topbar); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--panel-line); transform: translateY(110%); transition: transform .25s ease; }
  .mbar.on { transform: none; }
  .mbar .btn { flex: 1; padding: 10px 12px; font-size: .9rem; }
  .js body:has(.mbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* Conversion strategy: "No scare tactics" promise, Best value, reviews, touch targets */
.promise { max-width: 760px; margin: 36px auto 0; padding: 24px 28px; border-radius: 22px; border: 1px solid var(--panel-line); background: var(--panel); text-align: center; }
.promise h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -.02em; }
.promise p { margin: 0; color: var(--muted); }
.best { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: .68rem; letter-spacing: .06em; vertical-align: middle; color: var(--btn-fg); background: var(--btn-bg); }
.plan-note + .plan-note { margin-top: 8px; }
.plan-note a { color: var(--teal); }
.reviews .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.review { margin: 0; padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid var(--panel-line); }
.review blockquote { margin: 0 0 14px; font-weight: 600; line-height: 1.45; }
.review figcaption { color: var(--muted); font-size: .9rem; }
@media (pointer: coarse) {
  .sm-top nav .btn-sm { min-height: 44px; }
  .sm-top .theme-toggle { width: 44px; height: 44px; }
  .sm-brand, .sm-top .home-link { min-height: 44px; display: flex; align-items: center; }
}
.results .promise { background: rgba(255,255,255,.06); border: 1px solid #04b461; }
.results .promise h3 { color: #fff; }
.results .promise p { color: #c5d6cc; }

/* 256 GB kicker and the 118 GB "relief" bar */
.hero-kicker { margin: 0 0 12px; font-weight: 700; color: var(--teal); letter-spacing: -.01em; }
.relief { margin-top: 20px; }
.relief-bar { height: 14px; border-radius: 999px; background: var(--panel-line); overflow: hidden; }
.relief-fill { display: block; height: 100%; width: 67%; border-radius: inherit; background: var(--teal); }
.js .relief:not(.on) .relief-fill { width: 93%; background: #c2410c; }
.relief.on .relief-fill { transition: width 2.4s cubic-bezier(.2,.7,.2,1), background-color 2.4s ease; }
.relief.still .relief-fill { transition: none; }
.relief-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.relief-pct { color: var(--text); }

/* Layout v2 (benchmark of leading Mac app sites): solid priced Buy, terms line, trust strip,
   pricing straight after the hero, highlighted bundle card. */
.btn-buy { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-buy:hover { opacity: .88; }
.hero .terms, .final .terms { margin: 14px auto 0; font-size: .92rem; font-weight: 600; color: var(--muted); }
.trust-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px auto 0; padding: 14px 20px; max-width: 980px; border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); font-size: .9rem; font-weight: 600; }
.trust-strip li::before { content: "✓"; color: var(--teal); font-weight: 800; margin-right: 8px; }
#pricing { padding-top: 72px; }
.plan .amount { font-size: 2rem; letter-spacing: -.04em; color: var(--text); margin-right: 2px; }
.plan .price { display: block; margin-top: 4px; }
.plan .card-terms { margin: 12px 0 0; font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.4; }
.plans:has(.plan.both) .plan.pro { border: 1px solid var(--panel-line); }
.plan.both { position: relative; border: 2px solid var(--teal); box-shadow: 0 18px 40px rgba(2, 96, 52, .14); }
@media (min-width: 981px) { .plan.both { transform: translateY(-10px); } }
.plan.both .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.plan .value-line { margin: 10px 0 0; font-size: .9rem; font-weight: 600; color: var(--teal); }
.privacy-line { font-weight: 600; color: var(--text) !important; }

/* Friction fixes (visual review, 4 Oct): two-column hero on wide screens, icon trust strip,
   shorter pricing cards on phones. */
.hero-sub { margin: 18px auto 0; max-width: 560px; font-size: 1.08rem; color: var(--muted); font-weight: 600; }
.hero-visual { margin: 36px 0 0; }
.hero-visual .caption { margin-top: 10px; }
@media (min-width: 1100px) {
  .hero { text-align: left; padding-top: 56px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .hero-copy .icon { margin: 0 0 20px; width: 72px; }
  .hero-copy h1 { margin: 0; font-size: clamp(2.6rem, 4.2vw, 3.6rem); }
  .hero-copy .hero-sub { margin-left: 0; }
  .hero-copy .actions { justify-content: flex-start; margin-top: 28px; }
  .hero-copy .terms { margin-left: 0; }
  .hero-visual { margin: 0; }
}
.hero .trust-strip { gap: 12px 30px; margin-top: 34px; }
.hero .trust-strip li { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.hero .trust-strip li::before { content: none; }
.trust-strip svg { width: 20px; height: 20px; color: var(--teal); flex: none; }
.plan .more-toggle { display: none; }
@media (max-width: 640px) {
  .js .plan:not(.open) ul li:nth-child(n+4) { display: none; }
  .js .plan .more-toggle { display: block; margin: -16px 0 22px; padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; }
}
@media (max-width: 640px) { .plan .storage-note { display: none; } #pricing .intro { font-size: .95rem; } }

/* Terms line: each item stays whole; separators sit between items, so lines only break between them */
.terms span { white-space: nowrap; }
.terms span { display: block; }


/* Space that stays free: compact comparison above pricing */
#honest-space { padding: 56px 0 0; }
.honest { max-width: 920px; text-align: center; }
.honest h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.honest-intro { margin: 8px auto 20px; color: var(--muted); }
.honest-table { width: 100%; border-collapse: collapse; font-size: .92rem; text-align: left; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; }
.honest-table th, .honest-table td { padding: 12px 14px; border-bottom: 1px solid var(--panel-line); vertical-align: top; }
.honest-table tr:last-child th, .honest-table tr:last-child td { border-bottom: 0; }
.honest-table thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.honest-table tbody th { font-weight: 700; width: 30%; }
.honest-table tbody th small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.honest-table td:nth-child(2) { color: var(--muted); width: 22%; }
.honest-table td:last-child { background: rgba(2, 96, 52, .05); }
@media (max-width: 640px) {
  .honest-table, .honest-table tbody, .honest-table tr, .honest-table th, .honest-table td { display: block; width: auto !important; }
  .honest-table thead { display: none; }
  .honest-table tr { border-bottom: 1px solid var(--panel-line); padding: 6px 0; }
  .honest-table tr:last-child { border-bottom: 0; }
  .honest-table th, .honest-table td { border: 0; padding: 6px 16px; }
  .honest-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .honest-table td:last-child { background: none; }
}

/* ---- v2 (simplified app): illustrated Dashboard, three steps, Explain card ---- */
.disk-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; padding: 22px 22px 16px; box-shadow: 0 18px 40px rgba(9, 47, 34, .08); text-align: left; }
.disk-head { display: flex; justify-content: space-between; font-weight: 700; font-size: .95rem; }
.disk-total { color: var(--muted); font-weight: 600; }
.disk-found { margin: 10px 0 14px; font-size: 1.15rem; font-weight: 700; }
.disk-found b { color: #026034; }
.disk-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #e6ebe7; }
.disk-bar .seg { display: block; height: 100%; }
.s-safe { background: #026034; } .s-move { background: #0f8f8a; } .s-review { background: #e8731a; } .s-sys { background: #9aa6a0; } .s-free { background: #e6ebe7; }
.disk-key { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: .85rem; color: var(--muted); }
.disk-key li { display: flex; align-items: center; gap: 8px; }
.disk-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.disk-key i.s-free { outline: 1px solid var(--panel-line); }
.disk-key b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.disk-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-line); font-size: .88rem; }
.disk-next span { font-weight: 700; }
.disk-next ol { margin: 6px 0 0; padding-left: 1.3em; color: var(--muted); }
.how-steps { list-style: none; counter-reset: st; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-steps li { counter-increment: st; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 22px; }
.how-steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #026034; color: #fff; font-weight: 800; margin-bottom: 12px; }
.how-steps b { display: block; font-size: 1.1rem; }
.how-steps span { display: block; color: var(--muted); margin-top: 6px; font-size: .95rem; }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; } .disk-key { grid-template-columns: 1fr; } }
.explain-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 10px; text-align: left; }
.explain-q { margin: 12px 8px 4px; font-weight: 700; font-size: .9rem; }
.explain-a { margin: 0 8px; color: var(--text); font-size: .92rem; line-height: 1.5; }
.explain-tag { margin: 10px 8px 4px; color: var(--muted); font-size: .75rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .disk-found b { color: #05BD66; }
  :root:not([data-theme="light"]) .disk-bar, :root:not([data-theme="light"]) .s-free { background: #26382e; }
  :root:not([data-theme="light"]) .mac-list, :root:not([data-theme="light"]) .tabpanel .mac-list { background: var(--panel); border-color: var(--panel-line); }
  :root:not([data-theme="light"]) .mac-row.on { background: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .mac-row small, :root:not([data-theme="light"]) .mac-row .sz { color: var(--muted); }
}
:root[data-theme="dark"] .disk-found b { color: #05BD66; }
:root[data-theme="dark"] .disk-bar, :root[data-theme="dark"] .s-free { background: #26382e; }
:root[data-theme="dark"] .mac-list, :root[data-theme="dark"] .tabpanel .mac-list { background: var(--panel); border-color: var(--panel-line); }
:root[data-theme="dark"] .mac-row.on { background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .mac-row small, :root[data-theme="dark"] .mac-row .sz { color: var(--muted); }
.hero .disk-key { display: grid; margin: 14px 0 0; justify-content: stretch; font-weight: 500; gap: 6px 18px; }
.hero .disk-key li::before { content: none; }
.hero .disk-card ol li::before { content: none; }

/* Free guides: links into the help library (product pages) */
.help-links { padding-top: 56px; }
.link-grid { list-style: none; margin: 28px auto 20px; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.link-grid a { display: block; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--panel-line); background: var(--green-soft); font-weight: 600; text-decoration: none; }
.link-grid a:hover { border-color: currentColor; }

/* Keep a clear gap between the product name and the nav links (11 Oct 2026). */
.sm-top .sm-left { flex: none; margin-right: 28px; }
@media (max-width: 1600px) { .sm-top nav { gap: 18px; } }