/* ==========================================================================
   Tacit design system
   Loaded by every page. See DESIGN.md for the rules behind these choices.

   Three decisions that keep this from reading as a template:
   1. A real Hebrew typeface (Assistant) with hard weight contrast, 800 against
      400, instead of a system stack that has no voice.
   2. Products are an editorial index with hairline rules, never a grid of
      rounded cards.
   3. Lime appears once per screen and it is always the thing to click.
   ========================================================================== */

:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --paper-2:#F7F8F7;      /* the quiet band that gives long pages rhythm */
  --ink:#0E1417;
  --ink-2:#4B5358;
  /* 4.97:1 on --paper and 4.67:1 on --paper-2. The old #8A9299 was 3.16:1,
     which fails WCAG AA for normal text - and this token colours nearly all
     the secondary copy on the site: table headers, card labels, kickers. */
  --muted:#687178;
  --line:#E7E9E8;
  --line-2:#D3D7D5;
  --lime:#CCFF00;
  --lime-ink:#4A6300;     /* the only lime that is legible on white */
  --on-lime:#0E1417;
  --mark:#0E1417;
  --ok:#1F7A4C;--warn:#8A5D0F;--bad:#A3352A;
  --r:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#0B0E10;--paper-2:#101416;--ink:#EDEFEE;--ink-2:#AEB5B8;--muted:#78807F;
  --line:#1D2225;--line-2:#2C3336;--lime-ink:#CCFF00;--on-lime:#0B0E10;--mark:#CCFF00;
  --ok:#5EC48C;--warn:#D7A94F;--bad:#E3877A;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0B0E10;--paper-2:#101416;--ink:#EDEFEE;--ink-2:#AEB5B8;--muted:#78807F;
  --line:#1D2225;--line-2:#2C3336;--lime-ink:#CCFF00;--on-lime:#0B0E10;--mark:#CCFF00;
  --ok:#5EC48C;--warn:#D7A94F;--bad:#E3877A;
}

*{box-sizing:border-box}
/* display:flex on a component beats the hidden attribute's default. Without this
   line every `el.hidden = true` in the app silently does nothing. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Assistant,"Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px;border-radius:2px}
button,a,select,summary{touch-action:manipulation}
[id]{scroll-margin-top:92px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* ---- type scale. Hebrew takes almost no negative tracking. ---- */
.d1{font-size:clamp(38px,6.2vw,74px);font-weight:800;line-height:1.04;letter-spacing:-.015em;margin:0}
.d2{font-size:clamp(27px,3.8vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.012em;margin:0}
.d3{font-size:clamp(20px,2.2vw,25px);font-weight:700;line-height:1.28;letter-spacing:-.008em;margin:0}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.66;color:var(--ink-2);margin:0}
.sm{font-size:15px;color:var(--ink-2)}
.tiny{font-size:13.5px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---- buttons: one lime per screen ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:var(--r);
  font-weight:700;font-size:16px;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
/* `.btn-primary` is the SAME button as `.btn-1`, and the two names exist because
   of a mistake worth remembering. The marketing pages were written with
   .btn-1/.btn-2; everything built later - checkout, the wizard, sign-in, the
   scan screen, the dashboard, seventeen buttons in all - was written with
   .btn-primary, a class that was never defined in any stylesheet. So for the
   whole life of the paid funnel its main action at every step was a browser-
   default grey button, identical to "back", and the link that ends it ("לדבר
   איתה") was unstyled text that did not look clickable. No audit caught it: a
   default button still has contrast, a label and a big enough target.
   Defined here rather than renamed in seventeen places, so the next one written
   from habit works too. */
.btn-1,.btn-primary{background:var(--lime);color:var(--on-lime);border-color:var(--lime);
  text-decoration:none}
.btn-1:hover,.btn-primary:hover{background:#BFEF00;border-color:#BFEF00}
.btn-primary:disabled{opacity:.6;cursor:default}
.btn-2{border-color:var(--line-2);color:var(--ink);background:none}
.btn-2:hover{border-color:var(--ink)}
/* A bare .btn - "back", "copy", "choose a file" - is the quiet one. Without this
   it fell through to the same browser default as the primary, which is how the
   two ended up indistinguishable. */
button.btn:not(.btn-1):not(.btn-2):not(.btn-primary),
a.btn:not(.btn-1):not(.btn-2):not(.btn-primary){
  border-color:var(--line-2);color:var(--ink);background:none;text-decoration:none}
button.btn:not(.btn-1):not(.btn-2):not(.btn-primary):hover,
a.btn:not(.btn-1):not(.btn-2):not(.btn-primary):hover{border-color:var(--ink)}
.btn-sm{padding:9px 17px;font-size:14.5px}

/* ---- header: sticky, with a real product menu ---- */
.hdr{position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:8px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo svg{width:25px;height:25px;color:var(--mark)}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:26px}
.nav>a,.mtrig{padding:9px 13px;border-radius:var(--r);color:var(--ink-2);font-size:15.5px;
  font-weight:500;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.nav>a:hover,.mtrig:hover{color:var(--ink);background:var(--paper-2)}
.mtrig[aria-expanded="true"]{color:var(--ink);background:var(--paper-2)}
.mtrig svg{width:11px;height:11px;transition:transform .18s ease}
.mtrig[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-act{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.tog{border:1px solid var(--line-2);background:none;color:var(--ink-2);cursor:pointer;
  width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center}
.tog:hover{border-color:var(--ink);color:var(--ink)}
.tog svg{width:16px;height:16px}

/* mega menu: every product, grouped, one line each */
.mega{position:absolute;inset-inline-start:0;inset-inline-end:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 24px 48px -30px rgba(0,0,0,.32);
  display:none;padding:34px 0 30px}
.mega[data-open="1"]{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.mega h3{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:9px 11px;margin-inline-start:-11px;border-radius:var(--r)}
.mega li a:hover{background:var(--paper-2)}
.mega .mn{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:7px}
.mega .md{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.dot.wip{background:var(--muted)}

/* ---- the product index: hairlines, not cards ---- */
.idx{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1.25fr) 130px;
  gap:26px;align-items:baseline;padding:26px 8px;border-bottom:1px solid var(--line);
  transition:background-color .16s ease}
.row:hover{background:var(--paper-2)}
.row .n{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:5px}
.row .t{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.row .t small{display:block;font-size:13.5px;font-weight:500;color:var(--muted);
  letter-spacing:.04em;margin-top:3px}
.row .d{color:var(--ink-2);font-size:16px;line-height:1.62}
.row .a{text-align:end;font-weight:700;font-size:15px;color:var(--lime-ink);white-space:nowrap}
.row .a.off{color:var(--muted);font-weight:500}

.band{background:var(--paper-2)}
/* padding-block, NOT the `padding: 88px 0` shorthand.
   Sections are written `class="wrap sec"`, and `.wrap` gives them their 28px
   side gutters. A shorthand here has the same specificity and comes later, so
   it silently reset those gutters to zero - on every page, at every width. On a
   desktop the 1160px max-width hid it; on a phone every line of text ran into
   the edge of the glass. */
.sec{padding-block:88px}
.sec-sm{padding-block:60px}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

footer{border-top:1px solid var(--line);padding:44px 0 60px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14.5px}

/* ------------------------------------------------------- the phone menu

   Below 900px the desktop nav and the CTA are hidden. Everything they held
   moves into a sheet behind `.burger`, because a header with only a logo is
   not a smaller header - it is a site with no navigation. */

.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);cursor:pointer;padding:0;place-items:center;gap:4px;
  flex-direction:column;flex:0 0 auto}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .15s ease}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.sheet{position:fixed;inset:0;top:var(--hdr-h,68px);z-index:79;background:var(--paper);
  overflow-y:auto;-webkit-overflow-scrolling:touch;animation:shIn .18s ease}
@keyframes shIn{from{opacity:0;transform:translateY(-8px)}}
.sh-in{padding:18px 22px 96px;max-width:620px;margin:0 auto}
.sh-main{display:flex;flex-direction:column;border-bottom:1px solid var(--line);
  padding-bottom:10px;margin-bottom:16px}
.sh-main a{padding:11px 4px;font-size:17.5px;font-weight:700;color:var(--ink)}
.sh-main a[aria-current=page]{color:var(--lime-ink)}
.sh-group{margin-bottom:22px}
.sh-group h3{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.sh-products a{display:flex;align-items:center;gap:9px;padding:11px 4px;
  border-bottom:1px solid var(--line);font-size:15.5px}
.sh-products a:last-child{border-bottom:0}
.sh-products b{font-weight:700}
.sh-products span:last-child{color:var(--ink-2);font-size:14px}
/* Pinned, because it sat below eleven products and a 1080px scroll. The action
   a visitor came for should not be the thing hardest to reach. */
.sh-cta{position:fixed;inset-inline:16px;bottom:16px;width:auto;justify-content:center;
  padding:15px;font-size:16.5px;box-shadow:0 6px 24px rgba(14,20,23,.16)}

@media (max-width:900px){
  .nav,.hdr-act .btn{display:none}
  .burger{display:flex}
  /* The logo is the way home on a phone, so it gets a thumb-sized target. */
  .hdr .logo{padding:6px 2px}
  .mega-grid{grid-template-columns:1fr 1fr;gap:24px}
  .row{grid-template-columns:34px 1fr;gap:8px 14px}
  .row .d{grid-column:2}
  .row .a{grid-column:2;text-align:start}
  .sec{padding-block:60px}
}
@media (max-width:560px){.mega-grid{grid-template-columns:1fr}}

/* A narrower gutter below 480px. 28px each side out of 375 is a tenth of the
   screen spent on nothing, and Hebrew body text needs the characters. */
@media (max-width:480px){
  .wrap{padding:0 20px}
  .st-t{padding:20px 18px 0}
  .st-v{padding:14px 18px 20px}
  .st-go{padding:13px 18px}
}
@media (max-width:520px){
  /* Same reason as the panel: anything under 16px makes iOS zoom on focus and
     leaves the visitor on a page they now have to pinch back. */
  .f input,.f textarea,.f select,input,textarea,select{font-size:16px}
  .f input,.f textarea,.f select{padding:12px 13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Visual layer: the product UI is the imagery. Frames, depth and motion.
   ========================================================================== */

/* soft light behind a hero. Positioned by the page, never on its own. */
/* centring must be physical: inset-inline-start flips to the right edge in RTL */
.glow{position:absolute;left:50%;transform:translateX(-50%);width:min(1100px,120vw);
  height:560px;pointer-events:none;z-index:0;filter:blur(60px);opacity:.5}
.glow::before{content:"";position:absolute;inset:0;
  background:radial-gradient(45% 55% at 50% 40%,rgba(204,255,0,.34),transparent 70%),
             radial-gradient(38% 46% at 22% 62%,rgba(120,190,255,.28),transparent 72%),
             radial-gradient(40% 50% at 80% 58%,rgba(255,190,120,.22),transparent 72%)}
:root[data-theme="dark"] .glow,
:root:not([data-theme="light"]) .glow{opacity:.34}

/* browser chrome. The product screenshot lives inside this. */
.frame{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 40px 80px -50px rgba(0,0,0,.55);position:relative;z-index:1}
.frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--paper-2)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block;flex:none}
.frame-url{margin-inline-start:12px;flex:1;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:4px 12px;font-size:12px;color:var(--muted);text-align:center;
  font-family:ui-monospace,Consolas,monospace}

/* bento: cells of different weight, product UI inside each */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cell{grid-column:span 2;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column;position:relative;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.cell:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.45)}
.cell.w3{grid-column:span 3}
.cell.w4{grid-column:span 4}
.cell.w6{grid-column:span 6}
.cell-t{padding:22px 22px 0}
.cell-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cell h3{margin:9px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.cell p{margin:7px 0 0;color:var(--ink-2);font-size:15px;line-height:1.6}
.cell-v{margin-top:18px;padding:0 22px 22px;flex:1;display:flex;align-items:flex-end}
.cell-go{position:absolute;inset-inline-end:18px;top:20px;color:var(--muted);
  transition:color .2s ease,transform .2s ease}
.cell:hover .cell-go{color:var(--ink);transform:translateX(-3px)}

/* the small live panels that sit inside cells */
.mini{width:100%;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--paper-2);font-size:12.5px}
.mini .r{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;
  border-bottom:1px solid var(--line);background:var(--paper)}
.mini .r:last-child{border-bottom:0}
.mini b{font-weight:600}
.mini .n{font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.t-ok{color:var(--ok)}.t-warn{color:var(--warn)}.t-bad{color:var(--bad)}
.bars{display:flex;align-items:flex-end;gap:7px;height:74px;padding:12px 11px 0;background:var(--paper)}
.bars i{flex:1;background:var(--line-2);border-radius:3px 3px 0 0;display:block;
  transition:height .8s cubic-bezier(.2,.7,.3,1)}
.bars i.hi{background:var(--lime)}
.chatmini{padding:11px;display:flex;flex-direction:column;gap:7px;background:var(--paper)}
.chatmini span{max-width:86%;padding:7px 11px;border-radius:11px;background:var(--paper-2);font-size:12.5px;line-height:1.45}
.chatmini span.me{background:var(--lime);color:var(--on-lime);margin-inline-start:auto}

/* scroll reveal */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell,.cell.w3,.cell.w4,.cell.w6{grid-column:span 2}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .cell,.cell.w3,.cell.w4,.cell.w6{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .glow{display:none}
}

/* ==========================================================================
   The journey. Products are stations on the customer's path, not a grid.
   A spine runs down the page and fills as you scroll; stations alternate
   sides and carry a live panel each.
   ========================================================================== */
.journey{position:relative;padding:20px 0 10px}
.spine{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden}
.spine-fill{position:absolute;inset-inline:0;top:0;height:0;
  background:linear-gradient(180deg,var(--lime-ink),var(--lime));border-radius:2px}
:root[data-theme="dark"] .spine-fill,
:root:not([data-theme="light"]) .spine-fill{background:linear-gradient(180deg,#7FA300,var(--lime))}

.phase{position:relative;display:flex;justify-content:center;padding:52px 0 26px;z-index:2}
.phase span{background:var(--paper);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 20px;font-size:13.5px;font-weight:700;color:var(--ink-2)}

.st{position:relative;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;
  padding:16px 0}
.st .node{grid-column:2;justify-self:center;width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);display:grid;place-items:center;
  font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--muted);
  z-index:3;transition:border-color .4s ease,color .4s ease,background-color .4s ease}
.st.lit .node{border-color:var(--lime);background:var(--lime);color:var(--on-lime)}
.st .card{grid-column:1;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  display:block}
.st:nth-of-type(even) .card{grid-column:3}
.st .card:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 20px 44px -32px rgba(0,0,0,.45)}
.st-t{padding:24px 24px 0}
.st-v{padding:18px 24px 24px}
.st-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.st h3{margin:10px 0 0;font-size:clamp(19px,1.9vw,23px);font-weight:800;
  letter-spacing:-.012em;line-height:1.3}
.st p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.68}
.st-v{padding:18px 24px 24px}
.st-go{display:flex;align-items:center;gap:7px;padding:14px 24px;border-top:1px solid var(--line);
  font-weight:700;font-size:14.5px;color:var(--lime-ink);background:var(--paper-2)}
.st-go.off{color:var(--muted)}
.st .card:hover .st-go svg{transform:translateX(-4px)}
.st-go svg{width:15px;height:15px;transition:transform .2s ease}

@media (max-width:900px){
  /* the node column is the inline-start column, so the spine must follow the
     writing direction here - unlike the centred desktop case */
  .spine{left:auto;inset-inline-start:18px;transform:none}
  /* The spine column is decoration; on a 375px screen it was taking 60px out of
     319 and squeezing every line of body text. */
  .st{grid-template-columns:36px 1fr;gap:12px;padding:12px 0}
  .st .node,.st:nth-of-type(even) .node{grid-column:1;width:36px;height:36px;font-size:12.5px}
  .st .card,.st:nth-of-type(even) .card{grid-column:2}
  .phase{justify-content:flex-start;padding-inline-start:0}
}


/* ---------------------------------------------------------------- wizard
   Rendered by assets/wizard.js from the product registry, so every product
   that will ever exist shares these rules. Moved here out of chat.html the
   moment a second page needed them. */
.wiz{border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.wbar{display:flex;gap:2px;background:var(--line);border-bottom:1px solid var(--line)}
.wbar span{flex:1;height:3px;background:var(--line)}
.wbar span.on{background:var(--lime)}
.wbody{padding:30px}
.wstep{display:none}.wstep.on{display:block}
.f{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.f label{font-weight:600;font-size:14.5px}
.f .hint{font-size:13px;color:var(--muted)}
.f input,.f textarea,.f select{font:inherit;font-size:15.5px;padding:11px 13px;border:1.5px solid var(--line-2);
  border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--ink);outline:none}
.f textarea{min-height:88px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Per-platform instructions. `ok` means there is nothing to do, and it is the
   answer most customers get, so it reads as reassurance rather than a task. */
.wguide{margin-top:18px;padding:16px 18px;border-radius:8px;border:1.5px solid var(--line-2);
  background:var(--paper-2)}
.wguide.ok{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 10%,var(--paper))}
.wguide b{display:block;font-size:14.5px;margin-bottom:4px}
.wguide p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.wguide ol{margin:12px 0 0;padding-inline-start:20px;font-size:14px;line-height:1.9}
.wguide li::marker{font-weight:700}
.wguide .wguide-ok{margin-top:10px;font-weight:600;color:var(--ink)}
.wguide .wguide-tail{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}

/* The logo picker. The preview is what tells someone the upload worked, so it
   sits first and the button renames itself once there is something to replace. */
.wimg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.wimg-prev{width:52px;height:52px;border-radius:8px;object-fit:contain;flex:none;
  border:1.5px solid var(--line-2);background:var(--paper);padding:4px}
.wimg .btn{padding:9px 16px;font-size:14.5px}
.wimg-clear{background:none;border:none;font:inherit;font-size:13.5px;color:var(--muted);
  text-decoration:underline;cursor:pointer;padding:6px 4px}
.wimg-clear:hover{color:var(--ink)}
.wimg-note{flex-basis:100%}

.wnav{display:flex;gap:10px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.wnav .step{margin-inline-start:auto;font-size:13.5px;color:var(--muted)}

/* The sign-in link in the header. Quiet next to the CTA, because the CTA is the
   thing a stranger should click and this one is for people who already bought. */
.hdr-in-link{font-size:14.5px;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:6px 2px}
.hdr-in-link:hover{color:var(--ink);text-decoration:underline}
@media(max-width:900px){.hdr-in-link{display:none}}  /* it moves into the sheet */