/* ==========================================================================
   site.css  ·  the look of bonafidecrew.com (the marketing website + blog)

   Used by every page in site/. Follows the website design on the design
   board (page "Website & signup", row "New website 11 Oct") and the look
   rules in CLAUDE.md 6b: 12px corners, lit buttons and tiles, two-layer
   crisp shadows, our own wave art only as a background band.
   The website is separate from the app (app/); it only links to the app's
   login and signup pages (see js/site.js).

   Sections:  1 colors and sizes   2 reset and type   3 buttons
              4 header and menu    5 hero              6 app screenshots + phone
              7 businesses list    8 wave band + tool cards
              9 tool sections     10 feature panels (deep teal)
             11 cards, steps, compare table, pricing, questions
             12 blog              13 closing band + footer
             14 tablet (under 1100px) and phone (under 700px)
   ========================================================================== */


/* --- 1. Colors and sizes ---------------------------------------------------
   One color per tool: Partner Crew indigo, Client Words orange, Proof purple,
   Today green. Calm white and light grey everywhere else. */
:root {
  color-scheme: light;
  --ink: #111111;  --ink-2: #6e6e73;  --ink-3: #424245;
  --bg: #ffffff;   --soft: #f5f5f7;   --line: #e5e5ea;
  --blue: #007aff; --indigo: #5856d6; --orange: #ff9500; --purple: #af52de; --green: #34c759;
  --deep: #05252e;            /* the dark teal of our wave art */
  --radius: 12px; --radius-sm: 10px;
  /* Depth: a fine edge, a tight shadow and a wide soft one */
  --lift-1: 0 0 0 1px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.05), 0 10px 24px -14px rgba(16,24,40,.22);
  --lift-2: 0 0 0 1px rgba(16,24,40,.05), 0 2px 4px rgba(16,24,40,.06), 0 28px 56px -22px rgba(16,24,40,.34);
  --top-light: inset 0 1px 0 rgba(255,255,255,.6);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Instrument Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Sora', var(--font);
}
/* Our own copies of the fonts, so no outside font service sees our visitors */
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
/* Sora for every big heading and big number (decided 11 Oct 2026; body text
   stays in the system font so it reads easily). Free font, SIL Open Font
   License, from Google Fonts via @fontsource/sora 5.1.0. 800 = the home page
   headline, 700 = everything else. */
@font-face { font-family: 'Sora'; src: url('../fonts/sora-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif.woff2') format('woff2'); font-display: swap; }


/* --- 2. Reset and type ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #0062cc; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
/* Headings and big numbers in Sora. Sora is a little wider than the system
   font, so letters are tightened slightly less than before. */
.h1, .h2, .h3, .featured h2, .article .head h1, .closing h2, .prose h2, .plan .price b, .pn .hd .n, .tc .count, .tc .name { font-family: var(--display); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.center { text-align: center; }
.h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.h3 { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--c, var(--blue)); margin: 0 0 12px; }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin: 16px 0 0; }
.center .lead { margin-left: auto; margin-right: auto; max-width: 720px; }
.muted { color: var(--ink-2); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.section-head { max-width: 780px; margin: 0 auto; text-align: center; }
.sec { padding: 112px 0; }
.sec.soft { background: var(--soft); }
/* Small line icons: <svg class="i"> */
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }


/* --- 3. Buttons: lit from above, a glow in their own color ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: var(--radius-sm);
       font-size: 17px; font-weight: 600; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.btn-blue, .btn-blue:hover { color: #fff; background: linear-gradient(180deg, #2b95ff, #0a6ef0); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -12px rgba(10,110,240,.85); }
.btn-blue:hover { background: linear-gradient(180deg, #1f88f5, #0a62d6); }
.btn-white, .btn-white:hover { color: var(--blue); background: linear-gradient(180deg, #fff, #f3f5f8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16,24,40,.08), 0 6px 14px -8px rgba(16,24,40,.3); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 18px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.fine { font-size: 14px; color: var(--ink-2); margin: 16px 0 0; }


/* --- 4. Header and menu ------------------------------------------------------
   Sticky, frosted. On phones the links fold into a <details> menu, so no
   JavaScript is needed to open it. */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px);
       -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.top .wrap { min-height: 64px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.logo:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none;
        background: linear-gradient(180deg, #2b95ff, #0a6ef0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -6px rgba(10,110,240,.8); }
.mark .i { width: 18px; height: 18px; }
.nav { display: flex; gap: 28px; font-size: 14px; }
.nav a { color: var(--ink-3); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.nav a[aria-current="page"] { font-weight: 600; }
.top .actions { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.top .login { color: var(--ink); font-weight: 500; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 52px; width: 240px; background: #fff; border-radius: var(--radius); box-shadow: var(--lift-2); padding: 8px; }
.menu nav a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--ink); font-weight: 600; }
.menu nav a:hover { background: var(--soft); }


/* --- 5. Hero: plain light ground, the real app below the words ------------ */
.hero { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); padding: 96px 0 140px; text-align: center; }
.hero .lead { font-size: 22px; line-height: 1.45; max-width: 740px; margin: 24px auto 0; }
.hero .h1 { max-width: 1000px; margin: 24px auto 0; }
/* The home page headline: Sora, extra heavy and big. "easier." sits on its
   own line, a little bigger, lit like our buttons (brighter blue on top)
   with a faint glow under it. Tried and dropped on 11 Oct: an orange
   underline swoosh (too playful), a stronger glow, a grey first line. */
.h1.big { font-family: var(--display); font-weight: 800; font-size: 96px; letter-spacing: -0.03em; line-height: 1.08; margin-top: 8px; }
.pop-word { display: inline-block; font-size: 1.14em; margin-top: 4px; color: var(--blue);
  background: linear-gradient(180deg, #3a95ff 10%, #0a5fd8 95%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 8px 14px rgba(0, 110, 255, .14)); }
.h1.big .nw { white-space: nowrap; }   /* "Selling just got" never splits */
/* The "3 tools · 18 features" badge: three lit tool tiles and a colored edge */
.pop { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 18px 6px 8px; border-radius: 12px; border: 1.5px solid transparent;
       font-size: 15px; font-weight: 600; color: #1d1d1f;
       background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--indigo), var(--orange), var(--purple)) border-box;
       box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 14px 30px -14px rgba(88,86,214,.45); }
.pop b { color: var(--blue); }
.pop .tiles { display: flex; }
.pop .tiles .tile { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px #fff, inset 0 1px 0 rgba(255,255,255,.45); }
.pop .tiles .tile + .tile { margin-left: -6px; }
.pop .tiles .i { width: 15px; height: 15px; }


/* --- 6. App screenshots and the phone -------------------------------------- */
/* Lit color square with a white icon */
.tile { display: grid; place-items: center; color: #fff; flex: none; border-radius: 8px; background: var(--c, var(--blue));
        background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.06));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 6px 12px -6px rgba(0,0,0,.45); }
.tile-40 { width: 40px; height: 40px; border-radius: 10px; }
.tile-32 { width: 32px; height: 32px; border-radius: 8px; }
/* A screenshot of the app on a computer (the app window on our waves) */
.shot { display: block; width: 100%; height: auto; border-radius: var(--radius);
        box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.08), 0 50px 100px -30px rgba(16,24,40,.45); }
/* Computer screenshot with a phone overlapping its corner */
.combo { position: relative; max-width: 1120px; margin: 72px auto 0; }
.combo .iph { position: absolute; right: -48px; bottom: -80px; z-index: 2; }
/* A modern phone: thin dark edge, the pill cut-out at the top, side buttons */
.iph { --w: 270px; position: relative; flex: none; width: var(--w); aspect-ratio: 1 / 2.17; border-radius: calc(var(--w) * .15); padding: 5px;
       background: linear-gradient(145deg, #56565c, #1c1c1e 38%, #2c2c2e 62%, #0d0d0f);
       box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 1px rgba(0,0,0,.45), 0 10px 20px rgba(0,0,0,.14), 0 44px 80px -28px rgba(16,24,40,.55); }
.iph::before, .iph::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.iph::before { left: -3px; top: 22%; height: 12%; }
.iph::after { right: -3px; top: 25%; height: 11%; }
.iph .scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .15 - 5px); background: #f2f2f7; }
.iph .scr::before { content: ""; position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 30%; height: 4%; border-radius: 13px; background: #000; z-index: 2; }
/* App screenshots start below the pill cut-out */
.iph .scr img { width: 100%; margin-top: 15%; }
/* The QR picture fills the screen; the edges take its own coral */
.iph .scr.qr { display: flex; align-items: center; background: linear-gradient(180deg, #e96a2a, #cc4f12); }
.iph .scr.qr img { margin: 0; }


/* --- 7. Businesses it's built for ------------------------------------------ */
.trades { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.trade { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 10px; border-radius: var(--radius); background: #fff;
         font-size: 16px; font-weight: 600; color: #1d1d1f; box-shadow: var(--lift-1), inset 0 1px 0 #fff; }
.trade .tile { width: 36px; height: 36px; border-radius: 9px; }
.trade .i { width: 19px; height: 19px; }
.trade.more { color: var(--blue); background: #f5f9ff; box-shadow: inset 0 0 0 1.5px rgba(0,122,255,.35), 0 14px 28px -16px rgba(0,122,255,.35); }


/* --- 8. Wave band with the three tool cards -------------------------------- */
.waves { color: #fff; background: var(--deep) url('../img/waves-crew.svg') center bottom / cover no-repeat; }
.waves.night { background: #140c33 url('../img/waves-night.svg') center / cover no-repeat; }
.waves .lead { color: rgba(255,255,255,.78); }
.waves .eyebrow { color: #7fd8e3; }
.band { padding: 96px 0 120px; margin-top: 64px; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.tc { display: block; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink);
      box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.12), 0 40px 80px -30px rgba(0,0,0,.6), var(--top-light);
      transition: transform .2s; }
.tc:hover { color: var(--ink); transform: translateY(-4px); }
/* A big, long phone whose bottom half is hidden under the white card body,
   like a sheet of paper laid over it. Only the top of the screen shows.
   CAREFUL: align-items: flex-start keeps the phone its full height; without it
   the box squashes the phone to fit and it looks short and stubby. */
.tc .top-pic { height: 490px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; background: linear-gradient(180deg, var(--t1), #fff); }
.tc .top-pic .iph { --w: 300px; margin-top: 40px; }
.tc .body { position: relative; padding: 26px 28px 30px; }
.tc .count { position: absolute; right: 24px; top: -34px; height: 64px; min-width: 64px; padding: 0 14px; border-radius: var(--radius);
             display: flex; align-items: center; gap: 6px; color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
             background: var(--c); background-image: linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.06));
             box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 26px -10px var(--c), 0 0 0 4px #fff; }
.tc .count small { font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .9; }
.tc .name { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.tc p { font-size: 16px; color: var(--ink-2); margin: 12px 0 0; }
.see { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--c); }


/* --- 9. One tool at a time: words on one side, the app on the other ------- */
.feat { display: flex; align-items: center; gap: 64px; padding: 64px 0; --c: var(--blue); }
.feat.rev { flex-direction: row-reverse; }
.feat .txt { flex: 1 1 380px; min-width: 0; }
.feat .vis { flex: 1.25 1 480px; min-width: 0; }
.feat .tag { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--c); }
.feat .h3 { margin-top: 22px; }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.4; }
.checks .i { color: var(--c, var(--blue)); margin-top: 1px; width: 18px; height: 18px; }
.panel { border-radius: var(--radius); padding: 48px 40px; display: flex; justify-content: center; align-items: flex-end; gap: 24px; overflow: hidden;
         background: linear-gradient(160deg, var(--t1), var(--soft) 70%); }
.panel .iph { --w: 230px; }
.panel .iph + .iph { margin-bottom: 40px; }
.panel.one .iph { --w: 260px; }
/* Three phones side by side, the middle one raised (QR pictures). */
.panel.trio { gap: 16px; align-items: center; }
.panel.trio .iph { --w: 170px; }
.panel.trio .iph + .iph { margin-bottom: 0; }
.panel.trio .iph:nth-child(2) { --w: 190px; z-index: 1; }


/* --- 10. Every feature: three glass panels on deep teal -------------------- */
.f18 { background: linear-gradient(170deg, #073642 0%, #05252e 55%, #0a1c2c 100%); color: #fff; padding: 128px 0; }
.f18 .lead { color: #a1a1a6; max-width: 560px; }
.f18 .h2 { font-size: 56px; letter-spacing: -0.035em; }
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.pn { border-radius: var(--radius); padding: 30px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.6); }
.pn .hd { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* Solid color tiles with white icons (no glow), Daniel 11 Oct. The color is set
   again here because .pn .hd span below would turn the icon grey. */
.pn .hd .tile { width: 44px; height: 44px; border-radius: 11px; color: #fff; background-image: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.pn .hd .tile .i { width: 24px; height: 24px; }
.pn .hd b { display: block; font-size: 21px; letter-spacing: -0.02em; }
.pn .hd span { font-size: 14px; color: #9fb3ba; }
.pn .hd .n { margin-left: auto; font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--l); }
.pn ul { list-style: none; margin: 0; padding: 0; }
.pn li { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.pn li:last-child { border-bottom: 0; }
.pn li .i { color: var(--l); margin-top: 2px; width: 19px; height: 19px; }
.pn li b { display: block; font-size: 16px; font-weight: 600; }
.pn li span { display: block; font-size: 14px; line-height: 1.4; color: #9fb3ba; margin-top: 2px; }
.pn .see { color: var(--l); }


/* --- 11. Cards, steps, comparison, pricing, questions ---------------------- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--lift-1), var(--top-light); }
.card.up { box-shadow: var(--lift-2); }
.grid { display: grid; gap: 20px; margin-top: 48px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcard { padding: 28px; }
.fcard h3 { font-size: 20px; letter-spacing: -0.02em; margin-top: 20px; }
.fcard p { font-size: 16px; color: var(--ink-2); margin: 8px 0 0; }
.step { padding: 32px; }
.step .k { font-size: 15px; font-weight: 700; color: var(--c, var(--blue)); }
.step h3 { font-size: 22px; letter-spacing: -0.02em; margin-top: 14px; }
.step p { font-size: 16px; color: var(--ink-2); margin: 8px 0 0; }
.quote-big { max-width: 960px; margin: 0 auto; text-align: center; }
.quote-big img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 0 0 3px #fff, 0 10px 24px -10px rgba(0,0,0,.45); }
.quote-big p { font-family: var(--serif); font-size: 48px; line-height: 1.12; margin: 28px 0 0; }
.quote-big .who { margin-top: 24px; }
/* "Stars are nice. Clients pay the bills.": us against typical review tools.
   Our column is a raised blue strip running the full height, with white
   check marks; theirs is quiet grey with crosses. Built as a grid so the
   blue strip can sit behind its column as one piece. */
.vs { position: relative; display: grid; grid-template-columns: 1fr 230px 230px; grid-template-rows: repeat(7, auto);
      max-width: 1000px; margin: 64px auto 0; }
/* CAREFUL: position: absolute keeps the strip out of the grid's cells (it only
   borrows column 2 as its frame); without it the rows get pushed around. */
.vs::before { content: ""; position: absolute; inset: -18px 0; grid-column: 2 / 3; grid-row: 1 / 8; border-radius: var(--radius);
              background: linear-gradient(180deg, #2b8cff, #0a64e6); z-index: 0;
              box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,80,200,.25), 0 40px 70px -30px rgba(0,90,220,.65); }
.vs > div { position: relative; z-index: 1; display: flex; align-items: center; padding: 20px 24px; font-size: 17px; border-bottom: 1px solid var(--line); }
.vs > .us, .vs > .them { justify-content: center; text-align: center; }
.vs > .us { color: #fff; font-weight: 700; border-bottom-color: rgba(255,255,255,.18); }
.vs > .them { color: var(--ink-2); }
.vs > .h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border-bottom: 0; padding-bottom: 14px; }
.vs > .h.us { color: #fff; font-size: 17px; letter-spacing: -0.01em; text-transform: none; gap: 8px; }
.vs > .h.us .i { width: 22px; height: 22px; }
.vs > .last { border-bottom: 0; }
.vs .ok, .vs .x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.vs .ok { background: #fff; color: #0a64e6; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.vs .x { background: #ececf0; color: #a1a1a6; }
.vs .ok .i, .vs .x .i { width: 16px; height: 16px; stroke-width: 3; }
.vs .big { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.vs .small { font-size: 14px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; margin: 48px auto 0; text-align: left; }
.plan { padding: 36px; }
.plan.best { box-shadow: 0 0 0 2px var(--blue), 0 30px 60px -24px rgba(0,122,255,.45); }
.plan .top-row { display: flex; justify-content: space-between; align-items: center; }
.plan .name { font-size: 20px; font-weight: 700; }
.plan .flag { font-size: 12px; font-weight: 700; color: var(--blue); background: #e8f2ff; padding: 4px 9px; border-radius: 6px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; }
.plan .price b { font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.plan .btn { width: 100%; margin-top: 28px; }
.faq { max-width: 860px; margin: 48px auto 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
/* The open/close button: a blue circle with a plus that turns into a minus. */
.faq .pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #e8f2ff; transition: background .2s; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--blue); transform: translate(-50%, -50%); transition: transform .2s, background .2s; }
.faq .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm { background: var(--blue); }
.faq details[open] .pm::before, .faq details[open] .pm::after { background: #fff; }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover .pm { background: #d6e8ff; }
.faq details[open] summary:hover .pm { background: #0a64e6; }
/* Words only screen readers hear (the Yes / No behind the check marks). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq details p { margin: -6px 0 24px; font-size: 17px; color: var(--ink-2); max-width: 680px; }


/* --- 12. Blog ---------------------------------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.tabs a { height: 38px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink-3); background: #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.featured { display: flex; overflow: hidden; margin-top: 48px; color: var(--ink); }
.featured:hover { color: var(--ink); }
.featured img { flex: 1 1 460px; min-width: 0; height: 400px; object-fit: cover; }
.featured .body { flex: 1 1 420px; min-width: 0; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.featured h2 { font-size: 40px; letter-spacing: -0.03em; line-height: 1.08; margin-top: 12px; }
.meta { font-size: 13px; font-weight: 700; color: var(--c, var(--indigo)); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post { overflow: hidden; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s; }
.post:hover { color: var(--ink); transform: translateY(-3px); }
.post .art { height: 180px; display: grid; place-items: center; color: #fff; background: var(--c); background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(0,0,0,.16)); }
.post .art .i { width: 56px; height: 56px; stroke-width: 1.8; }
.post .body { padding: 24px; }
.post h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin-top: 8px; }
.post p { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; }
.article { padding: 72px 0 112px; }
.article .head { max-width: 800px; }
.article .head h1 { font-size: 58px; letter-spacing: -0.035em; line-height: 1.04; margin-top: 16px; }
.article .byline { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; color: var(--ink-2); }
.article .cover { max-width: 1040px; margin-top: 40px; }
.article .cover img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--lift-2); }
.prose { max-width: 720px; margin-top: 48px; font-size: 19px; line-height: 1.65; }
.prose h2 { font-size: 32px; letter-spacing: -0.025em; line-height: 1.15; margin: 48px 0 14px; }
.prose p { margin: 0 0 20px; }
.text { background: #e9e9eb; border-radius: 16px; border-bottom-left-radius: 5px; padding: 12px 16px; max-width: 540px; margin: 4px 0 22px; font-size: 17px; line-height: 1.4; }
.tip { padding: 24px; margin: 28px 0; display: flex; gap: 16px; align-items: flex-start; }
.tip .muted { font-size: 17px; margin-top: 4px; }
.cta-card { border-radius: var(--radius); padding: 40px; margin-top: 48px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cta-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 20px 40px -12px rgba(0,0,0,.6); }


/* --- 13. Closing band and footer ------------------------------------------- */
.closing { padding: 140px 0; text-align: center; }
/* soon.html: the message fills the screen on the night waves. */
.closing.soon { min-height: calc(100vh - 65px); display: flex; align-items: center; }
.closing.soon .pop-word { background: linear-gradient(180deg, #bfe6ff 10%, #6cc4ff 95%); -webkit-background-clip: text; background-clip: text; filter: none; }
.closing.soon .lead { color: rgba(255,255,255,.8); max-width: 620px; margin: 24px auto 0; }
.closing.soon .btn-row { justify-content: center; margin-top: 36px; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.2); }
/* The tool pages' headlines: bigger and heavier, a step below the home page. */
.hero .h1:not(.big) { font-size: 80px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.closing h2 { font-size: 64px; letter-spacing: -0.035em; line-height: 1.04; max-width: 900px; margin: 0 auto; }
.closing .fine { color: rgba(255,255,255,.6); }
.foot { border-top: 1px solid var(--line); padding: 56px 0; font-size: 14px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 12px; font-size: 14px; }
.foot a { display: block; color: var(--ink-2); padding: 4px 0; }
.foot a:hover { color: var(--ink); }
.foot .legal { grid-column: 1 / -1; font-size: 13px; color: #86868b; border-top: 1px solid var(--line); padding-top: 20px; }


/* --- 14. Tablet (under 1100px) and phone (under 700px) --------------------- */
@media (max-width: 1099px) {
  .nav, .top .actions { display: none; }
  .menu { display: block; }
  .h1 { font-size: 56px; }
  .h1.big { font-size: 76px; }
  .hero .h1:not(.big) { font-size: 64px; }
  .tools, .panels, .grid-4, .grid-3, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat, .feat.rev { flex-direction: column; align-items: stretch; gap: 40px; }
  .combo .iph { --w: 220px; right: -12px; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
  .vs { grid-template-columns: 1fr 86px 86px; margin-top: 48px; }
  .vs > div { padding: 14px 8px; font-size: 15px; }
  .vs > .h { font-size: 11px; }
  .vs > .h.us { font-size: 13px; }
  .vs > .h.us .i { display: none; }
  .vs .big { font-size: 17px; }
  .vs .small { font-size: 12px; }
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .h1 { font-size: 40px; }
  .h1.big { font-size: 44px; } .hero .h1:not(.big) { font-size: 40px; } .h2 { font-size: 32px; } .h3 { font-size: 28px; }
  .hero { padding: 48px 0 110px; } .hero .lead { font-size: 18px; }
  .sec { padding: 72px 0; } .band { padding: 64px 0 80px; margin-top: 48px; } .f18 { padding: 72px 0; } .closing { padding: 88px 0; }
  .f18 .h2, .closing h2 { font-size: 34px; }
  .tools, .panels, .grid-4, .grid-3, .grid-2, .posts, .plans { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .combo { margin-top: 40px; }
  .combo .iph { --w: 150px; right: -6px; bottom: -60px; }
  .trade { height: 48px; font-size: 15px; padding: 0 14px 0 8px; } .trade .tile { width: 30px; height: 30px; }
  .panel { padding: 28px 12px; gap: 12px; }
  .panel.trio { gap: 8px; } .panel.trio .iph { --w: 96px; } .panel.trio .iph:nth-child(2) { --w: 112px; } .panel .iph { --w: 150px; } .panel.one .iph { --w: 220px; }
  .quote-big p { font-size: 30px; }
  .featured img { height: 220px; } .featured .body { padding: 24px; } .featured h2 { font-size: 28px; }
  .article .head h1 { font-size: 36px; } .article .cover img { height: 240px; }
  .prose { font-size: 17px; } .prose h2 { font-size: 26px; margin-top: 40px; }
  .compare th, .compare td { padding: 12px 10px; font-size: 14px; }
  .foot .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tc, .post { transition: none; } }


/* --- 15. The app call-to-action in the middle of every article --------------
   A tinted card a little wider than the text, with a real app screenshot in
   a phone that rises out of the bottom of the card. */
.app-cta { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: end; margin: 44px -48px; padding: 36px 40px 0;
           border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--t1), #fff 75%);
           box-shadow: var(--lift-2), var(--top-light); }
.app-cta .words { padding-bottom: 36px; }
.app-cta h3 { font-size: 28px; letter-spacing: -0.025em; line-height: 1.12; margin-top: 8px; }
.app-cta .checks { margin: 18px 0 24px; gap: 8px; }
.app-cta .go { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.app-cta .go a:not(.btn) { font-weight: 600; }
.app-cta .checks li { font-size: 16px; }
.app-cta .pic { height: 300px; overflow: hidden; }
.app-cta .iph { --w: 230px; }
@media (max-width: 899px) {
  .app-cta { grid-template-columns: 1fr; margin: 36px 0; padding: 28px 24px 0; }
  .app-cta .pic { height: 240px; display: flex; justify-content: center; }
  .app-cta .iph { --w: 200px; }
}


/* --- 16. Galleries: a row of real pictures you swipe sideways --------------
   Used on the tool pages (post pictures, proof pages, QR pictures). The row
   sits inside the page width, centered, with 4 pictures showing on a
   computer, 3 on a tablet, and one and a bit on a phone (so it is obvious
   there is more). Swipe on a phone; arrow buttons below on a computer.
   The side padding equals the gap, so the next picture starts exactly at
   the edge (no sliver), and the shadows still have room. */
.gallery { margin-top: 48px; }
.g-track { position: relative; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
           margin: 0 -20px -40px; padding: 8px 20px 72px; scroll-padding: 0 20px; }
.g-track::-webkit-scrollbar { display: none; }
.g-track > * { flex: none; width: calc((100% - 60px) / 4); scroll-snap-align: start; }
.g-track img.post { height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius);
                    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 10px rgba(16,24,40,.08), 0 30px 50px -24px rgba(16,24,40,.45); }
.g-nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; position: relative; }
.g-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); cursor: pointer;
         display: flex; align-items: center; justify-content: center; box-shadow: var(--lift-1), inset 0 1px 0 #fff; }
.g-btn[data-dir="-1"] .i { transform: rotate(180deg); }
.g-btn:disabled { opacity: .35; cursor: default; }
/* .wide: the row runs across the whole screen with bigger pictures
   (Client Words posts). The picture in the middle is in focus; the ones at
   both sides are cut off by the screen edge and fade into the page, so it
   is obvious there is more. The arrows bring the next one to the middle. */
.gallery.wide .g-track { margin: 0 0 -40px; padding: 8px 0 72px; gap: 24px; scroll-snap-type: x mandatory;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.gallery.wide .g-track > * { width: 400px; scroll-snap-align: center; }
.gallery.wide .g-track::before, .gallery.wide .g-track::after { content: ""; flex: none; width: calc(50vw - 212px); }
/* .phones: the pictures are whole phones (proof pages, partner pages, QR
   pictures) instead of flat posts. */
.gallery.phones .g-track > * { width: 280px; --w: 280px; }
.gallery.phones .g-track { gap: 36px; }
@media (max-width: 1099px) { .g-track > * { width: calc((100% - 40px) / 3); } }
@media (max-width: 699px) {
  .g-track { gap: 14px; margin: 0 -16px -32px; padding: 8px 16px 56px; scroll-padding: 0 16px; }
  .g-track > * { width: 76%; }
  .gallery.wide .g-track { padding: 8px 0 56px; gap: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .gallery.wide .g-track > * { width: 78%; }
  .gallery.phones .g-track > * { width: 240px; --w: 240px; }
  .gallery.wide .g-track::before, .gallery.wide .g-track::after { width: 11%; }
  .g-nav { display: none; }
}

/* --- 17. A post shown as a Story on a phone ---------------------------------
   Stories are 9:16, a little wider than a phone screen, so it sits on black
   across the full width, the way Instagram shows it. Nothing is cut off. */
.iph .scr.story { background: #000; display: flex; align-items: center; }
.iph .scr.story img { margin: 0; border-radius: 6px; }


/* --- 18. Article pieces (approved by Daniel, 11 Oct 2026) -------------------
   Every blog article is built from these: the cover, the quick answer, the
   built graphics (timeline, weak vs strong, copy-ready text, bar chart,
   steps), and the questions at the end. Graphics are HTML, not pictures, so
   they stay sharp and Google and ChatGPT can read the words in them.
   CAREFUL: a bar chart only ever shows numbers from a checked source. */

/* Lit icon square: white line icon on the topic's color (--c), lit from
   above, with a glow in its own color. */
.lt { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff;
      background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 18px -8px var(--c); }
.lt .i { width: 24px; height: 24px; color: #fff; stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

/* Cover: a real (free Pexels) photo under a dark layer, the title in the
   middle, icons under it when they help. 1.91:1, the shape of a shared-link
   picture, so tools/blog-covers.js saves the same design as the sharing
   image. The photo comes in through --img on the element. */
.hx { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 1.91 / 1; border-radius: var(--radius); overflow: hidden;
      background: linear-gradient(180deg, rgba(8,12,30,.62), rgba(8,12,30,.82)), var(--img) center/cover;
      box-shadow: var(--lift-2); display: grid; place-items: center; text-align: center; color: #fff; }
.hx-in { padding: 32px 56px; display: flex; flex-direction: column; align-items: center; }
.hx-cat { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hx-cat:hover { color: #fff; }
.article .hx h1 { font-family: var(--display); font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; margin-top: 14px; max-width: 700px; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hx-icons { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 28px; justify-content: center; }
.hx-icons li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); }
.hx-icons .lt { width: 46px; height: 46px; }
.article .hx-by { max-width: 880px; margin: 20px auto 0; }
.article.has-hx { padding-top: 48px; }
.article.has-hx .prose { margin-left: auto; margin-right: auto; }

/* Quick answer: the 2-3 sentences Google and AI tools lift, right under the cover */
.answer { border-radius: var(--radius); background: var(--soft); padding: 22px 24px; margin: 0 0 32px; box-shadow: inset 0 0 0 1px var(--line); }
.answer .k { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--indigo)); margin-bottom: 6px; }
.answer p { margin: 0; font-size: 18px; }

/* A built graphic: white raised card a little wider than the text */
.fig { margin: 32px -48px; padding: 32px 40px; border-radius: var(--radius); background: #fff; box-shadow: var(--lift-2), var(--top-light); }
.fig h4 { margin: 0 0 4px; font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.fig .cap { font-size: 14px; color: var(--ink-2); margin: 0 0 24px; line-height: 1.4; }
.fig .src { font-size: 13px; color: var(--ink-2); margin: 18px 0 0; }

/* Timeline: steps in a row joined by a line that runs green to red.
   Set --n to the number of steps (default 4). */
.tl { --n: 4; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.tl::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 22px; height: 4px; border-radius: 2px;
              background: linear-gradient(90deg, var(--green), #ffcc00 45%, #ff3b30); }
.tl.even::before { background: var(--c, var(--indigo)); opacity: .35; }
.tl > div { position: relative; padding: 0 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl b { display: block; margin-top: 14px; font-size: 16px; line-height: 1.3; }
.tl span:not(.lt) { font-size: 14px; color: var(--ink-2); line-height: 1.4; display: block; margin-top: 2px; }

/* Weak vs strong (or don't vs do), side by side */
.vs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs2 > div { border-radius: 10px; padding: 18px; font-size: 16px; line-height: 1.45; }
.vs2 .bad { background: #fff1f0; } .vs2 .good { background: #effaf2; }
.vs2 .h { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.vs2 .bad .h { color: #d70015; } .vs2 .good .h { color: #248a3d; }

/* Copy-ready message: a grey text bubble and a Copy button (js/site.js) */
.tpl .msg { background: #e9e9eb; border-radius: 16px; border-bottom-left-radius: 5px; padding: 14px 18px; font-size: 17px; line-height: 1.45; max-width: 560px; white-space: pre-line; }
.tpl .msg + .msg { margin-top: 10px; }
.tpl .row { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.tpl .when { font-size: 14px; color: var(--ink-2); }

/* Bar chart: label, lit bar, number. Width of the bar = --v. */
.bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 190px 1fr 52px; align-items: center; gap: 14px; font-size: 15px; }
.bar i { display: block; height: 30px; border-radius: 8px; width: var(--v); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c));
         box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -10px var(--c); }
.bar b { font-family: var(--display); }

/* Numbered steps (a checklist or a process), one per row */
.steps2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: s; }
.steps2 li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; counter-increment: s; }
.steps2 li::before { content: counter(s); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700;
                     background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--indigo)) 78%, #fff), var(--c, var(--indigo))); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 18px -8px var(--c, var(--indigo)); }
.steps2 b { display: block; font-size: 17px; }
.steps2 span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* Ordinary lists and tables inside the article text */
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 20px; } .prose li { margin: 6px 0; }
.prose h3 { font-size: 22px; letter-spacing: -0.02em; margin: 32px 0 8px; font-family: var(--display); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0; }
.prose th, .prose td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }

/* Questions at the end. The same questions are in the page's FAQ schema
   (the script block in <head>), so keep them word for word the same. */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--blue); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 10px 0 0; color: var(--ink-3); }

/* "Keep reading": links to related articles at the end */
.prose .more { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.prose .more h2 { margin-top: 0 !important; font-size: 24px !important; }
.prose .more ul { list-style: none; padding: 0; margin: 12px 0 0; }
.prose .more li { margin: 0; padding: 10px 0; }
.prose .more a { font-weight: 600; }

@media (max-width: 899px) {
  .fig { margin-left: 0; margin-right: 0; padding: 24px 18px; }
  .tl { grid-template-columns: 1fr 1fr; row-gap: 24px; } .tl::before { display: none; }
  .bar { grid-template-columns: 110px 1fr 44px; font-size: 14px; }
  .vs2 { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .hx { aspect-ratio: auto; min-height: 340px; } .hx-in { padding: 36px 20px; }
  .article .hx h1 { font-size: 28px; } .hx-icons { gap: 14px; margin-top: 22px; } .hx-icons li { font-size: 12px; } .hx-icons .lt { width: 40px; height: 40px; }
  .article.has-hx { padding-top: 16px; } .article.has-hx > .wrap:first-child { padding: 0 12px; }
}
/* Blog list: a written article's card shows its sharing picture (the cover) */
.post img.thumb { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
/* Blog list: Newer / page numbers / Older under the cards (tools/make-blog-list.py) */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 48px; }
.pager > :last-child { justify-self: end; }
.pager .nums { display: flex; gap: 6px; }
.pager .nums a { min-width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; color: var(--ink-3); }
.pager .nums a:hover { background: #fff; }
.pager .nums a[aria-current="page"] { background: var(--ink); color: #fff; }
@media (max-width: 699px) { .pager { grid-template-columns: 1fr 1fr; } .pager .nums { grid-column: 1 / -1; grid-row: 1; justify-content: center; flex-wrap: wrap; } }