/* ============================================================================
   JM Automated Solutions — MONOCHROME / cinematic
   "Binary at rest, alive on touch." Pure black & white; the only color is a
   sub-pixel red/cyan chromatic-aberration on hover/focus (per MILO's recipe),
   on CTAs + one hero word + active nav. Cinematic canvas, heavy-but-elegant.
   ========================================================================== */

/* Skip-to-content link — hidden until keyboard focus (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .6rem 1rem;
  background: #fff;
  color: #000;
  font: 600 .9rem/1 var(--font, sans-serif);
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid #000;
  outline-offset: 2px;
}

:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
          "Helvetica Neue", Arial, sans-serif;

  --bg:      #0b0b0c;
  --bg-2:    #131315;
  --surface: #141416;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.17);

  /* softened off-white — not a harsh 255 */
  --ink:    #e7e7e9;
  --muted:  #97979d;
  /* raised from #6b6b71 (3.72:1, failed WCAG AA) to pass AA while staying quieter
     than --muted, so eyebrows/labels/fine-print are legible on the dark ground */
  --faint:  #85858d;

  /* Legacy milo-usa research-era tokens, remapped to the monochrome system so the
     ported .demo-*/.plain-box/.section-kicker/.citation-*/.card-actions rules render
     on-brand instead of teal/amber/green. There is NO colored research sub-brand. */
  --soft:  var(--muted);
  --teal:  var(--muted);
  --amber: var(--faint);

  /* the ONLY color, interaction-only, kept whisper-quiet */
  --chroma-r: rgba(255,85,85,.28);
  --chroma-b: rgba(95,170,255,.28);

  --r-sm: 12px; --r: 18px; --r-lg: 26px;
  --maxw: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg); }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  line-height: 1.5; letter-spacing: -0.011em; overflow-x: hidden;
}

/* atmosphere — pure monochrome depth (no colored glow) */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 70% -5%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(50vw 45vh at 10% 110%, rgba(255,255,255,.035), transparent 60%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 78%);
}

/* ---- Type -------------------------------------------------------------- */
.display { font-size: clamp(2.9rem, 7.4vw, 5.8rem); line-height:1.02; font-weight:800; letter-spacing:-0.038em; }
h2.section-title { font-size: clamp(2.1rem,5vw,3.6rem); line-height:1.06; font-weight:800; letter-spacing:-0.03em; }
h3 { font-size:1.4rem; font-weight:700; letter-spacing:-0.02em; }
.lead { font-size: clamp(1.12rem,2vw,1.5rem); color:var(--muted); font-weight:400; }
.eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.muted{color:var(--muted);} .faint{color:var(--faint);}
a { color: var(--ink); text-decoration:none; }
a:hover { text-decoration:none; }

/* the chromatic-aberration accent — the only "RGB", interaction-only,
   on headline words only (NOT buttons — too loud there) */
.chroma { transition: text-shadow .3s ease; }
.chroma:hover, .chroma:focus-visible {
  text-shadow: -0.4px 0 0 var(--chroma-r), 0.4px 0 0 var(--chroma-b);
}
@media (prefers-reduced-motion: reduce){ .chroma:hover{ text-shadow:none; } }

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
section { padding: clamp(2rem, 3.5vw, 3rem) 0; position:relative; }
.center{ text-align:center; } .narrow{ max-width:767px; margin-inline:auto; }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }

/* ---- Nav --------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:100;
  background: rgba(10,10,10,.6); backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px); border-bottom:1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { font-weight:700; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink); }
.brand .tilde { color:var(--faint); }
.nav-links { display:flex; gap:clamp(1rem,2.4vw,2rem); align-items:center; }
.nav-links a { color:var(--muted); font-size:.92rem; transition:color .2s; }
.nav-links a:hover { color:var(--ink); }
/* ---- Mobile nav: CSS-only hamburger ------------------------------------ */
/* Scoped to pages that HAVE the checkbox markup (.nav-toggle-box ~ …).
   Pages with legacy nav markup keep the old collapse rule below. */
.nav-toggle-box { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nav-toggle { display:none; cursor:pointer; padding:12px; min-width:44px; min-height:44px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .25s ease, opacity .2s; }
.nav-toggle-box:focus-visible + .nav-toggle { outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
@media (max-width:767px){
  .nav-links a:not(.btn){ display:none; } /* legacy pages (no hamburger markup): unchanged behavior */
  .nav .wrap { height:auto; min-height:60px; flex-wrap:wrap; }
  .nav-toggle { display:block; order:2; }
  .nav-toggle-box ~ .nav-links { order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; background:var(--bg); transition:max-height .3s ease; }
  .nav-toggle-box ~ .nav-links a:not(.btn){ display:block; padding:.9rem .2rem; border-top:1px solid var(--line); font-size:1.02rem; }
  .nav-toggle-box ~ .nav-links .btn { display:inline-flex; margin:.8rem 0 1rem; justify-content:center; }
  .nav-toggle-box:checked ~ .nav-links { max-height:480px; }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
/* ---- Language switch (EN/ES) ------------------------------------------- */
.lang-switch { display:inline-flex; border:1px solid var(--line); border-radius:980px; overflow:hidden; }
.lang-switch .lang-btn { padding:.35em .8em; font-size:.8rem; letter-spacing:.06em; color:var(--muted); }
.lang-switch .lang-btn.is-active { color:var(--ink); background:rgba(255,255,255,.08); }
@media (max-width:767px){ .lang-switch { align-self:flex-start; margin:.8rem 0 .2rem; } .nav-toggle-box ~ .nav-links .lang-switch .lang-btn { display:inline-flex; border-top:none; padding:.5em 1.1em; } }

/* ---- Buttons (mono; chroma on hover) ----------------------------------- */
.btn { display:inline-flex; align-items:center; gap:.5em; font-size:.98rem; font-weight:600; line-height:1;
  padding:.82em 1.5em; border-radius:980px; transition: transform .15s ease, background .2s ease, border-color .2s, color .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary { background:var(--ink); color:#0a0a0a; }
.btn-primary:hover { background:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover { border-color:#fff; }
.btn-lg { font-size:1.05rem; padding:.98em 1.9em; }

/* ---- Hero -------------------------------------------------------------- */
/* isolate creates a stacking context so the bg (z-index:0) paints ABOVE the
   page background, not behind it. Content (.wrap) rides above on z-index:2.
   --vh is set by JS so Safari's URL-bar-aware viewport doesn't make the hero jump. */
.hero { position:relative; isolation:isolate;
  min-height: 88vh; min-height: calc(var(--vh, 1vh) * 88);
  display:flex; align-items:center; padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem); overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero .wrap { position:relative; z-index:2; }
/* The real video is the star — bright and prominent. Canvas is a faint overlay.
   Starts invisible over the identical poster, then fades in when it can play,
   so the poster->video handoff is seamless and there's no flash on load. */
.hero-bg .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 30%; opacity:0; transition:opacity 1s ease; }
.hero-bg .hero-video.is-playing { opacity:.92; }
@media (prefers-reduced-motion: reduce){ .hero-bg .hero-video { transition:none; } }
/* Static hero image (paid-traffic homepage: poster only, no autoplay video) */
.hero-bg .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 30%; opacity:.92; }
/* On phones the Sora person is centered tight, so the headline lands on her face.
   Reframe the crop so she sits upper-right instead, leaving the left clear for type. */
@media (max-width: 767px){ .hero-bg .hero-video, .hero-bg .hero-img { object-position: 78% 22%; } }
.hero-disclosure { position:absolute; right: clamp(1rem,2.5vw,2rem); bottom: clamp(.6rem,2vw,1.4rem); z-index:3;
  font-size:.72rem; letter-spacing:.04em; color: rgba(255,255,255,.55); }
.hero-bg canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.22; }
.hero-bg::after { content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.20) 0%, rgba(11,11,12,.02) 28%, rgba(11,11,12,.55) 70%, var(--bg) 100%),
    linear-gradient(95deg, rgba(11,11,12,.62) 0%, rgba(11,11,12,.15) 48%, transparent 70%); }
/* Phones: the poster's bright streaks sit behind the copy — darken harder so
   the headline and lead stay readable at ad-traffic glance speed. */
@media (max-width: 767px){
  .hero-bg::after { background:
    linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.28) 30%, rgba(11,11,12,.68) 70%, var(--bg) 100%),
    linear-gradient(95deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.34) 55%, rgba(11,11,12,.12) 78%); }
}
.hero .lead { margin-top:1.6rem; max-width:660px; }
.hero-cta { display:flex; gap:.9rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero-meta { margin-top:3rem; display:flex; gap:2.4rem; flex-wrap:wrap; color:var(--faint); font-size:.85rem; }
.hero-meta b { color:var(--ink); font-weight:700; display:block; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.15rem; }

/* ---- Inbox preview (Worker marketing) ---------------------------------- */
.inbox-preview {
  width: 100%; max-width: 22rem; margin-inline: auto; text-align: left;
}
.inbox-preview-label {
  margin: 0 0 .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); text-align: center;
}
.inbox-preview-card {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.inbox-preview-head {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.inbox-preview-dot {
  flex: 0 0 8px; width: 8px; height: 8px; margin-top: .35rem; border-radius: 50%;
  background: #9fd89f; box-shadow: 0 0 0 3px rgba(159,216,159,.18);
}
.inbox-preview-subject {
  margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  letter-spacing: -.015em;
}
.inbox-preview-from {
  margin: .2rem 0 0; font-size: .72rem; color: var(--faint);
}
.inbox-preview-fields {
  margin: 0; padding: .75rem 1rem .85rem; display: grid; gap: .55rem;
}
.inbox-preview-fields > div {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: .5rem; align-items: baseline;
}
.inbox-preview-fields dt {
  margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.inbox-preview-fields dd {
  margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted);
}
.inbox-preview-fields dd strong { color: var(--ink); font-weight: 600; }
.inbox-preview-booked {
  padding: .5rem .55rem; margin: 0 -.15rem; border-radius: 8px;
  background: rgba(159,216,159,.08); border: 1px solid rgba(159,216,159,.18);
}
.inbox-preview-booked dt { color: #9fd89f; }
.inbox-preview-caption {
  margin: .65rem 0 0; font-size: .72rem; color: var(--faint); text-align: center; line-height: 1.4;
}

/* ---- Hero proof tiles -------------------------------------------------- */
.proof-row { margin-top:3rem; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; max-width: 767px; }
@media (max-width:767px){ .proof-row { grid-template-columns: 1fr; } }
.proof-tile { display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.1rem; border-radius:14px;
  background: rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.proof-tile:hover { transform: translateY(-2px); border-color:#fff; background: rgba(255,255,255,.07); text-decoration:none; }
.proof-tile .proof-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.proof-tile .proof-title { font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.015em; }
.proof-tile .proof-meta { font-size:.78rem; color:var(--muted); }

/* ---- Testimonials (project outcomes from live builds) ------------------ */
.testimonial-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:880px){ .testimonial-grid { grid-template-columns:1fr; } }
.testimonial-card {
  display:flex; flex-direction:column; gap:.75rem; padding:1.35rem 1.4rem; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  text-align:left; min-height:100%;
}
.testimonial-card blockquote {
  margin:0; font-size:.98rem; line-height:1.55; color:var(--ink); font-style:normal;
}
.testimonial-card cite {
  display:block; margin-top:auto; font-size:.78rem; font-style:normal; color:var(--faint); line-height:1.45;
}
.testimonial-card cite strong { color:var(--muted); font-weight:600; }
.testimonial-card a { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---- Client problem walkthrough ---------------------------------------- */
.problem-walk { display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:problem; }
@media (max-width:880px){ .problem-walk { grid-template-columns:1fr; } }
.problem-step {
  padding:1.2rem 1.25rem; border-radius:var(--r); border:1px solid var(--line);
  background:rgba(255,255,255,.03); text-align:left;
}
.problem-step-num {
  display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem;
  border-radius:50%; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:var(--ink); margin-bottom:.65rem;
}
.problem-step h3 { margin:0 0 .45rem; font-size:1.02rem; }
.problem-step p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; }

/* ---- Service demo video ------------------------------------------------ */
.service-video-wrap {
  display:grid; gap:1.4rem; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
}
@media (max-width:880px){ .service-video-wrap { grid-template-columns:1fr; } }
.service-video {
  position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:#0a0a0a; aspect-ratio:16/9;
}
.service-video video { width:100%; height:100%; object-fit:cover; display:block; }
.service-video-note h3 { margin:0 0 .6rem; font-size:1.2rem; }
.service-video-note p { margin:0 0 .75rem; color:var(--muted); font-size:.95rem; line-height:1.55; }

/* ---- Packages / plans -------------------------------------------------- */
.plan-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
@media (max-width:880px){ .plan-grid { grid-template-columns:1fr; } }
.plan-card {
  display:flex; flex-direction:column; gap:.65rem; padding:1.5rem 1.4rem; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  text-align:left; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.plan-card:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 22px 60px rgba(0,0,0,.45); }
.plan-card.is-featured { border-color:var(--line-2); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.plan-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.plan-price { font-size:clamp(1.65rem,3vw,2rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; color:#fff; }
.plan-price span { font-size:.88rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.plan-card h3 { margin:0; font-size:1.12rem; }
.plan-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; flex:1; }
.plan-card .btn { margin-top:.5rem; align-self:flex-start; }

/* ---- Human oversight strip --------------------------------------------- */
.oversight-steps { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:880px){ .oversight-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .oversight-steps { grid-template-columns:1fr; } }
.oversight-step {
  padding:1rem 1.05rem; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  text-align:left;
}
.oversight-step small { display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:.35rem; }
.oversight-step strong { display:block; font-size:.95rem; margin-bottom:.3rem; }
.oversight-step p { margin:0; font-size:.82rem; color:var(--muted); line-height:1.45; }

/* ---- Sticky mobile CTA ------------------------------------------------- */
.sticky-cta {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:.75rem max(var(--page-gutter,1.25rem),env(safe-area-inset-right,0px))
           calc(.75rem + env(safe-area-inset-bottom,0px))
           max(var(--page-gutter,1.25rem),env(safe-area-inset-left,0px));
  background:rgba(11,11,12,.92); border-top:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  gap:.55rem; grid-template-columns:1fr 1fr;
}
.sticky-cta.is-visible { display:grid; }
.sticky-cta .btn { justify-content:center; width:100%; font-size:.88rem; padding:.72em 1em; }
@media (min-width:768px){ .sticky-cta { display:none !important; } }

/* ---- Cards / grids ----------------------------------------------------- */
.grid { display:grid; gap:1.4rem; }
/* minmax(0,1fr) is essential: lets grid items shrink below their native video width.
   Without it, .video-tile videos (intrinsic 1280px) blow the grid out horizontally. */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Work section: 2x2 grid that collapses to 1 column on phones */
.grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px){ .grid-work { grid-template-columns: 1fr; } }

/* ---- Architectural-reference scholarly page ---------------------------- */
.ref-head { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.ref-head .eyebrow { color: var(--faint); letter-spacing: .14em; }
.ref-title { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-top: 1rem; }
.ref-byline { color: var(--muted); margin-top: 1rem; font-size: 1.02rem; }
.ref-lede { max-width: 640px; margin: 14px auto 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.ref-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.ref-badge { display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.04); font-size: .8rem; }
.ref-badge b { color: #fff; font-weight: 700; font-size: .92rem; }
.ref-badge span { color: var(--faint); }
.ref-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.ref-actions .btn { font-size: .88rem; padding: .55em 1em; }

.ref-section { padding: clamp(2.2rem, 4vw, 3.4rem) 0 !important; }
.ref-section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.ref-h2 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: 1rem; }
.ref-section p { color: var(--ink); font-size: 1rem; line-height: 1.65; }
.ref-section p + p { margin-top: 1rem; }
.ref-muted { color: var(--muted) !important; font-size: .94rem !important; }
.ref-section em { color: #fff; font-style: italic; }

.ref-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 767px) { .ref-articles { grid-template-columns: 1fr; } }
.ref-article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.5rem; transition: border-color .2s ease, transform .2s ease; }
.ref-article:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ref-art-num { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ref-article h3 { margin: .55rem 0 .7rem; font-size: 1.12rem; line-height: 1.25; }
.ref-article p { font-size: .93rem; color: var(--muted); line-height: 1.55; }
.ref-meta { font-size: .82rem !important; margin-top: .8rem !important; }
.ref-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.ref-actions-inline { font-size: .82rem !important; margin-top: .5rem !important; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.ref-actions-inline a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 1px; }
.ref-actions-inline a:hover { color: #fff; border-bottom-color: #fff; }

.ref-primitives, .ref-standards, .ref-record { list-style: none; padding: 0; counter-reset: r; }
.ref-primitives li, .ref-standards li, .ref-record li {
  padding: .9rem 0 .9rem 2.4rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .98rem; line-height: 1.55; position: relative; }
.ref-primitives li::before { counter-increment: r; content: counter(r); position: absolute; left: 0; top: .95rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--faint); font-variant-numeric: tabular-nums;
  width: 1.6rem; text-align: right; padding-right: .6rem; border-right: 1px solid var(--line); }
.ref-standards li::before, .ref-record li::before { content: "·"; position: absolute; left: .8rem; top: .85rem; color: var(--faint); font-size: 1.2rem; }
.ref-primitives li:last-child, .ref-standards li:last-child, .ref-record li:last-child { border-bottom: none; }
.ref-primitives b, .ref-standards b, .ref-record b { color: #fff; font-weight: 700; }

.ref-bibtex { background: #08080a; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem; margin-top: 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: #d7d7da;
  white-space: pre; }

/* ---- Payments page (/payments) ----------------------------------------- */
.pay-hero { position:relative; isolation:isolate; min-height: 56vh; display:flex; align-items:center;
  padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow:hidden; }
.pay-hero .hero-bg { position:absolute; inset:0; z-index:0; }
.pay-hero .hero-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.pay-hero .hero-bg::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.1) 30%, rgba(11,11,12,.7) 80%, var(--bg) 100%); }
.pay-hero .wrap { position:relative; z-index:2; }
.pay-hero .display { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height:1.05; }

/* Gate banner — only visible while traffic is closed */
.pay-gate-banner { padding: clamp(.9rem,2vw,1.3rem) 0 !important; background: rgba(255,255,255,.04); border-block: 1px solid var(--line); }
.pay-gate-line { display:flex; gap:.75rem; align-items:flex-start; color: var(--ink); font-size:.95rem; line-height:1.5; margin: 0; }
.pay-gate-line strong { color:#fff; }
.pay-gate-line a { color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.pay-gate-dot { width:.6rem; height:.6rem; border-radius:50%; background:#ffcc66; flex:none; margin-top:.55rem;
  box-shadow: 0 0 12px rgba(255,204,102,.5); animation: gatePulse 2.4s ease-in-out infinite; }
@keyframes gatePulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
body[data-payment-gate="open"] #payGateBanner { display:none; }

/* Methods grid */
.pay-methods { padding-top: clamp(2.5rem,5vw,4rem) !important; }
.pay-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2rem; }
@media (max-width: 767px){ .pay-grid { grid-template-columns: 1fr; } }
.pay-card { background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:1rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; }
.pay-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.pay-card-head { display:flex; flex-direction:column; gap:.35rem; }
.pay-card-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pay-card h3 { font-size: 1.18rem; line-height: 1.25; }
.pay-card-sub { color: var(--muted); font-size:.94rem; line-height:1.5; }
.pay-card-foot { color: var(--faint); font-size:.82rem; margin-top:auto; }

/* Method-mark chips (Apple Pay, Google Pay, Visa, MC, Amex, Discover, PayPal, Square, ACH) */
.pay-card-marks { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.pm { display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:30px; padding: 0 .65rem;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 6px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.06); color: #fff; }
.pm-apple { font-family: "SF Pro Display", -apple-system, system-ui, sans-serif; font-weight: 600; letter-spacing:.01em; }
.pm-apple::before { content: ""; display:inline-block; width:14px; height:14px; margin-right:.25em;
  background:#fff; -webkit-mask: radial-gradient(circle, #fff 56%, transparent 60%) center/100% 100% no-repeat; mask: radial-gradient(circle, #fff 56%, transparent 60%) center/100% 100% no-repeat; }
.pm-google { background:#fff; color:#202124; border-color:#fff; }
.pm-google::before { content: "G"; color:#4285f4; font-weight: 800; margin-right: .15rem; }
.pm-visa { font-family: "SF Pro Display", -apple-system, sans-serif; font-weight: 900; font-style: italic;
  background:#1a1f71; color:#f7b600; border-color: #1a1f71; letter-spacing: .04em; }
.pm-mc { background: #000; padding: 0 .9rem; gap: 2px; }
.pm-mc-a, .pm-mc-b { width:14px; height:14px; border-radius:50%; }
.pm-mc-a { background:#eb001b; margin-right:-5px; }
.pm-mc-b { background:#f79e1b; mix-blend-mode: screen; }
.pm-amex { background: #006fcf; color:#fff; border-color:#006fcf; font-weight: 900; letter-spacing: .05em; }
.pm-disc { background:#ff6000; color:#fff; border-color:#ff6000; font-weight:700; }
.pm-paypal { font-family: "SF Pro Display", -apple-system, sans-serif; font-weight: 800; font-style: italic;
  background: #ffc439; color: #003087; border-color: #003087; padding: 0 .8rem; }
.pm-square { background:#fff; color:#000; border-color:#fff; font-weight:700; }
.pm-ach { background: var(--accent); color: #06140a; border-color: var(--accent); font-weight: 800; letter-spacing:.06em; }
.pm-bank { background: rgba(255,255,255,.08); }

/* Trust section */
.pay-trust { background: var(--bg-2); border-top: 1px solid var(--line); }
.pay-trust .section-title { margin-bottom: 1rem; }
.pay-trust-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.pay-trust-list li { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size:.95rem; line-height: 1.6; }
.pay-trust-list li:last-child { border-bottom: none; }
.pay-trust-list strong { color: #fff; }
.pay-trust-list code { font-family: var(--mono); font-size: .85em;
  background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line-2); }
.pay-gate-state-text { color: var(--accent); font-weight: 600; }
.pay-trust-foot { color: var(--muted); font-size: .92rem; margin-top: 1.4rem; }

/* Highlight the live PayPal card so the eye lands there first */
.pay-card-live { border-color: var(--line-2); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 50px rgba(0,0,0,.4); }
.pay-card-live .pay-card-eyebrow-live { color: var(--accent); }
.pay-card-live .pay-card-eyebrow-live::before { content: "● "; }
.pay-gate-dot-ok { background: var(--ink) !important; box-shadow: 0 0 12px rgba(255,255,255,.45) !important; }
@media (max-width:880px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
.card {
  position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:2.1rem; overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); opacity:0; transition:opacity .3s; }
.card:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 24px 70px rgba(0,0,0,.6); }
.card:hover::before { opacity:1; }
.card h3 { margin:.9rem 0 .6rem; } .card p { color:var(--muted); font-size:.98rem; }
.card .tag { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.card .card-link { display:inline-block; margin-top:1.1rem; font-weight:600; color:var(--ink); }
/* two links per card: a flex row so the secondary link wraps flush-left instead of
   inheriting a stray inline margin-left when the card is one column on mobile */
.card .card-links { display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; margin-top:1.1rem; }
.card .card-links .card-link { margin-top:0; }
.card .card-link:hover { text-shadow:-0.5px 0 0 var(--chroma-r), 0.5px 0 0 var(--chroma-b); }

/* status pills — consistent shape; "live" LED pulses, "available" is a calm ring */
/* link-card: an <a> wrapping the card so the WHOLE tile is clickable */
a.card.link-card { display:flex; flex-direction:column; color: var(--ink); text-decoration:none; }
a.card.link-card:hover { color: var(--ink); text-decoration:none; }
a.card.link-card .card-link { color: #fff; opacity:.7; transition: opacity .2s ease, transform .2s ease; }
a.card.link-card:hover .card-link { opacity:1; transform: translateX(2px); }

/* Video benefit tiles (replace the canvas wireframes) — equal columns, proper crop */
.video-tiles { gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px){ .video-tiles { grid-template-columns: 1fr; } }
.video-tile { background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--r); padding: 0; overflow:hidden;
  display:flex; flex-direction:column; min-width:0;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.video-tile:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.video-tile-media { position:relative; aspect-ratio: 16/9; background:#0a0a0a; overflow:hidden; border-bottom: 1px solid var(--line); }
.video-tile-media video { width:100%; height:100%; object-fit:cover; object-position: center; display:block; }
.video-tile-media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,12,.55) 100%); pointer-events:none; }
.video-tile h3 { padding: 1.1rem 1.4rem 0; font-size:1.1rem; }
.video-tile p { padding: .45rem 1.4rem 1.4rem; color: var(--muted); font-size:.92rem; }

/* Soft research strip — replaces the heavy trust band */
.research-strip { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.research-strip .lead { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.research-strip .lead a { color: #fff; }

/* Tight global section rhythm — was much too airy */
section { padding: clamp(2rem, 3.5vw, 3rem) 0 !important; }
section h2.section-title + p.lead { margin-top: .6rem; }
.hero { padding-bottom: clamp(2rem, 3.5vw, 3rem) !important; }
.hero + section { padding-top: clamp(2rem, 3.5vw, 3rem) !important; }
section .grid { margin-top: 1.6rem !important; }
.video-tiles { margin-top: 1.6rem !important; }
.benefits { margin-top: 1.6rem !important; }
.wrap > .divider { margin: 0; }

/* Make sure the benefit grid never overflows on smaller desktops */
.video-tiles { width: 100%; max-width: 100%; }

.status { display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--line-2); padding:.32em .8em; border-radius:980px; }
.status .dot{ position:relative; width:7px;height:7px;border-radius:50%;background:#fff; flex:none; }
.status .dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.35); animation: led 2.2s ease-out infinite; }
@keyframes led { 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%,100%{ box-shadow:0 0 0 7px rgba(255,255,255,0);} }
.status.beta .dot{ background:transparent; border:1.5px solid var(--faint); }
.status.beta .dot::after{ animation:none; box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .status .dot::after{ animation:none; } }

/* ---- Benefits ---------------------------------------------------------- */
.benefits { display:grid; gap:2.4rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:880px){ .benefits{ grid-template-columns:1fr; } }
/* icons are interactive — click to play a short visual of the benefit */
.benefit .ic { appearance:none; -webkit-appearance:none; width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:1.1rem; font-size:1.35rem; color:var(--ink); background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  cursor:pointer; position:relative; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.benefit .ic:hover { transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.09); }
.benefit .ic::after { content:"▶"; position:absolute; right:-3px; bottom:-3px; width:18px;height:18px;border-radius:50%;
  background:#fff; color:#0b0b0c; font-size:.5rem; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.5); opacity:.9; }
.benefit h3{ font-size:1.18rem; margin-bottom:.5rem; } .benefit p{ color:var(--muted); font-size:.97rem; }

/* ---- Icon demo modal --------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:1.5rem;
  background:rgba(5,5,7,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal.open { display:grid; animation: fade .25s ease; }
@keyframes fade { from{ opacity:0; } to{ opacity:1; } }
.modal-card { width:min(560px,100%); background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:1.6rem; box-shadow:0 30px 90px rgba(0,0,0,.7); }
.modal-card canvas { width:100%; height:240px; display:block; border-radius:14px; background:#08080a; border:1px solid var(--line); }
.modal-card h3 { margin:1.1rem 0 .4rem; }
.modal-card p { color:var(--muted); font-size:.95rem; }
.modal-close { float:right; appearance:none; background:transparent; border:1px solid var(--line-2); color:var(--ink);
  width:30px;height:30px;border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; }
.modal-close:hover{ border-color:#fff; }

/* ---- Band -------------------------------------------------------------- */
.band { padding: clamp(78px, 9vw, 128px) 0; border-bottom: 1px solid var(--line); }
.trust { display:flex; flex-wrap:wrap; gap:1.4rem 3rem; justify-content:center; }
.trust .badge { text-align:center; }
.trust .badge .k { font-weight:800; font-size:1.1rem; color:#fff; }
.trust .badge .v { font-size:.78rem; color:var(--faint); letter-spacing:.03em; }

/* ---- Footer ------------------------------------------------------------ */
.footer { border-top:1px solid var(--line); padding:3.5rem 0; font-size:.86rem; }
.footer .cols { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
@media (max-width:767px){ .footer .cols{ grid-template-columns:1fr 1fr; } }
.footer h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin-bottom:.9rem; }
.footer a { color:var(--muted); display:block; margin-bottom:.55rem; }
.footer a:hover{ color:var(--ink); }
.footer .legal { margin-top:2.6rem; color:var(--faint); border-top:1px solid var(--line); padding-top:1.5rem; }
.footer--center .wrap { text-align: center; }
.footer--center .cols {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem;
  text-align: center;
}
.footer--center .cols > div { flex: 0 1 auto; min-width: 8.5rem; }
.footer--center .cols .faint { margin-inline: auto; }
.footer--center .legal {
  margin-top: 2rem; text-align: center; max-width: 36rem; margin-inline: auto;
}

/* ---- Form fields ------------------------------------------------------- */
.field { width:100%; padding:.85em 1em; border-radius:12px; background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); color:var(--ink); font:inherit; font-size:1rem; transition:border-color .2s, background .2s; }
.field::placeholder{ color:var(--faint); }
.field:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.06); }
.field:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
textarea.field{ resize:vertical; min-height:96px; }

/* ---- Reveal ------------------------------------------------------------ */
/* Hidden-until-scroll is gated on html.js (set by an inline <script> in <head>):
   if JS never runs (hostile in-app WebView, blocked scripts), content stays visible
   instead of leaving the visitor a blank page. */
html.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} }

/* ---- Proof strip (compact live-work pills under the hero) -------------- */
.proof-strip-label { font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:.8rem; }
.proof-strip { display:flex; gap:.7rem; flex-wrap:wrap; }
.proof-pill { flex:none; display:flex; flex-direction:column; gap:.18rem; padding:.72rem 1.05rem;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04);
  color:var(--ink); transition:border-color .2s ease, background .2s ease, transform .15s ease; }
.proof-pill:hover { border-color:var(--line-2); background:rgba(255,255,255,.07); transform:translateY(-1px); }
.proof-pill b { color:#fff; font-size:.92rem; font-weight:700; letter-spacing:-.01em; }
.proof-pill span { color:var(--faint); font-size:.75rem; }
@media (max-width:767px){
  .proof-strip { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:.4rem;
    margin-inline:calc(-1 * clamp(1.25rem,4vw,2.5rem)); padding-inline:clamp(1.25rem,4vw,2.5rem); }
  .proof-strip::-webkit-scrollbar { display:none; }
  .proof-pill { min-width:168px; }
}

/* ---- Work tabs (CSS-only: radio inputs, no JS required) ----------------- */
.tabs { position:relative; }
.tab-box { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tab-labels { display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
.tab-labels label { cursor:pointer; padding:.62em 1.45em; border-radius:980px; border:1px solid var(--line-2);
  color:var(--muted); font-weight:600; font-size:.95rem; line-height:1;
  transition:color .2s ease, border-color .2s ease, background .2s ease; }
.tab-labels label:hover { color:var(--ink); border-color:#fff; }
#tabWebsites:checked ~ .tab-labels label[for="tabWebsites"],
#tabApps:checked ~ .tab-labels label[for="tabApps"],
#tabResearch:checked ~ .tab-labels label[for="tabResearch"] { background:var(--ink); color:#0a0a0a; border-color:var(--ink); }
#tabWebsites:focus-visible ~ .tab-labels label[for="tabWebsites"],
#tabApps:focus-visible ~ .tab-labels label[for="tabApps"],
#tabResearch:focus-visible ~ .tab-labels label[for="tabResearch"] { outline:2px solid #fff; outline-offset:3px; }
.tab-panel { display:none; gap:1.4rem; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:1.6rem !important; }
#tabWebsites:checked ~ .tab-panel-websites,
#tabApps:checked ~ .tab-panel-apps,
#tabResearch:checked ~ .tab-panel-research { display:grid; }
@media (max-width:767px){ .tab-panel { grid-template-columns:1fr; } }

/* ---- Inline form error (WebView-safe: no mailto navigation) ------------- */
.form-error { display:none; padding:.9rem 1.1rem; border:1px solid rgba(255,120,120,.45); border-radius:12px;
  background:rgba(255,80,80,.08); color:var(--ink); font-size:.92rem; line-height:1.5; text-align:left; }
.form-error.show { display:block; }
.form-error a { color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---- Research/demo component styles (ported from the article template so
   satellite pages — demo, about, cite, formats, record, methods, articles
   index, series, author — render structured without their own <style>) ---- */
.shell { width: min(1180px, calc(100vw - 40px)); margin: 0 auto; }
.hero-media { margin: 32px 0 0;
  width: min(760px, 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.05), transparent 56%),
    rgba(255,255,255,.035);
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,.35); }
.hero-media.is-featured { width: min(820px, 100%);
  margin-top: 26px; }
.demo-media-grid { margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(260px, .42fr);
  gap: 16px;
  align-items: stretch; }
.demo-media-grid .hero-media { margin: 0; width: 100%; }
.demo-media-note { border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.05), transparent 42%),
    rgba(255,255,255,.035);
  padding: clamp(18px, 3vw, 26px);
  display: grid;
  align-content: center;
  gap: 10px; }
.demo-media-note h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1; }
.demo-media-note p { margin: 0; color: var(--soft); }
.hero-media video { display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.12) brightness(1.16) contrast(1.05);
  background: #020305; }
.media-caption { display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px; }
.persona-grid,
.trust-grid,
.demo-flow { display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px; }
.persona-card,
.trust-card,
.demo-step { position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  padding: clamp(18px, 3vw, 26px); }
.demo-step small { display: block;
  margin-bottom: 14px;
  color: var(--teal);
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase; }
.demo-step strong { display: block; font-size: 22px; line-height: 1.1; margin-bottom: 8px; }
.demo-step p { margin: 0; color: var(--muted); }
.method-grid .demo-step { position: relative;
  min-height: 230px;
  display: grid;
  align-content: end;
  overflow: hidden; }
.method-grid .demo-step::before { content: "";
  position: absolute;
  inset: 16px 16px auto auto;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--teal) 65%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--teal) 28%, transparent), transparent 58%),
    rgba(255,255,255,.04);
  box-shadow: 0 0 32px color-mix(in srgb, var(--teal) 22%, transparent);
  animation: methodPulse 4.6s ease-in-out infinite; }
.method-grid .demo-step::after { content: "";
  position: absolute;
  inset: auto 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 70%, transparent), transparent);
  transform-origin: left;
  animation: methodSweep 6s linear infinite; }
.demo-simulator { margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(300px, .58fr);
  gap: 14px;
  align-items: start; }
.demo-record,
.demo-panel { border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  padding: clamp(18px, 3vw, 28px); }
.demo-record { min-height: 330px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  position: relative; }
.demo-record::before { content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 88px;
  height: 88px;
  border: 1px solid color-mix(in srgb, var(--teal) 58%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 50px color-mix(in srgb, var(--teal) 22%, transparent);
  opacity: .72; }
.demo-record small,
.demo-panel small { color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 760; }
.demo-record h2 { max-width: 600px;
  margin: 16px 0 12px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1; }
.demo-record p { max-width: 620px; margin: 0; color: var(--soft); }
.demo-record-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px; }
.demo-record-grid div { border-top: 1px solid var(--line);
  padding-top: 12px; }
.demo-record-grid strong { display: block; font-size: 16px; }
.demo-record-grid span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.demo-panel h3 { margin: 10px 0 10px; font-size: 24px; line-height: 1.05; }
.demo-panel p { margin: 0 0 16px; color: var(--muted); }
.demo-actions { display: grid;
  gap: 9px; }
.demo-actions button { min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.045);
  font-weight: 740;
  cursor: pointer; }
.demo-actions button[aria-pressed="true"] { background: color-mix(in srgb, var(--teal) 18%, transparent);
  border-color: color-mix(in srgb, var(--teal) 64%, transparent); }
.plain-box { margin-top: 34px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: clamp(20px, 4vw, 34px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.014)),
    rgba(255,255,255,.02); }
.plain-box h3 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.plain-box p { margin: 0; max-width: 820px; color: var(--soft); font-size: 18px; }
.section-kicker { color: var(--amber);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 760;
  margin-bottom: 11px; }
.research-grid { display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px; }
.article-icon { width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--teal) 58%, transparent);
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--teal) 12%, transparent); }
.signal { align-self: start;
  color: var(--teal);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 760; }
.domain { width: fit-content;
  height: fit-content;
  display: inline-block;
  align-self: start;
  justify-self: start;
  border-radius: 4px;
  padding: 4px 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em; }
.card-actions { color: var(--ink); font-weight: 720; }
.card-actions::after { content: " ->"; color: var(--teal); }
.series-bar { display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px; }
.series-bar a { min-height: 48px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--muted); }
.series-bar a:hover, .series-bar a:focus-visible { color: var(--ink); border-color: var(--line-2); }
.series-bar a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
footer .shell { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-verified { color: var(--faint); }
.pdf-list { display: grid;
  gap: 10px;
  margin-top: 24px; }
.pdf-row { display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
  color: var(--soft); }
.pdf-row a { color: var(--ink); text-decoration: none; font-weight: 720; }
.pdf-row span { color: var(--muted); }
.format-list { display: grid;
  gap: 12px;
  margin-top: 24px; }
.format-row { display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0 0; }
.format-row span { color: var(--soft); font-weight: 700; min-width: 0; }
.format-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.format-actions a { min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 720;
  background: rgba(255,255,255,.04);
  max-width: 100%;
  overflow-wrap: anywhere; }
.format-actions a:first-child { border-color: var(--line-2);
  background: rgba(255,255,255,.06); }
.format-actions a:hover, .format-actions a:focus-visible { border-color: #fff;
  background: rgba(255,255,255,.09); }
.citation-list { display: grid;
  gap: 18px;
  margin-top: 28px; }
.citation-item { border-top: 1px solid var(--line);
  padding-top: 18px;
  min-width: 0; }
.citation-item h3 { margin: 0 0 8px; font-size: 24px; }
.citation-item p { margin: 6px 0; color: var(--soft); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.citation-item a { overflow-wrap: anywhere; word-break: break-word; }
.citation-item code { display: inline-block;
  max-width: 100%;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word; }
.plain-box, .paper, .article-hero-panel, .article-card-panel, .format-panel { min-width: 0; }
.format-panel .format-actions { justify-content: flex-start; }
@media (max-width: 920px) {
  .demo-media-grid { grid-template-columns: 1fr; }
  .research-grid, .principles, .module-grid, .mission-grid, .simple-steps, .device-grid, .invention-flow, .workflow-example, .demo-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .shell { width: min(100% - 28px, 1180px); }
  .hero-media { order: 3; margin-top: 20px; border-radius: 7px; }
  .hero-media.is-featured { margin-top: 18px; }
  .media-caption { display: grid; gap: 4px; padding: 10px 12px; font-size: 11px; line-height: 1.35; }
  .research-grid, .principles, .module-grid, .mission-grid, .simple-steps, .invention-flow, .demo-flow { grid-template-columns: 1fr; }
  .method-grid .demo-step { min-height: 190px; }
  .demo-simulator { grid-template-columns: 1fr; margin-top: 22px; }
  .demo-record { min-height: auto; }
  .demo-record-grid { grid-template-columns: 1fr; }
  .format-row { grid-template-columns: 1fr; }
  .format-actions { justify-content: flex-start; }
}

/* ============================================================================
   Apple-aligned adaptive layout (all jmautomated.com pages)
   Driven by /assets/jms-adaptive.js: device-* + layout-compact/regular +
   is-touch / is-pointer. Breakpoints follow HIG compact (~<768) vs regular.
   ========================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --page-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --touch-min: 44px;
}

/* Safe-area: once on horizontal gutters — never body padding + width calc */
.wrap {
  padding-left: max(var(--page-gutter), var(--safe-left));
  padding-right: max(var(--page-gutter), var(--safe-right));
}
.shell {
  padding-left: max(1.25rem, var(--safe-left));
  padding-right: max(1.25rem, var(--safe-right));
  box-sizing: border-box;
}

body {
  padding-bottom: var(--safe-bottom);
}
.nav {
  padding-top: var(--safe-top);
}
html.is-standalone .nav {
  padding-top: max(var(--safe-top), .35rem);
}

/* Wider canvas on Mac / large iPad landscape */
html.device-wide {
  --maxw: 1280px;
}
html.device-desktop {
  --maxw: 1200px;
}

/* Compact: thumb-friendly tap targets (HIG 44pt) */
html.device-mobile.is-touch .btn,
html.device-mobile.is-touch .nav-toggle,
html.device-mobile.is-touch .nav-toggle-box ~ .nav-links a:not(.btn),
html.device-mobile.is-touch .lang-switch .lang-btn,
html.device-mobile.is-touch .series-bar a,
html.device-mobile.is-touch .demo-actions button,
html.device-mobile.is-touch .field {
  min-height: var(--touch-min);
}
html.device-mobile.is-touch .btn { padding-block: .9em; }
html.device-mobile.is-touch .nav-toggle-box ~ .nav-links a:not(.btn) {
  display: flex; align-items: center;
}

/* Homepage hero: centered on compact, split grid on Mac / iPad regular width */
html.device-mobile .hero--center .wrap,
html.device-tablet .hero--center .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html.device-mobile .hero--center .lead,
html.device-tablet .hero--center .lead { margin-inline: auto; }
html.device-mobile .hero--center .hero-cta,
html.device-tablet .hero--center .hero-cta { justify-content: center; }
html.device-mobile .hero--center .wrap > .faint,
html.device-tablet .hero--center .wrap > .faint {
  margin-inline: auto;
  text-align: center;
}
html.device-mobile .hero--center .hero-bg .hero-video,
html.device-mobile .hero--center .hero-bg .hero-img,
html.device-tablet .hero--center .hero-bg .hero-video,
html.device-tablet .hero--center .hero-bg .hero-img {
  object-position: center 30%;
}
html.device-mobile .hero--center .hero-bg .hero-video,
html.device-mobile .hero--center .hero-bg .hero-img {
  object-position: center 26%;
}
html.device-mobile .hero--center .hero-bg::after,
html.device-tablet .hero--center .hero-bg::after {
  background:
    linear-gradient(180deg, rgba(11,11,12,.38) 0%, rgba(11,11,12,.2) 32%, rgba(11,11,12,.68) 72%, var(--bg) 100%),
    radial-gradient(ellipse 90% 70% at 50% 35%, rgba(11,11,12,.52), transparent 72%);
}
html.device-mobile .hero--center .hero-bg::after {
  background:
    linear-gradient(180deg, rgba(11,11,12,.48) 0%, rgba(11,11,12,.3) 30%, rgba(11,11,12,.72) 70%, var(--bg) 100%),
    radial-gradient(ellipse 100% 65% at 50% 30%, rgba(11,11,12,.58), transparent 75%);
}

html.device-desktop .hero--center .wrap,
html.device-wide .hero--center .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 22rem);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: center;
  text-align: left;
  max-width: min(72rem, 100%);
}
html.device-wide .hero--center .wrap {
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 24rem);
  max-width: min(78rem, 100%);
}
html.device-desktop .hero--center .wrap > .eyebrow,
html.device-desktop .hero--center .wrap > h1,
html.device-desktop .hero--center .wrap > .lead,
html.device-desktop .hero--center .wrap > .hero-cta,
html.device-desktop .hero--center .wrap > .faint,
html.device-wide .hero--center .wrap > .eyebrow,
html.device-wide .hero--center .wrap > .lead,
html.device-wide .hero--center .wrap > h1,
html.device-wide .hero--center .wrap > .hero-cta,
html.device-wide .hero--center .wrap > .faint {
  grid-column: 1; text-align: left; margin-inline: 0;
}
html.device-desktop .hero--center .hero-cta,
html.device-wide .hero--center .hero-cta { justify-content: flex-start; }
html.device-desktop .hero--center .wrap > .inbox-preview,
html.device-wide .hero--center .wrap > .inbox-preview {
  grid-column: 2; grid-row: 1 / span 6; align-self: center;
  margin: 0; max-width: none; width: 100%;
}
html.device-desktop .hero--center .hero-bg .hero-video,
html.device-desktop .hero--center .hero-bg .hero-img,
html.device-wide .hero--center .hero-bg .hero-video,
html.device-wide .hero--center .hero-bg .hero-img {
  object-position: 62% 30%;
}
html.device-desktop .hero--center .hero-bg::after,
html.device-wide .hero--center .hero-bg::after {
  background:
    linear-gradient(180deg, rgba(11,11,12,.32) 0%, rgba(11,11,12,.12) 30%, rgba(11,11,12,.62) 75%, var(--bg) 100%),
    linear-gradient(95deg, rgba(11,11,12,.58) 0%, rgba(11,11,12,.18) 42%, transparent 68%);
}

/* Tablet: hero stays centered but inbox preview can sit beside CTA row */
html.device-tablet .hero--center .wrap {
  max-width: min(40rem, 100%);
}
html.device-tablet .inbox-preview { max-width: 24rem; }

/* Footer: full columns on desktop */
html.device-desktop .footer .cols,
html.device-wide .footer .cols {
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}
html.device-desktop .footer--center .cols,
html.device-wide .footer--center .cols {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  justify-content: stretch; text-align: left; gap: 2rem 2.5rem;
}
html.device-desktop .footer--center .legal,
html.device-wide .footer--center .legal { text-align: left; margin-inline: 0; max-width: none; }

/* Article / scholarly reading measure (~65ch) */
html.device-desktop .ref-lede,
html.device-desktop .ref-section p,
html.device-desktop .narrow,
html.device-wide .ref-lede,
html.device-wide .ref-section p,
html.device-wide .narrow {
  max-width: min(42rem, 100%);
}
html.device-desktop .shell,
html.device-wide .shell {
  width: min(var(--maxw), 100%);
}

/* Pay hero + methods: breathing room on Mac */
html.device-desktop .pay-hero .display,
html.device-wide .pay-hero .display {
  max-width: 18ch;
}
html.device-desktop .pay-grid,
html.device-wide .pay-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

/* Demo / research grids use full width on desktop */
html.device-desktop .demo-media-grid,
html.device-wide .demo-media-grid {
  grid-template-columns: minmax(0, .72fr) minmax(280px, .38fr);
  gap: 1.25rem;
}
html.device-desktop .persona-grid,
html.device-desktop .trust-grid,
html.device-desktop .demo-flow,
html.device-wide .persona-grid,
html.device-wide .trust-grid,
html.device-wide .demo-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.device-desktop .research-grid,
html.device-wide .research-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Benefits + video tiles: 3-up on tablet landscape and desktop */
html.device-tablet .benefits,
html.device-tablet .video-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.device-tablet .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.device-tablet .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Proof strip: horizontal scroll only on compact phones */
html.device-mobile .proof-strip {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
html.device-mobile .proof-strip::-webkit-scrollbar { display: none; }
html.device-desktop .proof-strip,
html.device-tablet .proof-strip,
html.device-wide .proof-strip {
  flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0;
}

/* Nav: desktop keeps links inline at >=768px (aligned with jms-adaptive.js) */
@media (min-width: 768px) {
  .nav-toggle-box ~ .nav-links {
    order: unset; flex-basis: auto; flex-direction: row; align-items: center;
    max-height: none; overflow: visible; gap: clamp(1rem, 2.4vw, 2rem);
  }
  .nav-toggle-box ~ .nav-links a:not(.btn) {
    display: inline; padding: 0; border-top: none; font-size: .92rem;
  }
  .nav-toggle-box ~ .nav-links .btn { margin: 0; }
  .nav-toggle { display: none; }
  .nav .wrap { flex-wrap: nowrap; height: 60px; }
}