/* ==================================================================
   The pages around the app: home, sign in, pricing, contact, blog.
   Same palette as the app itself, so walking from the website into the
   party does not feel like arriving somewhere else.
   ================================================================== */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F1F3F6; --surface-3:#E5E9EE;
  --line:#E3E7EC; --line-2:#CFD6DE;
  --ink:#131820; --ink-2:#525C68; --ink-3:#7C8794;
  --amber:#C97F12; --amber-deep:#A96A0C; --amber-glow:rgba(201,127,18,.10);
  --on-amber:#FFFFFF; --green:#1E9E63; --red:#CC4436;
  --shadow:0 1px 2px rgba(19,24,32,.06),0 10px 30px -18px rgba(19,24,32,.35);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E12; --surface:#141922; --surface-2:#1C232D; --surface-3:#242D39;
    --line:#262F3A; --line-2:#36414F;
    --ink:#ECEFF3; --ink-2:#9AA5B2; --ink-3:#6B7480;
    --amber:#F0A93C; --amber-deep:#C4801F; --amber-glow:rgba(240,169,60,.16);
    --on-amber:#171207;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0E12; --surface:#141922; --surface-2:#1C232D; --surface-3:#242D39;
  --line:#262F3A; --line-2:#36414F;
  --ink:#ECEFF3; --ink-2:#9AA5B2; --ink-3:#6B7480;
  --amber:#F0A93C; --amber-deep:#C4801F; --amber-glow:rgba(240,169,60,.16);
  --on-amber:#171207;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
     backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brandlink{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:17px;
           letter-spacing:-.01em;white-space:nowrap;flex:0 1 auto;min-width:0;min-height:40px}
.brandlink:hover{text-decoration:none}
.brandlink svg{flex:0 0 auto}
.navlinks{display:flex;gap:22px;margin-left:auto;align-items:center;flex:0 0 auto}
/* The link text is 23px tall, which is under the 24px minimum for a pointer
   target and awkward to hit with a thumb. The nav row is 64px, so the hit
   area can grow to a comfortable 40px without shifting a single pixel of
   layout: the padding is vertical only and the row was already centring. */
.navlinks a{color:var(--ink-2);font-size:14.5px;font-weight:500;white-space:nowrap;
            display:inline-flex;align-items:center;min-height:40px}
.navlinks a:hover{color:var(--ink);text-decoration:none}
.navcta{background:var(--amber);color:var(--on-amber)!important;padding:9px 17px;border-radius:10px;
        font-weight:600;line-height:1.2}
.navcta:hover{background:var(--amber-deep);text-decoration:none}
@media(max-width:720px){.navlinks a.hide-sm{display:none}}
/* At phone width the three words were wrapping onto two lines each and the
   bar grew to fit them. Nothing in a nav should ever wrap. */
@media(max-width:430px){
  .nav .wrap{gap:12px}
  .navlinks{gap:14px}
  .brandlink{font-size:16px}
  .navlinks a{font-size:14px}
  .navcta{padding:8px 13px}
}
@media(max-width:360px){
  .brandlink span,.brandlink{font-size:15px}
  .navlinks a:not(.navcta){display:none}
}

/* ---- hero ---- */
.hero{text-align:center;padding:76px 0 20px}
.hero h1{font-size:clamp(2.4rem,7vw,4.1rem);line-height:1.03;letter-spacing:-.032em;
         margin:0 0 18px;font-weight:800;text-wrap:balance}
.hero .sub{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink-2);max-width:38ch;
           margin:0 auto 34px;text-wrap:balance}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
/* The bare class carries a real look now. It used to set only shape and leave
   colour to .primary or .ghost, so a button given just class="btn" fell
   through to the browser's own grey - which on a dark page is a white slab
   sitting in the middle of the design. A default that looks deliberate costs
   nothing and makes that impossible. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     padding:15px 27px;border-radius:12px;font-weight:600;font-size:15.5px;
     border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
     cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--amber);color:var(--on-amber)}
.btn.primary:hover{background:var(--amber-deep);text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2);text-decoration:none}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:default}
/* Leaving, rather than arriving. Outlined rather than filled: cancelling is
   a thing somebody should be able to find, not a thing the page pushes. */
.btn.danger{background:transparent;color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.btn.danger:hover{background:color-mix(in srgb,var(--red) 8%,transparent);border-color:var(--red);text-decoration:none}
.microcopy{font-size:13.5px;color:var(--ink-3);margin:0}

/* ---- the phones ---- */
.stage{margin:52px auto 0;max-width:780px;position:relative}
.stage .glow{position:absolute;inset:14% 6% 22%;background:var(--amber);opacity:.16;
             filter:blur(56px);border-radius:50%;z-index:0}
.phones{position:relative;z-index:1;display:flex;gap:18px;justify-content:center;align-items:flex-end}
.phone{width:172px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
       padding:12px 11px 15px;box-shadow:var(--shadow)}
.phone.mid{width:196px;transform:translateY(-16px)}
.phone .scr{background:var(--surface-2);border-radius:14px;padding:12px 11px;min-height:186px;
            display:flex;flex-direction:column;gap:9px}
.phone .nm{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.phone .art{height:60px;border-radius:9px;background:linear-gradient(135deg,var(--amber),var(--amber-deep));opacity:.9}
.phone .t1{height:9px;border-radius:5px;background:var(--surface-3);width:78%}
.phone .t2{height:7px;border-radius:4px;background:var(--surface-3);width:52%}
.bars{display:flex;gap:3px;align-items:flex-end;height:26px;margin-top:auto}
.bars i{flex:1;background:var(--amber);border-radius:2px;opacity:.85;
        animation:bounce 1.1s ease-in-out infinite}
@keyframes bounce{0%,100%{height:26%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.bars i{animation:none;height:60%}}
@media(max-width:640px){.phones{gap:10px}.phone{width:118px;padding:9px 8px 11px}
  .phone.mid{width:134px}.phone .scr{min-height:150px;padding:9px 8px}}
@media(max-width:400px){.phones{gap:7px}.phone{width:104px}.phone.mid{width:118px}}

/* ---- sections ---- */
section{padding:78px 0}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--amber);margin:0 0 12px}
h2{font-size:clamp(1.65rem,3.6vw,2.3rem);line-height:1.14;letter-spacing:-.02em;
   margin:0 0 14px;font-weight:750;text-wrap:balance}
h3{font-size:1.06rem;font-weight:650;margin:0 0 7px}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:60ch;margin:0 0 34px}
p{margin:0 0 15px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0}
.card .ic{width:38px;height:38px;border-radius:10px;background:var(--amber-glow);color:var(--amber);
          display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.alt{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.step{counter-increment:s;position:relative;padding-top:44px}
.step::before{content:counter(s);position:absolute;top:0;left:0;width:32px;height:32px;
              border-radius:9px;background:var(--amber);color:var(--on-amber);font-weight:700;
              display:flex;align-items:center;justify-content:center;font-size:15px}
.step p{color:var(--ink-2);font-size:14.5px;margin:0}

/* ---- forms ---- */
.authwrap{max-width:420px;margin:0 auto;padding:44px 0 80px}
.authcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;
          padding:30px 28px;box-shadow:var(--shadow)}
.authcard h1{font-size:1.6rem;margin:0 0 6px;letter-spacing:-.02em}
.authcard .sub{color:var(--ink-2);font-size:14.5px;margin:0 0 24px}
.field{margin-bottom:15px}
/* The label and, where there is one, the small link that belongs beside it -
   which is where a person looks for "forgotten it", right next to the box
   they cannot fill in. */
.field label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
             font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field label .fplink{font-weight:600;font-size:12.5px;color:var(--amber);text-decoration:none;
                     white-space:nowrap;padding:2px 0}
.field label .fplink:hover{text-decoration:underline}
.field label .fplink:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.field input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line-2);
             background:var(--surface-2);color:var(--ink);font-size:16px;font-family:inherit}
.field input:focus{outline:2px solid var(--amber);outline-offset:0;border-color:transparent}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-3);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;
      border-radius:11px;border:1px solid var(--line-2);background:var(--surface);
      color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;font-family:inherit}
.gbtn:hover{background:var(--surface-2)}
.formnote{font-size:13px;color:var(--ink-3);margin:18px 0 0;text-align:center}
.msg{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;display:none}
.msg.show{display:block}
.msg.bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.msg.good{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
/* The widget reserves its own height so the button does not jump when it
   appears, and collapses to nothing if it never does. */
.tswrap{margin:4px 0 16px;min-height:0;display:flex;justify-content:center}
.tswrap:empty{margin:0}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;align-items:start}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 25px;position:relative}
.plan.best{border-color:var(--amber);box-shadow:var(--shadow)}
.plan .tag{position:absolute;top:-11px;left:25px;background:var(--amber);color:var(--on-amber);
           font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
           padding:4px 10px;border-radius:6px}
.plan h3{font-size:1.15rem;margin-bottom:4px}
.plan .price{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
.plan .price small{font-size:.95rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.plan .who{color:var(--ink-2);font-size:14px;margin:0 0 18px}
.plan ul{list-style:none;padding:0;margin:0 0 22px}
.plan li{padding-left:25px;position:relative;font-size:14.5px;color:var(--ink-2);margin-bottom:9px}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
                 border-left:2px solid var(--green);border-bottom:2px solid var(--green);
                 transform:rotate(-45deg)}

/* ---- paying on the web ------------------------------------------------
   Razorpay injects its own button into the form and we do not control how it
   looks. So the card around it does the work: our border, our surface, our
   type - and the button itself is stretched to the full width of its column
   so it reads as a deliberate part of the block rather than a widget that
   wandered in. */

/* ---- prose ---- */
.prose{max-width:70ch}
.prose h2{font-size:1.4rem;margin:38px 0 10px}
.prose h3{margin:26px 0 6px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.updated{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}

/* ---- posts ---- */
.posts{display:grid;gap:14px}
.post{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:22px 24px;color:inherit}
.post:hover{border-color:var(--line-2);text-decoration:none}
.post .date{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.post h3{margin:6px 0 6px;font-size:1.12rem}
.post p{color:var(--ink-2);font-size:14.5px;margin:0}

/* ---- faq ---- */
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;
        padding:16px 20px;margin-bottom:10px}
details[open]{border-color:var(--line-2)}
summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;
        display:flex;align-items:center;gap:14px;min-height:40px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--amber);font-weight:700;font-size:19px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:12px 0 0;color:var(--ink-2);font-size:14.5px}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line);padding:46px 0 60px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:720px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:600}
.fgrid a{display:flex;align-items:center;min-height:34px;color:var(--ink-2);font-size:14px;margin-bottom:2px}
.fgrid a:hover{color:var(--ink);text-decoration:none}
.fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
      display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
      font-size:13px;color:var(--ink-3)}

/* The same switch the app uses, so a control means the same thing on both
   sides of the sign-in. Lifted rather than importing the app's stylesheet,
   which carries its own :root and would fight this one. */
.sw{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .track{flex:0 0 auto;width:46px;height:27px;border-radius:14px;background:var(--surface-3);
           border:1px solid var(--line-2);position:relative;transition:background .18s,border-color .18s;margin-top:1px}
.sw .track .knob{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
                 background:var(--ink-3);transition:transform .18s,background .18s;
                 box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw input:checked + .track{background:var(--amber-deep);border-color:var(--amber)}
.sw input:checked + .track .knob{transform:translateX(19px);background:#FFF3DF}
.sw input:focus-visible + .track{outline:2px solid var(--amber);outline-offset:2px}
.sw .lab{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.sw .lab b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:3px}
.hide{display:none!important}

/* ---- blog posts that open where they sit ---------------------------- */
details.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
             padding:0;margin-bottom:14px;overflow:hidden}
details.post[open]{border-color:var(--line-2)}
details.post > summary{cursor:pointer;list-style:none;padding:22px 24px;display:block}
details.post > summary::-webkit-details-marker{display:none}
details.post > summary::after{content:none}
details.post:hover{border-color:var(--line-2)}
details.post .date{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block}
details.post h3{margin:7px 0 6px;font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
details.post summary > p{color:var(--ink-2);font-size:14.5px;margin:0}
details.post .more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--amber)}
details.post .more::after{content:" \2192"}
details.post[open] .more{display:none}
.postbody{padding:0 24px 26px;border-top:1px solid var(--line);margin-top:4px;padding-top:20px}
.postbody p{color:var(--ink-2);font-size:15px;line-height:1.72;margin:0 0 16px;max-width:68ch}
.postbody h3{font-size:1.02rem;color:var(--ink);margin:26px 0 8px;letter-spacing:0}
.postbody code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
               padding:2px 6px;border-radius:4px;color:var(--ink)}
.postbody strong{color:var(--ink)}
.postbody em{color:var(--ink)}

/* ---- show the password ---------------------------------------------- */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:48px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
     width:38px;height:38px;display:flex;align-items:center;justify-content:center;
     background:none;border:0;color:var(--ink-3);cursor:pointer;border-radius:9px;padding:0}
.eye:hover{color:var(--ink-2);background:var(--surface-3)}
.eye:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* ---- the footer brand, which sat a little low against its mark ------- */
/* The footer's link rule (.fgrid a{display:block}) is one point more specific
   than .brandlink{display:flex}, so it won and the mark dropped onto its own
   line above the word. Two classes plus a type beats it back. The svg must
   stay inline-level too - display:block on it inside a block anchor is what
   forced the line break in the first place. */
footer.site .brandlink{display:flex;align-items:center;gap:10px;line-height:1;width:max-content}
footer.site .brandlink svg{display:inline-block;flex:0 0 auto;vertical-align:middle}

/* ============================ dashboard ============================== */
:root{--s-blue:#1F6FB2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-blue:#3F8DD1}}
:root[data-theme="dark"]{--s-blue:#3F8DD1}

.adhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
        flex-wrap:wrap;padding-top:40px;border-bottom:1px solid var(--line);padding-bottom:18px}
.adactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adactions .btn{padding:9px 15px;font-size:13.5px}
.asof{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.asof b{color:var(--ink-2);font-weight:500}

.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.metric.live{border-color:var(--amber-deep);background:linear-gradient(180deg,var(--amber-glow),transparent)}
.metric .mv{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;
            font-variant-numeric:tabular-nums;margin-bottom:5px}
.metric .mv.ok{color:var(--green)} .metric .mv.warn{color:var(--amber)} .metric .mv.dim{color:var(--ink-3)}
.metric .ml{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.35}

.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin-top:22px}
.charts.small{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.chartcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.chartcard h3{font-size:14px;margin:0 0 4px;font-weight:600}
/* The headline figure the chart is of, above it, so the card answers its own
   question before anybody squints at a bar. */
.chead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.chead .cbig{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chead .csub{font-size:12px;color:var(--ink-3)}
.cscale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);
  margin-top:6px;font-variant-numeric:tabular-nums}
/* Which view of the same series. */
.ctabs{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px}
.ctabs button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px}
.ctabs button.on{background:var(--surface);color:var(--ink)}
.spark{display:flex;align-items:flex-end;gap:3px;height:180px;
       padding:0 0 2px;border-bottom:1px solid var(--line-2);position:relative}
/* Three faint rules behind the bars, so a height can be read rather than only
   compared with the bar beside it. */
.spark::before{content:"";position:absolute;inset:0 0 2px 0;pointer-events:none;
  background:repeating-linear-gradient(to top,transparent 0,transparent 24.6%,
    color-mix(in srgb,var(--line-2) 60%,transparent) 24.6%,
    color-mix(in srgb,var(--line-2) 60%,transparent) calc(24.6% + 1px))}
.spark i{flex:1 1 0;min-width:3px;border-radius:3px 3px 0 0;opacity:.88;transition:opacity .12s;
  position:relative;z-index:1}
.spark i:hover{opacity:1;filter:brightness(1.15)}
.spark .cempty{flex:1 1 auto;align-self:center;text-align:center;margin:0;
               font-size:12.5px;color:var(--ink-3)}
.cnote{font-size:12px;color:var(--ink-3);margin:12px 0 0;line-height:1.5}
.chartcard .plandl{grid-template-columns:1fr;gap:10px}
.chartcard .plandl dt{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink-2);margin:0}
.chartcard .plandl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
                       padding-bottom:9px;border-bottom:1px solid var(--rule,var(--line))}
.chartcard .plandl div:last-child{border-bottom:0;padding-bottom:0}
.chartcard .plandl dd{font-size:16px;font-variant-numeric:tabular-nums}

/* the account page borrows these two */
.plandl{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:0}
.plandl dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.plandl dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.whocard{display:flex;align-items:center;gap:14px;background:var(--surface-2);
         border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.whocard .wav{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--amber);
              color:var(--on-amber);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.whocard .whot{min-width:0}
.whocard .whot b{display:block;font-size:16px;font-weight:700;margin-bottom:2px}
.whocard .whot span{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.planname{font-size:17px;font-weight:700}
.planpill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
          padding:4px 9px;border-radius:999px;white-space:nowrap}
.planpill.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.planpill.trial{background:var(--amber-glow);color:var(--amber)}
.planpill.over{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
/* Paid for, cancelled, still running. Not green - it is not carrying on. */
.planpill.warn{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red)}
/* A green frame round an ENDING badge says two things at once. */
.subbanner.ending{border-color:var(--line-2)}

/* ---- a subscriber is told what they have, not sold what they had ---- */
.subbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
           background:var(--surface);border:1px solid var(--green);border-radius:var(--r);
           padding:16px 18px;margin:34px 0 0}
.subbanner .sbleft{display:flex;align-items:center;gap:14px;min-width:0}
.subbanner b{display:block;font-size:15.5px;margin-bottom:2px}
.subbanner span#sbSub{display:block;font-size:13px;color:var(--ink-2)}
.subbanner .btn{padding:10px 16px;font-size:14px;flex:0 0 auto}
.plan .btn.spent{opacity:.5;cursor:default;pointer-events:none}

/* ---- the dashboard's user list ------------------------------------- */
.sechead{font-size:19px;font-weight:700;margin:38px 0 14px;letter-spacing:-.01em;scroll-margin-top:80px}

.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;
         background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.filters .f{display:flex;flex-direction:column;gap:5px;min-width:0}
.filters .f-grow{flex:1 1 210px}
/* From and To are one control in two boxes. Wrapped together so the bar can
   never break between them, which it did: From sat on the first row and To
   dropped to a second, with the gap in between reading as a mistake. */
.filters .fpair{display:flex;gap:10px;flex:0 0 auto}
.filters .f-date{flex:0 0 145px}
.filters .f-date input{min-width:0}
@media(max-width:760px){.filters .f-grow{flex:1 1 100%}.filters .fpair{flex:1 1 100%}
                        .filters .f-date{flex:1 1 0}}
.filters .f-actions{margin-left:auto;justify-content:flex-end}
.filters label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.filters input,.filters select{font:inherit;font-size:13.5px;padding:8px 10px;border-radius:9px;
         border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);min-width:0;width:100%}
.filters input:focus,.filters select:focus{outline:2px solid var(--amber);outline-offset:1px}
.filters .ghost{font:inherit;font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer;
         border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2)}
.filters .ghost:hover{color:var(--ink);border-color:var(--ink-3)}

.tablebar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
          margin:16px 0 10px}
.tablebar .tcount{margin:0;font-size:13px;color:var(--ink-2)}
.tablebar .tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;color:var(--ink-2)}
.tablebar .chk{display:flex;align-items:center;gap:7px;cursor:pointer}
.tablebar .exp{display:flex;align-items:center;gap:8px}
.tablebar .exp a{border:1px solid var(--line-2);border-radius:8px;padding:5px 11px;
                 color:var(--ink);font-weight:600;font-size:12.5px;background:var(--surface)}
.tablebar .exp a:hover{text-decoration:none;border-color:var(--amber);color:var(--amber-ink,var(--ink))}

/* The table is wider than a phone and that is fine - it scrolls inside its own
   box rather than making the whole page slide sideways. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.utable{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
.utable th,.utable td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line)}
.utable thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;
                 font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
                 font-weight:600;cursor:pointer;user-select:none}
.utable thead th:hover{color:var(--ink)}
.utable thead th .ar{opacity:.55;font-size:9px;margin-left:3px}
.utable tbody tr:last-child td{border-bottom:0}
.utable tbody tr:hover{background:var(--surface-2)}
.utable td.em{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.utable .pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.utable .pill.paid{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.utable .pill.trial{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.utable .pill.expired,.utable .pill.none{background:var(--surface-3);color:var(--ink-3)}
.utable .tag{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
             border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;margin-left:6px}
.utable .none{color:var(--ink-3)}
.utable .empty{padding:34px 16px;text-align:center;color:var(--ink-3);white-space:normal}

.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0 6px;
       font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.pager button{font:inherit;font-size:13px;padding:6px 13px;border-radius:8px;cursor:pointer;
              border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.pager button:disabled{opacity:.4;cursor:default}

.storeline{margin:-8px 0 14px;font-size:12.5px;color:var(--ink-3)}
.storeline b{font-weight:600;color:var(--ink-2)}
.storeline .warn{color:var(--red)}

/* ---- account page: avatars and the password form -------------------- */
/* Each block on the account page is a card like the two above it, rather than
   loose controls floating on the page background. */
.accard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
        padding:20px 22px;margin-top:16px}
.acrule{border:0;border-top:1px solid var(--line);margin:26px 0}
.acsec{font-size:15px;font-weight:700;margin:0 0 4px}
.acsub{font-size:13.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.5}

.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px}
.avpick{padding:4px;border:2px solid transparent;border-radius:14px;background:none;cursor:pointer;
        line-height:0;transition:border-color .12s,transform .12s}
.avpick:hover{transform:translateY(-1px)}
.avpick:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.avpick[aria-pressed="true"]{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.avpick .av{width:100%;height:auto;display:block;border-radius:10px}
.av{display:block;border-radius:8px}

#pwForm label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
#pwForm input{width:100%;font:inherit;font-size:14.5px;padding:11px 12px;border-radius:10px;
              border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink)}
#pwForm input:focus{outline:2px solid var(--amber);outline-offset:1px}
#pwForm .btn{margin-top:18px}
#pwForm .msg{margin:16px 0 0}
/* The eye sits inside the box, so the box must not clip it away. */
#pwForm .pwwrap{margin-bottom:0}
/* The account head badge holds an svg now, not a letter. */
.wav{line-height:0;display:inline-flex;align-items:center;justify-content:center}
.wav .av{width:56px;height:56px;border-radius:14px}

/* ---- the signed-in device list --------------------------------------
   One row per device: what it is, when it was last used, and a way to push
   it off. The row for the phone you are holding says so and has no button,
   because signing yourself out from here would look like a bug. */
.devlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.devrow{display:flex;align-items:center;gap:12px;background:var(--surface-2);
        border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.devrow.here{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.devicon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;
         align-items:center;justify-content:center;background:var(--surface);
         border:1px solid var(--line);color:var(--ink-2)}
.devicon svg{display:block}
.devwhat{min-width:0;flex:1 1 auto}
.devwhat b{display:block;font-size:14px;font-weight:600;line-height:1.3;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.devwhat span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.devrow .btn{flex:0 0 auto;padding:7px 12px;font-size:13px;min-height:34px}
.devhere{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--amber);
         background:color-mix(in srgb,var(--amber) 14%,transparent);
         border-radius:999px;padding:5px 10px;white-space:nowrap}
@media (max-width:420px){
  .devrow{gap:9px;padding:10px}
  .devrow .btn{padding:7px 10px}
}

/* ---- the account editor --------------------------------------------- */
.filters .ghost.primary{background:var(--amber);border-color:var(--amber);color:var(--on-amber);font-weight:600}
.filters .ghost.primary:hover{filter:brightness(1.05);color:var(--on-amber)}

.drawer{position:fixed;inset:0;z-index:90;background:rgba(15,17,21,.42);
        backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.drawer .dpanel{background:var(--surface);border:1px solid var(--line);border-radius:18px;
        width:min(520px,100%);max-height:min(88vh,760px);display:flex;flex-direction:column;
        box-shadow:0 24px 70px rgba(0,0,0,.28)}
.dhead{display:flex;align-items:center;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.dhead h3{margin:0;font-size:17px;font-weight:700;flex:1 1 auto}
.dx{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.dx:hover{color:var(--ink)}
.dbody{padding:16px 20px;overflow-y:auto;flex:1 1 auto}
.dbody label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
             color:var(--ink-3);font-weight:600;margin:14px 0 5px}
.dbody label:first-of-type{margin-top:0}
.dbody .dhint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3);font-size:11.5px}
.dbody input,.dbody select{width:100%;font:inherit;font-size:14px;padding:10px 11px;border-radius:10px;
             border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink)}
.dbody input:focus,.dbody select:focus{outline:2px solid var(--amber);outline-offset:1px}
.dwho{margin:0 0 4px;font-size:13.5px;color:var(--ink-2)}
.dwho b{color:var(--ink)}
.drow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.drow{grid-template-columns:1fr}}
.dfoot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.dfoot .dspace{flex:1 1 auto}
.dfoot button{font:inherit;font-size:13.5px;padding:9px 16px;border-radius:10px;cursor:pointer;
              border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink)}
.dfoot button:hover{border-color:var(--ink-3)}
.dfoot .primary{background:var(--amber);border-color:var(--amber);color:var(--on-amber);font-weight:600}
.dfoot .danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line-2))}
.dfoot .danger:hover{background:color-mix(in srgb,var(--red) 10%,transparent);border-color:var(--red)}
.dfoot button:disabled{opacity:.5;cursor:default}

.utable tbody tr{cursor:pointer}
.utable .tag.test{color:var(--s-blue);border-color:color-mix(in srgb,var(--s-blue) 45%,var(--line-2))}

/* ====================================================================
 * Polish pass on the pages around the app.
 *
 * Same rule as the app stylesheet: depth from one light source, motion
 * only in response to something, and all of it off under
 * prefers-reduced-motion.
 * ==================================================================== */

/* ---- things that lift when you point at them ---------------------- */
.plan,.accard,.authcard{transition:transform .22s cubic-bezier(.16,1,.3,1),
  box-shadow .22s ease,border-color .22s ease}
@media (hover:hover){
  .plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .plan.best:hover{box-shadow:0 14px 40px -22px var(--amber)}
}

/* ---- the buttons ---------------------------------------------------- */
.btn{transition:transform .12s ease,filter .18s ease,box-shadow .2s ease}
.btn:active{transform:scale(.985)}
.btn.primary{box-shadow:0 6px 20px -12px var(--amber)}
@media (hover:hover){ .btn.primary:hover{filter:brightness(1.04)} }

/* ---- one light source, along the top edge of every raised card ----- */
.plan,.accard,.authcard{position:relative}
.plan::after,.accard::after,.authcard::after{content:"";position:absolute;
  left:14px;right:14px;top:0;height:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--ink) 11%,transparent),transparent)}
/* .plan already uses ::before for its "Start here" tag, so it takes ::after
   and the tag keeps the corner it has always had. */

/* ---- the questions open and close rather than jumping -------------- */
details{border-radius:12px;transition:background .2s ease}
details[open]{background:var(--surface-2)}
details summary{cursor:pointer;transition:color .15s ease}
details[open] summary{color:var(--amber)}
details[open] > p{animation:faqin .22s ease both}
@keyframes faqin{from{opacity:0;transform:translateY(-4px)}}

/* ---- the avatar picker ---------------------------------------------- */
.avpick{transition:border-color .15s ease,transform .15s cubic-bezier(.34,1.56,.64,1),
        background .15s ease}
.avpick[aria-pressed="true"]{transform:scale(1.04)}

/* ---- the device rows ------------------------------------------------ */
.devrow{transition:border-color .2s ease,background .2s ease}
.devrow.here{background:color-mix(in srgb,var(--amber) 5%,var(--surface-2))}

/* ---- and none of it, for anybody who asked for none of it ---------- */
@media (prefers-reduced-motion:reduce){
  .plan,.accard,.authcard,.btn,.avpick,.devrow,details{transition:none}
  .plan:hover{transform:none}
  details[open] > p{animation:none}
}

/* ---- deleting an account from the row it sits on --------------------
   It was only ever inside the editor, where nobody went looking. Two taps
   here as well, and the second one is unmistakably red. */
.utable th.nosort{cursor:default;width:1%}
.utable td.act{width:1%;white-space:nowrap;text-align:right}
.rowdel{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:8px;min-height:32px;
        color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);
        cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.rowdel:hover{color:var(--red);border-color:var(--red)}
.rowdel.armed{background:var(--red);border-color:var(--red);color:#FFFFFF}
.rowdel:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rowdel[disabled]{opacity:.55;cursor:default}

/* ---- four plans, one row --------------------------------------------
   auto-fit with a 268px floor wanted 1126px for four columns and the page
   is 1036px wide inside its padding, so Yearly dropped to a second row on
   every desktop. How many plans there are is a fact about the page, not
   something to be discovered from a width. */
@media (min-width:1000px){
  .plans{grid-template-columns:repeat(4,1fr);gap:16px}
  .plan{padding:24px 19px}
  .plan .tag{left:19px}
  .plan .price{font-size:1.95rem}
  .plan h3{font-size:1.08rem}
  .plan .who{font-size:13.5px;margin-bottom:16px}
  .plan li{font-size:13.5px;padding-left:22px;margin-bottom:8px}
  .plan li::before{width:11px;height:7px}
}
@media (min-width:640px) and (max-width:999px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:639px){ .plans{grid-template-columns:1fr} }

/* The "after you pay" card that used to live here is gone with 4.15. It told
   people to email a receipt so a human could switch their subscription on;
   Razorpay now tells the server directly and the subscription switches itself
   on. Its rules went with it rather than staying as a style nothing wears. */

/* Four charts across, now that there are four. The old 280px floor needed
   1120px plus gaps and the page is 1036px wide inside its padding, so the
   fourth card sat alone on a second row. */
/* Four 226px charts across a 1036px page were four charts nobody could read:
   the headings wrapped, the view switch was squashed against them and thirty
   bars shared 190 pixels. Two across, twice the size. The small variant is for
   the three list cards below, which really are lists and want to be narrow. */
@media (min-width:900px){ .charts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .charts.small{grid-template-columns:repeat(3,1fr)} }

/* The six digit code, when somebody types it rather than following a link.
   Spaced and monospaced, so reading it off a phone screen and typing it here
   is not a test of eyesight. */
.codebox{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
         font-size:22px!important;letter-spacing:.28em;text-align:center;font-weight:600}

/* ---- a reset link, shown once ---------------------------------------
   Only a hash of the token is kept, so this panel is the one moment the
   thing exists. It says so, and it gives every way of getting it to a
   person without retyping it. */
.issued{margin-top:14px;padding:20px 22px;border-radius:16px;background:var(--surface);
        border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line))}
.issued{border-color:var(--line-2)}
.issued{border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line))}
.issued h4{margin:0 0 4px;font-size:1rem;font-weight:700}
.issued .isub{margin:0 0 16px;font-size:13px;color:var(--ink-3)}
.issued .ilab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
              text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.issued .irow{display:flex;gap:8px}
.issued .irow input{flex:1 1 auto;min-width:0;font:inherit;font-size:13.5px;padding:11px 12px;
  border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace)}
.issued .irow button{flex:0 0 auto;padding:0 16px;min-height:42px;border-radius:10px;cursor:pointer}
.issued .iacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.issued .iacts .ghost{padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;min-height:38px}
.issued .iacts .ghost:hover{border-color:var(--amber);color:var(--ink)}
.issued .iacts .ghost.primary{background:var(--amber);border-color:var(--amber);
  color:var(--on-amber);font-weight:700}
@media (max-width:520px){ .issued{padding:16px} .issued .irow{flex-direction:column} }


/* ================= dashboard, 4.17 =================================== */

/* Money gets its own grid and its own weight. A subscription business that
   cannot see its recurring revenue on the first screen is being run on vibes. */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.kpi.money{border-color:var(--green);
  background:linear-gradient(180deg,color-mix(in srgb,var(--green) 8%,transparent),transparent 60%)}
.kpi .kv{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.kpi .kl{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.kpi .kn{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:6px}
.kpi .kv.ok{color:var(--green)} .kpi .kv.warn{color:var(--amber)} .kpi .kv.dim{color:var(--ink-3)}

/* A jump bar, because the panel is long and everything is below the fold. */
.adnav{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 4px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  position:sticky;top:64px;z-index:20;backdrop-filter:saturate(180%) blur(10px)}
.adnav a{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:5px 11px;border-radius:8px;
  background:var(--surface);border:1px solid var(--line)}
.adnav a:hover{color:var(--ink);border-color:var(--line-2);text-decoration:none}

/* Keeping and restoring. Two very different buttons, so they do not look alike. */
.backup{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.backup .bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.backup .bcard.danger{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.backup h4{margin:0 0 8px;font-size:15px}
.backup p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.backup .btn{width:100%}
.bmsg{margin:12px 0 0;font-size:13px;line-height:1.55}
.bmsg:empty{display:none}
.bmsg.good{color:var(--green)} .bmsg.bad{color:var(--red)}
.bfile{display:block;width:100%;font:inherit;font-size:13px;color:var(--ink-2);
  padding:10px;border:1px dashed var(--line-2);border-radius:10px;background:var(--surface-2);
  margin-bottom:12px;cursor:pointer}

/* The confirm dialog. Deleting used to be two taps on the same button, which
   a double tap does by itself. */
.ask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:color-mix(in srgb,#000 62%,transparent);backdrop-filter:blur(3px)}
.ask[hidden]{display:none}
.askbox{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  padding:26px 26px 22px;max-width:440px;width:100%;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.askbox h3{margin:0 0 10px;font-size:1.1rem}
.askbox p{margin:0 0 8px;font-size:14px;color:var(--ink-2);line-height:1.6}
.askwho{display:block;margin:14px 0;padding:12px 14px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;line-height:1.6}
.askwho b{display:block;font-size:15px;color:var(--ink)}
.askwho code{font-family:var(--mono);font-size:12.5px;color:var(--amber)}
.asklab{display:block;font-size:12.5px;color:var(--ink-2);margin:0 0 6px}
.askbox input{width:100%;font:inherit;font-size:15px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em}
.askacts{display:flex;gap:10px;margin-top:18px}
.askacts .btn{flex:1}
@media (max-width:560px){ .adnav{position:static} }

/* ---- "who is this subscription for?" -------------------------------
   The one screen between pressing Subscribe and Razorpay's window. It exists
   because their checkout answers that question from whoever last paid on the
   device if we do not answer it first. Built by checkout.js, which is deleted
   from the Android build, so none of this is ever reachable in the app. */
.bbdim{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,8,10,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
.bbdim.on{display:flex}
.bbwho{width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.bbwho h3{margin:0 0 8px;font-size:19px;line-height:1.25}
.bbwplan{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--amber)}
.bbwsub{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.bbwf{margin:0 0 14px}
.bbwf label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.bbopt{font-weight:400;color:var(--ink-3);text-transform:none}
.bbwf input{width:100%;box-sizing:border-box;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:11px}
.bbwf input:focus{outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 24%,transparent)}
.bbwf input.wrong{border-color:var(--red)}
.bbphone{display:flex;align-items:stretch;gap:8px}
.bbphone>span{display:flex;align-items:center;padding:0 12px;font-size:15px;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line-2);border-radius:11px}
.bbwerr{margin:2px 0 12px;min-height:0;font-size:13px;line-height:1.5;color:var(--red)}
.bbwerr:empty{margin:0}
.bbwrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.bbwrow .btn{flex:1 1 auto;min-width:130px;justify-content:center}
.bbwfoot{margin:16px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3)}
@media (max-width:420px){ .bbwho{padding:20px} .bbwrow .btn{min-width:0} }

/* ---- cancelled, and still running ----------------------------------
   Red and above everything, because it is a countdown rather than a loss:
   they still have what they paid for, and on a date they can see they will
   not. The way back is a button, not a sentence. */
.endingsoon{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  /* The header is sticky. Without this, scrolling to this strip parks its
     first line underneath the nav bar - and the first line is the whole
     message. */
  scroll-margin-top:96px;
  background:color-mix(in srgb,var(--red) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));
  border-radius:15px;padding:16px 20px;margin:0 0 20px}
.endingsoon .esdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--red);
  margin-top:7px;box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 16%,transparent)}
.endingsoon .estext{flex:1 1 260px;min-width:0}
.endingsoon .estext b{display:block;font-size:15px;color:var(--red);margin-bottom:3px}
.endingsoon .estext span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.endingsoon .btn{flex:0 0 auto}
@media (max-width:560px){ .endingsoon .btn{width:100%} }