/* usnapit - one stylesheet for every page.
   Lifted whole from the old single-page site so nothing shifts, with the document-page rules
   (help, privacy, terms) folded in from the copies they each used to carry. Those copies were
   the reason the legal pages and the marketing pages had drifted into two different type
   scales and two different navs. */
  :root{
    --acc:#6FAE16; --acc-lite:#8BD91F; --acc-deep:#5A8F11;
    --lime:#C7EE6B; --lime-soft:#E4F7BE; --lime-ink:#22330A;
    --ink:#1A1D17; --ink-soft:#40473A; --muted:#7C8474;
    --ground:#F3F5F0; --card:#FFFFFF; --line:#E2E8D6; --shadow:26,34,16;
    --display: ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    /* SF Mono on Apple platforms; it is not licensed for webfont embedding, so elsewhere this
       falls through Menlo/Consolas to the generic monospace. */
    --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --body: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --acc:#A5DD3E; --acc-lite:#8BD91F; --acc-deep:#C2EB6E;
      --lime:#2C3A16; --lime-soft:#232D14; --lime-ink:#CDEE86;
      --ink:#F1F4EA; --ink-soft:#C8CFBA; --muted:#868E79;
      --ground:#12150F; --card:#1B1F16; --line:#262B1E; --shadow:0,0,0;
    }
  }
  *{box-sizing:border-box}
  body{background:var(--ground);color:var(--ink);font-family:var(--body);line-height:1.6;
       -webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit}
  h1,h2,h3,.wm{font-family:var(--display);letter-spacing:-.025em;text-wrap:balance}
  h1{font-size:clamp(38px,7vw,66px);line-height:1.04;margin:0}
  h2{font-size:clamp(26px,4vw,38px);line-height:1.14;margin:0}
  h3{font-size:19px;margin:0}
  p{margin:0}
  .wrap{max-width:1080px;margin:0 auto;padding-left:22px;padding-right:22px}
  .sec{padding-top:64px;padding-bottom:64px}
  .eyebrow{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.14em;
           text-transform:uppercase;color:var(--acc)}
  .lede{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:60ch}

  /* brand name, in the nav and in running text - accent u, accent it, accent dot */
  .wm{font-size:44px;font-weight:800;line-height:1}
  .wm .u,.wm .it,.wm .dot{color:var(--acc)}
  .nm .u,.nm .it,.nm .dot{color:var(--acc)}
  .nm{font-family:var(--display);font-weight:800}

  nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
      backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
  .navrow{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
  .brand .mark{width:52px;height:52px;flex:0 0 auto}
  .navlinks{display:flex;gap:18px;margin-left:auto}
  .navlinks a{text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:500;
              letter-spacing:-.02em;color:var(--ink-soft)}
  .navlinks a:hover{color:var(--acc)}
  /* Matches ucookit's AI-first pill: same geometry and uppercase tracking, usnapit's accent.
     Set in mono to sit with the rest of this site's chrome. Dropped under 600px where the
     bar is already carrying the brand and the menu button. */
  .brand-tag{align-self:center;margin-left:4px;padding:3px 9px;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);
    background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc-deep);
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;white-space:nowrap}
  /* Was display:none under 600px. It is the one piece of positioning the mark carries, and
     hiding it on the devices the app actually runs on is backwards - it is tightened instead. */
  @media(max-width:600px){.brand-tag{margin-left:2px;padding:2px 7px;font-size:9px;letter-spacing:.06em}}
  .navlinks a:focus-visible,.burger:focus-visible{outline:2px solid var(--acc);outline-offset:3px;
    border-radius:6px}
  /* "Get notified" appears twice: as the bar button on desktop, inside the panel on mobile. */
  .navlinks .in-menu{display:none}
  .burger{display:none;background:transparent;border:1.5px solid var(--line);color:var(--ink);
    border-radius:12px;width:42px;height:42px;align-items:center;justify-content:center;
    cursor:pointer;padding:0;flex:0 0 auto}
  .burger:hover{border-color:var(--acc);color:var(--acc)}

  @media(max-width:820px){
    .brand .mark{width:40px;height:40px}
    .wm{font-size:32px}
    /* The bar CTA is dropped rather than squeezed - brand + button + burger will not fit a
       375px bar, and the hero repeats the same call to action immediately below. */
    .navrow .navcta{display:none}   /* .navrow prefix beats .btn, which is declared later */
    .burger{display:inline-flex;margin-left:auto}
    .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      margin:0;background:var(--card);border-bottom:1px solid var(--line);padding:4px 22px 12px;
      box-shadow:0 16px 30px -20px rgba(var(--shadow),.45)}
    .navlinks.open{display:flex}
    .navlinks a{font-size:15px;padding:14px 2px;border-bottom:1px solid var(--line)}
    .navlinks a:last-child{border-bottom:none}
    .navlinks .in-menu{display:block;color:var(--acc);font-weight:700}
  }

  .btn{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:-.02em;border:none;cursor:pointer;
       border-radius:13px;padding:12px 20px;text-decoration:none;display:inline-flex;
       align-items:center;gap:8px;transition:transform .15s ease,box-shadow .15s ease}
  .btn-primary{background:var(--acc-lite);color:#1E2E06;box-shadow:0 8px 20px rgba(var(--shadow),.18)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--shadow),.26)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--acc);color:var(--acc)}

  .hero{padding-top:70px;padding-bottom:24px}
  /* SF Mono where it exists (Apple platforms via ui-monospace/SFMono-Regular), falling back
     through Menlo and Consolas to the generic monospace elsewhere - SF Mono is not licensed
     for webfont embedding, so it cannot be shipped.
     Doubled from 12.5px, and clamped: monospace is wider per character, so at full size this
     string runs ~550px and would overflow a phone. It steps down with the viewport. */
  .tag{display:inline-flex;align-items:center;gap:8px;background:var(--lime-soft);color:var(--lime-ink);
       border-radius:999px;padding:clamp(7px,1.3vw,12px) clamp(13px,2.2vw,26px);
       font-size:clamp(13px,2.1vw,23px);font-weight:600;line-height:1.25;letter-spacing:-.03em;
       white-space:nowrap;font-family:var(--mono)}
  .hero h1{margin-top:18px}
  .hero h1 .g{color:var(--acc)}
  .hero .lede{margin-top:20px;font-size:clamp(17px,2.1vw,21px)}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

  .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:26px}
    .four{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
    @media(min-width:1020px){.four{grid-template-columns:repeat(4,1fr)}}
    @media(max-width:560px){.four{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;
        display:flex;flex-direction:column;gap:10px}
  .card p{font-size:14.6px;color:var(--ink-soft)}
  .ic{width:46px;height:46px;border-radius:14px;background:var(--lime-soft);
      display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .card.hot{background:var(--lime);border-color:transparent;color:var(--lime-ink)}
  .card.hot p{color:var(--lime-ink);opacity:.86}
  .card.hot .ic{background:rgba(34,51,10,.14)}

  .band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  @media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}

  .steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
         gap:16px;margin-top:26px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
  .step b{display:block;font-family:var(--display);font-size:16px;margin-bottom:6px}
  .step span{counter-increment:s;font-family:var(--display);font-weight:800;font-size:13px;
             color:var(--acc);display:block;margin-bottom:10px}
  .step span::before{content:"Step " counter(s)}
  .step p{font-size:14.4px;color:var(--ink-soft)}

  .list{display:flex;flex-direction:column;gap:14px;margin-top:22px}
  .li{display:flex;gap:13px;align-items:flex-start}
  .li svg{flex:0 0 auto;margin-top:3px}
  .li b{font-family:var(--display);font-size:16px}
  .li p{font-size:14.6px;color:var(--ink-soft)}

  .price{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:32px;
         max-width:520px;margin-top:26px}
  .price .amt{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1}
  .price .per{font-size:15px;color:var(--muted);font-weight:600}
  .price ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:11px}

  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;
         margin-top:26px;max-width:720px}
  .plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;
        padding:26px 24px;display:flex;flex-direction:column;gap:4px}
  .plan.best{border:2px solid var(--acc-lite);background:var(--lime-soft)}
  .ptag{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:var(--muted)}
  .plan.best .ptag{color:var(--acc)}
  .amtrow{display:flex;align-items:baseline;gap:8px;margin-top:6px}
  .pnote{font-size:13.6px;color:var(--ink-soft);margin-top:8px;line-height:1.55}
  .badge{position:absolute;top:-11px;right:22px;background:var(--acc-lite);color:#1E2E06;
         font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.04em;
         padding:5px 11px;border-radius:999px}
  .price li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-soft)}

  footer{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:20px}
  .foot{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
  /* The footer used to repeat the full mark and a 26px wordmark, and then state the copyright
     again as its own line underneath - the same claim made twice, once as decoration. The
     copyright IS the statement, so it takes that slot, with the wordmark set inline at the size of
     the year beside it rather than as a logo standing on its own. */
  .copyright{margin:0;font-size:13.5px;color:var(--muted);display:flex;align-items:baseline;gap:5px}
  .copyright .nm{font-size:15px;color:var(--ink-soft);letter-spacing:-.02em}
  .footlinks{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
  .footlinks a{font-size:14px;color:var(--muted);text-decoration:none}
  .footlinks a:hover{color:var(--acc)}
  .footlinks a.social{display:inline-flex;align-items:center;gap:6px}
  .fine{font-size:13px;color:var(--muted);margin-top:22px}

  .hero-split{align-items:center;gap:40px}
  /* The hero phone is tilted in 3D so its near edge faces the copy on the left.
     Positive rotateY pushes the right edge back, so the shadow is thrown down-right. */
  .shot-hero{display:flex;justify-content:center;perspective:1500px}
  .shot-hero img{width:302px;max-width:100%;height:auto;border-radius:34px;
    transform:rotateY(15deg) rotateX(5deg) rotateZ(-2deg);
    box-shadow:34px 42px 74px -30px rgba(var(--shadow),.58),
               12px 14px 26px -16px rgba(var(--shadow),.34);
    transition:transform .55s cubic-bezier(.22,.61,.36,1),
               box-shadow .55s cubic-bezier(.22,.61,.36,1)}
  /* Straightens a little on hover - enough to read the screen, not a party trick. */
  .shot-hero img:hover{transform:rotateY(7deg) rotateX(2deg) rotateZ(-1deg);
    box-shadow:24px 34px 66px -28px rgba(var(--shadow),.5),
               8px 12px 22px -14px rgba(var(--shadow),.3)}
  @media(max-width:820px){.hero{padding-top:44px}
    .shot-hero img{width:262px;transform:rotateY(9deg) rotateX(3deg) rotateZ(-1.5deg)}}
  @media (prefers-reduced-motion:reduce){.shot-hero img{transition:none}}

  .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px;margin-top:30px}
  .gallery figure{margin:0;display:flex;flex-direction:column;gap:13px;align-items:center}
  .gallery img{width:100%;max-width:302px;height:auto;border-radius:30px;
    box-shadow:0 20px 42px -18px rgba(var(--shadow),.42)}
  .gallery figcaption{font-size:13.6px;color:var(--muted);text-align:center;max-width:30ch;line-height:1.5}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ---- store badges -----------------------------------------------------------------------
     Apple and Google both supply these as fixed artwork with their own mandated clear space, so
     the only job here is to lay them out and leave them alone: no filters, no recoloring, no
     rounding of the corners. The two are drawn at slightly different heights by their own
     publishers, so height is set here and width left auto - matching on width instead makes the
     Apple one visibly taller than the Google one. */
  /* NOT .badge - that is already the absolutely-positioned "BEST VALUE" flag on the pricing card,
     and reusing the name took both store links out of flow and collapsed the row to zero height. */
  .trial{font-size:15px;color:var(--ink-soft);margin-top:14px;line-height:1.55;max-width:46ch}
  .trial b{color:var(--ink);font-weight:700}
  .badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
  .store-badge{display:inline-flex;line-height:0;border-radius:9px}
  .store-badge img{height:52px;width:auto;display:block}
  /* Google bakes 32.8% transparent clear space into their badge - measured, not guessed: the PNG
     is 646x250 and the artwork inside it is 564x168. Apple's SVG has none. Setting both boxes to
     the same height therefore renders Google's logo at two thirds the size of Apple's, which is
     what "make them the same size" was about. 52 / (168/250) = 77 makes the VISIBLE marks match;
     the extra height is padding, and align-items:center keeps the two on the same line. */
  .store-badge img.play{height:77px}
  .store-badge:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px}
  /* Side by side on a phone, not stacked. At 375 the row has 331px to play with and the two
     badges at their desktop size need 368, so flex-wrap dropped Google onto its own line - two
     store buttons one above the other read as a list rather than as a pair. Shrunk to fit and
     wrapping switched off: 42 and 62 measure 126 + 159 + 10 = 295, which clears 331 with room for
     the narrowest phones still in use. */
  @media (max-width:460px){
    .badges{flex-wrap:nowrap;gap:10px}
    .store-badge img{height:42px}
    .store-badge img.play{height:62px}
  }

  /* ---- document pages (help, privacy, terms, delete account) ----------------------------
     These pages are flowing prose, and the landing page's reset works against them: `p{margin:0}`
     and `h2{margin:0}` are right for a grid of cards and wrong for a legal document, which ran the
     four doc pages together into one unspaced wall at the full 1080px measure. Everything here is
     scoped to body.doc so the marketing pages keep the layout they were tuned for. */
  .doc .dochead,.doc .docmain{max-width:812px}
    /* padding-top/bottom only: the `padding` shorthand here would reset .wrap left/right to 0,
     which is what pushed the eyebrow, the h1 and the summary card flush against the screen edge
     while the prose below them stayed inset. */
  .doc .dochead{padding-top:52px;padding-bottom:4px}
  .doc h1{font-size:clamp(30px,6vw,44px);line-height:1.06;margin:11px 0 0}
  .upd{font-size:13.5px;color:var(--muted);margin-top:10px}
  .doc .lead{font-size:17px;color:var(--ink-soft);line-height:1.6;margin:14px 0 0;max-width:62ch}
  .docmain{padding-bottom:72px}

  /* Vertical rhythm. A heading belongs to what follows it, so the space above is much larger
     than the space below - that gap is what makes the sections scannable. */
  .doc .docmain h2{font-size:clamp(21px,2.6vw,26px);line-height:1.25;margin:42px 0 10px;
                   display:flex;gap:13px;align-items:baseline}
  .doc .docmain h2 .num{font-family:var(--mono);font-size:.68em;font-weight:600;color:var(--acc);
                        font-variant-numeric:tabular-nums;flex:none;letter-spacing:0}
  .doc .docmain h3{font-size:17.5px;margin:26px 0 6px;line-height:1.35}
  .doc .docmain p{margin:12px 0;font-size:15.6px;color:var(--ink-soft);line-height:1.68}
  .doc .docmain ul,.doc .docmain ol{margin:12px 0;padding-left:23px}
  .doc .docmain li{margin:7px 0;font-size:15.6px;color:var(--ink-soft);line-height:1.62}
  .doc .docmain li::marker{color:var(--muted)}
  .doc .docmain b,.doc .docmain strong{color:var(--ink);font-weight:640}
  /* Global `a{color:inherit}` makes a link in running prose invisible. In a document it has to
     read as a link. */
  .doc .docmain a,.doc .dochead a{color:var(--acc-deep);text-decoration:underline;
                                  text-underline-offset:2.5px;text-decoration-thickness:1.2px}
  .doc .docmain a:hover,.doc .dochead a:hover{color:var(--acc)}

  /* The summary that opens a policy: what someone reads if they read nothing else. */
  .tldr{background:var(--lime-soft);border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line));
        border-radius:18px;padding:19px 22px;margin:26px 0 2px}
  .tldr h2{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.13em;
           text-transform:uppercase;color:var(--acc-deep);margin:0 0 10px}
  .tldr ul{margin:0;padding-left:20px}
  .tldr li{margin:7px 0;font-size:15px;color:var(--ink-soft);line-height:1.58}
  .tldr li::marker{color:var(--acc)}
  .tldr b,.tldr strong{color:var(--ink);font-weight:640}

  /* An aside inside a section - the thing worth pulling out of the paragraph flow. */
  .doc .note{background:var(--card);border:1px solid var(--line);border-radius:16px;
             padding:3px 20px;margin:18px 0}
  .doc .note.warn{background:var(--lime-soft);border-color:color-mix(in srgb,var(--acc) 28%,var(--line))}

  /* Jump list at the top of a long page. */
  .toc{border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:26px 0 4px;
       background:var(--card)}
  .toc h2{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.13em;
          text-transform:uppercase;color:var(--muted);margin:0 0 12px}
  .toc ol{margin:0;padding:0;list-style:none;display:grid;
          grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px 26px}
  /* Scoped to match .doc .docmain li, which would otherwise win on specificity and add its
     own 7px margins on top of the grid gap. */
  .doc .docmain .toc li{margin:0;font-size:15px;line-height:1.4;display:flex;gap:11px;align-items:baseline}
  .doc .docmain .toc ol{gap:11px 26px}
  .toc .num{font-family:var(--mono);font-size:13px;color:var(--acc);font-variant-numeric:tabular-nums}
  /* The nav is sticky, so an anchor would otherwise drop its heading underneath it. */
  .doc .docmain h2[id]{scroll-margin-top:84px}
  .toc a{color:var(--ink-soft);text-decoration:none}
  .toc a:hover{color:var(--acc-deep);text-decoration:underline}

  /* What we collect. This was a three-column table whose cells held whole paragraphs, so it
     overflowed sideways on a phone and was unreadable on a desktop. The same content reads as a
     labelled block per item, which needs no horizontal scroll at any width. */
  .drow{border-top:1px solid var(--line);padding:18px 0}
  .drow:last-of-type{border-bottom:1px solid var(--line)}
  .doc .docmain .drow h3{margin:0 0 9px;font-size:16.5px}
  .doc .docmain .drow p{margin:7px 0;font-size:15px;line-height:1.6;
                        display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:baseline}
  .drow .lbl{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;
             text-transform:uppercase;color:var(--muted);padding-top:2px}
  @media (max-width:560px){
    .doc .docmain .drow p{grid-template-columns:1fr;gap:2px}
  }

  /* FAQ. A question is a disclosure so the page is a list of questions rather than forty
     screens of answers, and every one is still on the page for search and for ctrl-F. */
  .faq{border-top:1px solid var(--line);margin:14px 0 0}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;padding:15px 40px 15px 0;position:relative;
               font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink);
               line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:8px;top:23px;width:9px;height:9px;
                      border-right:2.2px solid var(--acc);border-bottom:2.2px solid var(--acc);
                      transform:rotate(45deg);transition:transform .18s ease}
  .faq details[open] summary::after{transform:rotate(-135deg)}
  .faq summary:hover{color:var(--acc-deep)}
  .doc .docmain .faq p{margin:0 0 14px}
  .doc .docmain .faq p:first-of-type{margin-top:2px}
  .doc .docmain .faq ul,.doc .docmain .faq ol{margin:0 0 14px}
  @media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

  .fl{display:flex;gap:18px;flex-wrap:wrap}
  .fl a{font-size:14px;color:var(--muted);text-decoration:none}
  .fl a:hover{color:var(--acc)}
  .box{background:var(--lime-soft);color:var(--lime-ink);border-radius:16px;padding:18px 20px;margin:22px 0}
  .box p{color:var(--lime-ink);margin:0}
  table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.6px}
  th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
  th{font-family:var(--display);color:var(--ink);font-size:13.5px}
  .tw{overflow-x:auto}


  /* ---- pricing: the two-column free / Pro comparison ------------------------------------- */
  /* auto-fit rather than a fixed pair, so on a narrow phone the two cards stack instead of
     squeezing an eight-item list into half a screen width. */
  .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  .ticks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
  .ticks li{position:relative;padding-left:26px;font-size:14.6px;color:var(--ink-soft);line-height:1.5}
  .ticks li::before{content:"";position:absolute;left:2px;top:.52em;width:12px;height:7px;
    border-left:2.4px solid var(--acc);border-bottom:2.4px solid var(--acc);
    transform:rotate(-45deg) translateY(-2px)}
  .card.hot .ticks li{color:var(--lime-ink)}
  .card.hot .ticks li::before{border-color:var(--lime-ink)}

  /* A content page's own title. Sized exactly like the h2 it replaced, because every one of these
     pages opens with the section heading that used to live on the landing page - promoting it is
     about document structure, not about making it louder. */
  h1.pagetitle{font-size:clamp(26px,4vw,38px);line-height:1.14;margin:0}