/* ==================================================================
   The products, on the First Light page (/first-light/). Added Wed Oct 14 2026.

   Two things, and nothing else on the page is touched by this file:
   1. the Products menu at the left of the top bar
   2. the products section, the last thing before the footer

   Every rule starts with .prodnav or .apn-prods, so no rule here can
   reach anything that was already on the page. The colours are the
   First Light tokens from CLAUDE.md, under their own names (--p-*) so
   they do not replace the page's own --ink-2 and the rest.
   ================================================================== */
.prodnav,.apn-prods{
  --p-ink:#131019;
  --p-ink-2:#1A1522;
  --p-ink-3:#211B2B;
  --p-ink-4:#2A2235;
  --p-line:#2C2437;
  --p-text:#F3EFF2;
  --p-dim:#A295AE;
  --p-amber:#F0A94E;
  --p-rose:#E7C0C6;
  /* body copy: text let down towards dim, as on the products pages. Not a new colour. */
  --p-soft:#DBD4DE;
  --p-ease:cubic-bezier(.16,1,.3,1);
}
@supports (color:color-mix(in srgb,red,blue)){
  .prodnav,.apn-prods{--p-soft:color-mix(in srgb,var(--p-text) 70%,var(--p-dim))}
}
/* read aloud, not shown */
.apn-prods .vh,.prodnav .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ==================================================================
   1. The Products menu.
   The bar is three columns with the mark in the true centre and Build it
   on the right; the left column was empty. Products sits there, the same
   word and the same menu at every width.
   With no script it is a plain link to /, the products page.
   With the script it is a button that opens a short list under the bar.
   ================================================================== */
.prodnav{grid-column:1;grid-row:1;justify-self:start;position:relative}
.prodnav-link,.prodnav-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:0 12px;margin-left:-12px;border:0;background:none;cursor:pointer;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-text);text-decoration:none}
.prodnav-link[hidden],.prodnav-btn[hidden]{display:none}
.prodnav-link span,.prodnav-btn .prodnav-t{padding:6px 0;
  background:linear-gradient(var(--p-rose),var(--p-rose)) no-repeat 0 100%/0 1px;
  transition:background-size .4s var(--p-ease)}
.prodnav-link:hover span,.prodnav-btn:hover .prodnav-t,
.prodnav-btn[aria-expanded="true"] .prodnav-t{background-size:100% 1px}
.prodnav :focus-visible{outline:2px solid var(--p-amber);outline-offset:2px;border-radius:6px}
/* a small chevron that turns over when the list is open */
.prodnav-ico{width:8px;height:8px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .35s var(--p-ease),margin .35s var(--p-ease)}
.prodnav-btn[aria-expanded="true"] .prodnav-ico{transform:rotate(225deg);margin-top:4px}

.prodmenu{position:absolute;top:calc(100% + 14px);left:-12px;width:min(360px,calc(100vw - 32px));
  background:var(--p-ink-2);border:1px solid var(--p-line);border-radius:16px;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.8);padding:8px 0}
.prodmenu[hidden]{display:none}
.prodmenu ul{list-style:none}
.prodmenu li + li{border-top:1px solid var(--p-line)}
.prodmenu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;
  padding:0 20px;text-decoration:none;color:var(--p-text)}
.prodmenu .pm-name{font-family:'Instrument Serif',Georgia,serif;font-size:25px;line-height:1.1;letter-spacing:-.01em}
.prodmenu .pm-st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--p-dim)}
.prodmenu a:hover .pm-name{color:var(--p-rose)}
.prodmenu a:focus-visible{outline-offset:-4px}
.prodmenu .pm-all a{min-height:52px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--p-dim)}
.prodmenu .pm-all a:hover{color:var(--p-text)}

/* the lamp, as on the products pages: lit if you can buy it, a ring if not */
.prodnav .lamp,.apn-prods .lamp{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;border:1px solid var(--p-dim)}
.prodnav .lamp.on,.apn-prods .lamp.on{border-color:var(--p-amber);background:var(--p-amber);
  box-shadow:0 0 0 3px rgba(240,169,78,.16),0 0 14px rgba(240,169,78,.55)}

/* On a phone the bar is 60px and the list runs the width of the screen. */
@media (max-width:560px){
  .prodnav-link,.prodnav-btn{font-size:11px;letter-spacing:.13em}
  .prodmenu{position:fixed;top:60px;left:0;right:0;width:auto;border-radius:0;border-left:0;border-right:0;
    max-height:calc(100vh - 60px);max-height:calc(100svh - 60px);overflow-y:auto;padding:4px 0 10px}
  .prodmenu a{padding:0 18px;min-height:60px}
  .prodmenu .pm-name{font-size:27px}
}

/* ==================================================================
   2. The products section: the four products,
   as plain blocks in the look of the products pages. One status, one
   name, one line, one link, one picture. A click anywhere on a block
   opens that product's page.
   ================================================================== */
.apn-prods .p-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.apn-prods .p-grid{grid-template-columns:minmax(0,1fr)}}

.apn-prods .p-blk{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;background:linear-gradient(180deg,var(--p-ink-3) 0,var(--p-ink-2) 52%);
  padding:clamp(36px,4.4vw,60px) clamp(18px,3vw,40px) 0}
.apn-prods .p-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(--p-text)}
.apn-prods .p-st.off{color:var(--p-dim)}
.apn-prods .p-blk h3{margin-top:14px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(40px,4.8vw,66px);line-height:.94;letter-spacing:-.018em;color:var(--p-text);text-wrap:balance}
.apn-prods .p-line{margin-top:14px;max-width:30ch;font-size:clamp(16px,1.4vw,18px);line-height:1.45;color:var(--p-soft);text-wrap:balance}
.apn-prods .p-more{display:inline-block;margin-top:22px;padding:13px 26px;line-height:20px;border-radius:999px;
  border:1px solid var(--p-text);background:var(--p-text);color:var(--p-ink);
  font-size:14.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;
  transition:transform .3s var(--p-ease),background .3s var(--p-ease),border-color .3s var(--p-ease),color .3s var(--p-ease)}
.apn-prods .p-more.ring{background:transparent;color:var(--p-text);border-color:rgba(243,239,242,.36)}
/* the link is stretched over its whole block */
.apn-prods .p-more::after{content:"";position:absolute;inset:0;z-index:1}
.apn-prods .p-blk:hover .p-more{background:var(--p-rose);border-color:var(--p-rose);color:var(--p-ink)}
.apn-prods .p-blk:hover .p-more.ring{background:transparent;color:var(--p-rose)}
.apn-prods .p-more:focus-visible{outline:2px solid var(--p-amber);outline-offset:4px}
.apn-prods .p-blk:has(.p-more:focus-visible){box-shadow:inset 0 0 0 2px var(--p-amber)}

/* the picture sits at the foot of the block */
.apn-prods .p-pic{flex:1;display:flex;align-items:center;justify-content:center;width:100%;
  min-height:clamp(200px,20vw,270px);padding:clamp(28px,3vw,40px) 0 clamp(30px,3.4vw,46px)}
.apn-prods .p-pic > *{transition:transform .6s var(--p-ease)}
@media (hover:hover){.apn-prods .p-blk:hover .p-pic > *{transform:translateY(-5px)}}

/* websites: the First Light card in a plain window, its foot running off the block */
.apn-prods .p-pic.foot{align-items:flex-end;padding-bottom:0}
.apn-prods .frame{width:min(100%,520px);border-radius:12px 12px 0 0;overflow:hidden;background:var(--p-ink-3);
  border:1px solid rgba(243,239,242,.14);border-bottom:0;box-shadow:0 30px 70px -36px rgba(0,0,0,.9)}
.apn-prods .frame-top{display:flex;align-items:center;justify-content:center;height:24px;
  background:var(--p-ink-3);border-bottom:1px solid var(--p-line)}
.apn-prods .frame-top span{width:34%;height:38%;border-radius:999px;background:var(--p-ink-4)}
.apn-prods .frame img{width:100%;height:auto}

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

/* video messaging: the voice note */
.apn-prods .note{width:min(100%,340px);height:auto;overflow:visible}
.apn-prods .note .bubble{fill:var(--p-ink-4);stroke:rgba(243,239,242,.16)}
.apn-prods .note .play{fill:var(--p-text)}
.apn-prods .note .tri{fill:var(--p-ink);stroke:var(--p-ink);stroke-width:3;stroke-linejoin:round}
.apn-prods .note .wave rect{fill:var(--p-dim);opacity:.6}
.apn-prods .note .wave .said{fill:var(--p-rose);opacity:1}
.apn-prods .note text{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:.02em;fill:var(--p-soft)}

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

@media (prefers-reduced-motion:reduce){
  .prodnav *,.apn-prods *{transition:none!important;animation:none!important}
}