/* ============================================================
   TaboraX — design tokens
   Palette pulled straight from the extension's new tab gradient
   ============================================================ */

/* fonts:start (generated — bundled, no Google request) */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fonts:end */

:root{
  --sky-1:#bed6f7;
  --sky-2:#d6e5fb;
  --sky-3:#e9edf6;
  --sand-1:#f2e9e1;
  --sand-2:#f8e6cd;

  --ink:#0e1e3a;
  --ink-2:#24365c;
  --muted:#5d6e90;

  --brand:#2c6bd6;
  --brand-soft:#8fb6f2;
  --sand-accent:#d9a05f;

  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.8);
  --glass-line:rgba(255,255,255,.85);
  --hairline:rgba(20,45,90,.12);

  --shadow-s:0 4px 14px rgba(18,42,84,.07);
  --shadow-m:0 16px 40px rgba(18,42,84,.12);
  --shadow-l:0 34px 80px rgba(18,42,84,.18);

  --page:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 20%,var(--sky-3) 46%,var(--sand-1) 74%,var(--sand-2) 100%);

  --r-s:12px; --r-m:20px; --r-l:30px; --r-xl:44px;
  --wrap:1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky-1:#0a1430; --sky-2:#0d1a39; --sky-3:#111d3c; --sand-1:#1b1c30; --sand-2:#241d26;
    --ink:#eef3ff; --ink-2:#c3d1ee; --muted:#93a4c6;
    --brand:#79a9f8; --brand-soft:#39528a; --sand-accent:#e6b478;
    --glass:rgba(255,255,255,.06);
    --glass-strong:rgba(255,255,255,.1);
    --glass-line:rgba(255,255,255,.14);
    --hairline:rgba(255,255,255,.14);
    --shadow-s:0 4px 14px rgba(0,0,0,.3);
    --shadow-m:0 16px 40px rgba(0,0,0,.4);
    --shadow-l:0 34px 80px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --sky-1:#0a1430; --sky-2:#0d1a39; --sky-3:#111d3c; --sand-1:#1b1c30; --sand-2:#241d26;
  --ink:#eef3ff; --ink-2:#c3d1ee; --muted:#93a4c6;
  --brand:#79a9f8; --brand-soft:#39528a; --sand-accent:#e6b478;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.1);
  --glass-line:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.14);
  --shadow-s:0 4px 14px rgba(0,0,0,.3);
  --shadow-m:0 16px 40px rgba(0,0,0,.4);
  --shadow-l:0 34px 80px rgba(0,0,0,.5);
}

/* skip link */
.skip-link{position:fixed;left:16px;top:12px;z-index:300;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:none}

/* ============================================================
   base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--sky-3);
  background-image:var(--page);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.95rem,4.1vw,3.05rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.5rem);letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-2);line-height:1.62;max-width:62ch;font-weight:500}
.sub{color:var(--muted);font-size:1rem;line-height:1.65;max-width:66ch}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:840px}
section{position:relative}
.band{padding-block:clamp(64px,9vw,126px)}
.band-tight{padding-block:clamp(46px,6vw,80px)}

/* glass surfaces */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-m);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}

/* ============================================================
   buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{
  background:var(--ink);color:#fff;
  box-shadow:0 10px 24px rgba(14,30,58,.22);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(14,30,58,.3)}
:root[data-theme="dark"] .btn-primary{color:#0e1e3a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#0e1e3a}}
.btn-ghost{
  background:var(--glass-strong);color:var(--ink);
  border-color:var(--glass-line);box-shadow:var(--shadow-s);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-store{
  background:var(--ink);color:#fff;
  box-shadow:0 10px 24px rgba(14,30,58,.22);
}
.btn-store:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(14,30,58,.3)}
:root[data-theme="dark"] .btn-store{color:#0e1e3a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-store{color:#0e1e3a}}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn-lg{padding:17px 30px;font-size:1.05rem}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 10px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-s);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#35c07a;box-shadow:0 0 0 4px rgba(53,192,122,.2)}

/* ============================================================
   header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:80;
  padding:14px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,padding .25s ease;
}
.site-header.stuck{
  background:var(--glass-strong);
  border-bottom-color:var(--hairline);
  padding:9px 0;
}
.nav{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mark{height:40px;width:auto;flex:none;display:block}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  padding:9px 13px;border-radius:999px;font-size:.95rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.menu a:hover{background:var(--glass-strong);color:var(--ink)}
.menu a.active{background:var(--glass-strong);color:var(--ink);box-shadow:var(--shadow-s)}
.menu-cta{display:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);
  cursor:pointer;transition:transform .16s ease;
}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px}
.burger{display:none}

@media (max-width:1020px){
  .menu{
    position:fixed;inset:74px 16px auto 16px;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:12px;border-radius:var(--r-m);
    background:var(--glass-strong);border:1px solid var(--glass-line);
    box-shadow:var(--shadow-l);
    backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a{padding:13px 16px;border-radius:14px;font-size:1rem}
  .burger{display:grid}
  .nav-actions .btn{display:none}
  .menu-cta{display:block;margin-top:6px;text-align:center;background:linear-gradient(180deg,#4b87e6,#2059c4);color:#fff!important;font-weight:700}
  .menu-cta.menu-cta-store{background:var(--ink);color:#fff!important}
  :root[data-theme="dark"] .menu-cta.menu-cta-store{color:#0e1e3a!important}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .menu-cta.menu-cta-store{color:#0e1e3a!important}}
}

/* ============================================================
   hero — mirrors the extension's own centred composition
   ============================================================ */
.hero{padding-top:clamp(42px,6vw,80px);padding-bottom:clamp(30px,4vw,50px);text-align:center}
.hero .pill{margin-bottom:26px}
.hero h1{max-width:16ch;margin-inline:auto}
.hero .lede{margin:22px auto 0;text-align:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:24px;color:var(--muted);font-size:.88rem;font-weight:600}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta svg{width:16px;height:16px;color:var(--brand)}

/* screenshot frames — replace the inner .shot-drop with <img> */
.shot{
  position:relative;border-radius:var(--r-xl);
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-l);
  padding:12px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.shot-bar{display:flex;align-items:center;gap:7px;padding:8px 12px 12px}
.shot-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57;display:block}
.shot-bar i:nth-child(2){background:#febc2e}
.shot-bar i:nth-child(3){background:#28c840}
.shot-bar .url{
  flex:1;margin-left:10px;height:26px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  display:flex;align-items:center;padding:0 14px;
  font-size:.76rem;color:var(--muted);font-weight:600;
}
.shot-drop{
  aspect-ratio:16/9;border-radius:calc(var(--r-xl) - 16px);
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.18));
  border:1.5px dashed rgba(44,107,214,.4);
  display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;
  color:var(--muted);
}
.shot-drop svg{width:38px;height:38px;color:var(--brand);opacity:.75}
.shot-drop b{display:block;font-size:1rem;color:var(--ink-2)}
.shot-drop small{font-size:.82rem;max-width:36ch;display:block}
.shot-drop img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.shot.filled .shot-drop{border:0;padding:0;background:none}
.shot-glow{
  position:absolute;inset:auto 8% -34px 8%;height:70px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(44,107,214,.34),transparent 70%);
  filter:blur(22px);z-index:-1;
}

/* ============================================================
   alternating split sections
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.flip .split-text{order:2}
.split-text h2{max-width:14ch}
.split-text .sub{margin-top:18px}
.tick-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.tick-list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;color:var(--ink-2);font-size:.97rem}
.tick-list svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--brand)}
@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .split.flip .split-text{order:0}
}

/* ============================================================
   section heading block
   ============================================================ */
.head{max-width:720px}
.head.center{margin-inline:auto;text-align:center}
.head.center .sub{margin-inline:auto}
.head .sub{margin-top:16px}

/* ============================================================
   squircle app icons — all drawn in code
   ============================================================ */
.icon-stage{
  display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(14px,2.4vw,30px);
  padding:clamp(26px,4vw,46px);
}
.app{display:grid;justify-items:center;gap:11px;cursor:pointer;background:none;border:0;padding:0}
.squircle{
  width:clamp(52px,6.4vw,76px);aspect-ratio:1;border-radius:29%;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 22px rgba(18,42,84,.2),inset 0 1.5px 0 rgba(255,255,255,.45);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.app:hover .squircle,.app:focus-visible .squircle{transform:translateY(-6px) scale(1.05)}
.squircle svg{width:52%;height:52%}
.app small{font-size:.8rem;font-weight:700;color:var(--ink-2);letter-spacing:-.01em}
.g-red{background:linear-gradient(160deg,#ff7a6b,#e0342a)}
.g-blue{background:linear-gradient(160deg,#67a6ff,#1f5fd0)}
.g-green{background:linear-gradient(160deg,#66dda0,#17a463)}
.g-violet{background:linear-gradient(160deg,#b28dff,#6a3ee0)}
.g-amber{background:linear-gradient(160deg,#ffc978,#e58a1f)}
.g-pink{background:linear-gradient(160deg,#ff9ec4,#e0417f)}
.g-teal{background:linear-gradient(160deg,#6fd8e0,#128c9c)}
.g-slate{background:linear-gradient(160deg,#7c8aa6,#2c3a57)}
.g-sand{background:linear-gradient(160deg,#f0c79a,#c2823c)}
@media (max-width:760px){.icon-stage{grid-template-columns:repeat(4,1fr)}}

/* folder */
.folder-tiles{
  width:clamp(52px,6.4vw,76px);aspect-ratio:1;border-radius:29%;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);
  display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:14%;
  box-shadow:0 10px 22px rgba(18,42,84,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.app:hover .folder-tiles{transform:translateY(-6px) scale(1.05)}
.folder-tiles i{border-radius:28%;display:block}
.folder-panel{
  margin:0 clamp(20px,4vw,44px) clamp(26px,4vw,46px);
  border-radius:var(--r-m);padding:22px;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-m);
  display:none;
}
.folder-panel.open{display:block;animation:pop .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.folder-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.folder-panel header b{font-size:1rem;letter-spacing:-.02em}
.folder-panel header span{font-size:.84rem;color:var(--muted);font-weight:600}
.folder-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:620px){.folder-grid{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   notepad + to-do — drawn in code, sized like screenshots
   ============================================================ */
.paper-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,38px);align-items:start}
@media (max-width:880px){.paper-row{grid-template-columns:1fr}}

.note{
  border-radius:26px;padding:0;overflow:hidden;
  background:linear-gradient(180deg,#fffdf7,#fff7ea);
  border:1px solid rgba(217,160,95,.32);
  box-shadow:var(--shadow-l);
  transform:rotate(-.7deg);
}
:root[data-theme="dark"] .note{background:linear-gradient(180deg,#241f1a,#1d1a18);border-color:rgba(230,180,120,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .note{background:linear-gradient(180deg,#241f1a,#1d1a18);border-color:rgba(230,180,120,.2)}}
.note-top{
  display:flex;align-items:center;gap:10px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(217,160,95,.2),rgba(217,160,95,.08));
  border-bottom:1px solid rgba(217,160,95,.28);
}
.note-top b{font-size:.98rem;letter-spacing:-.02em}
.note-top .tag{margin-left:auto;font-size:.74rem;font-weight:700;color:#a5702f;background:rgba(217,160,95,.2);padding:4px 10px;border-radius:999px}
.note-body{padding:18px 22px 26px;position:relative}
.note-body::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(20,45,90,.09) 33px 34px);
  pointer-events:none;
}
.note-line{position:relative;height:34px;display:flex;align-items:center;font-weight:600;color:var(--ink-2);font-size:.96rem}
.note-line.dim{color:var(--muted);font-weight:500}
.note-line .hi{background:linear-gradient(180deg,transparent 58%,rgba(143,182,242,.55) 58%);padding:0 2px}
.note-caret{display:inline-block;width:2px;height:18px;background:var(--brand);margin-left:2px;animation:blink 1.1s steps(1) infinite;vertical-align:-3px}
@keyframes blink{50%{opacity:0}}
.note-foot{display:flex;gap:8px;padding:0 22px 20px}
.note-foot i{width:26px;height:26px;border-radius:8px;background:var(--glass-strong);border:1px solid var(--hairline);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;color:var(--muted)}

.todo{
  border-radius:26px;overflow:hidden;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-l);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  transform:rotate(.6deg);
}
.todo-top{padding:20px 22px 14px;border-bottom:1px solid var(--hairline)}
.todo-top b{font-size:1.05rem;letter-spacing:-.02em;display:block}
.todo-top span{font-size:.84rem;color:var(--muted);font-weight:600}
.bar{height:7px;border-radius:999px;background:var(--hairline);margin-top:13px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4b87e6,#2059c4);transition:width .4s cubic-bezier(.4,0,.2,1)}
.todo-list{list-style:none;margin:0;padding:10px 12px 18px}
.todo-list li{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:14px;cursor:pointer;transition:background .16s ease}
.todo-list li:hover{background:var(--glass)}
.box{
  width:23px;height:23px;flex:none;border-radius:8px;
  border:2px solid var(--brand-soft);display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease;
}
.box svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
.todo-list li.done .box{background:var(--brand);border-color:var(--brand)}
.todo-list li.done .box svg{opacity:1;transform:none}
.todo-list li span{font-weight:600;color:var(--ink-2);font-size:.96rem;transition:color .18s ease}
.todo-list li.done span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--brand-soft)}
.todo-list li em{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(44,107,214,.12);color:var(--brand)}
.todo-list li em.warm{background:rgba(217,160,95,.2);color:#a5702f}
:root[data-theme="dark"] .todo-list li em.warm{color:#e6b478}

/* ============================================================
   wallpapers + live mini new tab
   ============================================================ */
.theme-lab{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3.4vw,44px);align-items:center}
@media (max-width:880px){.theme-lab{grid-template-columns:1fr}}

.mini{
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:var(--shadow-l);aspect-ratio:16/10;position:relative;
  background:linear-gradient(180deg,#bed6f7,#f8e6cd);
  transition:background .55s ease;
  display:grid;place-content:center;justify-items:center;gap:14px;padding:20px;
}
.mini .m-clock{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.045em;color:#0e1e3a;line-height:1;text-shadow:0 2px 12px rgba(255,255,255,.5)}
.mini .m-clock small{font-size:.4em;opacity:.7;font-weight:700}
.mini .m-date{font-size:.8rem;font-weight:700;color:#24365c;opacity:.85;margin-top:-6px}
.mini .m-search{
  width:min(84%,420px);height:40px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  display:flex;align-items:center;gap:10px;padding:0 18px;
  font-size:.82rem;font-weight:600;color:#41527a;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.mini .m-search svg{width:15px;height:15px}
.mini .m-icons{display:flex;gap:clamp(9px,1.6vw,16px);margin-top:4px}
.mini .m-icons i{width:clamp(26px,3.6vw,40px);aspect-ratio:1;border-radius:29%;display:block;box-shadow:0 6px 14px rgba(18,42,84,.22)}
.mini.dark .m-clock,.mini.dark .m-date{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.mini.dark .m-search{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#e8eefc}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sw{
  aspect-ratio:16/11;border-radius:16px;border:2px solid transparent;cursor:pointer;
  box-shadow:var(--shadow-s);padding:0;position:relative;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease;
}
.sw:hover{transform:translateY(-3px)}
.sw[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 4px rgba(44,107,214,.18)}
.sw b{
  position:absolute;left:8px;bottom:7px;font-size:.68rem;font-weight:700;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.45);letter-spacing:-.01em;
}
.swatch-note{margin-top:16px;font-size:.86rem;color:var(--muted);font-weight:600}

/* ============================================================
   feature grid
   ============================================================ */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media (max-width:940px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.feature-grid{grid-template-columns:1fr}}
.feat{
  padding:26px 24px 28px;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-s);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:transform .2s ease,box-shadow .2s ease;
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.feat .fi{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(160deg,rgba(107,159,240,.28),rgba(44,107,214,.16));
  border:1px solid rgba(255,255,255,.6);color:var(--brand);
}
:root[data-theme="dark"] .feat .fi{border-color:rgba(255,255,255,.12)}
.feat .fi svg{width:25px;height:25px}
.feat h3{margin-bottom:9px}
.feat p{color:var(--muted);font-size:.94rem;line-height:1.6}
.feat.warm .fi{background:linear-gradient(160deg,rgba(217,160,95,.3),rgba(217,160,95,.14));color:#b47c36}
:root[data-theme="dark"] .feat.warm .fi{color:#e6b478}

/* ============================================================
   free banner
   ============================================================ */
.free{
  border-radius:var(--r-xl);padding:clamp(34px,5vw,62px);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(75,135,230,.95),rgba(32,80,189,.95));
  color:#fff;box-shadow:0 30px 70px rgba(32,89,196,.34);
}
.free::after{
  content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.24),transparent 65%);
}
.free::before{
  content:"";position:absolute;width:340px;height:340px;left:-110px;bottom:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(248,230,205,.34),transparent 65%);
}
.free h2,.free p{color:#fff;position:relative;z-index:1}
.free .price{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:22px 0 8px;position:relative;z-index:1}
.free .price b{font-size:clamp(3rem,8vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.free .price s{font-size:1.5rem;opacity:.6;font-weight:700}
.free .note{opacity:.9;font-weight:600;position:relative;z-index:1;background:none;border:0;border-radius:0;box-shadow:none;transform:none;overflow:visible} /* not the sticky-note card that shares the class */
.free .btn{margin-top:28px;position:relative;z-index:1;background:#fff;color:#1c4fae;box-shadow:0 14px 30px rgba(0,0,0,.2)}
.free .btn:hover{transform:translateY(-2px)}
.free-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;position:relative;z-index:1}
.free-badges span{font-size:.84rem;font-weight:700;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}

/* ============================================================
   pricing
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;align-items:start}
@media (max-width:940px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{
  padding:30px 28px 34px;border-radius:28px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.plan.hot{
  background:linear-gradient(160deg,rgba(75,135,230,.96),rgba(32,80,189,.96));
  color:#fff;box-shadow:0 26px 60px rgba(32,89,196,.34);border-color:transparent;
  transform:translateY(-10px);
}
.plan.hot h3,.plan.hot .amt{color:#fff}
.plan.hot .plan-sub,.plan.hot li{color:rgba(255,255,255,.88)}
.plan.hot svg{color:#fff}
.plan .ribbon{display:inline-block;font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.2);margin-bottom:14px}
.plan .amt{font-size:2.9rem;font-weight:800;letter-spacing:-.05em;line-height:1;margin:14px 0 6px}
.plan .amt s{font-size:1.15rem;opacity:.55;margin-left:8px;font-weight:700}
.plan-sub{color:var(--muted);font-size:.9rem;font-weight:600}
.plan ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:.94rem;font-weight:600;color:var(--ink-2)}
.plan li svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--brand)}
.plan .btn{width:100%;justify-content:center}
.plan .ribbon-soft{background:rgba(53,192,122,.14);color:#17a463}
.plan-after{margin-top:12px;text-align:center;font-size:.84rem;font-weight:600;color:var(--muted)}
.plan.hot .plan-after{color:rgba(255,255,255,.82)}
.plan.hot .btn{background:#fff;color:#1c4fae}

.compare{margin-top:56px;border-radius:26px;overflow:hidden;border:1px solid var(--glass-line);box-shadow:var(--shadow-s);background:var(--glass)}
.compare table{width:100%;border-collapse:collapse;font-size:.94rem}
.compare th,.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--hairline)}
.compare th{font-weight:800;letter-spacing:-.02em;background:var(--glass-strong)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:150px}
.compare tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:600;color:var(--ink-2)}
.yes{color:#17a463;font-weight:800}
.no{color:var(--muted)}
@media (max-width:700px){.compare{overflow-x:auto}.compare table{min-width:520px}}

/* ============================================================
   faq
   ============================================================ */
.faq{max-width:840px;margin-inline:auto;margin-top:44px;display:grid;gap:12px}
.qa{border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);overflow:hidden}
.qa summary{
  list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;gap:16px;
  font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";width:12px;height:12px;margin-left:auto;flex:none;
  border-right:2.4px solid var(--brand);border-bottom:2.4px solid var(--brand);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s ease;
}
.qa[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.qa .ans{padding:0 24px 22px;color:var(--muted);font-size:.96rem;line-height:1.65;max-width:70ch}
.qa[open]{background:var(--glass-strong)}

/* ============================================================
   contact / forms
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.4vw,48px);align-items:start;margin-top:46px}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-card{padding:26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);display:grid;gap:20px}
.cline{display:flex;gap:14px;align-items:flex-start}
.cline .fi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:linear-gradient(160deg,rgba(107,159,240,.28),rgba(44,107,214,.16));color:var(--brand)}
.cline .fi svg{width:21px;height:21px}
.cline b{display:block;font-size:.95rem;letter-spacing:-.02em}
.cline span{font-size:.9rem;color:var(--muted);font-weight:600;word-break:break-word}
.form{padding:28px;border-radius:24px;background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--shadow-m)}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.86rem;font-weight:700;color:var(--ink-2)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border-radius:14px;font:inherit;font-size:.96rem;
  background:var(--glass);border:1px solid var(--hairline);color:var(--ink);
  transition:border-color .16s ease,background .16s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);background:var(--glass-strong)}
.field textarea{min-height:132px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}

/* ============================================================
   about / legal / misc
   ============================================================ */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
@media (max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{padding:24px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s)}
.stat b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.stat span{font-size:.87rem;color:var(--muted);font-weight:600}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media (max-width:820px){.team{grid-template-columns:1fr}}
.member{padding:26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s)}
.member .av{position:relative;overflow:hidden;width:62px;height:62px;border-radius:20px;background:linear-gradient(160deg,#8fb6f2,#2c6bd6);display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;margin-bottom:16px;letter-spacing:-.03em}
/* --zoom scales the photo up; --fx/--fy (0–1) is the point of the photo that lands in the centre */
.member .av img{position:absolute;max-width:none;width:var(--zoom,100%);height:var(--zoom,100%);left:calc(50% - var(--zoom,100%) * var(--fx,.5));top:calc(50% - var(--zoom,100%) * var(--fy,.5));object-fit:cover}
.member b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.member span{font-size:.88rem;color:var(--brand);font-weight:700}
.member p{margin-top:12px;font-size:.92rem;color:var(--muted);line-height:1.6}

.prose{max-width:74ch}
.prose h2{margin-top:44px;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);font-size:1rem;line-height:1.72;font-weight:500}
.prose p{margin-top:14px}
.prose ul{margin:14px 0 0;padding-left:20px;display:grid;gap:9px}
.prose .updated{font-size:.88rem;color:var(--muted);font-weight:600;margin-bottom:8px}

.timeline{margin-top:40px;display:grid;gap:0;position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--brand),transparent)}
.tl{padding:0 0 28px}
.tl::before{content:"";position:absolute;left:0;width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid var(--sky-2);margin-top:5px}
.tl b{display:block;font-size:1.02rem;letter-spacing:-.02em}
.tl span{font-size:.85rem;color:var(--brand);font-weight:700}
.tl p{font-size:.94rem;color:var(--muted);margin-top:6px;line-height:1.6}

/* ============================================================
   footer
   ============================================================ */
.site-footer{
  margin-top:clamp(50px,7vw,96px);
  background:var(--glass-strong);border-top:1px solid var(--glass-line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-block:clamp(40px,5vw,62px)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{margin-top:14px;color:var(--muted);font-size:.93rem;max-width:36ch;line-height:1.62}
.foot-col b{display:block;font-size:.92rem;letter-spacing:-.02em;margin-bottom:14px}
.foot-col a{display:block;padding:6px 0;color:var(--muted);font-size:.93rem;font-weight:600;transition:color .16s ease}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{
  border-top:1px solid var(--hairline);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:.88rem;color:var(--muted);font-weight:600;
}
.foot-bottom .zil{display:inline-flex;align-items:center;gap:8px}
.foot-bottom .zil b{color:var(--ink-2)}
.foot-bottom .zil a{transition:color .16s ease}
.foot-bottom .zil a:hover b{color:var(--brand)}
.socials{display:flex;gap:8px}
.socials a{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--hairline);transition:transform .16s ease,color .16s ease}
.socials a:hover{transform:translateY(-2px);color:var(--brand)}
.socials svg{width:17px;height:17px}

/* ============================================================
   page switching + reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.08s!important}
  html{scroll-behavior:auto}
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  padding:14px 22px;border-radius:999px;z-index:200;
  background:var(--ink);color:#fff;font-weight:700;font-size:.92rem;
  box-shadow:var(--shadow-l);opacity:0;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
}
:root[data-theme="dark"] .toast{background:#eef3ff;color:#0e1e3a}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   safe by design — permissions comparison
   ============================================================ */
.perm-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media (max-width:820px){.perm-compare{grid-template-columns:1fr}}
.perm-card{
  padding:28px 26px;border-radius:26px;border:1px solid var(--glass-line);
  background:var(--glass);box-shadow:var(--shadow-s);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.perm-good{background:var(--glass-strong);box-shadow:var(--shadow-m);border-color:rgba(53,192,122,.45)}
.perm-title{display:block;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:16px}
.perm-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.perm-list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:.96rem;color:var(--ink-2)}
.perm-list svg{width:20px;height:20px;flex:none;margin-top:2px}
.perm-bad .perm-list li{color:var(--muted)}
.perm-bad .perm-list svg{color:#e0564b}
.perm-good .perm-list svg{color:#17a463}
.perm-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);font-size:.9rem;font-weight:600;color:var(--ink-2)}

/* ============================================================
   goodbye.html — "why are you leaving?"
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bye,.bye-thanks{max-width:560px;margin:40px auto 0;text-align:left}
.bye-reasons{border:0;margin:0;padding:0;display:grid;gap:10px}
.bye-reasons label{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-line);cursor:pointer;font-weight:600}
.bye-reasons label:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,107,214,.18)}
.bye-reasons input{accent-color:var(--brand);width:18px;height:18px}
.bye-comment{display:block;margin:22px 0 8px;font-weight:700}
.bye-comment span{font-weight:500;opacity:.65}
.bye textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--glass-line);font:inherit;color:inherit;resize:vertical;background:var(--glass-strong)}
.bye-error{color:#c8283f;font-weight:600;margin:10px 0 0}
.bye .btn{margin-top:18px}
.bye-thanks{text-align:center}
.bye-thanks h2{margin:0 0 6px}
.bye-thanks .btn{margin-top:18px}

/* ============================================================
   changelog.html
   ============================================================ */
.releases{display:grid;gap:18px;margin-top:40px}
.release{padding:24px 26px;border-radius:22px;background:var(--glass-strong);border:1px solid var(--glass-line);scroll-margin-top:96px}
.release header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.release h2{margin:0;font-size:1.35rem}
.release h2 span{font-weight:600;opacity:.6;font-size:1rem}
.release-date{margin:0;font-size:.9rem;opacity:.65;font-weight:600}
.release ul{margin:14px 0 0;padding-left:20px;display:grid;gap:8px;line-height:1.55}
.release kbd{display:inline-block;padding:0 6px;border-radius:6px;border:1px solid var(--glass-line);background:var(--glass);font:600 .82em/1.6 inherit}
.release:target{box-shadow:0 0 0 3px rgba(44,107,214,.25)}

/* ---------- invite banner (?ref=CODE, js/app.js) ---------- */
.invite-bar{position:relative;z-index:2;margin:10px 0 0}
.invite-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;padding:12px 18px;border-radius:var(--r-m);background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);font-size:15px;color:var(--ink);text-align:center}
.invite-bar-in b{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.08em;white-space:nowrap}
.invite-bar .btn{padding:8px 16px;font-size:14px}

/* ============================================================
   share.html and app.html (js/tiles.js, js/share.js, js/web-app.js)
   ============================================================ */
.sx-title{font-size:clamp(2rem,4.6vw,3rem)}
.sx .head .pill,.wa .head .pill{margin-bottom:18px}
.sx .head .sub,.wa .head .sub{margin:14px auto 0}
.sx-grid{list-style:none;margin:36px auto 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,140px));justify-content:center;gap:14px;max-width:960px}
.sx-grid > li{min-width:0}
.sx-tile{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:16px 10px 13px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);text-align:center;cursor:pointer;transition:transform .16s ease,background .16s ease}
.sx-tile:hover{transform:translateY(-2px);background:var(--glass-strong)}
.sx-tile.is-folder[aria-expanded="true"]{background:var(--glass-strong);border-style:dashed}
.sx-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,var(--c1),var(--c2));color:#fff;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;box-shadow:0 6px 14px rgba(14,30,58,.16)}
.sx-icon img{width:100%;height:100%;object-fit:cover}
.sx-icon svg{width:26px;height:26px}
.sx-icon.is-emoji{font-size:1.6rem}
.sx-name{max-width:100%;font-size:.9rem;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-host{max-width:100%;margin-top:-5px;font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-sub{grid-column:1/-1;padding:14px;border-radius:22px;background:var(--glass);border:1px dashed var(--hairline)}
.sx-sub .sx-grid{margin:0;max-width:none}
.sx-add{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;max-width:960px;margin:40px auto 0;padding:26px 30px}
.sx-steps{margin:10px 0 0;padding-left:1.3em;color:var(--ink-2);line-height:1.75}
.sx-add-actions{display:flex;flex-wrap:wrap;gap:10px}
.sx-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:.9rem}
@media (max-width:560px){.sx-grid,.wa .sx-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.sx-add{padding:22px}.sx-add-actions .btn{width:100%;justify-content:center;white-space:normal}}

.wa-form{max-width:440px;margin:34px auto 0}
.wa-submit{width:100%;justify-content:center}
.wa-submit:disabled{opacity:.7;cursor:progress;transform:none}
.wa-error{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:rgba(200,40,63,.1);color:#b3263b;font-size:.9rem;font-weight:600;line-height:1.45}
:root[data-theme="dark"] .wa-error{color:#ff9aa8;background:rgba(255,120,140,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wa-error{color:#ff9aa8;background:rgba(255,120,140,.12)}}
.wa-small{margin-top:14px;font-size:.82rem;color:var(--muted);line-height:1.5}
.wa-top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between}
.wa-hello{font-size:clamp(2rem,4.6vw,3rem);overflow-wrap:anywhere}
.wa-top .sub{margin-top:8px}
.wa-top-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wa-filter{height:44px;width:260px;max-width:100%;padding:0 18px;border-radius:999px;border:1px solid var(--hairline);background:var(--glass-strong);color:var(--ink);font:inherit;font-size:.95rem}
.wa-filter:focus{outline:none;border-color:var(--brand)}
.wa-groups{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.wa-groups button{padding:9px 16px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);box-shadow:var(--shadow-s);font-weight:700;font-size:.9rem;cursor:pointer}
.wa-groups button[aria-pressed="true"]{background:var(--ink);border-color:transparent;color:#fff}
:root[data-theme="dark"] .wa-groups button[aria-pressed="true"]{color:#0e1e3a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wa-groups button[aria-pressed="true"]{color:#0e1e3a}}
.wa .sx-grid{max-width:none;margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));justify-content:stretch}
.wa-empty{margin-top:20px}
.wa-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-top:44px;align-items:start}
.wa-panel{padding:22px 24px;border-radius:var(--r-m);min-width:0}
.wa-panel h3{margin-bottom:12px}
.wa-note{padding:12px 0;border-top:1px solid var(--hairline);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;line-height:1.6}
.wa-note:first-child{padding-top:0;border-top:0}
.wa-todos{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wa-todos li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.wa-todos .mark{flex:none;width:18px;height:18px;margin-top:2px;border-radius:6px;border:2px solid var(--hairline)}
.wa-todos li.done{color:var(--muted);text-decoration:line-through}
.wa-todos li.done .mark{background:var(--brand);border-color:var(--brand)}
.wa-due{flex:none;margin-left:auto;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none}
.wa-set{padding:10px 0;border-top:1px solid var(--hairline)}
.wa-set:first-child{padding-top:0;border-top:0}
.wa-set summary{cursor:pointer;font-weight:700;font-size:.95rem}
.wa-set ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.wa-set a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:var(--brand)}
.wa-set a:hover{text-decoration:underline}
.wa-none{color:var(--muted);font-size:.92rem}
.sx-state.head .btn{margin-top:24px}
@media (max-width:560px){.wa-top-actions{width:100%}.wa-filter{flex:1;width:auto;min-width:0}}

/* pricing.html: the founder's lifetime offer */
.founder{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;max-width:960px;margin:36px auto 0;padding:20px 26px;border-radius:var(--r-m);background:linear-gradient(120deg,rgba(255,216,138,.35),rgba(245,178,103,.18)),var(--glass-strong);border:1px solid rgba(217,160,95,.45);box-shadow:var(--shadow-s)}
.founder-badge{flex:none;padding:4px 12px;border-radius:999px;background:#ffd88a;color:#6b3c00;font-size:.8rem;font-weight:800;letter-spacing:.02em}
.founder-text{flex:1;min-width:min(100%,280px);display:grid;gap:4px}
.founder-text b{font-size:1.08rem;letter-spacing:-.01em}
.founder-text span{color:var(--ink-2);font-size:.93rem;line-height:1.55}
.founder-text a{text-decoration:underline}

/* Prices for the visitor's region (js/region.js): India in rupees, Nepal in NPR, everyone else
   — and anyone without JavaScript — in US dollars. Each price is three spans; one shows. */
[data-rg]{display:none}
:root:not([data-region="in"]):not([data-region="np"]) [data-rg="world"],
:root[data-region="in"] [data-rg="in"],
:root[data-region="np"] [data-rg="np"]{display:inline}