/* option 04, wait or answer. The copy sits on a solid white band at the top; below it one scene row holds
   two layers with the same geometry: the waiting website underneath, the answering one on top clipped from
   the line to the right edge. --x on the stage drives the clip and the line, which never enters the copy. */
.hero-wait-or-answer{--card-h:340px;--eye-pt:10px;--scene-pt:36px}
.hero-wait-or-answer .wa-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:var(--hero-vh);overflow:hidden;touch-action:pan-y;isolation:isolate;background:var(--bg)}
.hero-wait-or-answer .wa-stage.is-drag{-webkit-user-select:none;user-select:none;cursor:ew-resize}

/* layers */
.hero-wait-or-answer .wa-layer{grid-row:2;grid-column:1;display:flex;flex-direction:column;position:relative;min-width:0}
.hero-wait-or-answer .wa-wait{z-index:1;background-color:var(--bg-2);background-image:radial-gradient(rgba(13,13,13,.1) 1px,transparent 1.3px);background-size:22px 22px}
.hero-wait-or-answer .wa-ans{z-index:2;clip-path:inset(0 0 0 var(--x));background:#EEF3FF}
.hero-wait-or-answer .wa-shader{position:absolute;inset:0;z-index:0}
.hero-wait-or-answer .wa-layer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,var(--bg),rgba(255,255,255,.6) 90px,rgba(255,255,255,.3) 40%,rgba(255,255,255,0) 70%)}
.hero-wait-or-answer .wa-wait > *{position:relative;z-index:1}
.hero-wait-or-answer .wa-narrow{display:none}
.hero-wait-or-answer .wa-ans > :not(.wa-shader){position:relative;z-index:1}

/* scene top: the two eyebrows and the clock riding the line */
.hero-wait-or-answer .wa-eye{margin:var(--eye-pt) 0 0;padding:0 var(--gutter);font-size:12px;line-height:24px;color:var(--text-2);letter-spacing:.02em;white-space:nowrap}
.hero-wait-or-answer .wa-eye-wait{align-self:flex-start}
.hero-wait-or-answer .wa-eye-ans{align-self:flex-end;display:flex;align-items:center;gap:8px;color:var(--ink)}
.hero-wait-or-answer .wa-mark svg{height:11px;width:auto;overflow:visible}
.hero-wait-or-answer .wa-mark .tb-arc{stroke:currentColor}
.hero-wait-or-answer .wa-mark .tb-dot{fill:var(--accent)}

/* row 1: the copy on its own solid ground, nothing crosses it */
.hero-wait-or-answer .wa-copy{grid-row:1;grid-column:1;z-index:5;position:relative;text-align:center;padding:calc(var(--nav-h) + clamp(20px,3vw,48px)) 0 clamp(8px,1.4vw,20px);background:var(--bg);min-width:0}
.hero-wait-or-answer .wa-h1{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(22px,2.2vw,40px);margin:0;font-size:clamp(44px,4.9vw,84px);font-weight:500;letter-spacing:-.045em;line-height:1.06;color:var(--ink)}
.hero-wait-or-answer .wa-l{display:block}
.hero-wait-or-answer .wa-l > span{display:inline-block}
.hero-wait-or-answer .wa-l1{text-align:right;padding-left:var(--gutter);color:var(--line-control)}
.hero-wait-or-answer .wa-l2{text-align:left;padding-right:var(--gutter)}
.hero-wait-or-answer .wa-lead{max-width:calc(46ch + 2 * var(--gutter));margin:clamp(14px,1.6vw,22px) auto 0;padding:0 var(--gutter);font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--text-2)}
.hero-wait-or-answer .wa-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(18px,2vw,26px);padding:0 var(--gutter)}

/* row 2: the scene, same three columns in both layers so the card centre is the stage centre */
.hero-wait-or-answer .wa-scene{display:grid;grid-template-columns:minmax(0,280px) minmax(0,440px) minmax(0,280px);justify-content:center;align-items:center;gap:clamp(24px,3.2vw,52px);padding:var(--scene-pt) var(--gutter) 28px}

/* ledgers */
.hero-wait-or-answer .wa-ledger{text-align:left;align-self:center}
.hero-wait-or-answer .wa-ledger-h{font-size:12px;color:var(--text-3);margin:0 0 8px;letter-spacing:.02em}
.hero-wait-or-answer .wa-ledger ol{list-style:none;margin:0;padding:0}
.hero-wait-or-answer .wa-ledger li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:9px 0;border-top:1px solid rgba(13,13,13,.1);font-size:15px;line-height:1.35;letter-spacing:-.005em;opacity:.0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero-wait-or-answer .wa-ledger li span{font-size:12px;color:var(--text-3);padding-top:2px}
.hero-wait-or-answer .wa-ledger li.is-on{opacity:1;transform:none}
.hero-wait-or-answer .wa-wait .wa-ledger li{color:var(--text-2)}

/* cards */
.hero-wait-or-answer .wa-card{height:var(--card-h);display:flex;flex-direction:column;position:relative;text-align:left;min-width:0}
.hero-wait-or-answer .wa-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 16px 14px;box-shadow:var(--glass-lift-sm)}
.hero-wait-or-answer .wa-card-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:12px;transition:opacity .6s var(--ease)}
.hero-wait-or-answer .wa-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line-control);flex:none}
.hero-wait-or-answer .wa-time{margin-left:auto;font-size:12px;color:var(--text-3)}
.hero-wait-or-answer .wa-form-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}
.hero-wait-or-answer .wa-half{display:flex;flex-direction:column;min-width:0;min-height:0;transition:opacity .8s var(--ease),filter .8s var(--ease)}
.hero-wait-or-answer .wa-reply{flex:1;border:1px dashed var(--line-control);border-radius:10px;display:grid;place-items:center;opacity:.8}
.hero-wait-or-answer .wa-label{font-size:11px;color:var(--text-3);margin:0 0 5px}
.hero-wait-or-answer .wa-field{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:9px 12px;font-size:15px;line-height:1.35;min-height:40px;margin-bottom:12px;color:var(--ink)}
.hero-wait-or-answer .wa-area{flex:1;min-height:60px;overflow:hidden}
.hero-wait-or-answer .wa-field [data-at]:not(.is-on){visibility:hidden}
.hero-wait-or-answer .wa-caret{display:inline-block;width:1.5px;height:1.05em;background:var(--ink);vertical-align:-.18em;margin-left:1px;animation:wait-or-answer-blink 1s steps(1) infinite}
.hero-wait-or-answer .wa-caret:not(.is-on){display:none}
.hero-wait-or-answer .wa-send{display:inline-grid;align-self:flex-start;place-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;flex:none;transition:background .3s var(--ease),color .3s var(--ease)}
.hero-wait-or-answer .wa-send > span{grid-area:1/1}
.hero-wait-or-answer .wa-send-b,.hero-wait-or-answer .wa-send.is-on .wa-send-a{visibility:hidden}
.hero-wait-or-answer .wa-send.is-on .wa-send-b{visibility:visible}
.hero-wait-or-answer .wa-send.is-on{background:var(--bg-3);color:var(--text-2)}
.hero-wait-or-answer .wa-note{font-size:14px;color:var(--text-2);line-height:1.3;margin:8px 0 0;min-height:24px}
.hero-wait-or-answer .wa-waiting{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--text-3)}
.hero-wait-or-answer .wa-waiting i{width:6px;height:6px;border-radius:50%;background:var(--line-control);animation:wait-or-answer-pulse 1.6s ease-in-out infinite}
.hero-wait-or-answer .wa-note{opacity:0;transition:opacity .5s var(--ease)}
.hero-wait-or-answer .wa-note.is-on{opacity:1}
.hero-wait-or-answer .wa-form.is-on .wa-note{display:none}
.hero-wait-or-answer .wa-left{align-self:flex-start;margin:6px 0 0;background:var(--ink);color:#fff;border-radius:999px;padding:0 12px;height:24px;line-height:24px;font-size:13px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero-wait-or-answer .wa-left:not(.is-on){display:none}
.hero-wait-or-answer .wa-left.is-on{opacity:1;transform:none;animation:wait-or-answer-in .5s var(--ease) both}
.hero-wait-or-answer .wa-half > *{transition:opacity .8s var(--ease)}
.hero-wait-or-answer .wa-form.is-on .wa-half > :not(.wa-left){opacity:.38}
.hero-wait-or-answer .wa-form.is-on .wa-card-head{opacity:.5}

.hero-wait-or-answer .wa-chat{display:flex;flex-direction:column}
.hero-wait-or-answer .wa-log{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding-left:calc(50% + 8px)}
.hero-wait-or-answer .wa-log .is-old{display:none}
.hero-wait-or-answer .wa-log > *{flex:none}
.hero-wait-or-answer .wa-log [data-at]:not(.is-on),.hero-wait-or-answer .wa-chat-foot [data-at]:not(.is-on){display:none}
.hero-wait-or-answer .wa-log .tb-bub{max-width:100%}
.hero-wait-or-answer .wa-chat-head .tb-chat-time{margin-left:0}
.hero-wait-or-answer .wa-agent{margin-left:auto}
.hero-wait-or-answer .wa-log .tb-bub.is-on{opacity:1;transform:none;animation:wait-or-answer-in .45s var(--ease) both}
.hero-wait-or-answer .wa-typing{align-self:flex-end;margin:0;padding:12px 10px;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-right-radius:6px;line-height:0}
.hero-wait-or-answer .wa-chat-foot{height:22px;margin-top:8px;display:flex;align-items:center;padding-left:calc(50% + 8px)}
.hero-wait-or-answer [data-agent]{display:inline-block}

/* the inbox, the waiting twin of the owner deck */
.hero-wait-or-answer .wa-inbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;text-align:left;box-shadow:var(--glass-lift-sm)}
.hero-wait-or-answer .wa-inbox-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px}
.hero-wait-or-answer .wa-inbox ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.hero-wait-or-answer .wa-inbox li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.hero-wait-or-answer .wa-inbox li span{color:var(--text-3)}
.hero-wait-or-answer .wa-inbox b{font-weight:500;color:var(--text-2);text-align:right}
.hero-wait-or-answer .wa-inbox em{font-style:normal}
.hero-wait-or-answer .wa-inbox em:not(.is-on){display:none}
.hero-wait-or-answer .wa-later{pointer-events:none;color:var(--text-3)}
.hero-wait-or-answer .wa-deck-slot{min-width:0}

/* the line: only in the scene row. The knob sits on the card head, where neither half has text */
.hero-wait-or-answer .wa-div{grid-row:2;grid-column:1;z-index:4;display:flex;flex-direction:column;justify-self:start;width:0;margin-left:var(--x);pointer-events:none}
.hero-wait-or-answer .wa-chip{align-self:flex-start;margin:var(--eye-pt) 0 0;transform:translateX(-50%);white-space:nowrap;height:24px;line-height:24px;padding:0 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;flex:none}
.hero-wait-or-answer .wa-rail{flex:1;position:relative;width:0}
.hero-wait-or-answer .wa-rail::before{content:"";position:absolute;top:8px;bottom:0;left:-.75px;width:1.5px;background:var(--ink);-webkit-mask-image:linear-gradient(to bottom,#000,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(to bottom,#000,#000 calc(100% - 60px),transparent)}
.hero-wait-or-answer .wa-knob{position:absolute;left:0;top:calc(var(--scene-pt) + 25px);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(10,10,20,.45);cursor:ew-resize;pointer-events:auto;touch-action:none;transition:transform .25s var(--ease)}
.hero-wait-or-answer .wa-knob:hover,.hero-wait-or-answer .wa-stage.is-drag .wa-knob{transform:scale(1.08)}
.hero-wait-or-answer .wa-knob:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}
.hero-wait-or-answer .wa-knob svg{width:22px;height:22px}

/* entrance */
.hero-wait-or-answer .is-intro .wa-lead{animation:wait-or-answer-up .9s var(--ease) .3s both}
.hero-wait-or-answer .is-intro .wa-cta{animation:wait-or-answer-up .9s var(--ease) .42s both}
.hero-wait-or-answer .is-intro .wa-eye,.hero-wait-or-answer .is-intro .wa-chip{animation:wait-or-answer-fade .8s var(--ease) .2s both}
.hero-wait-or-answer .is-intro .wa-scene > *{animation:wait-or-answer-up 1s var(--ease) .5s both}
.hero-wait-or-answer .is-intro .wa-scene > .wa-card{animation-delay:.4s}
.hero-wait-or-answer .is-intro .wa-knob{animation:wait-or-answer-fade .8s var(--ease) .7s both}
.hero-wait-or-answer .is-still *{animation:none!important;transition:none!important}
@keyframes wait-or-answer-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wait-or-answer-fade{from{opacity:0}to{opacity:1}}
@keyframes wait-or-answer-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wait-or-answer-blink{50%{opacity:0}}
@keyframes wait-or-answer-pulse{0%,100%{opacity:.35}50%{opacity:1}}

@media (max-width:1100px){
  .hero-wait-or-answer .wa-scene{grid-template-columns:minmax(0,220px) minmax(0,400px) minmax(0,220px)}
  .hero-wait-or-answer .wa-ledger li{grid-template-columns:1fr;gap:2px;font-size:14px}
}
@media (max-width:820px){
  .hero-wait-or-answer{--card-h:232px;--eye-pt:4px;--scene-pt:18px}
  .hero-wait-or-answer .wa-eye,.hero-wait-or-answer .wa-chip{font-size:11px}
  .hero-wait-or-answer .wa-eye{padding:0 16px}
  .hero-wait-or-answer .wa-chip-k{display:none}
  .hero-wait-or-answer .wa-copy{padding:calc(var(--nav-h) + 6px) 0 0}
  .hero-wait-or-answer .wa-h1{display:block;text-align:center;font-size:clamp(40px,11.4vw,64px)}
  /* one text block on phones: two grid items measure as two candidates and the three line lead
     outweighs either half, so the halves go inline with a forced break. Same two lines, one headline. */
  .hero-wait-or-answer .wa-l{display:inline;padding:0;text-align:inherit}
  .hero-wait-or-answer .wa-l > span{display:inline}
  .hero-wait-or-answer .wa-l1::after{content:"\A";white-space:pre}
  .hero-wait-or-answer .wa-l1,.hero-wait-or-answer .wa-l2{text-align:center;padding:0 var(--gutter)}
  .hero-wait-or-answer .wa-lead{font-size:16px;line-height:1.45;margin-top:10px;max-width:calc(36ch + 2 * var(--gutter))}
  .hero-wait-or-answer .wa-cta{gap:8px;margin-top:14px}
  .hero-wait-or-answer .wa-cta .pill{height:44px;padding:0 16px;font-size:15px}
  .hero-wait-or-answer .wa-scene{grid-template-columns:minmax(0,440px);gap:12px;padding:var(--scene-pt) var(--gutter) 24px}
  .hero-wait-or-answer .wa-card{padding:12px 12px 10px}
  .hero-wait-or-answer .wa-card-head{margin-bottom:8px}
  .hero-wait-or-answer .wa-log .tb-bub{font-size:13px;padding:7px 9px;line-height:1.3}
  .hero-wait-or-answer .wa-log{padding-left:calc(50% + 6px)}
  .hero-wait-or-answer .wa-chat-foot{padding-left:calc(50% + 6px);margin-top:6px}
  .hero-wait-or-answer .wa-inbox,.hero-wait-or-answer .wa-deck-slot .tb-deck{padding:10px 14px}
  .hero-wait-or-answer .wa-inbox-h,.hero-wait-or-answer .wa-deck-slot .tb-deck-h{margin-bottom:6px}
  .hero-wait-or-answer .wa-deck-slot .tb-deck-rows{margin:0;gap:6px}
  .hero-wait-or-answer .wa-deck-slot .tb-deck-rows li{padding-bottom:6px;font-size:13px}
  .hero-wait-or-answer .wa-deck-slot .tb-deck-rows li:last-child{border-bottom:0;padding-bottom:0}
  .hero-wait-or-answer .wa-inbox ul{margin:0;gap:6px}
  .hero-wait-or-answer .wa-inbox li{padding-bottom:6px;font-size:13px}
  .hero-wait-or-answer .wa-inbox li:last-child{border-bottom:0;padding-bottom:0}
  .hero-wait-or-answer .wa-later{display:none}
  .hero-wait-or-answer .wa-ledger{display:none}
  .hero-wait-or-answer .wa-knob{top:calc(var(--scene-pt) + 19px);width:40px;height:40px;margin:-20px 0 0 -20px}
  .hero-wait-or-answer .wa-knob svg{width:18px;height:18px}
  .hero-wait-or-answer .wa-field{padding:8px 10px;min-height:38px;margin-bottom:10px;font-size:14px}
  .hero-wait-or-answer .wa-name{display:none}
  .hero-wait-or-answer .wa-form-body{gap:12px}
  .hero-wait-or-answer .wa-note{font-size:13px;margin-top:6px}
  .hero-wait-or-answer .wa-send{height:28px}
  .hero-wait-or-answer .wa-waiting{font-size:11px;gap:6px}
  .hero-wait-or-answer .wa-left{font-size:12px;padding:0 10px}
  .hero-wait-or-answer .wa-wide{display:none}
  .hero-wait-or-answer .wa-narrow{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .hero-wait-or-answer *{animation:none!important;transition:none!important}
}

/* AES itself lives in css/aes.css (shared with /b). Here only the headline around it */
.hero-wait-or-answer .wa-h1{display:block;text-align:center;padding:0 var(--gutter)}
.hero-wait-or-answer .wa-l{display:inline;padding:0}
.hero-wait-or-answer .wa-l > span{display:inline}
@media (min-width:821px){.hero-wait-or-answer .wa-h1{font-size:clamp(44px,5.2vw,88px)}}