/* Soft Acro Aaron 2.0 tokens (from the OSP build, Aaron approved 13-14 Oct). Fonts self-hosted: nothing loads from Google or any CDN. */
@font-face { font-family: "Jost"; src: url("fonts/Jost-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("fonts/CaveatBrush-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --font-display: Jost, "Futura PT", Futura, "Century Gothic", "Avenir Next", sans-serif; --font-text: Figtree, "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-hand: "Caveat Brush", Caveat, "Marker Felt", "Bradley Hand", cursive; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #EDFAFF; color: #10324A; font: 17px/1.55 var(--font-text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #03659D; outline-offset: 3px; border-radius: 6px; }
.site { max-width: 560px; margin: 0 auto; min-height: 100vh; }
@media (min-width: 720px) { body { background: radial-gradient(900px 500px at 50% -10%, #DAF0FE, #EDFAFF); } .site { margin: 24px auto; border-radius: 30px; box-shadow: 0 2px 6px rgba(16,50,74,.08), 0 24px 48px -18px rgba(16,50,74,.25); overflow: clip; background: #EDFAFF; } }
.a-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* the inbox helper bar (OSP M8): one button that opens the inbox of the typed address */
.a-inboxbar { position: sticky; bottom: 0; background: var(--a-surface); box-shadow: 0 -1px 2px rgba(16,50,74,.06), 0 -8px 24px rgba(16,50,74,.08); padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); }
.a-inboxbar .a-cta { margin-top: 0; }
@media (prefers-color-scheme: dark) { html[data-scheme="auto"] body { background: #0C1A24; color: #E4F0F7; } html[data-scheme="auto"] .site { background: #0C1A24; } }
/* ---------- the pages (prefix a-) ---------- */
.app{--a-bg:#EDFAFF;--a-surface:#FFFFFF;--a-soft:#DAF0FE;--a-line:#AAD2E6;--a-line-strong:#5E86AA;--a-ink:#10324A;--a-muted:#4D6B80;--a-blue:#03659D;--a-signal:#EB6D38;--a-signal-ink:#B04418;--a-on-signal:#0F2A43;--a-peach:#FFE6DC;--a-success:#1D7555;--a-shadow:0 1px 2px rgba(16,50,74,.06),0 8px 24px rgba(16,50,74,.08);
  background:var(--a-bg);color:var(--a-ink);font:17px/1.55 var(--font-text);min-height:100%}
.app.dark{--a-bg:#0C1A24;--a-surface:#132634;--a-soft:#18344A;--a-line:#2B4A60;--a-line-strong:#6A90AE;--a-ink:#E4F0F7;--a-muted:#9DB5C6;--a-blue:#7CC3EE;--a-signal:#F08050;--a-signal-ink:#F7A47C;--a-on-signal:#0F2A43;--a-peach:#3A2219;--a-success:#6FD1A8;--a-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35)}
.a-wrap{padding:22px 16px 40px;max-width:560px;margin:0 auto}
.a-brand{font:650 13px/16px var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--a-blue);margin-bottom:16px}
.a-h1{font:700 30px/1.15 var(--font-display);text-wrap:balance;margin:0}
.a-h2{font:700 24px/1.2 var(--font-display);text-wrap:balance;margin:0}
.a-h3{font:600 20px/1.25 var(--font-display);margin:4px 0 6px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.a-lead{margin:12px 0 0;font-size:18px} .a-sub{margin:8px 0 0;color:var(--a-muted);font-size:16px} .a-fine{margin:10px 0 0;font-size:14px;color:var(--a-muted);line-height:1.45}
.a-hint{margin:10px 0 0;font-size:15px;color:var(--a-ink);background:var(--a-soft);padding:10px 12px;border-radius:12px}
.a-link{color:var(--a-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.a-strip{display:flex;gap:10px;overflow-x:auto;margin:18px -16px 0;padding:0 16px 8px;scroll-snap-type:x mandatory}
.a-strip figure{flex:0 0 150px;margin:0;scroll-snap-align:start} .a-strip img{width:150px;height:84px;object-fit:cover;object-position:left top;border-radius:10px;display:block;background:var(--a-soft)}
.a-strip figcaption{font-size:12px;color:var(--a-muted);margin-top:4px}
.a-ticks{list-style:none;padding:0;margin:18px 0 0} .a-ticks li{padding-left:28px;position:relative;margin-top:8px;font-size:16px}
.a-ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--a-signal)}
.a-ticks li::after{content:"";position:absolute;left:5px;top:10px;width:5px;height:8px;border:solid var(--a-on-signal);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.a-cta{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;border-radius:999px;background:var(--a-signal);color:var(--a-on-signal);font:700 17px/1.2 var(--font-display);text-decoration:none;cursor:pointer;box-shadow:var(--a-shadow);margin-top:18px}
.a-cta:disabled{background:var(--a-soft);color:var(--a-muted);box-shadow:none;cursor:not-allowed}
.a-cta.a-sec{background:var(--a-surface);color:var(--a-blue);box-shadow:inset 0 0 0 2px var(--a-line-strong)}
.a-back{display:block;margin:14px auto 0;background:none;border:0;color:var(--a-blue);font:600 15px var(--font-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.a-missing{margin:8px 0 0;font-size:14px;color:var(--a-muted);text-align:center;min-height:20px}
.a-foot{margin-top:40px;padding-top:12px;border-top:3px dotted var(--a-line);font-size:14px;color:var(--a-muted);text-align:center}
.a-prog{display:flex;align-items:center;gap:10px;font:600 14px var(--font-text);color:var(--a-muted);background:var(--a-soft);border-radius:999px;height:10px;position:relative;margin:4px 0 22px}
.a-prog span{position:absolute;right:0;top:-24px} .a-prog i{display:block;height:100%;background:var(--a-blue);border-radius:999px}
.a-cardimg{display:block;width:100%;border:0;padding:0;background:var(--a-soft);border-radius:12px;overflow:hidden;margin-top:14px;cursor:zoom-in;box-shadow:var(--a-shadow)} .a-cardimg img{display:block;width:100%;height:auto}
.a-label{display:block;font-weight:650;margin-top:16px;font-size:16px} .a-opt{font-weight:400;color:var(--a-muted);font-size:14px}
.a-select,.a-input{width:100%;font:inherit;font-size:18px;padding:13px 16px;border:2px solid var(--a-line-strong);border-radius:12px;background:var(--a-surface);color:var(--a-ink);margin-top:8px}
.a-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none' stroke='%232B6197' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7 6 7-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}
.a-badge{display:inline-flex;align-items:center;gap:8px;background:var(--a-surface);color:var(--a-success);border:2px solid var(--a-success);font-weight:650;font-size:15px;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.a-consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;margin-top:18px;padding:12px;border-radius:12px;border:2px solid var(--a-line);cursor:pointer}
.a-consent.on{border-color:var(--a-blue);background:var(--a-soft)} .a-consent input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--a-blue)}
.a-card{background:var(--a-surface);border-radius:18px;padding:16px;margin-top:12px;box-shadow:var(--a-shadow)} .a-card p{margin:6px 0 0;font-size:16px}
.a-eyebrow{font:650 12px/16px var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--a-blue)}
.a-level{display:flex;justify-content:space-between;align-items:center;background:var(--a-soft);border-radius:12px;padding:12px 14px;margin-top:10px} .a-level b{font:600 22px var(--font-display)} .a-num{font:700 32px/1 var(--font-display)} .a-num small{font-size:16px;color:var(--a-muted);font-weight:500}
.a-levelText{font-size:15px;color:var(--a-muted)}
.a-score{font:700 22px var(--font-display);color:var(--a-signal-ink);white-space:nowrap} .a-score small{font-size:13px;color:var(--a-muted);font-weight:500}
.a-callout{background:var(--a-peach);border-radius:16px;padding:12px 14px;margin-top:14px;font-size:15px}
.a-sect{font:700 22px/1.2 var(--font-display);margin-top:26px}
.a-desc{font-size:14px;color:var(--a-muted)}
.a-skills{display:grid;gap:10px;margin-top:12px} .a-skills figure{margin:0;background:var(--a-soft);border-radius:12px;overflow:hidden} .a-skills img{display:block;width:100%;height:auto}
.a-skills figcaption{font-size:14px;padding:6px 10px;color:var(--a-ink)}
.a-tip{background:var(--a-soft);border-radius:12px;padding:10px 12px;font-size:15px}
.a-warm{background:var(--a-peach)} .a-warm .a-eyebrow{color:var(--a-signal-ink)}
.a-quad{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px} .a-quad li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:16px}
.a-quad .a-n{width:28px;height:28px;border-radius:50%;background:var(--a-signal);color:var(--a-on-signal);font:700 14px/28px var(--font-display);text-align:center}
.a-quad small{display:block;font-size:13px;color:var(--a-muted)} .a-quad em{font:600 15px var(--font-hand);color:var(--a-signal-ink);font-style:normal}
.a-next{background:var(--a-soft)} .a-next .a-cta{margin-top:12px}
.a-sharecard{margin-top:14px;border-radius:14px;overflow:hidden;box-shadow:var(--a-shadow);background:#fff} .a-sharecard canvas,.a-sharecard img{display:block;width:100%;height:auto}
/* landing: hero + the three-mover slider */
.a-wrap{animation:a-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes a-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.a-hero-cta{margin-top:20px;min-height:56px;font-size:19px}
.a-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font:700 12px/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--a-muted)}
.a-meta span+span::before{content:"·";margin-right:14px;color:var(--a-line-strong)}
.a-demo{margin-top:28px}
.a-slider{margin-top:10px}
.a-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--a-soft);border-radius:18px;padding:6px;box-shadow:inset 0 1px 2px rgba(16,50,74,.08)}
.a-knob{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 3);border-radius:14px;background:var(--a-surface);box-shadow:0 2px 6px rgba(16,50,74,.10),0 10px 24px -8px rgba(16,50,74,.35);transform:translateX(calc(var(--pos) * 100%));transition:transform .45s cubic-bezier(.2,.8,.2,1);cursor:grab;touch-action:none;z-index:1}
.a-knob::after{content:"";position:absolute;left:50%;bottom:7px;width:28px;height:4px;margin-left:-14px;border-radius:2px;background:var(--a-line-strong);opacity:.7}
.a-knob.a-drag{cursor:grabbing;transition:none;transform:translateX(calc(var(--pos) * 100%)) scale(1.04)}
.a-knob.a-idle{animation:a-wiggle 2.4s ease-in-out infinite}
@keyframes a-wiggle{0%,100%{transform:translateX(calc(var(--pos) * 100%))}10%{transform:translateX(calc(var(--pos) * 100% - 6px))}20%{transform:translateX(calc(var(--pos) * 100% + 6px))}30%{transform:translateX(calc(var(--pos) * 100%))}}
.a-stop{position:relative;z-index:2;background:none;border:0;padding:12px 4px 16px;min-height:66px;border-radius:14px;cursor:pointer;color:var(--a-muted);font:inherit;display:grid;gap:2px;text-align:center}
.a-stop b{font:700 14px/1.15 var(--font-display);color:var(--a-ink);opacity:.75} .a-stop small{font:600 12px/1.2 var(--font-hand);font-size:15px;color:var(--a-signal-ink);opacity:0;transition:opacity .3s}
.a-stop[aria-checked="true"] b{color:var(--a-blue);opacity:1} .a-stop[aria-checked="true"] small{opacity:1}
.a-hand{text-align:center;font:400 20px/1.2 var(--font-hand);color:var(--a-signal-ink);margin-top:8px;min-height:24px;transform:rotate(-2deg)}
.a-demochart{margin-top:12px;padding:12px 8px 4px;box-shadow:0 2px 6px rgba(16,50,74,.08),0 24px 48px -18px rgba(16,50,74,.25)}
.a-demosum{padding:14px 16px}
.a-demohead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:14px;color:var(--a-muted)}
.a-pill{display:inline-block;background:var(--a-soft);color:var(--a-blue);font:700 13px/1 var(--font-display);padding:7px 10px;border-radius:999px}
.a-demototal{font:700 20px/1 var(--font-display);color:var(--a-ink)} .a-demototal small{font:500 13px var(--font-text);color:var(--a-muted)}
.a-demolink{margin-left:auto} .a-demolink b{color:var(--a-signal-ink)}
.a-row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;margin-top:12px}
.a-row i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--font-display);font-style:normal;color:#fff}
.a-yes i{background:var(--a-success)} .a-no i{background:#B42318} .app.dark .a-no i{background:#FF8A7A;color:#0C1A24}
.a-row b{display:block;font:600 17px/1.25 var(--font-display)} .a-row span{display:block;font-size:14px;color:var(--a-muted);margin-top:2px}
.a-fadein{animation:a-fade .4s cubic-bezier(.2,.8,.2,1) both} @keyframes a-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.a-wrap,.a-fadein,.a-knob.a-idle{animation:none}.a-knob{transition:none}}
.a-zoom{position:absolute;inset:0;background:rgba(6,16,26,.9);z-index:9;overflow:auto;padding:20px 0} .a-zoomin{width:1100px;padding:0 20px} .a-zoomin img{display:block;width:100%;border-radius:8px}
.a-zoomx{position:sticky;top:12px;left:calc(100% - 56px);width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#10324A;font-size:18px;cursor:pointer}

/* 11.2 score picker (from avatar.softacroaaron.com picker v2) */
.a-cues{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--a-muted)} .a-cues span{display:inline} .a-cues b{color:var(--a-signal-ink);margin-right:1px}
.a-cues .a-cues-h{color:var(--a-blue);text-transform:uppercase;letter-spacing:.04em;font-size:12px;margin-right:4px}
.a-pick{margin-top:14px}
.a-hints{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;min-height:30px}
.a-hint-tap,.a-hint-swipe{font-family:var(--font-hand);font-weight:600;font-size:26px;line-height:28px;color:var(--a-signal);display:inline-flex;align-items:center;gap:8px;transition:opacity .3s}
.a-pick.swiped .a-hint-swipe,.a-pick.has-score .a-hint-tap{opacity:0}
.a-swipeico{width:40px;height:20px} .a-tapico{width:26px;height:26px;flex:none}
.a-frame{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:12px;background:#DBEFFC;border:1px solid var(--a-line);overscroll-behavior-x:contain;box-shadow:var(--a-shadow)}
.a-frame:focus-visible{outline:3px solid var(--a-blue);outline-offset:2px}
.a-pinner{position:relative;overflow:hidden;width:1040px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.a-pinner img{position:absolute;left:0;display:block;width:100%;height:auto;max-width:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.a-cell{position:absolute;pointer-events:none;border-radius:6px}
.a-cell.done{background:#eb6d3814}
.a-tick{display:none;position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#FFE6DC;color:#B04418;padding:4px;box-sizing:border-box}
.a-tick svg{display:block;width:100%;height:100%}
.a-cell.done .a-tick{display:block}
.a-cell.sel{background:#eb6d3822}
.a-cell.sel::after{content:"";position:absolute;inset:-3px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none' stroke='%23DA5B26' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M7 3C30 1 70 2 93 2.5c4 .3 5.5 2 5.3 6C98 35 98.5 65 98.2 92c0 4-2 5.6-6 5.8C68 99 32 99 8 98 3.5 97.7 1.8 96 2 92 2.6 65 1.5 35 2 8c.1-3.4 2-5 5-5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.a-scoreline{display:flex;align-items:center;gap:12px;margin-top:12px;min-height:52px}
.a-scorelabel{flex:1;font-size:17px;font-weight:650;color:var(--a-ink)}
.a-scoreval{min-width:76px;height:52px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--a-line-strong);border-radius:12px;background:var(--a-surface);font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1;color:var(--a-ink)}
.a-pick:not(.has-score) .a-scoreval{color:var(--a-muted);border-color:var(--a-line)}
.a-nudge{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid var(--a-blue);background:var(--a-surface);color:var(--a-blue);font-size:28px;line-height:1;font-family:var(--font-text);cursor:pointer;padding:0}
.a-nudge:disabled{opacity:.35;cursor:default}
.a-notyet{display:block;margin:6px auto 0;min-height:44px;padding:0 12px;border:0;background:none;color:var(--a-muted);font:400 16px var(--font-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.a-notyet b{font-weight:650;color:var(--a-ink)}
.a-pick.has-score .a-notyet{visibility:hidden}
.a-nudge:focus-visible,.a-notyet:focus-visible{outline:3px solid var(--a-blue);outline-offset:2px}
.a-sellabel{font-weight:500;font-size:14px;color:var(--a-muted);margin-top:14px}
.a-select-sm{font-size:16px;padding:10px 14px;border-width:1.5px;border-color:var(--a-line)}
@media (prefers-reduced-motion:reduce){.a-hint-tap,.a-hint-swipe{transition:none}}

/* 11.2 email address as a tappable mailto link, same look as the text around it */
.a-mail{color:inherit;font:inherit;text-decoration:none}.a-mail:hover,.a-mail:focus-visible{text-decoration:underline;text-underline-offset:3px}