/* ==================================================================
   THE SWITCH
   The "Text me to hear when it opens" links on the two
   products still in build (video messaging and automation). They show
   on the hub and on each of those two pages: four links, one switch.
   Jakub has not said keep or drop.

     inline-block   the links show, as now
     none           all four are gone, for everyone, JavaScript or not
   ================================================================== */
/* OFF since Oct 14, 2026: Jakub's number shows nowhere public, so the
   links came out of the pages too. Turning this back on shows nothing
   until a link is written back in. */
:root{--waitlist:none}

/* Instrument Serif and Inter, self-hosted under the SIL Open Font License
   (/fonts/OFL-*.txt). The same files the front page ships, read from the
   site root, so they hold from the hub and from every product page. */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin-ext.a04fc7ed.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin.6ee678c3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-ext.a8c4bd7c.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin.60c06664.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-ext.a28eb6d3.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.c9407645.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==================================================================
   APN: the products hub and a page for each product.
   First Light: ink ground, amber and rose, no third accent.
   Amber is what needs a person. Rose is what is settled.
   The arrangement is a thin bar over a stack of plain blocks: one
   product, one line, one picture, two links. The words on each block
   say whether it is for sale, so nobody has to read colour.
   ================================================================== */
:root{
  --ink:#131019;
  --ink-2:#1A1522;
  --ink-3:#211B2B;
  --ink-4:#2A2235;
  --line:#2C2437;
  --text:#F3EFF2;
  --dim:#A295AE;
  --amber:#F0A94E;
  --rose:#E7C0C6;
  /* body copy: text let down a little towards dim, so long paragraphs
     sit back from the headings. Not a new colour. */
  --soft:#DBD4DE;
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gut:clamp(20px,3.5vw,48px);
  --bar:48px;
  /* the dark seam between one block and the next */
  --seam:12px;
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{--soft:color-mix(in srgb,var(--text) 70%,var(--dim))}
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 20px)}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:40;background:var(--text);color:var(--ink);
  padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:8px}
/* read aloud, not shown */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* small capitals in Inter, the label voice of First Light */
.lab{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1 i,h2 i,h3 i{font-style:italic;letter-spacing:-.02em}

/* ---------------- the lamp: lit if you can buy it, a ring if not ---------------- */
.lamp{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--dim)}
.lamp.on{border-color:var(--amber);background:var(--amber);
  box-shadow:0 0 0 3px rgba(240,169,78,.16),0 0 14px rgba(240,169,78,.55)}
.st{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.st.off{color:var(--dim)}

/* ---------------- buttons and links ---------------- */
.btn{display:inline-block;padding:14px 28px;line-height:20px;
  border-radius:999px;border:1px solid var(--text);background:var(--text);color:var(--ink);
  font-weight:600;font-size:14.5px;letter-spacing:.02em;text-decoration:none;text-align:center;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--rose);border-color:var(--rose);transform:translateY(-2px)}
/* the second of two: a ring, not a fill */
.btn.ring{background:transparent;color:var(--text);border-color:rgba(243,239,242,.36)}
.btn.ring:hover{background:transparent;border-color:var(--rose);color:var(--rose)}
/* the text-me-when-it-opens link. THE SWITCH at the top of this file removes it. */
.ask{display:var(--waitlist,inline-block);padding:12px 0;font-size:14.5px;font-weight:600;line-height:1.45;text-wrap:balance;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ask:hover{text-decoration-thickness:2px}
.fine{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-wrap:balance}

/* ==================================================================
   The top bar. The same on every page.
   Wide: the mark, then the four products in a row.
   Narrow: the mark and a Menu button that opens the same four links.
   No JavaScript: the four links simply sit under the mark.
   ================================================================== */
.bar{position:sticky;top:0;z-index:30;background:rgba(19,16,25,.9);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.bar-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  max-width:860px;margin:0 auto;padding:0 var(--gut);min-height:var(--bar)}
.bar :focus-visible{outline-offset:-4px;border-radius:6px}
.mark{display:inline-flex;align-items:center;min-height:var(--bar);padding:0 10px;margin-left:-10px}
.mark img{height:17px;width:auto;opacity:.92;transition:opacity .2s}
.mark:hover img{opacity:1}
.nav{flex:1}
.nav ul{list-style:none;display:flex;justify-content:space-between;margin-left:clamp(36px,8vw,84px)}
.nav a{display:inline-flex;align-items:center;min-height:var(--bar);padding:0 10px;margin:0 -10px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;color:var(--soft);transition:color .3s var(--ease)}
.nav a span{padding:7px 0;background:linear-gradient(var(--rose),var(--rose)) no-repeat 0 100%/0 1px;
  transition:background-size .4s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover span{background-size:100% 1px}
/* the page you are on: full strength, and the rose rule stays under it */
.nav a[aria-current]{color:var(--text)}
.nav a[aria-current] span{background-size:100% 1px}
.menu-btn{display:none}

@media (max-width:700px){
  /* no JavaScript: the bar is not pinned and the links sit under the mark */
  .bar{position:static}
  .bar-in{flex-wrap:wrap}
  .nav{flex:1 1 100%}
  .nav ul{margin-left:0;display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:36px;padding-bottom:6px}

  .js .bar{position:sticky}
  .js .bar-in{flex-wrap:nowrap}
  .js .menu-btn{display:inline-flex;align-items:center;gap:11px;min-height:var(--bar);
    padding:0 10px;margin-right:-10px;border:0;background:none;cursor:pointer;
    font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
  /* two rules that cross when the menu is open */
  .menu-ico{position:relative;width:18px;height:10px}
  .menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:1px;
    background:currentColor;transition:transform .4s var(--ease)}
  .menu-ico::before{top:0}
  .menu-ico::after{bottom:0}
  .bar[data-open] .menu-ico::before{transform:translateY(4.25px) rotate(45deg)}
  .bar[data-open] .menu-ico::after{transform:translateY(-4.25px) rotate(-45deg)}

  .js .nav{position:absolute;left:0;right:0;top:100%;flex:none;
    background:var(--ink);border-bottom:1px solid var(--line);
    padding:4px var(--gut) 22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .25s var(--ease),transform .4s var(--ease),visibility 0s .25s}
  .js .bar[data-open] .nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .js .nav ul{display:block;padding-bottom:0}
  .js .nav li + li{border-top:1px solid var(--line)}
  .js .nav a{display:flex;min-height:64px;padding:0;margin:0;font-family:var(--serif);font-size:31px;font-weight:400;
    letter-spacing:-.012em;text-transform:none;color:var(--text)}
  .js .nav a span{padding:2px 0}
}
/* what dims the page behind the open menu. A tap on it closes the menu. */
.scrim{position:fixed;inset:0;z-index:25;background:rgba(10,8,14,.62);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.scrim.on{opacity:1;visibility:visible;transition-delay:0s}
@media (min-width:701px){.scrim{display:none}}

/* ==================================================================
   The hub: a stack of blocks.
   ================================================================== */
.top{padding:clamp(28px,4vw,56px) var(--gut) clamp(26px,3.6vw,48px);text-align:center}
.top h1{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.014em}

.stack{display:grid;gap:var(--seam)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--seam)}
.stack+.pair{margin-top:var(--seam)}
@media (max-width:760px){.pair{grid-template-columns:minmax(0,1fr)}}

/* one block: status, name, one line, two links, one picture */
.blk{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;background:linear-gradient(180deg,var(--ink-3) 0,var(--ink-2) 46%);
  padding:clamp(46px,6vw,84px) var(--gut) clamp(46px,6vw,84px)}
.blk-say{display:flex;flex-direction:column;align-items:center;max-width:100%}
.blk-name{margin-top:clamp(12px,1.4vw,18px);font-size:clamp(54px,8.2vw,112px);line-height:.9;letter-spacing:-.02em}
.blk-line{margin-top:clamp(14px,1.5vw,20px);max-width:32ch;font-size:clamp(17px,1.65vw,22px);line-height:1.42;
  color:var(--soft);text-wrap:balance}
.blk-links{margin-top:clamp(22px,2.4vw,30px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.blk-pic{margin-top:clamp(36px,4.6vw,64px);width:100%;display:flex;align-items:center;justify-content:center}
.blk-pic > *{transition:transform .6s var(--ease)}
/* the whole block opens the product's page: the "Learn more" link is stretched
   over it, and the second link sits on top so it still goes its own way */
.blk .more::after{content:"";position:absolute;inset:0;z-index:1}
.blk .act{position:relative;z-index:2}
/* never lift the stretched link: a transform makes it the box its ::after fills,
   the cover shrinks to the button and the hover flips on and off (Jakub 9:17am) */
.blk .more:hover{transform:none}
@media (hover:hover){
  .blk:has(.more:hover) .blk-pic > *{transform:translateY(-5px)}
}

/* the two in build: smaller, side by side, the links one under the other */
.blk.sm{padding-block:clamp(40px,4.6vw,64px) 0}
.blk.sm .blk-name{font-size:clamp(40px,4.7vw,66px);line-height:.96;letter-spacing:-.016em}
.blk.sm .blk-line{font-size:clamp(16px,1.35vw,18.5px);max-width:30ch}
.blk.sm .blk-links{flex-direction:column;gap:6px}
.blk.sm .blk-pic{flex:1;margin-top:0;min-height:clamp(250px,26vw,340px);
  padding:clamp(30px,3.4vw,44px) 0 clamp(40px,4.6vw,64px)}
@media (max-width:760px){.blk.sm .blk-pic{min-height:0;padding:34px 0 52px}}

/* the line between the two for sale and the two in build */
.between{padding:clamp(44px,6.4vw,92px) var(--gut) clamp(26px,3.4vw,44px);text-align:center}
.between h2{font-size:clamp(30px,3.9vw,48px);line-height:1.02;letter-spacing:-.012em}

/* the close */
.close{padding:clamp(64px,9vw,128px) var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center}
.close h2{font-size:clamp(34px,4.8vw,62px);line-height:1;letter-spacing:-.014em;max-width:18ch}
.close p{margin:clamp(16px,1.8vw,22px) 0 clamp(22px,2.4vw,28px);max-width:34ch;color:var(--soft)}

/* ==================================================================
   The pictures. One object each, drawn here, no words inside.
   ================================================================== */

/* websites: the First Light card in a plain window */
.frame{width:min(100%,700px);border-radius:14px;overflow:hidden;background:var(--ink-3);
  border:1px solid rgba(243,239,242,.14);box-shadow:0 44px 90px -44px rgba(0,0,0,.9)}
.frame-top{display:flex;align-items:center;justify-content:center;height:clamp(22px,2.6vw,32px);
  background:var(--ink-3);border-bottom:1px solid var(--line)}
.frame-top span{width:34%;height:38%;border-radius:999px;background:var(--ink-4)}
.frame img{width:100%;height:auto}

/* marketing: one month, the days the work went out */
.cal{width:min(84%,400px);height:auto;overflow:visible}
.cal .sheet{fill:var(--ink-3);stroke:rgba(243,239,242,.13)}
.cal .ring{fill:var(--dim)}
.cal .cap{fill:var(--dim);opacity:.55}
.cal .day{fill:rgba(243,239,242,.075)}
.cal .day.out{opacity:.35}
.cal .done{fill:var(--rose)}
.cal .next{fill:none;stroke:var(--dim);stroke-width:1.5}
.cal .now{fill:rgba(240,169,78,.12);stroke:var(--amber);stroke-width:1.5}
.cal .now-dot{fill:var(--amber);filter:drop-shadow(0 0 7px rgba(240,169,78,.6))}

/* video messaging: the voice note. A bubble, a play button, a short
   waveform with the first part already played, and a length. */
.note{width:min(100%,400px);height:auto;overflow:visible}
.note .bubble{fill:var(--ink-4);stroke:rgba(243,239,242,.16)}
.note .play{fill:var(--text)}
.note .tri{fill:var(--ink);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.note .wave rect{fill:var(--dim);opacity:.6}
.note .wave .said{fill:var(--rose);opacity:1}
.note text{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:.02em;fill:var(--soft)}

/* automation: a short list. Two done, one handed to you. */
.list{width:min(100%,286px);height:auto;overflow:visible}
.list .sheet{fill:var(--ink-3);stroke:rgba(243,239,242,.13)}
.list .rule{stroke:var(--line)}
.list .row{fill:rgba(243,239,242,.1)}
.list .tick-bg{fill:var(--rose)}
.list .tick{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.list .hand-glow{fill:rgba(240,169,78,.13)}
.list .hand-ring{fill:none;stroke:var(--amber);stroke-width:1.6}
.list .hand-dot{fill:var(--amber);filter:drop-shadow(0 0 7px rgba(240,169,78,.6))}

/* ==================================================================
   A product's own page.
   ================================================================== */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3) 0,var(--ink-2) 40%);border-bottom:1px solid var(--line);
  padding:clamp(44px,6.4vw,92px) var(--gut) clamp(48px,6.6vw,96px)}
.tag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px}
.ph h1{margin-top:clamp(18px,2.2vw,28px);max-width:10.5em;font-size:clamp(44px,7vw,100px);line-height:.93;letter-spacing:-.02em}
.ph .lead{margin-top:clamp(20px,2.2vw,28px);max-width:46ch;font-size:clamp(17px,1.5vw,19px);color:var(--soft)}
.ph .pic{margin-top:clamp(38px,5.2vw,72px);width:100%;display:flex;justify-content:center}
.ph .frame{width:min(100%,940px)}
.ph .cal{width:min(84%,420px)}
.ph .note{width:min(100%,520px)}
.ph .list{width:min(100%,310px)}

.pb{padding-block:clamp(52px,6.6vw,96px)}
/* the words on the left, the terms or the standing on the right */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(36px,6vw,96px);align-items:start}
.split .say{max-width:36ch;font-size:clamp(19px,1.9vw,24px);line-height:1.5;color:var(--soft)}
@media (max-width:820px){.split{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,5vw,40px)}.split .say{max-width:46ch}}
.price{display:flex;align-items:center;gap:22px;padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--line)}
.price-n{font-family:var(--serif);font-size:clamp(58px,6vw,84px);line-height:.8;letter-spacing:-.02em}
.price-t{font-size:15px;line-height:1.5;color:var(--soft)}
.price-t span{display:block}
.stands{padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--soft)}
.stands b{display:block;margin-bottom:6px;font-weight:600;color:var(--text)}

/* marketing: what the month holds */
.ledger{list-style:none;border-bottom:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(18px,3vw,40px);
  align-items:baseline;padding:clamp(20px,2.2vw,30px) 0;border-top:1px solid var(--line)}
.ledger h2{font-size:clamp(26px,2.6vw,36px);line-height:1.06;letter-spacing:-.01em}
.ledger p{max-width:52ch;font-size:16px;line-height:1.58;color:var(--soft)}
@media (max-width:560px){.ledger li{grid-template-columns:minmax(0,1fr);row-gap:8px}}

/* marketing: the three tiers (Jakub, Oct 19 2026, build/marketing_tiers.py).
   Stacked on a phone, three side by side on a wide screen, tier 1 first.
   A rose tick for each thing included. No tier is marked as the usual pick. */
.tiers{padding-block:0 clamp(52px,6.6vw,96px)}
.tiers h2{text-align:center;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-.014em}
.tier-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:520px;margin:clamp(28px,3.6vw,48px) auto 0}
.tier{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,var(--ink-3) 0,var(--ink-2) 60%);padding:clamp(26px,2.6vw,34px)}
.tier h3{font-family:var(--sans);font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:12px;
  padding-bottom:clamp(20px,2vw,26px);border-bottom:1px solid var(--line)}
.tier-n{font-family:var(--serif);font-size:clamp(60px,5.4vw,78px);line-height:.9;letter-spacing:-.02em}
.tier-t{font-size:15px;color:var(--soft)}
.tier-items{list-style:none}
.tier-items li{position:relative;padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;text-wrap:pretty}
.tier-items li:last-child{border-bottom:0;padding-bottom:0}
.tier-items li::before{content:"";position:absolute;left:2px;top:19px;width:11px;height:6px;
  border-left:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);transform:rotate(-45deg)}
.tier-say{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--dim)}
.tiers-note{max-width:46ch;margin:clamp(24px,2.8vw,36px) auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--soft);text-wrap:balance}
@media (min-width:940px){
  .tier-row{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  /* the rows line up across the three cards: 1, 2 and 3 blog posts sit side
     by side, and so do the two kinds of SEO and every item the cards share.
     A card spans its label, its price and one row per item on the longest
     card (build/marketing_tiers.py works the number out). Without subgrid
     each card simply runs top to bottom. */
  @supports (grid-template-rows:subgrid){
    .tier-row{row-gap:0}
    .tier{display:grid;grid-row:span 17;grid-template-rows:subgrid}
    .tier-items{display:grid;grid-row:span 15;grid-template-rows:subgrid}
    .tier-items li{grid-row:var(--r,auto)}
    /* an empty row (the ads on Tier 1) keeps its line above and below,
       so it reads as a cell left empty, not as a gap in the card */
    .tier-items li:not([style]) + li[style]{box-shadow:0 -1px 0 var(--line)}
  }
}

/* the way on: the action, then a quiet link back */
.way{display:flex;flex-direction:column;align-items:center;text-align:center;
  border-top:1px solid var(--line);padding:clamp(44px,5.6vw,80px) var(--gut) clamp(48px,6vw,88px)}
.way > p:first-child{max-width:30ch;margin-bottom:clamp(20px,2.2vw,26px);font-family:var(--serif);
  font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.way .fine{margin-top:20px;line-height:1.9}
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(22px,2.8vw,34px);
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.back:hover{color:var(--text);text-decoration-color:var(--rose)}

/* automation: the one place the pages turn over into dawn. Pale ground,
   ink type, the amber as a sun coming up behind the ridge. Still amber
   and rose, nothing new. */
.dawn{--pale:#EFEAF3;--dusk:#514B5D;
  color:var(--ink);border-bottom-color:var(--pale);padding-bottom:clamp(120px,15vw,210px);
  background:
    radial-gradient(ellipse 46% 44% at 70% 100%,rgba(240,169,78,.95) 0,rgba(240,169,78,.5) 34%,rgba(240,169,78,0) 100%),
    radial-gradient(ellipse 60% 50% at 8% 100%,rgba(231,192,198,.95) 0,rgba(231,192,198,0) 100%),
    var(--pale)}
.dawn .lab,.dawn .st.off{color:var(--dusk)}
.dawn .lamp{border-color:var(--dusk)}
.dawn .pic{position:relative;z-index:1}
.dawn .ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(150px,19vw,270px)}
.dawn :focus-visible{outline-color:var(--ink)}
.dawn .list{filter:drop-shadow(0 30px 40px rgba(81,75,93,.28))}
.dawn .list .sheet{fill:#FBF9FC;stroke:rgba(19,16,25,.08)}
.dawn .list .rule{stroke:rgba(19,16,25,.1)}
.dawn .list .row{fill:rgba(19,16,25,.13)}
.dawn .list .hand-glow{fill:rgba(240,169,78,.2)}
.dawn .list .hand-dot{filter:none}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);padding:clamp(34px,4.4vw,60px) 0}
.foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;max-width:1240px}
.foot-id{display:flex;align-items:center;gap:16px}
.foot-id img{height:18px;width:auto;opacity:.92}
.foot-sig{color:var(--soft)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:.6em}
.foot-links i{font-style:normal}
.foot-links a{display:inline-block;padding:14px 0;text-decoration:none;white-space:nowrap}
/* narrow: the links wrap, so the dots between them go and space does the work */
@media (max-width:700px){.foot-links{column-gap:26px}.foot-links i{display:none}}
.foot-links a:hover{color:var(--text)}

/* ==================================================================
   Motion. A block eases in once as it arrives, and its picture moves
   once: the days fill, the voice rises, the ticks are drawn. Then
   stillness. Nothing loops. Without JavaScript, or with reduced
   motion asked for, everything is simply there.
   ================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
  .js .reveal.in{opacity:1;transform:none}

  @keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
  @keyframes lit{from{opacity:0}to{opacity:1}}
  @keyframes voice{from{transform:scaleY(.12)}to{transform:none}}
  @keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

  .cal .done,.cal .now-dot,.list .tick-bg,.list .hand-dot,.note .wave rect{transform-box:fill-box;transform-origin:center}
  .js .in .cal .done{animation:pop .55s var(--ease) both;animation-delay:calc(.35s + var(--k) * 70ms)}
  .js .in .cal .now,.js .in .cal .now-dot{animation:lit .9s var(--ease) both;animation-delay:1.1s}
  .js .in .note .wave rect{animation:voice .8s var(--ease) both;animation-delay:calc(.3s + var(--k) * 24ms)}
  .js .in .list .tick-bg{animation:pop .5s var(--ease) both;animation-delay:calc(.35s + var(--k) * 260ms)}
  .js .in .list .tick{--len:26;stroke-dasharray:26;animation:draw .5s var(--ease) both;animation-delay:calc(.55s + var(--k) * 260ms)}
  .js .in .list .hand-glow,.js .in .list .hand-ring,.js .in .list .hand-dot{animation:lit .9s var(--ease) both;animation-delay:1.15s}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* the First Light name on the Websites page is a link to that page
   (build/root_swap.py). The box a finger lands in is 44px tall. */
.tag-link{position:relative;color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.tag-link::after{content:"";position:absolute;inset:-16px -8px}
.tag-link:hover{color:var(--text);text-decoration-color:var(--rose)}