/* ==========================================================================
   onday — marketing theme
   SaaSox-inspired (Sora + DM Sans, bold type, pill buttons, rounded cards)
   keyed to the onday brand (orange #F07C2E / ink #16202A).
   Includes pure-CSS device mockups (TV / tablet / phone / laptop) with
   live-cycling onday signage. Loaded on /, /pricing.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

/* SanDiego — self-hosted display/heading family */
@font-face{ font-family:"SanDiego"; font-weight:300; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-Light.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-Medium.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-SemiBold.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-Bold.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-ExtraBold.woff') format('woff'); }
@font-face{ font-family:"SanDiego"; font-weight:900; font-style:normal; font-display:swap; src:url('/fonts/sandiego/SanDiego-Black.woff') format('woff'); }

:root{
  --onday:#F07C2E;
  --onday-2:#FF9A4D;
  --onday-3:#FFB877;
  --ink:#16202A;         /* onday dark */
  --ink-2:#22303d;
  --body:#5c6675;
  --muted:#8b93a1;
  --line:#e9edf2;
  --soft:#f5f7fa;
  --soft-2:#eef2f7;
  --mint:#E3FFCD;
  --yellow:#FED91F;
  --purple:#7341F1;
  --sky:#39C6F3;
  --heading-font:"SanDiego",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body-font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow-sm:0 4px 14px rgba(22,32,42,.06);
  --shadow:0 20px 45px rgba(22,32,42,.10);
  --shadow-lg:0 40px 90px rgba(22,32,42,.22);
}

/* ---- base ---------------------------------------------------------------- */
.mkt{ font-family:var(--body-font); color:var(--body); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:clip; }
.mkt h1,.mkt h2,.mkt h3,.mkt h4,.mkt h5,.mkt h6{ font-family:var(--heading-font); color:var(--ink); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.mkt p{ line-height:1.65; }
.mkt a{ text-decoration:none; }
.mkt .lead{ font-size:1.15rem; color:var(--body); }
.mkt .display-hero{ font-size:clamp(2.4rem,5.2vw,4.2rem); font-weight:800; letter-spacing:-.03em; }
.mkt .h-sec{ font-size:clamp(1.9rem,3.4vw,2.85rem); font-weight:800; }
.text-onday{ color:var(--onday)!important; }
.bg-ink{ background:var(--ink)!important; }
.o-underline{ background:linear-gradient(transparent 62%,rgba(240,124,46,.35) 0); }

/* ---- eyebrow / section headers ------------------------------------------ */
.o-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--heading-font);
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--onday); background:rgba(240,124,46,.10); border:1px solid rgba(240,124,46,.22);
  padding:.4rem .8rem; border-radius:100px; }
.o-eyebrow.on-dark{ color:#ffd8b8; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
.o-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--onday); }

/* ---- buttons ------------------------------------------------------------- */
.mkt .btn{ font-family:var(--heading-font); font-weight:600; border-radius:100px;
  padding:.95rem 1.6rem; line-height:1; display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
.mkt .btn:active{ transform:translateY(1px); }
.mkt .btn-lg{ padding:1.1rem 1.9rem; font-size:1.02rem; }
.btn-onday{ background:var(--onday); color:#fff; box-shadow:0 10px 24px rgba(240,124,46,.32); }
.btn-onday:hover{ background:#e56d1c; color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px rgba(240,124,46,.42); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#0f1820; color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.btn-light-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-light-outline:hover{ background:#fff; color:var(--ink); }
.btn-icon i{ transition:transform .25s ease; }
.mkt .btn:hover .btn-icon i{ transform:translateX(4px); }

/* ---- nav ----------------------------------------------------------------- */
.o-nav{ position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); }
.o-nav .nav-link{ font-family:var(--heading-font); font-weight:500; color:#3c4553; padding:.4rem .2rem; }
.o-nav .nav-link:hover{ color:var(--onday); }
.o-brand img{ height:34px; }

/* ---- cards --------------------------------------------------------------- */
.o-card{ background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; height:100%; }
.o-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:#dfe5ec; }
/* masked icon: renders a monochrome SVG in the current accent colour */
.oi{ display:inline-block; width:1em; height:1em; background-color:currentColor; vertical-align:-.125em;
  -webkit-mask:var(--oi) center/contain no-repeat; mask:var(--oi) center/contain no-repeat; }
.o-ic{ width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; }
.o-ic .oi{ width:30px; height:30px; }
.o-ic-onday{ background:rgba(240,124,46,.12); color:var(--onday); }
.o-ic-mint{ background:var(--mint); color:#1f7a2e; }
.o-ic-purple{ background:rgba(115,65,241,.12); color:var(--purple); }
.o-ic-sky{ background:rgba(57,198,243,.14); color:#1595c0; }
.o-ic-yellow{ background:rgba(254,217,31,.20); color:#a8850a; }
.o-ic-ink{ background:rgba(22,32,42,.08); color:var(--ink); }

/* ---- sections / bands ---------------------------------------------------- */
.o-section{ padding:5.5rem 0; }
.o-section-sm{ padding:3.5rem 0; }
.bg-soft{ background:var(--soft); }
.o-hero{ position:relative; background:
    radial-gradient(1100px 520px at 78% -8%, #24323f 0%, transparent 60%),
    radial-gradient(900px 500px at 8% 108%, #1c2933 0%, transparent 55%),
    linear-gradient(160deg,#16202A 0%,#101a22 100%);
  color:#e8edf3; overflow:hidden; }
.o-hero h1,.o-hero h2,.o-hero h3{ color:#fff; }
.o-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; }
.o-blob.b1{ width:320px; height:320px; background:var(--onday); top:-60px; right:8%; opacity:.28; }
.o-blob.b2{ width:260px; height:260px; background:var(--purple); bottom:-40px; left:6%; opacity:.22; }
.o-dotgrid{ position:absolute; inset:0; opacity:.30; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:22px 22px; }

/* ---- KPI band ------------------------------------------------------------ */
.o-kpi{ font-family:var(--heading-font); font-weight:800; font-size:clamp(1.9rem,3vw,2.6rem); color:var(--ink); letter-spacing:-.02em; line-height:1; }
.o-kpi-band .col-6{ position:relative; }

/* ---- logo/screen strip --------------------------------------------------- */
.o-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:100px;
  background:#fff; border:1px solid var(--line); font-family:var(--heading-font); font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm); }
.o-chip i{ color:var(--onday); font-size:1.15rem; }
.o-chip .oi{ width:19px; height:19px; background-color:var(--onday); }

/* ---- steps --------------------------------------------------------------- */
.o-step-num{ width:46px; height:46px; border-radius:14px; background:var(--onday); color:#fff;
  font-family:var(--heading-font); font-weight:700; font-size:1.1rem; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(240,124,46,.30); }

/* ---- pricing ------------------------------------------------------------- */
.o-price{ border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease; height:100%; }
.o-price:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.o-price.popular{ border:2px solid var(--onday); box-shadow:0 30px 60px rgba(240,124,46,.16); }
.o-price .amt{ font-family:var(--heading-font); font-weight:800; font-size:2.4rem; color:var(--ink); letter-spacing:-.02em; }
.o-badge-pop{ background:var(--onday); color:#fff; font-family:var(--heading-font); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .7rem; border-radius:100px; }
.o-tick{ color:#1f9d55; }

/* ================= DEVICE MOCKUPS ========================================= */
.device{ position:relative; margin-inline:auto; }

/* screen surface that signage renders into */
.screen{ position:relative; overflow:hidden; background:#05070a; }
.slides{ position:absolute; inset:0; }

/* --- TV --- */
.tv{ width:100%; max-width:620px; }
.tv__panel{ background:linear-gradient(#0c1218,#05080c); border-radius:16px; padding:3.2%;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.05); }
.tv .screen{ aspect-ratio:16/9; border-radius:6px; }
.tv__stand{ width:22%; height:20px; margin:0 auto; background:linear-gradient(#141b22,#0c1218);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.tv__foot{ width:34%; height:10px; margin:0 auto; border-radius:0 0 10px 10px; background:#0c1218; box-shadow:var(--shadow); }

/* --- tablet (iPad, landscape) --- */
.tablet{ width:340px; max-width:100%; }
.tablet__body{ background:linear-gradient(150deg,#1a222b,#0c1218); border-radius:26px; padding:20px 16px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.06); position:relative; }
.tablet .screen{ aspect-ratio:4/3; border-radius:8px; }
.tablet__cam{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:#2a3441; }

/* --- tablet portrait --- */
.tablet-p{ width:260px; max-width:100%; }
.tablet-p .tablet__body{ padding:18px 16px 26px; }
.tablet-p .screen{ aspect-ratio:3/4; }
.tablet-p .home{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:4px; background:#2a3441; }

/* --- phone --- */
.phone{ width:196px; max-width:100%; }
.phone__body{ background:linear-gradient(150deg,#1a222b,#0a1016); border-radius:34px; padding:11px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.06); position:relative; }
.phone .screen{ aspect-ratio:9/19.5; border-radius:26px; }
.phone__notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:44%; height:20px;
  background:#0a1016; border-radius:0 0 14px 14px; z-index:5; }

/* --- laptop --- */
.laptop{ width:420px; max-width:100%; }
.laptop__lid{ background:linear-gradient(#12191f,#0a0f14); border-radius:14px 14px 4px 4px; padding:10px 10px 10px;
  box-shadow:var(--shadow-lg); }
.laptop .screen{ aspect-ratio:16/10; border-radius:6px; }
.laptop__base{ width:118%; margin-left:-9%; height:14px; border-radius:0 0 12px 12px;
  background:linear-gradient(#c9d2dc,#9aa6b3); position:relative; box-shadow:var(--shadow); }
.laptop__base:before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:15%; height:5px; border-radius:0 0 8px 8px; background:#7f8b98; }

/* floating device badge */
.o-float{ position:absolute; z-index:6; background:#fff; border-radius:14px; padding:.55rem .8rem;
  box-shadow:var(--shadow); font-family:var(--heading-font); font-weight:600; color:var(--ink); font-size:.82rem;
  display:inline-flex; align-items:center; gap:.5rem; }
.o-float i{ font-size:1rem; }
.o-float .oi{ width:17px; height:17px; background-color:var(--onday); }

/* ================= SIGNAGE SLIDES ========================================= */
.sign{ position:absolute; inset:0; display:flex; flex-direction:column; color:#fff;
  padding:7% 8%; overflow:hidden; opacity:0; }
.sign *{ position:relative; z-index:2; }
.sign .np{ position:absolute; top:6%; right:7%; z-index:3; display:inline-flex; align-items:center; gap:.4em;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px); color:#fff; font-family:var(--heading-font); font-weight:600;
  font-size:.62em; letter-spacing:.03em; padding:.35em .6em; border-radius:100px; }
.sign .np .pd{ width:.5em; height:.5em; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:pdpulse 2s infinite; }
.sign .live{ position:absolute; top:6%; left:7%; z-index:3; display:inline-flex; align-items:center; gap:.35em;
  background:#e5484d; color:#fff; font-family:var(--heading-font); font-weight:700; font-size:.6em; letter-spacing:.08em;
  padding:.3em .55em; border-radius:6px; }
.sign .live .pd{ width:.5em; height:.5em; border-radius:50%; background:#fff; animation:blink 1.2s steps(1) infinite; }
.sign .mark{ height:14%; margin-bottom:.4em; }
.sign .kick{ font-family:var(--heading-font); font-weight:600; font-size:.7em; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.sign .big{ font-family:var(--heading-font); font-weight:800; letter-spacing:-.02em; line-height:1.02; font-size:2.1em; }
.sign .sub{ font-size:.86em; opacity:.9; margin-top:.35em; }

/* menu board rows */
.sign .row-m{ display:flex; justify-content:space-between; align-items:center; gap:1em;
  font-family:var(--heading-font); font-weight:600; font-size:.92em; padding:.32em 0; border-bottom:1px solid rgba(255,255,255,.16); }
.sign .row-m span:last-child{ color:#ffd9b8; }
.sign .price-tag{ display:inline-block; background:var(--onday); color:#fff; font-family:var(--heading-font); font-weight:800;
  border-radius:10px; padding:.15em .5em; }

/* live dashboard bars */
.sign .bars{ display:flex; align-items:flex-end; gap:.5em; height:38%; margin-top:auto; }
.sign .bars i{ flex:1; border-radius:5px 5px 0 0; background:linear-gradient(var(--onday),#ffb877); display:block;
  animation:bargrow 2.6s ease-in-out infinite alternate; }
.sign .stat{ display:flex; gap:1.4em; margin-top:.5em; }
.sign .stat b{ font-family:var(--heading-font); font-weight:800; font-size:1.3em; display:block; color:#fff; }
.sign .stat small{ opacity:.7; font-size:.7em; }

/* slide backgrounds */
.bg-brand{ background:radial-gradient(120% 120% at 20% 0%,#2a3947 0,#111b23 70%); }
.bg-menu{ background:linear-gradient(155deg,#1b2836,#0d151c); }
.bg-promo{ background:linear-gradient(135deg,#F07C2E 0%,#e0521f 100%); }
.bg-promo .np{ background:rgba(0,0,0,.22); }
.bg-live{ background:linear-gradient(160deg,#141d27,#0a1119); }
.bg-welcome{ background:radial-gradient(120% 120% at 80% 10%,#3a2a1c 0,#14202a 65%); }
.bg-photo{ background:linear-gradient(160deg,#2b3a47,#101a22); }
.sign .glow{ position:absolute; width:60%; height:60%; border-radius:50%; filter:blur(48px); z-index:0; }
.bg-brand .glow{ background:var(--onday); opacity:.30; right:-10%; top:-10%; }
.bg-welcome .glow{ background:var(--onday); opacity:.35; left:-8%; bottom:-12%; }

/* slideshow crossfade (3 layers, 12s) */
.slides > .sign{ animation:slide3 12s infinite; }
.slides > .sign:nth-child(1){ animation-delay:0s; }
.slides > .sign:nth-child(2){ animation-delay:-4s; }
.slides > .sign:nth-child(3){ animation-delay:-8s; }
.slides.two > .sign{ animation:slide2 10s infinite; }
.slides.two > .sign:nth-child(2){ animation-delay:-5s; }

@keyframes slide3{ 0%{opacity:0} 4%{opacity:1} 29%{opacity:1} 34%{opacity:0} 100%{opacity:0} }
@keyframes slide2{ 0%{opacity:0} 6%{opacity:1} 44%{opacity:1} 50%{opacity:0} 100%{opacity:0} }
@keyframes pdpulse{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 70%{box-shadow:0 0 0 .5em rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
@keyframes blink{ 50%{opacity:.25} }
@keyframes bargrow{ from{height:35%} to{height:100%} }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.o-floaty{ animation:floaty 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .slides>.sign{ animation-duration:0s; }
  .slides>.sign:nth-child(1){ opacity:1; }
  .sign .bars i, .o-floaty, .sign .np .pd, .sign .live .pd{ animation:none; }
}

/* ================= DEMO — in-page product walkthrough (video-styled) ====== */
.demo-wrap{ max-width:940px; margin-inline:auto; }
.demo-browser{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.06); background:#0c1218; }
.demo-top{ display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem; background:#111a22; }
.demo-top .tl{ width:11px; height:11px; border-radius:50%; }
.demo-url{ margin-left:.5rem; flex:1; max-width:320px; background:#1c2732; color:#93a3b3; font-size:.72rem;
  padding:.32rem .7rem; border-radius:7px; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--body-font); }
.demo-url .oi{ width:12px; height:12px; background-color:#93a3b3; }
.demo-screen{ position:relative; aspect-ratio:16/9.2; background:#f4f6f9; overflow:hidden; }
.demo-frames{ position:absolute; inset:0; }
.demo-frame{ position:absolute; inset:0; opacity:0; display:grid; grid-template-columns:130px 1fr; animation:demo4 18s infinite; }
.demo-frame:nth-child(1){ animation-delay:0s; }
.demo-frame:nth-child(2){ animation-delay:-4.5s; }
.demo-frame:nth-child(3){ animation-delay:-9s; }
.demo-frame:nth-child(4){ animation-delay:-13.5s; }
@keyframes demo4{ 0%{opacity:0} 2.5%{opacity:1} 22%{opacity:1} 25.5%{opacity:0} 100%{opacity:0} }

/* app sidebar */
.d-side{ background:#16202A; color:#9aa6b3; padding:14px 12px; font-family:var(--body-font); }
.d-side .d-mark{ height:20px; margin:2px 6px 16px; }
.d-item{ display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:500; padding:.42rem .55rem; border-radius:8px; margin-bottom:.12rem; }
.d-item .oi{ width:14px; height:14px; background-color:currentColor; }
.d-item.on{ background:rgba(240,124,46,.16); color:#ffb277; }

/* app main */
.d-main{ padding:15px 18px; overflow:hidden; }
.d-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.d-title{ font-family:var(--heading-font); font-weight:700; color:var(--ink); font-size:1rem; }
.d-pill{ font-size:.64rem; font-weight:700; padding:.28rem .55rem; border-radius:100px; font-family:var(--heading-font); }
.d-pill.ok{ background:#e4f7ec; color:#1f9d55; }
.d-pill.orange{ background:var(--onday); color:#fff; }
.d-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.d-stat{ background:#fff; border:1px solid #e9edf2; border-radius:12px; padding:9px 12px; }
.d-stat b{ font-family:var(--heading-font); font-weight:800; color:var(--ink); font-size:1.15rem; display:block; line-height:1.1; }
.d-stat small{ color:#8b93a1; font-size:.62rem; }
.d-row{ display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid #e9edf2; border-radius:10px; padding:.5rem .7rem; margin-bottom:.4rem; font-size:.72rem; color:#3c4553; }
.d-row .st{ width:8px; height:8px; border-radius:50%; background:#1f9d55; box-shadow:0 0 0 3px rgba(31,157,85,.15); flex:none; }
.d-row .grow{ flex:1; font-weight:600; }
.d-row .muted{ color:#9aa6b3; font-size:.66rem; }
.d-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.d-tile{ aspect-ratio:16/10; border-radius:10px; display:flex; align-items:flex-end; padding:7px; color:#fff; font-family:var(--heading-font); font-weight:700; font-size:.6rem; line-height:1.1; }
.d-time{ display:flex; flex-direction:column; gap:.5rem; margin-top:.2rem; }
.d-track{ display:flex; align-items:center; gap:.5rem; font-size:.66rem; }
.d-track .lbl{ width:58px; color:#8b93a1; font-weight:600; flex:none; }
.d-track .seg{ height:26px; border-radius:7px; display:flex; align-items:center; padding:0 .55rem; color:#fff; font-family:var(--heading-font); font-weight:700; font-size:.6rem; }
.demo-frame.live{ grid-template-columns:1fr; }
.d-live{ position:absolute; inset:0; }
.d-live .np{ z-index:4; }

/* video scrubber overlay */
.demo-scrub{ position:absolute; left:0; right:0; bottom:0; z-index:8; display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem; background:linear-gradient(transparent,rgba(6,10,14,.6)); color:#fff; font-family:var(--body-font); }
.demo-scrub .pp{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); color:#16202A;
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; flex:none; }
.demo-scrub .bar{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.28); position:relative; overflow:hidden; }
.demo-scrub .bar>i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--onday); border-radius:4px; animation:demobar 18s linear infinite; }
.demo-scrub .tc{ font-size:.66rem; font-variant-numeric:tabular-nums; opacity:.9; flex:none; }
@keyframes demobar{ from{width:0} to{width:100%} }
@media (max-width:575px){ .demo-frame{ grid-template-columns:96px 1fr; } .d-side .d-item{ font-size:.6rem; } .d-title{ font-size:.85rem; } }
@media (prefers-reduced-motion: reduce){
  .demo-frame{ animation:none; } .demo-frame:nth-child(1){ opacity:1; }
  .demo-scrub .bar>i{ animation:none; width:38%; }
}

/* ---- footer -------------------------------------------------------------- */
.o-footer{ background:var(--ink); color:#aeb8c4; }
.o-footer a{ color:#c7d0da; }
.o-footer a:hover{ color:#fff; }
.o-footer h6{ color:#fff; font-family:var(--heading-font); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---- responsive tweaks --------------------------------------------------- */
@media (max-width:991px){
  .o-section{ padding:4rem 0; }
  .tablet{ width:300px; } .laptop{ width:360px; }
}
@media (max-width:575px){
  .mkt .display-hero{ font-size:2.2rem; }
  .phone{ width:168px; } .tablet{ width:260px; }
  .o-float{ font-size:.72rem; }
}