/* Bunker Agent · Aracon draw
   Tokens copied from the website's ds/tokens (colors.css, typography.css).
   Brand rules: sharp corners (4px max), hairline borders not shadows, Light
   headings with one Bold phrase, uppercase tracked eyebrows in muted green. */

:root{
  --green:#00705c; --green-hover:#005a4a; --green-press:#004538;
  --muted-green:#599e94; --muted-green-text:#4a8880; --ice:#eaffff;
  --black:#000; --ink-700:#1a1a1a; --ink-500:#4a4a4a; --ink-300:#8a8a8a; --ink-200:#c9c9c9; --ink-100:#e0e0e0; --ink-50:#f4f4f4;
  --error:#8f3324; --error-line:#b8422f;
  --font:'Aktiv Grotesk','Inter','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --gutter:clamp(20px,4.5vw,56px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff;color:var(--black);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--green)}a:hover{color:var(--green-hover)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;display:flex}

/* ---- type ---- */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-green-text)}
.eyebrow.on-green{color:var(--ice)}
.display{margin:0;font-size:clamp(40px,5.4vw,64px);font-weight:300;line-height:1.05;letter-spacing:-.02em}
.display b,.h2 b{font-weight:700}
.h2{margin:0;font-size:clamp(30px,3.7vw,44px);font-weight:300;line-height:1.1;letter-spacing:-.02em}
.h2.q{font-size:clamp(26px,3.4vw,40px);line-height:1.12}
.lede{margin:0;font-size:18px;font-weight:300;line-height:1.55;color:var(--ink-500)}
.lede.on-green{color:var(--ice);font-size:20px;max-width:520px}
.fine{margin:0;font-size:13px;line-height:1.5;color:var(--ink-500);display:flex;gap:8px;align-items:flex-start}
.fine.center{justify-content:center;text-align:center}
.muted-on-green{font-size:15px;color:var(--ice)}

/* ---- icons ---- */
.ic{width:22px;height:22px;flex-shrink:0}
.ic-sm{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--muted-green)}
.ic-xl{width:56px;height:56px}
.ic-mark{width:23px;height:16px;flex-shrink:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:4px;border:1px solid transparent;font-weight:700;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.btn-xl{height:72px;padding:0 40px;font-size:20px}
.btn-lg{height:60px;padding:0 28px;font-size:17px;font-weight:500}
.btn-white{background:#fff;color:var(--green)}
.btn-white:active{background:var(--ice)}
.btn-green{background:var(--green);color:#fff;width:100%}
.btn-green:hover{background:var(--green-hover)}.btn-green:active{background:var(--green-press)}
.btn-green:disabled{background:var(--ink-200);color:var(--ink-700);cursor:not-allowed}
.btn-outline{background:#fff;color:var(--green);border-color:var(--green);width:100%}
.btn-outline:active{background:var(--green);color:#fff}
.link-btn{background:none;border:0;padding:0 4px;min-height:44px;display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:15px;font-weight:500;cursor:pointer}
.link-btn .ic-sm{margin:0;color:currentColor}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.stack-12{display:flex;flex-direction:column;gap:12px}
.stack-10{display:flex;flex-direction:column;gap:10px}
.push{margin-top:auto}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---- logos ---- */
.logo-lg{height:40px;width:auto}
.logo-sm{height:32px;width:auto}

/* ---- 1 attract ---- */
.attract{background:var(--green);color:#fff;display:grid;grid-template-columns:1.15fr 1fr;position:relative;min-height:100dvh}
.attract-copy{padding:56px var(--gutter) 40px calc(var(--gutter) + 8px);display:flex;flex-direction:column;position:relative;z-index:1}
.attract-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.attract-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:40px 0}
.attract-foot{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;color:var(--ice);border-top:1px solid rgba(255,255,255,.4);padding-top:20px}
.attract-foot a{color:var(--ice)}
.sync-badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.attract-art{position:relative;background:var(--ice);display:flex;align-items:center;justify-content:center;overflow:hidden}
.attract-art .wake{position:absolute;inset:0;width:100%;height:100%}
.prize{position:relative;width:86%;max-height:80%;object-fit:contain}
.prize.missing{display:none}
.ship{position:relative;width:84%;height:auto}
.closed-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px var(--gutter);background:var(--green-press);color:#fff;font-size:17px;text-align:center;z-index:2}

/* ---- step header ---- */
.stepbar{height:88px;flex-shrink:0;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink-100);background:#fff}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:32px;font-size:14px;font-weight:500}
.steps li{display:flex;align-items:center;gap:10px;color:var(--ink-500);white-space:nowrap}
.steps .dot{width:28px;height:28px;border-radius:999px;border:1px solid var(--ink-200);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.steps li.now{color:var(--green)}
.steps li.now .dot{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.steps li.done{color:var(--green)}
.steps li.done .dot{background:var(--ice);border-color:var(--green);color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%2300705c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:14px;background-repeat:no-repeat;background-position:center}

/* ---- split layouts ---- */
.split{display:grid}
.split-14{grid-template-columns:1.4fr 1fr}
.split-1-14{grid-template-columns:1fr 1.4fr}
.split-15{grid-template-columns:1.5fr 1fr}
.panel{padding:48px var(--gutter) 40px;display:flex;flex-direction:column;gap:22px;min-width:0}
.panel.ice{background:var(--ice)}
.card{background:#fff;border:1px solid var(--ink-100);border-radius:4px}

/* ---- 2 scan ---- */
.viewfinder{position:relative;background:#0b1f1b;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:320px}
.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame{position:relative;width:min(78%,560px);aspect-ratio:85/55;pointer-events:none}
.frame i{position:absolute;width:44px;height:44px;border:0 solid var(--ice)}
.frame i:nth-child(1){left:0;top:0;border-left-width:4px;border-top-width:4px}
.frame i:nth-child(2){right:0;top:0;border-right-width:4px;border-top-width:4px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:4px;border-bottom-width:4px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:4px;border-bottom-width:4px}
.frame::before{content:"";position:absolute;inset:0;box-shadow:0 0 0 100vmax rgba(11,31,27,.45)}
.vf-hint{position:absolute;bottom:28px;left:0;right:0;margin:0;text-align:center;font-size:16px;color:var(--ice);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.reading{position:absolute;inset:0;background:rgba(0,69,56,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.reading p{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;margin:0}
.scanline{position:absolute;left:12%;right:12%;height:2px;background:var(--ice);box-shadow:0 0 18px 2px rgba(234,255,255,.7);top:20%;animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{to{top:80%}}
.cam-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ice);text-align:center;padding:24px}
.cam-off p{margin:0;font-size:17px;max-width:320px}

/* ---- 3 details ---- */
.read-card{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.read-head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--green)}
.read-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-500)}
.form{gap:18px;overflow:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--ink-700);position:relative}
.field .opt{font-weight:400;color:var(--ink-500)}
.field input{height:56px;padding:0 16px;border:1px solid var(--ink-100);border-radius:4px;font-size:18px;font-weight:400;color:var(--black);background:#fff;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);-webkit-appearance:none;appearance:none}
.field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,112,92,.15)}
.field .flag{display:none;position:absolute;right:0;top:0;color:var(--error);font-weight:500}
.field.uncertain .flag{display:block}
.field.uncertain input{border-color:var(--error-line);background:rgba(184,66,47,.04)}
.field.invalid input{border-color:var(--error-line)}
.form-error{margin:0;padding:12px 14px;border:1px solid var(--error-line);background:rgba(184,66,47,.06);color:var(--error);font-size:15px;line-height:1.45}

/* ---- 4 question ---- */
.answer{display:flex;flex-direction:column;gap:10px}
.answer textarea{width:100%;height:168px;padding:18px 20px;border:1px solid var(--ink-200);border-radius:4px;resize:none;font-size:24px;font-weight:300;line-height:1.4;color:var(--black);-webkit-appearance:none;appearance:none}
.answer textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,112,92,.15)}
.count-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-500)}
.count{font-weight:500;color:var(--green);font-variant-numeric:tabular-nums}
.count.near{color:var(--error)}
.chips-wrap{display:flex;flex-direction:column;gap:10px}
.chips-label{font-size:14px;font-weight:500;color:var(--ink-500)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 16px;border:1px solid var(--muted-green);background:#fff;color:var(--green);border-radius:4px;font-size:15px;font-weight:500;cursor:pointer}
.chip:active{background:var(--ice)}
.consents{gap:16px}
.check{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--ink-700);cursor:pointer;min-height:44px}
.check input{width:24px;height:24px;margin:0;flex-shrink:0;accent-color:var(--green)}
.check .req{color:var(--ink-500)}

/* ---- 5 reply ---- */
.reply{flex-direction:column;background:var(--ice);min-height:100dvh}
.reply-bar{height:88px;flex-shrink:0;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--green);color:#fff}
.in-draw{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.reply-body{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:40px;padding:48px var(--gutter) 40px;min-height:0}
.reply-main{display:flex;flex-direction:column;gap:24px;min-height:0}
.said{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.said-text{margin:0;font-size:20px;font-weight:300;line-height:1.45;color:var(--ink-700);overflow-wrap:anywhere}
.said-who{font-size:14px;color:var(--ink-500)}
.agent{flex:1;display:flex;flex-direction:column;gap:16px;padding:28px 32px;background:var(--green);color:#fff;border-radius:4px;min-height:240px}
.agent-head{display:inline-flex;align-items:center;gap:10px}
.agent-text{margin:0;font-size:clamp(20px,2.3vw,26px);font-weight:300;line-height:1.42;white-space:pre-wrap}
.agent-text.streaming::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--ice);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.agent-foot{margin-top:auto;font-size:14px;color:var(--ice);overflow-wrap:anywhere}
.thinking{display:inline-flex;gap:8px;padding:10px 0}
.thinking i{width:10px;height:10px;border-radius:999px;background:var(--ice);opacity:.35;animation:pulse 1.2s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes pulse{40%{opacity:1}}
.reply-side{display:flex;flex-direction:column;gap:20px}
.side-card{padding:28px;display:flex;flex-direction:column;gap:14px}
.side-lede{margin:0;font-size:18px;font-weight:300;line-height:1.5;color:var(--ink-700)}
.announce{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--ink-700)}
.announce span{color:var(--ink-500)}
.reply.offline .agent{background:#fff;color:var(--ink-700);border:1px solid var(--ink-100)}
.reply.offline .agent .eyebrow{color:var(--muted-green-text)}
.reply.offline .agent-foot{color:var(--ink-500)}

/* ---- motion ---- */
.screen{animation:in .22s var(--ease)}
@keyframes in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- portrait tablet and phone ---- */
@media (max-width:900px){
  .attract{grid-template-columns:1fr;grid-template-rows:auto 38vh}
  .attract-copy{padding:28px 20px 24px}
  .attract-main{padding:32px 0 28px;gap:20px}
  .logo-lg{height:30px}
  .lede.on-green{font-size:17px}
  .btn-xl{height:64px;font-size:18px;padding:0 28px}
  .stepbar{height:64px;padding:0 16px}
  .steps{gap:12px}
  .steps .lbl{display:none}
  .steps li.now .lbl{display:inline}
  .logo-sm{height:24px}
  .split-14,.split-1-14,.split-15{grid-template-columns:1fr;grid-auto-rows:min-content}
  .screen.split{overflow:auto}
  .panel{padding:24px 16px;gap:16px}
  .viewfinder{min-height:52vh}
  .split-1-14 .panel.ice .lede{display:none}
  .split-1-14 .push{margin-top:0}
  .grid-2{grid-template-columns:1fr 1fr;gap:12px}
  .answer textarea{height:150px;font-size:19px}
  .reply-bar{height:64px;padding:0 16px}
  .reply-body{grid-template-columns:1fr;gap:20px;padding:20px 16px 28px}
  .agent{padding:22px 20px;min-height:0}
  .in-draw{font-size:14px}
}
@media (max-width:420px){
  .grid-2{grid-template-columns:1fr}
  .attract-foot{gap:12px}
}