/* Thuros design system — Daylight. Shared by the money pages. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@font-face{font-family:'Instrument Sans';src:url('/fonts/InstrumentSans-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/InstrumentSans-Italic-Variable.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* palette — carried over from the existing pages (Daylight) */
  --cream:#F4F1EA;--cream-2:#ECE7DC;--cream-3:#E2DCCE;
  --navy:#0E1A2B;--navy-2:#1F2C3F;--navy-3:#243447;
  --blue:#1A6BBF;--blue-2:#3D88D4;--accent:#4A7CF5;
  --text:#0E1A2B;--text-2:#4E586B;   /* darkened from #5A6577 → AA on cream */
  --border:#D8D2C2;--border-2:#C8C1AE;
  --green:#22C55E;--amber:#F59E0B;--red:#EF4444;
  /* type */
  --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Instrument Serif',Georgia,serif;
  --fs-h1:clamp(38px,5.2vw,56px);
  --fs-h2:clamp(30px,4vw,40px);
  --fs-h3:22px;
  --fs-body:17px;
  --fs-small:14.5px;
  /* spacing */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;
  --radius:12px;--radius-sm:8px;
  --container:1120px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.65;color:var(--text);background:var(--cream) url('/images/topo-tile-bold.svg') 0 0/900px repeat}
h1,.display{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.01em}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.18}
h3{font-family:var(--font-ui);font-weight:600;font-size:var(--fs-h3);line-height:1.3}
p{max-width:62ch}
a{color:var(--blue)}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-3)}
.section{padding:var(--sp-7) 0}
@media(max-width:720px){.section{padding:var(--sp-6) 0}}
.section--navy{background:var(--navy);color:var(--cream)}
.section--tint{background:var(--cream-2)}
.section--navy h2,.section--navy h3{color:var(--cream)}
.section--navy p{color:rgba(244,241,234,.85)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav--scrolled{box-shadow:0 2px 16px rgba(14,26,43,.08)}
@media(prefers-reduced-motion:no-preference){
  .nav{transition:box-shadow .25s ease}
}
.nav-inner{max-width:var(--container);margin:0 auto;padding:14px var(--sp-3);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.logo-stack{display:flex;flex-direction:column;line-height:1.05}
.logo-sub{font-size:9px;font-weight:600;letter-spacing:.34em;color:var(--text-2)}
/* content column sits on solid cream; the topo texture lives in the margins */
.section:not(.section--navy):not(.section--tint) .container{background:var(--cream);box-shadow:0 0 44px 32px var(--cream)}
/* small text sitting directly on the textured body gets a soft solid backing */
.texture-veil{background:var(--cream);box-shadow:0 0 14px 10px var(--cream);width:fit-content;margin-left:auto;margin-right:auto;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:var(--sp-3);list-style:none}
.nav-links a:not(.btn){color:var(--text);text-decoration:none;font-size:15px;font-weight:500;transition:color .15s ease}
.nav-links a:not(.btn):hover{color:var(--blue)}
.nav-links a{white-space:nowrap}
@media(max-width:820px){.nav-links{gap:var(--sp-2)}.nav-links .nav-hide-m{display:none}}
@media(max-width:380px){
  .nav-inner{padding:14px var(--sp-2)}
  .nav-links{gap:10px}
  .nav-links a.btn{padding:8px 14px!important;font-size:13px!important}
}

/* ── mobile hamburger menu ── */
.nav-burger{display:none;background:none;border:0;padding:10px 6px;cursor:pointer;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}
.nav-menu{display:none}
@media(max-width:820px){
  .nav-burger{display:flex}
  .nav-open .nav-menu{display:block;border-top:1px solid var(--border)}
  .nav-menu a{display:block;padding:15px var(--sp-3);font-size:16px;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
  .nav-menu a:last-child{border-bottom:0}
  .nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .nav-burger span:nth-child(2){opacity:0}
  .nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:820px) and (prefers-reduced-motion:no-preference){
  .nav-burger span{transition:transform .25s ease,opacity .2s ease}
  .nav-open .nav-menu{animation:menuDrop .22s ease}
  @keyframes menuDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ── buttons ── */
.btn{display:inline-block;font-family:var(--font-ui);font-size:16px;font-weight:600;padding:14px 28px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;text-align:center;transition:background .15s}
.btn--primary{background:var(--navy);color:var(--cream)}
.btn--primary:hover{background:var(--navy-2)}
@media(prefers-reduced-motion:no-preference){
  .btn{transition:background .15s,transform .1s}
  .btn--primary:hover{transform:translateY(-1px)}
}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:rgba(14,26,43,.06)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn .btn-arrow{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .btn .btn-arrow{transition:transform .2s ease}
  .btn:hover .btn-arrow{transform:translateX(3px)}
}
.section--navy .btn--primary{background:var(--cream);color:var(--navy)}
.section--navy .btn--primary:hover{background:var(--cream-2)}
.section--navy .btn--ghost{color:var(--cream);border-color:var(--cream)}
.section--navy .btn--ghost:hover{background:rgba(244,241,234,.12)}

/* ── cards ── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4)}
.plan-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
@media(prefers-reduced-motion:no-preference){
  .card,.plan-card,.includes-item,.guide-grid a{transition:transform .2s ease,box-shadow .2s ease}
  .card:hover,.plan-card:hover,.includes-item:hover,.guide-grid a:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(14,26,43,.08)}
}
.plan-card--flagship{border:2px solid var(--navy);position:relative}
.plan-card--flagship::before{content:'Most protection';position:absolute;top:-13px;left:var(--sp-3);background:var(--navy);color:var(--cream);font-size:12.5px;font-weight:600;padding:3px 12px;border-radius:99px}
.plan-price{font-family:var(--font-display);font-size:40px;line-height:1}
.plan-price small{font-family:var(--font-ui);font-size:15px;color:var(--text-2)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
.plan-features li{padding-left:24px;position:relative}
.plan-features li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}

/* ── photos ── */
.hero-photo{position:relative;background:var(--navy);overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-photo .hero-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:120px var(--sp-3);color:var(--cream)}
.hero-photo .hero-inner h1{color:var(--cream);max-width:15ch}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,26,43,.88) 30%,rgba(14,26,43,.45) 70%,rgba(14,26,43,.25))}
.hero-photo .hero-inner{z-index:2}
@media(prefers-reduced-motion:no-preference){
  @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.05)}}
  .hero-photo img{animation:heroZoom 18s ease-out forwards}
}

/* ── hero entrance — load-time stagger for above-the-fold hero content, no IntersectionObserver ── */
.hero-in{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .js .hero-in{opacity:1;animation:heroIn .6s ease backwards}
  .js .hero-in-d1{animation-delay:.12s}
  .js .hero-in-d2{animation-delay:.24s}
  .js .hero-in-d3{animation-delay:.36s}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center}
.photo-split img{border-radius:var(--radius);width:100%;height:auto}
@media(max-width:820px){.photo-split{grid-template-columns:1fr}}

/* ── steps / trust / footer ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{counter-increment:step}
.step::before{content:counter(step);display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:var(--cream);font-weight:700;margin-bottom:var(--sp-2)}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);font-size:var(--fs-small);color:var(--text-2)}
.footer{background:var(--navy);color:rgba(244,241,234,.75);padding:var(--sp-6) 0;font-size:var(--fs-small)}
.footer a{color:var(--cream);text-decoration:none;transition:color .15s ease}
.footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-5)}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;gap:var(--sp-4)}}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:280px}
.footer-mark{display:flex;align-items:center;gap:10px}
.footer-logo-stack{display:flex;flex-direction:column;line-height:1.05;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.08em;color:var(--cream)}
.footer-logo-sub{font-size:9px;font-weight:600;letter-spacing:.34em;color:rgba(244,241,234,.55)}
.footer-tagline{font-size:var(--fs-small);color:rgba(244,241,234,.65);line-height:1.55;max-width:30ch}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.62);margin-bottom:4px}
.footer-col a,.footer-email{color:rgba(244,241,234,.75);font-size:14.5px}
.footer-col a:hover,.footer-email:hover{color:var(--cream)}
.footer-bottom{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid rgba(244,241,234,.12);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:space-between;font-size:12.5px;color:rgba(244,241,234,.62)}
.footer-bottom a{color:rgba(244,241,234,.6);text-decoration:underline}
.footer-bottom a:hover{color:var(--cream)}

/* ── stats band (about.html) ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:820px){.stats-row{grid-template-columns:1fr}}
.stat-figure{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,5vw,56px);line-height:1}
.stat-label{font-size:var(--fs-small);color:rgba(244,241,234,.8);margin-top:var(--sp-1);max-width:32ch}
/* light-section variant (index.html homepage stat band sits on .section--tint, not navy) */
.section--tint .stat-label{color:var(--text-2)}

/* ── accordion (native details/summary, no JS) ── */
.accordion details{border-top:1px solid var(--border)}
.accordion details:last-child{border-bottom:1px solid var(--border)}
.accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:18px 2px;font-family:var(--font-ui);font-weight:600;font-size:15px;color:var(--text)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'+';font-size:22px;font-weight:400;line-height:1;color:var(--text-2);flex-shrink:0}
.accordion details[open] summary::after{content:'\2212'}
.accordion .accordion-body{padding:0 2px 18px;color:var(--text-2)}
.accordion.on-navy details{border-color:rgba(244,241,234,.15)}
.accordion.on-navy summary{color:var(--cream)}
.accordion.on-navy summary::after{color:rgba(244,241,234,.6)}
.accordion.on-navy .accordion-body{color:rgba(244,241,234,.8)}
@media(prefers-reduced-motion:no-preference){
  .accordion details[open] .accordion-body{animation:accordionIn .25s ease}
  @keyframes accordionIn{from{opacity:0}to{opacity:1}}
}

/* ── motion ── */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  /* reveal uses animation (not transition) so hover transitions stay snappy */
  .js .reveal{opacity:0}
  .js .reveal.is-in{opacity:1;animation:revealIn .5s ease backwards}
  .js .reveal-left{opacity:0}
  .js .reveal-left.is-in{opacity:1;animation:revealInLeft .5s ease backwards}
  .js .reveal-right{opacity:0}
  .js .reveal-right.is-in{opacity:1;animation:revealInRight .5s ease backwards}
  .js .reveal-scale{opacity:0}
  .js .reveal-scale.is-in{opacity:1;animation:revealInScale .5s ease backwards}
  .js .reveal-d1.is-in{animation-delay:.08s}
  .js .reveal-d2.is-in{animation-delay:.16s}
  .js .reveal-d3.is-in{animation-delay:.24s}
  @keyframes revealIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes revealInLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
  @keyframes revealInRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  @keyframes revealInScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
}

/* ── coverage band (index.html) ── */
.platform-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:var(--sp-4) 0}
.platform-item{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:600;font-size:15px}
.platform-item svg{flex-shrink:0}
.platform-row--light .platform-item{color:var(--navy)}

/* ── value cards (about) ── */
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(max-width:640px){.value-grid{grid-template-columns:1fr}}
.value-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3)}
.value-card svg{color:var(--blue);margin-bottom:10px}
.value-card h3{font-size:16px;margin-bottom:4px}
.value-card p{font-size:var(--fs-small);color:var(--text-2);margin:0}
.platform-divider{border-top:1px solid rgba(244,241,234,.15);margin-top:var(--sp-4);padding-top:var(--sp-3);font-size:var(--fs-small);color:rgba(244,241,234,.75)}

/* ── article CTA (guide pages) ── */
.article-cta--dark{background:var(--navy);color:#F4F1EA;border-radius:var(--radius);padding:var(--sp-4)}
.article-cta--dark h3{color:#fff}
.article-cta--dark p{color:rgba(244,241,234,.72)}
.article-cta--dark .b1{background:#F4F1EA;color:#0E1A2B}
.article-cta--dark .b2{color:#F4F1EA;border-color:rgba(244,241,234,.35)}

/* ── dashboard showcase (dm-) — miniature recreation of the real /dashboard/home.
   Structure, copy and colours are taken from thuros-backend app.py: nav order
   (Messages only exists on Creator), posture bands (>=75 green, >=55 amber
   #f59e0b "Good"), and the score formula (3 impersonators = -30 = 70). Demo
   persona only — never real customer data. ── */
.dm-stage{position:relative;max-width:1060px;margin:var(--sp-5) auto 0;padding-bottom:40px}
.dm-laptop{max-width:760px;margin:0 auto}
.dm-screen{background:#F6F4EE;border:11px solid #1F2C3F;border-bottom-width:13px;border-radius:15px 15px 0 0;display:flex;overflow:hidden;aspect-ratio:16/10.2;box-shadow:0 26px 70px rgba(0,0,0,.38)}
.dm-base{height:13px;background:linear-gradient(#3a4a60,#243447);border-radius:0 0 15px 15px;max-width:830px;margin:0 -35px}

/* sidebar */
.dm-side{width:19%;background:#fff;border-right:1px solid #E5E1D6;display:flex;flex-direction:column;padding:9px 0;min-width:0;overflow:hidden}
.dm-side-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#111E30;padding:0 8px 9px}
.dm-side-nav{display:flex;flex-direction:column;gap:1px;padding:0 5px}
.dm-side-nav span{display:flex;align-items:center;gap:5px;font-size:7px;color:#6B7280;padding:4.5px 6px;border-radius:5px;white-space:nowrap}
.dm-side-nav span.on{background:#111E30;color:#fff;font-weight:700}
.dm-side-nav span.hov{background:#F6F4EE;color:#111E30}
.dm-side-nav svg{flex-shrink:0;opacity:.9}
.dm-nbadge{margin-left:auto;background:#DC2626;color:#fff;font-size:5.5px;font-weight:700;border-radius:99px;padding:1px 4px;line-height:1.5}
.dm-side-foot{margin-top:auto;margin:auto 6px 0;border:1px solid #EFEBE0;border-radius:7px;padding:7px}
.dm-prof{display:flex;align-items:center;gap:5px;min-width:0}
.dm-avatar{width:16px;height:16px;border-radius:50%;background:#111E30;color:#fff;font-size:6px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.dm-prof b{display:block;font-size:7.5px;font-weight:700;color:#111E30;line-height:1.3}
.dm-prof i{font-style:normal;font-size:6.5px;color:#6B7280}
.dm-foot-row{display:flex;align-items:center;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid #EFEBE0;font-size:6px;color:#6B7280}
.dm-pulse{width:4px;height:4px;border-radius:50%;background:#16A34A;flex-shrink:0}
.dm-foot-row u{margin-left:auto;text-decoration:none;color:#9CA3AF}

/* main column */
.dm-main{flex:1;padding:9px;display:flex;flex-direction:column;gap:7px;min-width:0}
.dm-hero{background:#111E30;border-radius:9px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dm-hero-eyebrow{font-size:6.5px;color:rgba(255,255,255,.5)}
.dm-hero-greet{font-size:13px;font-weight:600;color:#fff;margin-top:3px;letter-spacing:-.2px}
.dm-hero-sub{font-size:7px;color:rgba(255,255,255,.55);margin-top:3px}
.dm-score-row{display:flex;align-items:baseline;gap:4px;margin-top:7px}
.dm-score{font-size:22px;font-weight:700;color:#f59e0b;line-height:1}
.dm-denom{font-size:9px;color:rgba(255,255,255,.45)}
.dm-slabel{font-size:8px;font-weight:700;color:#f59e0b;margin-left:3px}
.dm-warn{font-size:6.5px;color:rgba(255,255,255,.6);margin-top:6px}

/* cards */
.dm-card{background:#fff;border:1px solid #E5E1D6;border-radius:9px;padding:9px 11px;min-width:0}
.dm-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.dm-card-lbl{font-size:6.5px;color:#6B7280}
.dm-card-title{font-size:9px;font-weight:700;color:#111E30;margin-top:1px}
.dm-link{font-size:6.5px;color:#2E5FD7}
.dm-mgr-body{border-top:1px solid #EFEBE0;margin:0 -11px;padding:8px 11px 0;font-size:7px;color:#4B5563}
.dm-cards{display:grid;grid-template-columns:1.5fr 1fr;gap:7px;flex:1;min-height:0}

/* alerts card */
.dm-btn{background:#111E30;color:#fff;font-size:6.5px;font-weight:700;border-radius:5px;padding:4px 8px;white-space:nowrap}
.dm-tabs{display:flex;gap:2px;background:#F6F4EE;border-radius:99px;padding:2px}
.dm-tabs i{font-style:normal;font-size:6px;padding:2.5px 6px;border-radius:99px;color:#6B7280;white-space:nowrap}
.dm-tabs i.on{background:#fff;color:#111E30;font-weight:700}
.dm-banner{background:#ECFDF5;border:1px solid #A7F3D0;border-radius:6px;padding:6px 8px;font-size:6.5px;font-weight:600;color:#047857;margin-bottom:6px;line-height:1.35}
.dm-arow{display:flex;align-items:flex-start;gap:6px;border-left:2px solid #f59e0b;background:#FEFCF7;border-radius:4px;padding:6px 7px;margin-bottom:5px;min-width:0}
.dm-chk{width:7px;height:7px;border:1px solid #C8C1AE;border-radius:2px;flex-shrink:0;margin-top:1px}
.dm-arow-body{min-width:0;line-height:1.35}
.dm-arow b{font-size:7.5px;font-weight:700;color:#111E30;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-arow span{font-size:6px;color:#6B7280;display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* scan history */
.dm-count{background:#F6F4EE;color:#6B7280;font-size:6.5px;font-weight:700;border-radius:5px;padding:2px 6px;flex-shrink:0}
.dm-log{display:flex;align-items:center;gap:5px;font-size:6.5px;color:#111E30;padding:5px 0;min-width:0}
.dm-log+.dm-log{border-top:1px solid #F1EDE2}
.dm-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;background:#16A34A}
.dm-dot.amber{background:#f59e0b}
.dm-log em{font-style:normal;color:#6B7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-log u{margin-left:auto;text-decoration:none;color:#9CA3AF;font-size:6px;flex-shrink:0}

/* phone — the same account, mobile view */
.dm-phone{position:absolute;right:0;bottom:0;width:168px;background:#1F2C3F;border-radius:21px;padding:7px;box-shadow:0 22px 52px rgba(0,0,0,.45)}
.dm-notch{width:46px;height:4px;border-radius:99px;background:#0E1A2B;margin:2px auto 6px}
.dm-pscreen{background:#F6F4EE;border-radius:14px;overflow:hidden;padding:8px;display:flex;flex-direction:column;gap:7px}
.dm-pbar{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#111E30}
.dm-pham{margin-left:auto;width:11px;height:7px;border-top:1.5px solid #111E30;border-bottom:1.5px solid #111E30;position:relative}
.dm-pham::after{content:'';position:absolute;left:0;right:0;top:1.5px;border-top:1.5px solid #111E30}
.dm-phero{background:#111E30;border-radius:8px;padding:10px;text-align:center}
.dm-phero-lbl{font-size:6px;letter-spacing:.14em;text-transform:uppercase;color:#f59e0b;font-weight:700;margin-top:4px}

/* The laptop is a fixed width, so below ~1120px the stage is too narrow for the
   phone to overlap without covering the scan-history dates. Stack it instead. */
@media(max-width:1119px){
  .dm-stage{padding-bottom:0}
  .dm-phone{position:static;margin:var(--sp-3) auto 0}
  .dm-base{margin:0}
}
@media(max-width:900px){
  .dm-screen{aspect-ratio:auto}
  .dm-cards{grid-template-columns:1fr}
  .dm-side{width:27%}
  /* secondary controls drop first when the frame narrows, as the real UI does */
  .dm-tabs{display:none}
  .dm-mgr-body{font-size:6.5px}
}