/* ==========================================================================
   rall.digital — the home of Eric Rall's software (Phil · Rubarb · Cortez)
   Forks the Phil/Rubarb design family: Fredoka display + Hanken Grotesk body,
   warm cream paper, ink outlines, chunky offset shadows, a per-product accent
   spectrum (blue / strawberry / terracotta). Light theme. Self-hosted fonts,
   data: SVGs, external JS only — strict CSP clean.
   ========================================================================== */

/* ---------- Fonts (self-hosted only — CSP font-src 'self') ---------- */
@font-face { font-family:"Fredoka"; src:url("/fonts/fredoka-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Fredoka"; src:url("/fonts/fredoka-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Design tokens ---------- */
:root {
  --paper:#FAF3E7; --cream:#FFFBF2; --milk:#FFF8EA;
  --ink:#20190E; --ink-2:#473F30; --ink-soft:#6E6353;
  --sun:#FFC53D;

  /* the three-product accent spectrum */
  --blue:#3261CD; --blue-hi:#5B8EEF; --blue-deep:#22418F;
  --berry:#E8364A; --berry-hi:#FF6F7E; --berry-deep:#B81E32;
  --terracotta:#D95C41; --terracotta-hi:#E8826B; --terracotta-deep:#B23E28;
  --navy:#1A365D;

  --mac-red:#FF5F57; --mac-yellow:#FEBC2E; --mac-green:#28C840;
  --shadow-ink:rgba(32,25,14,.16);
  --display:"Fredoka","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  /* one quiet film of grain so the paper never reads flat (img-src data: ok) */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* product watermark glyphs (masked, tinted to each card's accent) */
  --elephant:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.1 7 89.7 89.7'%3E%3Cpath d='m86.918 36.426c-7.7969-12.559-19.488-17.465-33.801-17.328-1.0078 0-1.8828-0.066406-2.7539-0.73828-5.0391-3.8984-10.82-5.1758-16.938-4.1016-10.016 1.6797-16.535 7.7305-20.164 17.074 0.003906 0.015625-0.003907 0.035157 0 0.054688-0.011719-0.011719 0-0.023438-0.011719-0.035157-0.47266 1.332-1.0391 2.6406-1.3984 4.0039-3.043 11.598-3.6602 23.465-3.6562 35.371 0 4.1172 0.70703 8.1953 3.2422 11.676 0.027344 0.050781 0.046875 0.10156 0.074219 0.15234 0.875 1.3438 2.0156 2.4219 3.3594 3.2266 3.2266 1.9492 5.7812 1.2773 7.6641-2.082 0.53906-1.0078 1.0078-2.0156 1.4102-3.0234 0.80469-2.0156 0.60547-2.6211-1.2773-3.6953-1.2773-0.67188-1.8164-1.6797-2.082-3.0234-0.53906-2.6875-0.13281-5.2422 0.40234-7.7969 0.73828-3.4258 1.9492-6.6523 4.1016-9.4102 0.60547-0.80469 1.0078-0.94141 1.6133 0.066406 0.73828 1.2109 1.4805 2.6211 2.5547 3.4961 1.8164 1.4805 1.8828 3.3594 1.8828 5.3789 0.066406 3.4531-0.12109 6.9688 0.19531 10.422v0.15234c0.003906 2.2969-0.015626 4.5938 0.027343 6.8906 0.027344 1.3828-0.22266 2.8047 0.44531 4.125 0.003906-0.003906 0.003906-0.011719 0.003906-0.015625 0.26953 0.67188 0.60547 1.2773 1.2773 1.6133 0.066406 0.03125 0.14062 0.03125 0.20703 0.058594-0.0625-0.015625-0.12891-0.015625-0.19531-0.03125 0.61328 0.66797 1.418 0.83203 2.2734 0.83203 3.4609 0 6.9258-0.003906 10.387-0.003906 0.77734 0 1.4727-0.20703 2.0273-0.76953 0.027344-0.011719 0.058594-0.011719 0.085938-0.023438 1.2773-0.875 1.6797-2.2852 1.6797-3.6289 0.13281-4.2344 0.67187-8.4688 1.4102-12.637 0.066406-0.46484 0.011718-0.85938 0.66016-0.93359 5.457 0.875 10.934 0.95312 16.418 0.37109 1.2109-0.12891 1.4531 0.24219 1.4531 1.3906 0 4.1523-0.16797 8.3086 0.30469 12.449 0.28125 2.457 1.625 3.7578 4.0469 3.7969 3.2539 0.054688 6.5117 0.042969 9.7617-0.019531 1.8945-0.035157 3.3398-1.2617 3.6758-3.0469 0.20703-1.0977 0.33594-2.2227 0.37109-3.3398 0.20703-6.8984 1.2266-13.684 2.918-20.363 2.3711-9.3633 1.4023-18.234-3.6562-26.559 0 0 0.003906 0 0 0.003906zm-57.391 18.16c-1.8828-2.957-3.4961-3.8984-6.8555-0.53906-0.67188 0.67188-1.2773 1.3438-1.6797 2.2852-1.9492 3.0234-3.1602 6.5195-3.6289 10.082-0.73828 4.9062-1.6133 10.016 3.0938 13.777-0.26953 0.40234-0.53906 0.80469-0.80469 1.2109-1.2109 2.2188-1.7461 2.3516-3.832 0.875-1.2109-0.94141-1.7461-2.2852-2.6211-3.4297-0.67188-2.2188-1.2773-4.5039-1.3438-6.8555-0.20312-7.3945 0.13281-14.785 1.0078-22.113 0.875-7.5938 2.082-15.125 5.9141-21.914 3.2266-5.043 7.6641-8.4688 13.512-9.9492 10.082-2.418 21.172 3.1602 22.852 14.453 1.2109 8.0664-2.6211 16.332-9.6797 19.895-1.2109 0.60547-2.4219 0.94141-3.6953 1.1406-2.418 0.40234-3.4297-0.13281-4.7031-2.2852-0.20312-0.33594-0.40234-0.60547-0.67188-0.94141-0.60547-0.73828-1.3438-1.2109-2.2852-0.73828-1.1445 0.60547-0.94141 1.6797-0.67188 2.5547 0.94141 3.2266 4.5039 5.4453 8 5.043 7.3945-0.94141 12.031-5.2422 15.191-11.695-0.042969-0.19141 0.058594-0.34375 0.085938-0.51953 0.0625-0.43359 0.24219-0.83594 0.42578-1.2344 0.027343-0.089844 0.058593-0.16797 0.09375-0.26172 0-0.066406 0.066406-0.13281 0.13281-0.26953 0.066407-0.13281 0.066407-0.26953 0.13281-0.46875 2.082-5.7812 1.8164-11.426-1.0078-17.074-0.066406-0.066406-0.066406-0.066406-0.066406-0.13281-0.20312-0.33594-0.46875-0.73828-0.53906-1.2109-0.26953-0.46875-0.53906-0.94141-0.94141-1.6133 2.6211-0.20312 5.043 0.20312 7.4609 0.73828 9.4102 2.0156 16.871 6.9922 21.914 15.391 3.9648 7.2578 4.9727 14.922 3.0234 22.922-1.3438 5.3086-2.4883 10.688-2.8242 16.133-0.20312 2.418-0.33594 4.8398-0.40234 7.2578-0.066406 0.94141-0.46875 1.2109-1.4102 1.2109-2.4883-0.066406-5.043-0.13281-7.5938 0-1.6133 0.13281-1.9492-0.53906-1.9492-2.0156-0.066406-4.5039-0.20312-9.0078-0.26953-13.441-0.066406-1.8828-0.73828-2.5547-2.6211-2.418-1.7461 0.066406-3.5625 0.26953-5.3086 0.33594-4.6367 0.13281-9.207 0.066407-13.777-0.67188-2.2852-0.33594-2.8242 0.13281-3.293 2.418-0.13281 0.46875-0.20312 0.875-0.33594 1.3438-0.94141 4.5039-1.2109 9.1406-1.6133 13.777-0.066406 0.875-0.73828 0.60547-1.2109 0.60547-2.5547 0.066406-5.043 0-7.5938 0-2.2852 0-2.2852 0-2.3516-2.3516-0.13281-7.4609 0.26953-14.855-0.33594-22.316-0.066407-0.73828 0.066406-1.4805-0.67188-1.9492-1.832-1.3398-3.0391-3.2227-4.25-5.0391zm39.609 17.32c0.035156 0.011719 0.089843 0 0.11328 0.023438 0.011719 0.003906 0.011719 0.015624 0.023438 0.023437-0.035157-0.023437-0.097657-0.027344-0.13672-0.046875zm0.33984 0.24609c0.011719 0.015625 0.035157 0.035156 0.046876 0.046875 0.015624 0.027343 0.003906 0.078125 0.015624 0.10938-0.027343-0.046875-0.039062-0.11719-0.0625-0.15625zm-36.789-36.051c0 1.6133-1.4102 3.0234-2.957 3.0234-1.6133 0-2.957-1.4102-2.957-3.0234 0-1.5469 1.4102-3.0234 2.957-3.0234 1.543 0 3.0234 1.4805 2.957 3.0234z'/%3E%3C/svg%3E");
  --pie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 L91.7 30.6 A46 46 0 1 1 91.7 69.4 Z'/%3E%3C/svg%3E");
  --aim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='37' fill='none' stroke='black' stroke-width='7'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Cpath d='M50 4V18M50 82V96M4 50H18M82 50H96' fill='none' stroke='black' stroke-width='7'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::after {
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  background:var(--noise) repeat; background-size:180px 180px;
  opacity:.05; mix-blend-mode:multiply;
}
::selection { background:var(--sun); color:var(--ink); }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }
h1, h2, h3 { font-family:var(--display); }
img { max-width:100%; }

/* ==========================================================================
   STICKY NAV (the family menu-bar motif)
   ========================================================================== */
.menubar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:54px; padding:8px clamp(14px,3vw,30px);
  background:var(--cream); border-bottom:2px solid var(--ink);
}
.mb-brand { font:700 21px/1 var(--display); color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.mb-brand span { color:var(--ink-soft); }
.mb-right { display:flex; align-items:center; gap:clamp(12px,2vw,22px); }
.mb-link {
  display:inline-flex; align-items:center; gap:7px;
  font:600 14.5px/1 var(--display); color:var(--ink-soft); text-decoration:none;
  transition:color .15s ease;
}
.mb-link::before {
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--c); border:1.5px solid var(--ink);
}
.mb-link:hover { color:var(--ink); }
.l-phil { --c:var(--blue); } .l-rubarb { --c:var(--berry); } .l-cortez { --c:var(--terracotta); }
.mb-clock { font:500 13px/1 var(--body); color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* ==========================================================================
   HERO — the kinetic wordmark
   ========================================================================== */
.hero {
  position:relative; display:flex; flex-direction:column;
  min-height:calc(100svh - 56px);
  background:radial-gradient(125% 100% at 50% 30%, var(--cream), var(--paper));
}
.hero-stage { position:relative; flex:1; min-height:300px; }
.hero-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.wordmark-fallback {
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  font:700 clamp(46px,12vw,150px)/1 var(--display); letter-spacing:-.02em; color:var(--ink);
}
html.hero-live .wordmark-fallback { display:none; }
.hero-foot {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:0 24px clamp(22px,4vh,44px);
}
.hero-sub {
  margin:0; max-width:30ch; text-align:center;
  font:500 clamp(16px,1.7vw,21px)/1.5 var(--body); color:var(--ink-2);
}

/* ---------- scroll cue ---------- */
.scroll-cue {
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--cream); border:2px solid var(--ink);
  box-shadow:3px 4px 0 rgba(32,25,14,.22);
  color:var(--ink); font-size:18px; text-decoration:none;
  animation:cue-bob 2.4s ease-in-out infinite;
}
.scroll-cue:hover { background:var(--sun); }
.scroll-cue:active { transform:translate(1px,2px); box-shadow:1px 1px 0 rgba(32,25,14,.25); }
@keyframes cue-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }

/* ==========================================================================
   BUTTONS — chunky, pressable
   ========================================================================== */
.btn {
  display:inline-block; font:600 18px/1 var(--display); letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
  background:var(--cream); border:2px solid var(--ink); border-radius:14px;
  padding:14px 24px; box-shadow:5px 6px 0 rgba(32,25,14,.22);
  transition:transform .12s ease, box-shadow .12s ease; cursor:pointer;
}
.btn:hover { transform:translate(-1px,-2px); box-shadow:7px 9px 0 rgba(32,25,14,.24); }
.btn:active { transform:translate(2px,3px); box-shadow:1px 1px 0 rgba(32,25,14,.28); }
.btn-accent { background:var(--accent); color:var(--milk); }

/* ==========================================================================
   PRODUCT CARDS — one per app, each its own accent
   ========================================================================== */
main { padding:clamp(60px,9vw,120px) 0 0; }

.product {
  position:relative; isolation:isolate; overflow:hidden;
  width:min(1080px, calc(100% - 44px)); margin:0 auto;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4.5vw,60px);
  align-items:center; padding:clamp(34px,4.6vw,62px);
  border:2px solid var(--ink); border-radius:28px;
  background:var(--card);
  box-shadow:10px 13px 0 var(--shadow-ink);
  scroll-margin-top:74px;
}
.product + .product { margin-top:clamp(40px,6vw,84px); }
.product::after {
  content:""; position:absolute; z-index:-1; right:-6%; bottom:-16%;
  width:clamp(230px,40%,420px); aspect-ratio:1/1;
  background:var(--accent); opacity:.05; transform:rotate(-8deg);
  -webkit-mask:var(--g) center/contain no-repeat; mask:var(--g) center/contain no-repeat;
  pointer-events:none;
}
.product.flip .product-copy { order:2; }
.product.flip .mini-wrap { order:1; }
.mini-wrap { display:flex; justify-content:center; }

.eyebrow {
  margin:0 0 12px; font:600 13px/1 var(--display);
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);
}
.product h2 {
  margin:0 0 .34em; font:700 clamp(30px,4.4vw,50px)/1.04 var(--display);
  letter-spacing:-.015em; color:var(--ink);
}
.psub {
  margin:0 0 18px; max-width:40ch;
  font:500 clamp(16px,1.5vw,19px)/1.6 var(--body); color:var(--ink-2);
}
.pmeta { margin:0 0 22px; font:600 13.5px/1.5 var(--body); color:var(--ink-soft); }

/* ==========================================================================
   MINI DEMOS (pure CSS, paused until the card is .inview)
   ========================================================================== */
.mini {
  position:relative; width:min(100%,360px); height:230px;
  border:2px solid var(--ink); border-radius:16px; overflow:hidden;
  background:var(--wall); box-shadow:6px 7px 0 var(--shadow-ink); margin:0 auto;
}
html.js .product:not(.inview) .mini i,
html.js .product:not(.inview) .mini b,
html.js .product:not(.inview) .mini span { animation-play-state:paused; }

/* shared window chrome (Phil + the desktop-style minis) */
.m-bar { position:absolute; z-index:2; inset:0 0 auto 0; height:22px; background:var(--cream); border-bottom:2px solid var(--ink); }
.m-bar::before {
  content:""; position:absolute; left:9px; top:8px; width:5px; height:5px; border-radius:50%;
  background:rgba(32,25,14,.35); box-shadow:10px 0 0 rgba(32,25,14,.22), 20px 0 0 rgba(32,25,14,.14);
}
.m-phil {
  position:absolute; z-index:3; top:4px; right:8px; width:14px; height:14px; background:var(--ink);
  -webkit-mask:var(--elephant) center/contain no-repeat; mask:var(--elephant) center/contain no-repeat;
  transform-origin:50% 90%;
}
.m-win { position:absolute; background:var(--cream); border:2px solid var(--ink); border-radius:8px; }
.m-win::before { content:""; position:absolute; top:0; left:0; right:0; height:9px; background:#FFF0D6; border-bottom:1.5px solid rgba(32,25,14,.55); border-radius:6px 6px 0 0; }
.m-win::after { content:""; position:absolute; left:12%; right:28%; top:32%; bottom:22%; background:repeating-linear-gradient(to bottom,#E7DAC0 0 4px,transparent 4px 13px); border-radius:2px; }

/* 1 — Phil: window slides into the right-half zone, stamp, elephant nods */
.mini-snap .m-zone {
  position:absolute; left:53%; top:19%; width:42%; height:74%;
  border:2px dashed rgba(255,251,242,.85); border-radius:8px; background:rgba(255,251,242,.14);
  opacity:0; animation:ms-zone 6s ease-in-out infinite;
}
.mini-snap .m-win { left:6%; top:34%; width:40%; height:44%; animation:ms-win 6s ease-in-out infinite; }
.m-stamp {
  position:absolute; z-index:4; left:56%; top:46%;
  font:600 11px/1 var(--display); color:var(--ink);
  background:var(--sun); border:2px solid var(--ink); border-radius:999px; padding:5px 9px;
  box-shadow:2px 3px 0 rgba(18,32,76,.45);
  transform:scale(0) rotate(-8deg); animation:ms-stamp 6s cubic-bezier(.25,1.5,.4,1) infinite;
}
.mini-snap .m-phil { animation:ms-phil 6s ease-in-out infinite; }
@keyframes ms-win {
  0%,14% { left:6%; top:34%; width:40%; height:44%; }
  32%    { left:34%; top:28%; width:40%; height:44%; }
  46%,84%{ left:53%; top:19%; width:42%; height:74%; }
  100%   { left:6%; top:34%; width:40%; height:44%; }
}
@keyframes ms-zone { 0%,18% { opacity:0; } 30%,62% { opacity:1; } 74%,100% { opacity:0; } }
@keyframes ms-stamp { 0%,50% { transform:scale(0) rotate(-8deg); } 58%,86% { transform:scale(1) rotate(-5deg); } 94%,100% { transform:scale(0) rotate(-8deg); } }
@keyframes ms-phil { 0%,48% { transform:rotate(0); } 56%,80% { transform:rotate(-14deg); } 90%,100% { transform:rotate(0); } }

/* 2 — Rubarb: a screen flips white↔dark, the disc answers in opposition */
@property --mp { syntax:"<number>"; inherits:false; initial-value:0.7; }
.mini-adapt .ma-screen {
  position:absolute; left:9%; top:18%; width:52%; height:58%;
  border-radius:8px; border:2px solid var(--ink); background:#F7F2E8;
  animation:ma-page 7s ease-in-out infinite;
}
.ma-line { position:absolute; left:12%; right:14%; height:7%; border-radius:999px; background:rgba(32,25,14,.2); }
.ma-line.one { top:16%; right:30%; }
.ma-line.two { top:40%; }
.ma-line.three { top:62%; right:38%; }
.mini-adapt .ma-pie {
  position:absolute; right:13%; top:30%; width:62px; height:62px; border-radius:50%;
  border:2px solid var(--ink);
  background:conic-gradient(from calc((1 - var(--mp)) * 180deg), var(--milk) calc(var(--mp) * 360deg), rgba(255,248,234,.2) 0);
  animation:ma-pie 7s ease-in-out infinite;
}
@keyframes ma-page { 0%,30% { background:#F7F2E8; } 45%,78% { background:#12161F; } 92%,100% { background:#F7F2E8; } }
@keyframes ma-pie { 0%,30% { --mp:0.45; } 45%,78% { --mp:0.95; } 92%,100% { --mp:0.45; } }

/* 3 — Cortez: a phone aims at a screen, a scan lands, a field acts */
.mini-aim .ai-screen {
  position:absolute; left:8%; top:20%; width:50%; height:54%;
  border:2px solid var(--ink); border-radius:8px; background:#0F2034; overflow:hidden;
}
.ai-line { position:absolute; left:12%; height:7%; border-radius:999px; background:rgba(255,248,234,.28); }
.ai-line.one { top:18%; width:60%; }
.ai-line.two { top:40%; width:74%; }
.ai-line.three { top:62%; width:50%; }
.ai-line.act { animation:ai-act 6s ease-in-out infinite; }
.mini-aim .ai-phone {
  position:absolute; right:9%; bottom:13%; width:44px; height:72px;
  border:2px solid var(--ink); border-radius:11px; background:var(--cream);
  box-shadow:3px 4px 0 rgba(8,10,26,.5); transform:rotate(-15deg);
}
.mini-aim .ai-phone::before { content:""; position:absolute; left:50%; top:6px; width:13px; height:3px; margin-left:-6.5px; border-radius:2px; background:rgba(32,25,14,.4); }
.mini-aim .ai-phone::after { content:""; position:absolute; left:6px; right:6px; top:13px; bottom:9px; border-radius:4px; background:linear-gradient(160deg,#2A5681,#102540); }
.mini-aim .ai-beam {
  position:absolute; left:34%; top:42%; width:34%; height:2px;
  background:linear-gradient(90deg, transparent, var(--terracotta));
  opacity:0; animation:ai-beam 6s ease-in-out infinite;
}
.mini-aim .ai-reticle {
  position:absolute; left:24%; top:30%; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--terracotta); opacity:0; animation:ai-reticle 6s ease-in-out infinite;
}
.ai-chip {
  position:absolute; z-index:4; left:50%; bottom:9%; transform:translateX(-50%) scale(0);
  font:600 11px/1 var(--display); color:var(--milk);
  background:var(--navy); border:2px solid var(--ink); border-radius:999px; padding:5px 11px;
  white-space:nowrap; box-shadow:2px 3px 0 rgba(8,10,26,.5);
  animation:ai-chip 6s cubic-bezier(.25,1.5,.4,1) infinite;
}
@keyframes ai-beam { 0%,18% { opacity:0; } 28%,60% { opacity:.9; } 70%,100% { opacity:0; } }
@keyframes ai-reticle {
  0%,20%  { opacity:0; top:30%; transform:scale(1.6); }
  30%     { opacity:1; top:30%; transform:scale(1); }
  55%     { opacity:1; top:58%; transform:scale(1); }
  66%,100%{ opacity:0; top:58%; transform:scale(1); }
}
@keyframes ai-act { 0%,48% { background:rgba(255,248,234,.28); } 58%,86% { background:var(--terracotta); } 96%,100% { background:rgba(255,248,234,.28); } }
@keyframes ai-chip { 0%,58% { transform:translateX(-50%) scale(0); } 68%,90% { transform:translateX(-50%) scale(1); } 98%,100% { transform:translateX(-50%) scale(0); } }

/* ==========================================================================
   CORTEZ FLAGSHIP — the climax card gets more: a navy "target machine" screen
   that types real commands, See/Decide/Act beats, platform pills, an aside
   ========================================================================== */
/* the command screen (the mini) */
.mini-cmd { position: relative; }
.cmd-screen {
  position: absolute; left: 7%; top: 15%; width: 66%;
  background: #0E2440; border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 4px 5px 0 rgba(8, 16, 32, .55); padding: 22px 14px 14px;
}
.cmd-dot {
  position: absolute; top: 9px; left: 12px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 10px 0 0 rgba(255, 248, 234, .32), 20px 0 0 rgba(255, 248, 234, .18);
}
.cmd-window { height: 22px; overflow: hidden; }
.cmd-track { display: flex; flex-direction: column; animation: cmd-roll 13s infinite; }
.cmd-track span {
  display: flex; align-items: center; height: 22px; white-space: nowrap;
  font: 500 12.5px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; color: var(--milk);
}
.cmd-track span::before { content: "\203A"; margin-right: 7px; color: var(--terracotta); font-weight: 700; }
.cmd-track span::after { content: ""; width: 7px; height: 14px; margin-left: 6px; background: var(--terracotta); animation: blink 1.06s steps(1) infinite; }
html.js .product:not(.inview) .mini .cmd-track { animation-play-state: paused; }
@keyframes cmd-roll {
  0%, 16%   { transform: translateY(0); }
  20%, 36%  { transform: translateY(-22px); }
  40%, 56%  { transform: translateY(-44px); }
  60%, 76%  { transform: translateY(-66px); }
  80%, 100% { transform: translateY(-88px); }
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* the phone, aiming */
.mini-cmd .cmd-phone {
  position: absolute; right: 8%; bottom: 12%; width: 34px; height: 56px;
  border: 2px solid var(--ink); border-radius: 9px; background: var(--cream);
  box-shadow: 3px 4px 0 rgba(8, 16, 32, .5); transform: rotate(-13deg);
}
.mini-cmd .cmd-phone::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9px; bottom: 7px; border-radius: 3px; background: linear-gradient(160deg, var(--terracotta-hi), var(--terracotta-deep)); }
.mini-cmd .cmd-beam {
  position: absolute; right: 22%; bottom: 30%; width: 26%; height: 2px;
  background: linear-gradient(90deg, var(--terracotta), transparent);
  opacity: 0; transform-origin: right center; transform: rotate(-18deg);
  animation: cmd-beam 13s ease-in-out infinite;
}
@keyframes cmd-beam { 0%, 8% { opacity: 0; } 16%, 88% { opacity: .85; } 96%, 100% { opacity: 0; } }

/* See -> Decide -> Act beats */
.beats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.beat { flex: 1 1 0; min-width: 92px; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; box-shadow: 3px 4px 0 var(--shadow-ink); }
.beat b { display: block; font: 700 14px/1 var(--display); letter-spacing: .02em; color: var(--accent-deep); margin-bottom: 4px; }
.beat span { font: 500 12px/1.35 var(--body); color: var(--ink-2); }

/* platform pills */
.plats { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.plat { font: 600 12px/1 var(--display); color: var(--milk); background: var(--navy); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 11px; box-shadow: 2px 2px 0 var(--shadow-ink); }

/* the aside punchline */
.aside { margin: 2px 0 18px; padding-left: 14px; border-left: 3px solid var(--accent); font: 600 clamp(15px, 1.7vw, 18px)/1.4 var(--display); color: var(--ink); }

/* ==========================================================================
   MAKER STATEMENT + footer
   ========================================================================== */
.maker {
  width:min(760px, calc(100% - 44px)); margin:clamp(72px,10vw,128px) auto clamp(80px,10vw,128px);
  text-align:center; scroll-margin-top:74px;
}
.maker h2 { margin:0 0 14px; font:700 clamp(28px,3.6vw,42px)/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.maker p { margin:0 auto; max-width:48ch; font:500 clamp(16px,1.6vw,19px)/1.65 var(--body); color:var(--ink-2); }
.spectrum { display:flex; gap:12px; justify-content:center; margin-top:26px; }
.spectrum i { width:15px; height:15px; border-radius:50%; border:2px solid var(--ink); box-shadow:2px 3px 0 var(--shadow-ink); }
.spectrum .s-phil { background:var(--blue); }
.spectrum .s-rubarb { background:var(--berry); }
.spectrum .s-cortez { background:var(--terracotta); }

footer { background:var(--ink); color:rgba(255,248,234,.75); text-align:center; padding:46px 24px 56px; font-size:14px; line-height:1.9; }
footer p { margin:0; }
.f-brand { font:700 19px/1 var(--display); color:var(--milk); margin-bottom:6px !important; }
.f-sig { color:rgba(255,248,234,.6); font:600 13px/1 var(--display); letter-spacing:.02em; transform:rotate(-1.2deg); display:inline-block; }
.f-links { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:16px 0 12px; }
.f-links a { color:var(--sun); text-decoration:none; font-weight:600; }
.f-links a:hover { text-decoration:underline; }
.f-copy { color:rgba(255,248,234,.5); }

/* ==========================================================================
   SCROLL REVEALS (gated behind html.js — fully visible without JS)
   ========================================================================== */
html.js [data-reveal] { opacity:0; transform:translateY(26px); }
html.js [data-reveal].inview { opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.25,1.15); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:860px) {
  .product { grid-template-columns:1fr; gap:30px; text-align:center; }
  .product .product-copy { order:1 !important; }
  .product .mini-wrap { order:2 !important; }
  .psub { margin-left:auto; margin-right:auto; }
  .product::after { width:clamp(200px,60%,340px); right:-12%; bottom:-12%; }
}
@media (max-width:560px) {
  .mb-clock { display:none; }
  .mb-right { gap:14px; }
  .mb-link { font-size:13.5px; }
}
@media (max-width:380px) {
  .mb-link::before { display:none; }
}

/* ==========================================================================
   REDUCED MOTION — calm everything; minis hold their most informative frame
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .scroll-cue { animation:none; }
  .btn { transition:none; }
  html.js [data-reveal] { opacity:1; transform:none; transition:none; }

  .mini i, .mini b, .mini span,
  .mini i::before, .mini i::after { animation:none !important; }

  .mini-snap .m-win { left:53%; top:19%; width:42%; height:74%; }
  .mini-snap .m-zone { opacity:1; }
  .m-stamp { transform:scale(1) rotate(-5deg); }
  .mini-snap .m-phil { transform:rotate(-14deg); }

  .mini-adapt .ma-screen { background:#12161F; }
  .mini-adapt .ma-pie { --mp:0.95; }

  .mini-aim .ai-line.act { background:var(--terracotta); }
  .mini-aim .ai-reticle { opacity:1; top:58%; transform:scale(1); }
  .mini-aim .ai-beam { opacity:.9; }
  .ai-chip { transform:translateX(-50%) scale(1); }

  .cmd-track { animation:none; transform:translateY(0); }
  .cmd-track span::after { animation:none; }
  .mini-cmd .cmd-beam { animation:none; opacity:.85; }
}