/* Backpack landing page. Light theme only. One small script at the end,
     for the headline pill.
     Controls (buttons, pills, toggles, tiles, nav pills) copy the overlay,
     overlay-prototype.html, which carries Skool's measured values.
     Colour is used the Notion way: every accent is a Skool colour, shown as a
     soft tint with dark text of the same hue, one colour per idea.
     EVERY colour is declared here. No hex literal appears below this block.
     --gold is the CTA button only. */
  :root {
    color-scheme: light;
    --font: Roboto, Helvetica, Arial, sans-serif;

    /* neutrals (measured, same as the overlay) */
    --ink: #202124;
    --body: #5f6368;         /* body prose - --muted fails contrast at 16px */
    --muted: #909090;
    --line: #e4e4e4;
    --line-soft: #efeeec;
    --tile: #f8f7f5;
    --hover: #f6f5f2;
    --white: #ffffff;

    /* Skool accents (measured, same as the overlay) */
    --gold: #f8d481;         /* primary button fill */
    --gold-hover: #f1d07c;
    --cream: #fae3ac;        /* nav active pill */
    --green: #009e5d;
    --track-on: #c1e8d8;     /* toggle track, on */
    --link: #2e6ef5;
    --deep: #4357ad;         /* level badge */
    --bronze: #a77b53;       /* badge accents */
    --red: #e74c3c;

    /* Notion-style colour families, each built on a Skool accent.
       tag = pill and highlight fill, wash = big soft surfaces,
       tx = text that sits on either. Yellow and green tags are measured. */
    --yellow-tag: #fae3ac;  --yellow-wash: #fdf5df;  --yellow-tx: #6b4f12;
    --green-tag:  #c1e8d8;  --green-wash:  #eaf6f0;  --green-tx:  #0b5e3c;
    --blue-tag:   #dbe6fd;  --blue-wash:   #eef3fe;  --blue-tx:   #1c4bb0;
    --deep-tag:   #dfe2f3;  --deep-wash:   #f0f1f9;  --deep-tx:   #2f3d7e;
    --bronze-tag: #eddfd2;  --bronze-wash: #f7f1eb;  --bronze-tx: #6e4c2e;
    --red-tag:    #fad4cf;  --red-wash:    #fdefed;  --red-tx:    #a8281b;
    --gray-tag:   #ebeae7;  --gray-wash:   #f8f7f5;  --gray-tx:   #5f6368;
    /* two more from Nate: purple #995fe4 and brown #894c46, used exactly as
       text too. Purple on its tag is ~3.1:1 - fine for the headline pill and
       icons, too faint for small tag text, so keep c-purple off small labels. */
    --purple:     #995fe4;  --brown:       #894c46;
    --purple-tag: #e6d9fa;  --purple-wash: #f5effd;  --purple-tx: #995fe4;
    --brown-tag:  #ecdcda;  --brown-wash:  #f7efee;  --brown-tx:  #894c46;

    --head-bg: rgba(255, 255, 255, .86);
    /* measured Skool modal shadow, from the overlay */
    --shadow: rgba(60, 64, 67, .32) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 0, rgba(0, 0, 0, .1) 0 1px 8px 0;
    /* Notion's mock shadows: a feather one for app windows, a lifted one
       for the layer that floats on top (measured on notion.com, 29 Sep) */
    --shadow-soft: rgba(0, 0, 0, .02) 0 1px 3px 0, rgba(0, 0, 0, .03) 0 2px 8px 0, rgba(0, 0, 0, .04) 0 6px 20px 0;
    --shadow-float: rgba(15, 15, 15, .06) 0 2px 6px 0, rgba(15, 15, 15, .12) 0 14px 36px -6px;
    /* the hero app window: no card behind it, just a wide soft shadow (Notion's hero) */
    --shadow-hero: rgba(15, 15, 15, .04) 0 1px 3px 0, rgba(15, 15, 15, .07) 0 12px 32px -8px, rgba(15, 15, 15, .09) 0 44px 90px -24px;

    --r-tile: 10px;
    --r-ctl: 4px;
    --r-pill: 25px;
    --row-h: 48px;
  }

  /* colour families. Put one on a block and every tag, tile, highlight
     and checkmark inside it takes that colour. */
  .c-yellow { --tag: var(--yellow-tag); --wash: var(--yellow-wash); --tx: var(--yellow-tx); --mark: var(--bronze); }
  .c-green  { --tag: var(--green-tag);  --wash: var(--green-wash);  --tx: var(--green-tx);  --mark: var(--green); }
  .c-blue   { --tag: var(--blue-tag);   --wash: var(--blue-wash);   --tx: var(--blue-tx);   --mark: var(--link); }
  .c-deep   { --tag: var(--deep-tag);   --wash: var(--deep-wash);   --tx: var(--deep-tx);   --mark: var(--deep); }
  .c-bronze { --tag: var(--bronze-tag); --wash: var(--bronze-wash); --tx: var(--bronze-tx); --mark: var(--bronze); }
  .c-red    { --tag: var(--red-tag);    --wash: var(--red-wash);    --tx: var(--red-tx);    --mark: var(--red); }
  .c-gray   { --tag: var(--gray-tag);   --wash: var(--gray-wash);   --tx: var(--gray-tx);   --mark: var(--muted); }
  .c-purple { --tag: var(--purple-tag); --wash: var(--purple-wash); --tx: var(--purple-tx); --mark: var(--purple); }
  .c-brown  { --tag: var(--brown-tag);  --wash: var(--brown-wash);  --tx: var(--brown-tx);  --mark: var(--brown); }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  /* Skool sets antialiased smoothing on html and body (measured) */
  html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
    border-radius: var(--r-ctl);
  }
  .wrap { max-width: 1170px; margin: 0 auto; padding: 0 24px; }
  section { padding: 90px 0; }
  section[id] { scroll-margin-top: 92px; }

  /* type. Roboto is wider than Inter, so the tracking is looser than Blokit's. */
  h1 {
    font-size: clamp(2.5rem, 5.8vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: 0;
    max-width: 17ch;
  }
  h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0;
  }
  h3 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    font-weight: 700;
    margin: 0;
  }
  p { margin: 0; }
  /* sub text everywhere is Skool's: 16px, ink, weight 400 (measured) */
  .lead {
    margin-top: 24px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--ink);
  }
  .note { font-size: 13px; line-height: 1.5; color: var(--body); }

  /* Notion-style highlighter: a flat band of the block's colour behind the
     words. Cream when the block has no colour family. */
  .hl {
    background: linear-gradient(transparent 56%, var(--tag, var(--cream)) 56%, var(--tag, var(--cream)) 92%, transparent 92%);
    padding: 0 .06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* headline pill: Notion's inline tag - a dot and the words in a soft pill */
  /* inline-block, not flex: a flex pill takes its baseline from the dot and
     drops its text below "The". Inline-block keeps the text on the line. */
  .hpill {
    display: inline-block;
    padding: .04em .34em .04em .24em;
    border-radius: 1em;
    background: var(--tag, var(--green-tag));
    color: var(--tx, var(--ink));
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hpill::before { content: ''; display: inline-block; width: .24em; height: .24em; margin-right: .16em; border-radius: 50%; background: var(--mark, var(--green)); vertical-align: .15em; }
  /* the cycle: text fades out, pill resizes and changes colour, text fades in */
  .hpill { transition: background-color .3s ease, color .3s ease, width .3s ease; }
  .hpill::before { transition: background-color .3s ease; }
  .hpill .w { transition: opacity .15s ease; }
  .hpill.swap .w { opacity: 0; }

  /* use cases: Notion's "see what it can do" row. Five tall cards, a solid
     round icon at the top, the title at the bottom. Each jumps to its
     feature. Hover fill only - no lift. */
  .uses-head { font-size: 16px; font-weight: 400; color: var(--muted); margin-bottom: 16px; }
  .uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 96px; }
  .use {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 184px;
    padding: 24px 22px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    color: var(--ink);
    transition: background-color .1s;
  }
  .use:hover { background: var(--hover); }
  .use .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--mark); color: var(--white); display: grid; place-items: center; flex: none; }
  .use.c-yellow .ic { background: var(--gold); color: var(--ink); }
  .use .ic svg { width: 22px; height: 22px; }
  .use .arr { white-space: nowrap; }
  .feature[id] { scroll-margin-top: 110px; }

  /* tag: a Notion select pill in Skool's 25px pill shape, sentence case */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: var(--tag, var(--gray-tag));
    color: var(--tx, var(--gray-tx));
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  /* eyebrow: a plain label above a heading. No pill, no colour. */
  .eyebrow { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--body); }

  /* buttons: copied from the overlay. h48, r4, 0 32px, 16px/700 uppercase.
     Measured hover: primary goes #f1d07c; outline goes solid #e4e4e4 with ink
     text. Transition is background-color .1s and nothing else - no lift. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--row-h);
    padding: 0 32px;
    border-radius: var(--r-ctl);
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--ink);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .1s, color .1s;
  }
  .btn:hover { background: var(--gold-hover); }
  .btn svg { width: 16px; height: 16px; flex: none; }
  .btn { max-width: 100%; }  /* sized to its text like Skool's; never wider than the screen */
  /* row size, measured on Skool's members page: h40, 14px/700, 0 16px */
  .btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
  .btnrow { display: flex; gap: 12px; flex-wrap: wrap; }

  /* header */
  header.site {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--head-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }
  header.site .bar {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
  .brand img { width: 28px; height: 28px; border-radius: var(--r-ctl); display: block; flex: none; }
  /* "for Skool" is plain text describing what we work with. Never Skool's
     logo or wordmark - that reads as endorsement (chrome-web-store-submission.md R7). */
  .brand-t { display: flex; flex-direction: column; line-height: 1.15; }
  .brand-t small { font-size: 14px; line-height: 1.43; font-weight: 400; color: var(--muted); }  /* Skool's "Powered by" text style */
  /* nav: the overlay's nav items - 700 ink, 10px pill, #f6f5f2 hover */
  .navlinks {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
  }
  .navlinks a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-tile);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .navlinks a:hover { background: var(--hover); }
  .navbtns { display: flex; align-items: center; gap: 8px; }

  /* hero */
  /* hero: centred like Notion's - headline, one short line, two buttons */
  .hero { padding: 136px 0 0; text-align: center; }
  .hero h1 { margin: 0 auto; max-width: none; line-height: 1.2; }  /* room for the headline pill (Nate, 29 Sep) */
  .hero .lead { margin-left: auto; margin-right: auto; max-width: 44ch; }
  .hero .btnrow { margin-top: 32px; justify-content: center; }
  .hero .note { margin-top: 14px; }

  /* hero product mock, the Notion way: the app window on its own, no card
     behind it, on a wide soft shadow. The .mk block is Skool's measured
     geometry, 1074x772 modal, 66px header, 224px nav, 848px pane, same as
     the overlay. .mk scales as one unit; .mockfit carries the scaled box so
     flow is undisturbed. */
  .mockstage {
    text-align: left;        /* the hero is centred; the app inside it is not */
    margin: 56px auto 0;
  }
  .mockfit {
    --mk-s: 1;
    width: min(calc(1074px * var(--mk-s)), 100%);
    height: calc(772px * var(--mk-s));
    margin: 0 auto;
  }
  .mk {
    width: 1074px;
    height: 772px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-hero);
    overflow: hidden;
    transform-origin: top left;
    transform: scale(var(--mk-s));
  }
  .mk-hd {
    height: 66px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 24px 0 32px;
    gap: 16px;
  }
  .mk-hd img { width: 40px; height: 40px; border-radius: var(--r-tile); object-fit: contain; }
  .mk-hd .t { font-size: 16px; line-height: 24px; font-weight: 700; }
  .mk-hd .x { margin-left: auto; width: 14px; height: 14px; color: var(--muted); }
  .mk-hd .x svg { width: 14px; height: 14px; display: block; }
  .mk-bd { display: flex; height: 706px; }
  .mk-nav { width: 224px; padding: 24px 16px 0; border-right: 1px solid var(--line); flex: none; }
  .mk-nav div {
    height: 48px;
    padding: 0 16px;
    border-radius: var(--r-tile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }
  .mk-nav div.on { background: var(--cream); }
  .mk-nav div { transition: background-color .35s ease; }
  .mk-nav div.soon { color: var(--muted); }
  .soonpill { font-size: 13px; line-height: 19.5px; font-weight: 400; color: var(--muted); }
  .mk-pane { position: relative; width: 848px; flex: none; }
  .mk-head { display: flex; align-items: center; }
  .mk-sec { font-size: 20px; line-height: 30px; font-weight: 700; color: var(--ink); }
  .mk-on {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--green);
  }
  .mk-sub { font-size: 14px; line-height: 20.02px; color: var(--ink); margin: 6px 0 18px; }
  .msg { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 16px; margin: 0 0 14px; }
  .msgtop { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
  .msgtop .n { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
  .msgtop .dl { font-size: 14px; line-height: 20.02px; color: var(--muted); }
  .msgtop .spacer { flex: 1 1 auto; }
  .mk-field {
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    padding: 14px;
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
  }
  .mk-count { text-align: right; font-size: 14px; line-height: 20.02px; color: var(--muted); margin-top: 6px; }
  /* toggle, measured: root 52x26, track 44x20 r34, thumb 26x26 overhanging */
  .mk-tog { width: 52px; height: 26px; position: relative; flex: none; margin-left: auto; }
  .mk-tog i { position: absolute; left: 4px; top: 3px; width: 44px; height: 20px; border-radius: 34px; background: var(--track-on); }
  .mk-tog b { position: absolute; left: 26px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--green); }

  /* centred section heads */
  .center-head { max-width: 720px; margin: 0 auto; text-align: center; }
  .center-head p { margin-top: 20px; font-size: 16px; font-weight: 400; color: var(--ink); }

  /* how it works: flat Skool cards, each with a Notion-style coloured icon */
  .steps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .step {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    padding: 28px 26px 30px;
  }
  .step .icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-tile);
    background: var(--tag);
    color: var(--tx);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
  }
  .step .num { font-size: 13px; line-height: 19.5px; font-weight: 700; color: var(--muted); }
  .step .t { margin-top: 4px; font-size: 20px; line-height: 30px; font-weight: 700; }
  .step p { margin-top: 8px; font-size: 16px; font-weight: 400; color: var(--ink); }

  /* alternating feature rows, one colour family per feature */
  .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 96px; }
  .feature:first-of-type { margin-top: 0; }
  .feature .copy > .eyebrow { margin-bottom: 12px; }
  .feature .copy p { margin-top: 16px; max-width: 52ch; font-size: 16px; font-weight: 400; color: var(--ink); }
  .feature ul { margin: 24px 0 0; padding: 0; list-style: none; }
  .feature li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 400; color: var(--ink); padding: 6px 0; }
  .chk { color: var(--mark, var(--green)); flex: none; margin-top: 5px; }
  .feature .flip { order: -1; }

  /* feature visuals, the Notion way. A white app window sits on the
     offwhite tile, runs off the bottom edge and is cut there, and one
     floating layer sits on top of it. The windows copy Backpack's own
     screens and demo data (overlay-prototype.html); the float shows the
     moment that matters. */
  .fvisual {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 460px;
    padding: 32px 32px 0;
    background: var(--tile);
    border-radius: var(--r-tile);
    overflow: hidden;
  }
  .win {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 20px 20px 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-tile) var(--r-tile) 0 0;
    box-shadow: var(--shadow-soft);
    font-size: 14px;
    line-height: 20px;
    color: var(--ink);
  }
  /* page head: a coloured icon tile and the page title */
  .whd { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .wic { width: 30px; height: 30px; border-radius: 7px; background: var(--tag); color: var(--tx); display: grid; place-items: center; flex: none; }
  .wic svg { width: 17px; height: 17px; display: block; }
  .wtitle { font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .whd .end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--green); }
  .whd .end.m { font-weight: 500; color: var(--muted); }
  .wsub { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--body); }
  /* the measured 52x26 toggle, drawn at 36x20 */
  .wtog { position: relative; width: 36px; height: 20px; flex: none; }
  .wtog i { position: absolute; left: 3px; top: 3px; width: 30px; height: 14px; border-radius: 34px; background: var(--track-on); }
  .wtog b { position: absolute; right: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); }
  /* view tabs under the title */
  .wtabs { display: flex; gap: 4px; margin: 14px 0 4px; overflow: hidden; }
  .wtab { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
  .wtab.on { background: var(--tile); color: var(--ink); }
  /* table: who on the left, a tag on the right, hairline rows */
  .wth, .wtr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
  .wth { padding: 8px 0; font-size: 12px; line-height: 16px; color: var(--muted); }
  .whd + .wth { margin-top: 10px; }
  .wtr { padding: 10px 0; }
  .wtr .tags { flex-wrap: nowrap; gap: 6px; }
  .fade { opacity: .45; }
  .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .who > span:last-child { min-width: 0; }
  .who .nm, .who .mt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .who .nm { font-size: 14px; line-height: 20px; font-weight: 500; }
  .who .nm small { font-size: 12px; font-weight: 700; color: var(--deep); }  /* Skool's plan tag */
  .who .mt { font-size: 12px; line-height: 17px; color: var(--muted); }
  .who .mt.good { font-weight: 500; color: var(--green); }
  .who .mt.warn { font-weight: 500; color: var(--red); }
  /* avatar: initials on a colour family's tag, with Skool's level badge
     pinned bottom-right (measured) */
  .avwrap { position: relative; width: 32px; height: 32px; flex: none; }
  .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tag, var(--gray-tag)); color: var(--tx, var(--gray-tx)); font-size: 12px; line-height: 1; font-weight: 700; flex: none; }
  .av.sm { width: 24px; height: 24px; font-size: 10px; }
  .av svg { width: 16px; height: 16px; }
  .lvl { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--deep); color: var(--white); border: 2px solid var(--white); font-size: 9px; line-height: 13px; font-weight: 500; text-align: center; }
  /* the small select tag used inside the windows */
  .tag.s { height: 22px; padding: 0 9px; gap: 5px; font-size: 12px; font-weight: 500; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mark, var(--green)); flex: none; }

  /* floating layer: lifts off the window on a deeper shadow */
  .float {
    position: absolute;
    z-index: 2;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-float);
    font-size: 13px;
    line-height: 19px;
    color: var(--ink);
  }
  .fl-note { right: 20px; bottom: 22px; padding: 12px 16px 12px 12px; }
  .fl-mem { top: 14px; right: 14px; padding: 10px 14px 10px 10px; }

  /* sequence timeline: the trigger, your messages, the stop rule */
  .tl { position: relative; margin-top: 18px; padding-left: 28px; }
  .tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 0; width: 2px; background: var(--line); }
  .tli { position: relative; padding-bottom: 16px; }
  .tli::before { content: ''; position: absolute; left: -28px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--mark); }
  .tli.trig::before { background: var(--mark); }
  .tli.stop::before { border-color: var(--muted); }
  .tli .lb { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 700; }
  .tli .lb span { font-weight: 400; color: var(--muted); }
  .tli .fld { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 13px; line-height: 19px; }

  /* scheduler: a week, each post a card on its day */
  .cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--line-soft); }
  .cal > div { min-height: 400px; padding: 6px 3px; border-right: 1px solid var(--line-soft); }
  .cal > div:last-child { border-right: 0; }
  .cal .d { padding: 0 3px 6px; font-size: 12px; line-height: 20px; color: var(--muted); }
  .cal .d b { display: inline-block; padding: 0 7px; border-radius: 10px; font-weight: 500; }
  .cal .d.today b { background: var(--mark); color: var(--white); }
  .pc { margin-bottom: 6px; padding: 7px 6px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-soft); font-size: 12px; line-height: 16px; overflow: hidden; }
  .pc b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; }
  .pc .tm { display: block; margin: 3px 0 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .pc .tag.s { padding: 0 7px; }
  /* Skool's own post box, floating over the week (skool-composer-reference.md) */
  .fl-cmp { left: 24px; right: 24px; bottom: 20px; padding: 14px 16px 12px; font-size: 14px; line-height: 20px; }
  .fl-cmp .by { display: flex; align-items: center; gap: 8px; color: var(--muted); }
  .fl-cmp .by b { font-weight: 500; color: var(--ink); }
  .fl-cmp .ttl { margin-top: 10px; font-size: 17px; line-height: 24px; font-weight: 700; }
  .fl-cmp .bd { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fl-cmp .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
  .when { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; white-space: nowrap; }
  .when svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
  .btn.xs { height: 32px; padding: 0 14px; font-size: 13px; line-height: 20px; }

  /* mcp: your own AI, answering from Backpack, with the rows it used */
  .chat { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 19px; }
  .chat .q { align-self: flex-end; max-width: 85%; padding: 8px 12px; background: var(--tag); border-radius: var(--r-tile); }
  .chat .a { max-width: 95%; }
  .tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12px; color: var(--body); white-space: nowrap; overflow: hidden; }
  .tool svg { width: 12px; height: 12px; color: var(--muted); flex: none; }
  .tool code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--tx); }
  .cite { padding: 0 10px; border: 1px solid var(--line-soft); border-radius: var(--r-ctl); }
  .cite .wtr { padding: 6px 0; }
  .cite .wtr:last-child { border-bottom: 0; }
  .fl-ask { left: 28px; right: 28px; bottom: 22px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 18px; border-radius: 23px; font-size: 14px; color: var(--muted); }
  .fl-ask .typed { min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fl-ask .go { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--mark); color: var(--white); display: grid; place-items: center; flex: none; }
  .fl-ask .go svg { width: 16px; height: 16px; }

  /* always on: what ran overnight, and the laptop that slept through it */
  .log { margin-top: 12px; }
  .lr { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
  .lr > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  .lr .tm { font-size: 12px; line-height: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .lr .tx { font-size: 13px; line-height: 19px; }
  .fl-lap { left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; white-space: nowrap; }
  .fl-lap svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
  .fl-lap span { color: var(--muted); }

  /* coming soon: the features, as three cards. Each has a small window
     on the offwhite tile and a "Coming soon" eyebrow. */
  .soon { padding-top: 0; }
  .soon .center-head .eyebrow { margin-bottom: 12px; }
  .soon-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  /* each card is two rows of the grid (subgrid), so the image areas share one
     height and the text areas share another */
  .soon-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
  .soon-vis { display: flex; flex-direction: column; height: 250px; padding: 24px 24px 0; background: var(--tile); overflow: hidden; }
  .soon-vis .win { padding: 16px 16px 0; }
  .soon-vis .wic { width: 26px; height: 26px; border-radius: 6px; }
  .soon-vis .wic svg { width: 15px; height: 15px; }
  .soon-vis .wtitle { font-size: 16px; line-height: 22px; }
  .soon-vis .chat { margin-top: 12px; }
  .soon-body { padding: 22px 24px 26px; }
  .soon-body .t { margin-top: 4px; font-size: 20px; line-height: 30px; font-weight: 700; }
  .soon-body p { margin-top: 6px; font-size: 16px; font-weight: 400; color: var(--ink); }
  .evt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .stamp { align-self: flex-end; margin-top: -4px; font-size: 11px; line-height: 14px; color: var(--muted); }
  /* pipeline: Notion's board, a tag and a count over each column */
  .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .board .ch { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
  .board .tag.s { padding: 0 7px; }
  .bc { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-soft); font-size: 12px; line-height: 16px; font-weight: 500; }
  .bc > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  /* hero demo: three screens take turns, like Notion's hero video.
     .shown fades a screen in; .play runs its count-ups and entrances, and
     is taken off only once the screen has faded, so nothing snaps on show.
     Without JS, or with reduced motion, the dashboard stays put. */
  .sc { position: absolute; inset: 0; padding: 24px 32px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
  .sc.shown { opacity: 1; transform: none; }
  .sc .in { opacity: 0; transform: translateY(10px); }
  .sc.play .in { opacity: 1; transform: none; transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
  .sc.play .in.fade { opacity: .45; }
  .sc-range { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--muted); }
  /* dashboard: four stat tiles that count up, a weekly bar chart, a feed */
  .sc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sc-tile { padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); }
  .sc-tt { font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; }
  .sc-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
  .sc-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--tag); color: var(--tx); display: grid; place-items: center; flex: none; }
  .sc-ic svg { width: 16px; height: 16px; }
  .sc-tile b { display: block; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .sc-tile em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 19px; color: var(--muted); }
  .sc-tile em.up { font-weight: 500; color: var(--green); }
  .sc-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 16px; }
  .sc-card { height: 410px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
  .sc-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
  .sc-ch b { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
  .sc-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 20px; height: 300px; margin-top: 16px; padding: 0 12px; border-bottom: 1px solid var(--line); }
  .sc-bar { position: relative; flex: 1 1 0; max-width: 64px; height: var(--h); display: flex; }
  .sc-bar i { flex: 1; border-radius: 6px 6px 0 0; background: var(--mark); transform: scaleY(0); transform-origin: bottom; }
  .sc-bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 6px; font-size: 13px; line-height: 18px; font-weight: 700; opacity: 0; }
  .sc-bar em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 8px; font-style: normal; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
  .sc.play .sc-bar i { transform: scaleY(1); transition: transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
  .sc.play .sc-bar span { opacity: 1; transition: opacity .4s ease calc(var(--d, 0s) + .6s); }
  .sc-feed { margin-top: 6px; }
  .sc-fr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .sc-fr:last-child { border-bottom: 0; }
  .sc-amt { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }
  .sc-amt.m { font-weight: 500; color: var(--muted); }
  /* payments: the sequence, then the DM landing, then the stop */
  /* the win: a notification rises in bottom-left once the member pays.
     Capped at 388px so it stops short of the DM card on the right. */
  .hfl2 { left: 32px; bottom: 30px; max-width: 388px; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; font-size: 14px; line-height: 20px; }
  .hfl2 em { margin-left: 8px; font-style: normal; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--green); white-space: nowrap; }
  .hfl2 svg { width: 22px; height: 22px; color: var(--green); flex: none; }
  .hfl2 b { display: block; font-weight: 700; }
  .hfl2 span { display: block; color: var(--muted); font-size: 13px; }
  /* scheduler: the week, the post box, then Friday's post lands. The .mk
     rules pin these to app size so the page's phone rules cannot reach in. */
  .mk .cal { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 4px; }
  .mk .cal > div:nth-child(n) { display: block; min-height: 560px; padding: 8px 6px; }
  .mk .cal .d { font-size: 13px; }
  .mk .pc { margin-bottom: 8px; padding: 10px; font-size: 13px; line-height: 18px; }
  .mk .fl-cmp { left: auto; right: 32px; bottom: 28px; width: 430px; }
  @media (prefers-reduced-motion: reduce) { .sc, .sc * { transition: none !important; } }
  /* hero float: message 1 as it lands in Skool chat, {first_name} filled in.
     It sits inside .mk, so it scales with the mock. */
  .mk { position: relative; }
  .hfl { right: 32px; bottom: 30px; width: 380px; padding: 16px; font-size: 14px; line-height: 20px; }
  .hfl .av { width: 40px; height: 40px; font-size: 14px; }
  .hfl .who .nm { font-size: 16px; line-height: 24px; font-weight: 700; }
  .hfl .who .mt { font-size: 13px; line-height: 19px; }
  .hfl .hd { display: flex; align-items: flex-start; gap: 10px; }
  .hfl .t { margin-left: auto; align-self: flex-start; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .hfl .bub { margin-top: 12px; padding: 12px 14px; background: var(--tile); border-radius: var(--r-tile); }
  .hfl .ok { display: grid; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--green); }
  /* "Sending..." first, then it flips to sent */
  .hfl .ok > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; }
  .hfl .ok .s1 { color: var(--muted); }
  .hfl .ok .s2 { opacity: 0; }
  .sc.play .hfl .ok .s1 { opacity: 0; transition: opacity .25s ease 1.9s; }
  .sc.play .hfl .ok .s2 { opacity: 1; transition: opacity .25s ease 2s; }
  .hfl .ok svg { width: 16px; height: 16px; flex: none; }

  /* pricing */
  /* savings calculator: inputs on the left, the estimate on the right */
  .calc { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
  .calc-in, .calc-out { border: 1px solid var(--line); border-radius: var(--r-tile); padding: 28px 26px 30px; }
  .calc-in { background: var(--tile); }
  .calc-out { background: var(--wash); border-color: var(--tag); }
  .calc-f { display: block; margin-top: 18px; }
  .calc-f:first-child { margin-top: 0; }
  .calc-f > span:first-child { display: block; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
  .calc input {
    width: 100%;
    height: var(--row-h);
    padding: 0 14px;
    font: inherit;
    font-size: 18px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
  }
  .calc input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
  .calc-unit { position: relative; display: block; }
  .calc-unit i { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--body); }
  .calc-unit.pre i { left: 14px; }
  .calc-unit.pre input { padding-left: 30px; }
  .calc-unit.suf i { right: 14px; }
  .calc-unit.suf input { padding-right: 34px; }
  .calc-more { margin-top: 22px; }
  .calc-more summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--link); }
  .calc-more .calc-f:first-of-type { margin-top: 14px; }
  .calc-f.sm input { height: 40px; font-size: 16px; }
  .calc-in .note { margin-top: 20px; }
  .calc-big b { display: block; margin-top: 6px; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: var(--ink); }
  .calc-rows { margin-top: 20px; border-top: 1px solid var(--tag); }
  .calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--tag); font-size: 16px; color: var(--ink); }
  .calc-trial { margin-top: 20px; font-size: 16px; font-weight: 400; color: var(--ink); }
  .calc-out .btn { margin-top: 20px; }
  @media (max-width: 800px) { .calc { grid-template-columns: 1fr; } }

  .price-band {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    padding: 72px 32px;
    text-align: center;
  }
  .price-band h2 { margin-top: 12px; font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -.03em; }
  .price-band .sub { margin: 20px auto 0; max-width: 54ch; font-size: 16px; font-weight: 400; color: var(--ink); }
  .price-band .btn { margin-top: 32px; }
  .price-band .note { margin: 16px auto 0; max-width: 52ch; }
  .price-points { margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
  .price-points li { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; color: var(--ink); }
  .price-points .chk { margin-top: 0; }
  /* a Backpack window each side of the price, cut off by the band's
     bottom edge. Below 1180px there is no room beside the price, so one
     window sits under it instead and bleeds off the bottom the same way. */
  .price-band { position: relative; overflow: hidden; }
  .pmock { position: absolute; bottom: 0; width: 240px; height: 280px; display: flex; flex-direction: column; text-align: left; }
  .pm-l { left: 28px; }
  .pm-r { right: 28px; }
  .pmock .win { padding: 16px 16px 0; }
  .pmock .whd { margin-bottom: 6px; }
  .pmock .wic { width: 26px; height: 26px; border-radius: 6px; }
  .pmock .wic svg { width: 15px; height: 15px; }
  .pmock .wtitle { font-size: 16px; line-height: 22px; }
  @media (max-width: 1180px) {
    .price-band { padding-bottom: 0; }
    .pmock { position: relative; left: auto; right: auto; width: auto; max-width: 400px; height: 220px; margin: 44px auto 0; }
    .pm-r { display: none; }
  }

  /* faq: Notion toggles - a small triangle on the left that turns when open */
  .faq-grid { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
  .faq-grid h2 { line-height: 1.1; }
  .faq-grid .note { margin-top: 18px; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--ink); }
  details { border-bottom: 1px solid var(--line); padding: 6px 0; }
  details:first-of-type { border-top: 1px solid var(--line); }
  summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--r-ctl);
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
  }
  summary:hover { background: var(--hover); }
  summary::-webkit-details-marker { display: none; }
  summary::before {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    margin-top: 7px;
    border-left: 7px solid var(--muted);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .15s ease;
  }
  details[open] summary::before { transform: rotate(90deg); }
  details p { margin: 4px 12px 0 31px; max-width: 74ch; font-size: 16px; font-weight: 400; color: var(--ink); }
  details p + p { margin-top: 10px; }
  details p:last-child { margin-bottom: 14px; }
  details a { color: var(--link); text-decoration: underline; }


  footer { background: var(--white); border-top: 1px solid var(--line); padding: 56px 0 40px; }
  .foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr); gap: 40px; }
  .foot .brand { font-size: 15px; }
  .foot-brand p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--body); max-width: 30ch; }
  .footcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .footcols div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
  .footcols .fh { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
  .footcols a { color: var(--body); text-decoration: none; }
  .footcols a:hover { color: var(--ink); }
  .footnote { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--body); max-width: none; }
  @media (max-width: 940px) { .foot { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .footcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }

  /* the mock shrinks as one unit; .mockfit clips if it still cannot fit */
  @media (max-width: 1220px) { .mockfit { --mk-s: .92; } }
  @media (max-width: 1070px) { .mockfit { --mk-s: .84; } }
  @media (max-width: 980px)  { .mockfit { --mk-s: .76; } }
  @media (max-width: 895px)  { .mockfit { --mk-s: .68; } }
  @media (max-width: 810px)  { .mockfit { --mk-s: .60; } }
  @media (max-width: 725px)  { .mockfit { --mk-s: .52; } }
  @media (max-width: 640px)  { .mockfit { --mk-s: .44; } }
  @media (max-width: 535px)  { .mockfit { --mk-s: .36; } }
  @media (max-width: 450px)  { .mockfit { --mk-s: .30; } }
  @media (max-width: 385px)  { .mockfit { --mk-s: .26; } }
  @media (max-width: 342px)  { .mockfit { --mk-s: .21; } }

  /* smallest phones: the header button drops "7-day" so it fits beside the logo */
  @media (max-width: 400px) {
    header.site .bar { padding: 0 16px; }
    .navbtns .d7 { display: none; }
  }
  @media (max-width: 940px) {
    .navlinks { display: none; }
    .steps, .feature, .faq-grid, .soon-grid, .uses { grid-template-columns: 1fr; }
    .use { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; padding: 14px 16px; }
    .feature { gap: 32px; margin-top: 72px; }
    .feature .flip { order: 0; }
    .faq-grid { gap: 28px; }
  }
  @media (max-width: 640px) {
    section { padding: 64px 0; }
    .wrap { padding: 0 18px; }
    .hero { padding-top: 104px; }
    /* "The money-making", the longest pill line, is 9.21em wide. Size it to
       the screen so every word fits on line one and nothing jumps. */
    .hero h1 { font-size: min(2.5rem, calc((100vw - 36px) / 9.6)); }
    .mockstage { margin-top: 40px; }
    .price-band { padding: 48px 20px 0; }
    .fvisual { height: 400px; padding: 22px 22px 0; }
    .win { padding: 16px 16px 0; }
    .fl-note, .fl-cmp, .fl-ask { left: 12px; right: 12px; bottom: 14px; }
    .fl-mem { top: auto; left: 12px; right: 12px; bottom: 14px; }
    .lr:nth-child(4) { display: none; }  /* log rows wrap here; three fit above the laptop pill */
    .soon-vis { padding: 18px 18px 0; }
  }
  /* phones: the week drops to three days so the post cards stay readable */
  @media (max-width: 480px) {
    .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cal > div:nth-child(1), .cal > div:nth-child(3) { display: none; }
    summary { padding: 14px 4px; }
    details p { margin-left: 23px; margin-right: 4px; }
  }