/* ============================================================
   MAGICSHIFT / 2026
   International typography, linen field, anthracite instruments.
   The geometry is structural: one-pixel rules throughout.
   ============================================================ */

:root {
  --linen: #F0ECE3;
  --paper: #F8F5EE;
  --paper-2: #FCFAF5;
  --sand: #E6E0D4;
  --shell: #D5CFC3;
  --ink: #242729;
  --ink-2: #4A4E50;
  --ink-3: #7A7E80;
  --rule: rgba(36,39,41,.20);
  --rule-soft: rgba(36,39,41,.09);
  --rule-dark: rgba(36,39,41,.52);
  --coral: #E33E1B;
  --teal: #168A79;
  --blue: #2859E6;
  --yellow: #E4A40C;
  --violet: #8B49C8;
  --night: #202426;
  --max: 1360px;
  --pad: clamp(1.1rem, 3.6vw, 3.4rem);
  --ease: cubic-bezier(.2,.72,.18,1);
  --block-shadow-1: 1px 1px 2px rgba(36,39,41,.032);
  --block-shadow-2: 1.5px 2px 7px rgba(36,39,41,.045);
  --block-shadow-3: 2px 3px 10px rgba(36,39,41,.055);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: only light;
}

* { box-sizing: border-box; }
html { color-scheme: only light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  html, body { background: var(--linen); color: var(--ink); forced-color-adjust: none; }
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: rgba(227,62,27,.2); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }

.container { width: min(calc(100% - (var(--pad) * 2)), var(--max)); margin-inline: auto; }
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.skip-link {
  position: fixed; top:.75rem; left:.75rem; z-index:10000;
  transform: translateY(-160%); background:var(--ink); color:var(--paper);
  padding:.7rem 1rem; font:500 .68rem/1 var(--mono); letter-spacing:.1em;
}
.skip-link:focus { transform:none; }
main { overflow: hidden; }

/* ---------- Shared type ---------- */
.precision-label, .section-kicker, .eyebrow, .card-code,
.crumbs, .article-meta, .footer-label, .guide-tier__label {
  font:500 .64rem/1.35 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.precision-label { display:flex; flex-wrap:wrap; gap:1.1rem; color:var(--ink-3); }
.precision-label span:first-child { color:var(--coral); }
.display-title {
  margin:0;
  max-width: 12ch;
  font-family:var(--sans);
  font-size:clamp(3.5rem, 7.3vw, 7.75rem);
  font-weight:600;
  line-height:.88;
  letter-spacing:-.068em;
}
.display-title em { color:var(--ink-2); font-style:normal; font-weight:400; }

.section { position:relative; padding:clamp(4.6rem, 8vw, 8rem) 0; }
.section--tight { padding:clamp(3.4rem, 6vw, 5.8rem) 0; }
.section--sand { background:var(--sand); border-block:1px solid var(--rule); }
.section--paper { background:var(--paper); border-block:1px solid var(--rule); }
.section--grid::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--rule-soft) 25%, transparent calc(25% + .5px),
                           transparent calc(50% - .5px), var(--rule-soft) 50%, transparent calc(50% + .5px),
                           transparent calc(75% - .5px), var(--rule-soft) 75%, transparent calc(75% + .5px));
}
.section-heading {
  display:grid;
  grid-template-columns:minmax(150px,.29fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  margin-bottom:clamp(2.4rem,5vw,4.8rem);
  position:relative;
}
.section-kicker { color:var(--ink-3); display:flex; align-items:center; gap:.75rem; }
.section-kicker::before { content:""; width:22px; height:1px; background:var(--coral); }
.section-heading__body { max-width:66ch; }
.section-heading h2, .page-hero h1 {
  margin:0;
  max-width:15ch;
  font-family:var(--sans);
  font-size:clamp(2.35rem,4.5vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:600;
}
.section-heading__body > h2 { margin-bottom:1.2rem; }
.section-heading__body p { margin:0 0 1rem; max-width:58ch; color:var(--ink-2); font-size:clamp(1rem,1.25vw,1.14rem); }
.section-heading__body p:last-child { margin-bottom:0; }
.rule { height:1px; border:0; margin:0; background:var(--rule); }

/* ---------- Header / primary design statement ---------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(240,236,227,.92);
  -webkit-backdrop-filter:blur(18px) saturate(110%);
  backdrop-filter:blur(18px) saturate(110%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled { background:rgba(240,236,227,.975); border-bottom-color:var(--rule); }
.utility-line { border-bottom:1px solid var(--rule-soft); }
.utility-line__inner {
  min-height:30px; display:flex; justify-content:space-between; align-items:center;
  padding-left:118px;
  font:500 .59rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.utility-line__status { display:flex; align-items:center; gap:.55rem; }
.utility-line__status i { width:6px; height:6px; border:0; border-radius:0; background:var(--teal); }
.utility-line__status i::after { display:none; }
.nav-shell { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-flex; align-items:center; gap:1rem; min-width:0; }
.brand__instrument {
  width:96px; height:96px; flex:0 0 96px;
  position:relative; display:grid; place-items:center;
  margin-top:-30px; margin-bottom:-12px;
  background:var(--linen);
  border-inline:1px solid var(--rule);
  overflow:visible;
}
.brand__mark { width:96px; height:96px; transition:transform .75s var(--ease); }
.brand__instrument:hover .brand__mark { transform:rotate(22.5deg); }
.brand__coordinate {
  position:absolute; right:5px; bottom:5px; color:var(--ink-3);
  font:500 .43rem/1 var(--mono); letter-spacing:.08em;
}
.brand__wordmark { display:grid; gap:.28rem; line-height:1; white-space:nowrap; }
.brand__wordmark > span { font-size:1.02rem; font-weight:700; letter-spacing:-.035em; }
.brand__wordmark b { font:500 .5rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.primary-nav { display:flex; align-items:center; gap:clamp(.8rem,1.8vw,1.8rem); }
.primary-nav a {
  position:relative; color:var(--ink-2);
  font:500 .66rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  transition:color .22s var(--ease);
}
.primary-nav a:not(.nav-action)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-.72rem; height:1px; background:var(--coral);
  transition:right .28s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color:var(--ink); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { right:0; }
.nav-action {
  min-height:42px; padding:0 1rem; display:inline-flex; align-items:center; gap:.75rem;
  border:1px solid var(--ink); color:var(--ink)!important; background:transparent;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.nav-action:hover { background:var(--ink); color:var(--paper)!important; }
.nav-action span { color:var(--coral); }
.nav-action::after { display:none!important; }
.nav-toggle { display:none; width:44px; height:44px; padding:0; border:1px solid var(--rule); background:transparent; }
.nav-toggle span { display:block; width:20px; height:1px; margin:5px auto; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ---------- Home hero ---------- */
.home-hero {
  position:relative; min-height:min(860px, calc(100vh - 114px));
  display:flex; align-items:center;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--rule-soft) 25%, transparent calc(25% + .5px),
                           transparent calc(50% - .5px), var(--rule-soft) 50%, transparent calc(50% + .5px),
                           transparent calc(75% - .5px), var(--rule-soft) 75%, transparent calc(75% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), var(--rule-soft) 50%, transparent calc(50% + .5px));
}
.hero-layout {
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(410px,.85fr);
  gap:clamp(2rem,4vw,5rem); align-items:center;
  padding-block:clamp(4rem,8vw,7rem);
}
.hero-copy > .precision-label { margin-bottom:clamp(1.5rem,3vw,2.6rem); }
.hero-copy .display-title { margin-bottom:1.7rem; }
.hero-copy > p { margin:0 0 2rem; max-width:57ch; color:var(--ink-2); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.52; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-proof {
  display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.hero-proof span { min-height:58px; display:flex; align-items:center; gap:.65rem; padding:0 1rem; border-right:1px solid var(--rule); font-size:.78rem; color:var(--ink-2); }
.hero-proof span:first-child { padding-left:0; }
.hero-proof span:last-child { border-right:0; }
.hero-proof b { font:500 .55rem/1 var(--mono); color:var(--coral); letter-spacing:.1em; }

/* ---------- Buttons ---------- */
.button {
  min-height:50px; padding:0 1.35rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font:500 .66rem/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  transition:background .24s var(--ease), color .24s var(--ease), transform .24s var(--ease);
}
.button:hover { transform:translateY(-2px); }
.button span { transition:transform .24s var(--ease); }
.button:hover span { transform:translateX(4px); }
.button--primary { background:var(--ink); color:var(--paper); }
.button--primary:hover { background:#080909; }
.button--primary span { color:var(--yellow); }
.button--dark { background:transparent; }
.button--dark:hover { background:var(--ink); color:var(--paper); }
.button--quiet { border-color:var(--rule-dark); background:rgba(248,245,238,.42); }
.button--quiet:hover { background:var(--paper); }
.text-link {
  display:inline-flex; align-items:center; gap:.5rem; padding-bottom:.3rem;
  border-bottom:1px solid var(--coral);
  font:500 .65rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transition:gap .23s var(--ease), color .23s var(--ease);
}
.text-link:hover { gap:.8rem; color:var(--coral); }

/* ---------- Interior page hero ---------- */
.page-hero {
  position:relative; min-height:clamp(330px,48vw,560px);
  display:flex; align-items:flex-end;
  padding:clamp(4.2rem,8vw,7rem) 0 clamp(3rem,5vw,4.8rem);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.page-hero .container { position:relative; z-index:2; }
.crumbs { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:clamp(1.4rem,3vw,2.4rem); color:var(--ink-3); }
.crumbs a:hover { color:var(--coral); }
.page-hero h1 { max-width:15ch; }
.page-hero > .container > p { margin:1.35rem 0 0; max-width:58ch; color:var(--ink-2); font-size:clamp(1rem,1.45vw,1.25rem); }
.page-hero__meta { display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:2rem; color:var(--ink-3); font:500 .61rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.page-hero__meta span { display:flex; align-items:center; gap:.55rem; }
.page-hero__meta span::before { content:""; width:5px; height:5px; border:0; border-radius:0; background:var(--teal); }

/* ---------- Cards and grids ---------- */
.capability-grid, .evidence-grid, .related-grid, .notes-grid, .library-grid {
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.library-grid { grid-auto-rows:1fr; }
@media (min-width:720px) {
  .capability-grid, .evidence-grid, .notes-grid, .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .related-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
}
@media (min-width:1040px) { .capability-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.capability-card, .evidence-card, .note-card, .related-card, .library-card {
  position:relative; min-width:0;
  background:var(--paper); padding:clamp(1.45rem,2.5vw,2.25rem);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.capability-card::after, .library-card::after {
  content:""; position:absolute; right:12px; top:12px; width:16px; height:4px; border:0; border-radius:0; background:var(--ink);
}
.capability-card:hover, .note-card:hover, .related-card:hover, .library-card:hover { background:var(--paper-2); }
.card-code { display:block; margin-bottom:clamp(2.4rem,4vw,4.5rem); color:var(--ink-3); }
.capability-card h3, .evidence-card h3, .note-card h3, .related-card h3, .library-card h3 {
  margin:0 0 .75rem; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.14; letter-spacing:-.025em; font-weight:600;
}
.capability-card p, .evidence-card p, .note-card p, .related-card p, .library-card p { margin:0; color:var(--ink-2); font-size:.95rem; }
.capability-card .text-link, .note-card .text-link, .library-card .text-link { margin-top:1.35rem; }
.note-card__meta, .library-card__meta { display:flex; gap:.9rem; margin-bottom:clamp(2rem,4vw,3.6rem); color:var(--ink-3); font:500 .58rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.capability-card:nth-child(5n+1) .card-code { color:var(--coral); }
.capability-card:nth-child(5n+2) .card-code { color:var(--teal); }
.capability-card:nth-child(5n+3) .card-code { color:var(--blue); }
.capability-card:nth-child(5n+4) .card-code { color:var(--yellow); }
.capability-card:nth-child(5n+5) .card-code { color:var(--violet); }

/* Guide levels */
.guide-tier + .guide-tier { margin-top:clamp(5rem,9vw,9rem); }
.guide-tier__head {
  display:grid; grid-template-columns:minmax(130px,.25fr) 1fr; gap:clamp(1.4rem,4vw,4rem);
  padding-bottom:1.6rem; margin-bottom:0; border-bottom:1px solid var(--rule);
}
.guide-tier__label { color:var(--ink-3); }
.guide-tier__head h2 { margin:0; font-size:clamp(2rem,4vw,4rem); line-height:.96; letter-spacing:-.05em; font-weight:600; max-width:16ch; }
.guide-tier__head p { margin:.8rem 0 0; max-width:58ch; color:var(--ink-2); }
.guide-tier .library-grid { border-top:0; }
.library-card--concept { background:rgba(248,245,238,.55); }
.library-card--concept .library-card__meta span:last-child { color:var(--teal); }
.library-card--advanced { min-height:290px; background:var(--night); color:var(--paper); }
.library-card--advanced p { color:rgba(248,245,238,.68); }
.library-card--advanced .library-card__meta { color:rgba(248,245,238,.45); }
.library-card--advanced .library-card__meta span:last-child { color:#E9B634; }
.library-card--advanced::after { border-color:rgba(248,245,238,.5); }
.library-card--advanced:hover { background:#151819; }
.guide-tier__note { margin:1.2rem 0 0; color:var(--ink-3); font-size:.82rem; }

/* ---------- Numbered rows ---------- */
.engagement-grid { display:grid; }
.engagement {
  display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.6rem;
  padding:clamp(1.7rem,3vw,2.6rem) 0; border-top:1px solid var(--rule);
}
.engagement:last-child { border-bottom:1px solid var(--rule); }
.engagement__number { padding-top:.35rem; color:var(--ink-3); font:500 .64rem/1 var(--mono); letter-spacing:.12em; }
.engagement:nth-child(5n+1) .engagement__number { color:var(--coral); }
.engagement:nth-child(5n+2) .engagement__number { color:var(--teal); }
.engagement:nth-child(5n+3) .engagement__number { color:var(--blue); }
.engagement:nth-child(5n+4) .engagement__number { color:var(--yellow); }
.engagement:nth-child(5n+5) .engagement__number { color:var(--violet); }
.engagement h3 { margin:0 0 .65rem; font-size:clamp(1.16rem,1.7vw,1.45rem); line-height:1.15; letter-spacing:-.028em; font-weight:600; }
.engagement p { margin:0; max-width:74ch; color:var(--ink-2); }

/* ---------- AI shift worker ---------- */
.shift-worker-section { background:var(--night); color:var(--paper); border-block:1px solid rgba(255,255,255,.14); overflow:hidden; }

.shift-worker-layout { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.95fr) minmax(340px,.75fr); gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.shift-worker-copy .section-kicker { color:rgba(248,245,238,.56); }
.shift-worker-copy h2 { margin:1.2rem 0 1.3rem; max-width:13ch; font-size:clamp(2.7rem,5vw,5.6rem); line-height:.91; letter-spacing:-.06em; font-weight:600; }
.shift-worker-copy > p { margin:0; max-width:58ch; color:rgba(248,245,238,.68); font-size:clamp(1rem,1.3vw,1.18rem); }
.shift-worker-copy .button { margin-top:2rem; border-color:rgba(248,245,238,.72); color:var(--paper); }
.shift-worker-copy .button:hover { background:var(--paper); color:var(--ink); }
.shift-worker-stack { border:1px solid rgba(248,245,238,.18); background:rgba(255,255,255,.025); }
.shift-worker-step { display:grid; grid-template-columns:58px 1fr; gap:1rem; padding:1.35rem; border-bottom:1px solid rgba(248,245,238,.14); }
.shift-worker-step:last-child { border-bottom:0; }
.shift-worker-step b { color:#E9B634; font:500 .58rem/1.3 var(--mono); letter-spacing:.12em; }
.shift-worker-step h3 { margin:0 0 .45rem; font-size:1.1rem; letter-spacing:-.02em; }
.shift-worker-step p { margin:0; color:rgba(248,245,238,.62); font-size:.9rem; }
.shift-worker-disclaimer { margin-top:1rem; color:rgba(248,245,238,.42); font:400 .58rem/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Prose / articles / sidebars ---------- */
.two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.35fr); gap:clamp(2.2rem,6vw,5.5rem); align-items:start; }
.prose { max-width:69ch; }
.prose h2 { margin:0 0 1.2rem; font-size:clamp(2rem,3.6vw,3.45rem); line-height:.98; letter-spacing:-.05em; font-weight:600; }
.prose h3 { margin:2.4rem 0 .7rem; font-size:1.25rem; line-height:1.15; letter-spacing:-.025em; font-weight:600; }
.prose p { margin:0 0 1.15rem; color:var(--ink-2); }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--ink); font-weight:600; }
.prose ul, .prose ol { margin:0 0 1.2rem; padding-left:1.15rem; color:var(--ink-2); }
.prose li { margin-bottom:.55rem; }
.prose li::marker { color:var(--coral); }
.prose blockquote { margin:1.8rem 0; padding:.2rem 0 .2rem 1.35rem; border-left:1px solid var(--coral); color:var(--ink); font-size:1.18rem; font-weight:500; }
.prose a:not(.button):not(.text-link), .article a:not(.button):not(.text-link) { border-bottom:1px solid var(--rule-dark); }
.prose a:not(.button):not(.text-link):hover, .article a:not(.button):not(.text-link):hover { color:var(--coral); border-color:var(--coral); }
.prose code, .article code { font:500 .88em/1 var(--mono); background:var(--sand); padding:.15em .4em; }
.sidebar-panel { background:var(--paper); border:1px solid var(--rule); padding:clamp(1.4rem,2.5vw,2rem); }
.sidebar-panel h3 { margin:0 0 1.1rem; font-size:1rem; font-weight:600; }
.data-list { margin:0; display:grid; }
.data-list > div { display:grid; gap:.2rem; padding:.9rem 0; border-top:1px solid var(--rule-soft); }
.data-list > div:first-child { border-top:0; padding-top:0; }
.data-list dt { color:var(--ink-3); font:500 .58rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.data-list dd { margin:0; font-size:.92rem; }

.article-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.3fr); gap:clamp(2.2rem,6vw,5.5rem); align-items:start; }
.article { max-width:70ch; }
.article > p:first-of-type { color:var(--ink); font-size:1.12rem; }
.article h2 { margin:3rem 0 1rem; padding-top:1.7rem; border-top:1px solid var(--rule); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1; letter-spacing:-.045em; font-weight:600; }
.article h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.article h3 { margin:2rem 0 .65rem; font-size:1.2rem; line-height:1.18; font-weight:600; }
.article p { margin:0 0 1.15rem; color:var(--ink-2); }
.article strong { color:var(--ink); }
.article ul, .article ol { margin:0 0 1.3rem; padding-left:1.15rem; color:var(--ink-2); }
.article li { margin-bottom:.55rem; }
.article li::marker { color:var(--coral); }
.article blockquote { margin:1.9rem 0; padding:.2rem 0 .2rem 1.35rem; border-left:1px solid var(--teal); color:var(--ink); font-size:1.2rem; font-weight:500; }
.article-meta { display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:1.6rem; color:var(--ink-3); }
.article-aside { position:sticky; top:128px; }
.article-aside nav { display:grid; margin-top:.9rem; }
.article-aside nav a { padding:.7rem 0; border-top:1px solid var(--rule-soft); color:var(--ink-2); font:500 .61rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.article-aside nav a:hover { color:var(--coral); }

.faq-list { border-top:1px solid var(--rule); }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-item h3 { margin:0; padding:1.4rem 0 .15rem; font-size:1.08rem; line-height:1.2; letter-spacing:-.02em; font-weight:600; }
.faq-answer { padding-bottom:1.35rem; }
.faq-answer p { margin:.55rem 0 0; max-width:68ch; color:var(--ink-2); }

.timeline { display:grid; }
.timeline-row { display:grid; grid-template-columns:minmax(130px,.2fr) 1fr; gap:1.8rem; padding:1.7rem 0; border-top:1px solid var(--rule); }
.timeline-row:last-child { border-bottom:1px solid var(--rule); }
.timeline-row__date { padding-top:.3rem; color:var(--ink-3); font:500 .61rem/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.timeline-row h3 { margin:0 0 .45rem; font-size:1.15rem; font-weight:600; }
.timeline-row p { margin:0; max-width:62ch; color:var(--ink-2); }

/* ---------- CTA ---------- */
.cta-panel {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
  padding:clamp(2rem,4vw,3.2rem); background:var(--paper); border:1px solid var(--ink);
}

.cta-panel > * { position:relative; z-index:2; }
.cta-panel h2 { margin:.7rem 0 .65rem; max-width:18ch; font-size:clamp(1.8rem,3vw,3rem); line-height:.98; letter-spacing:-.045em; font-weight:600; }
.cta-panel p { margin:0; max-width:55ch; color:var(--ink-2); }

/* ---------- Forms ---------- */
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.36fr); gap:clamp(2.2rem,6vw,5rem); align-items:start; }
.contact-form { display:grid; gap:1.25rem; }
.field { display:grid; gap:.48rem; }
.field label { color:var(--ink-2); font:500 .61rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.field input, .field select, .field textarea { width:100%; padding:.9rem .95rem; border:1px solid var(--rule-dark); background:var(--paper); color:var(--ink); font-size:.96rem; border-radius:0; }
.field textarea { min-height:9rem; resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--coral); }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-3); }
.field--full { grid-column:1/-1; }
.form-note { color:var(--ink-3); font-size:.84rem; }
.form-footer { display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background:var(--sand); border-top:1px solid var(--rule); }
.footer-main { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(1.7rem,4vw,3.6rem); padding:clamp(4rem,7vw,6.5rem) 0; }
.brand--footer .brand__instrument { width:74px; height:74px; flex-basis:74px; margin:0; background:transparent; border:1px solid var(--rule); }
.brand--footer .brand__mark { width:74px; height:74px; }
.brand--footer .brand__core, .brand--footer .brand__coordinate { display:none; }
.footer-brand p { margin:1.3rem 0 1.4rem; max-width:38ch; color:var(--ink-2); font-size:.93rem; }
.footer-sibling { display:inline-grid; gap:.2rem; color:var(--ink-3); font:500 .56rem/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.footer-sibling span { color:var(--ink); }
.footer-sibling:hover span { color:var(--coral); }
.footer-column { display:grid; align-content:start; gap:.65rem; }
.footer-label { margin-bottom:.4rem; color:var(--ink-3); }
.footer-column a, .footer-column span { color:var(--ink-2); font-size:.92rem; }
.footer-column a:hover { color:var(--coral); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.4rem 0; border-top:1px solid var(--rule); color:var(--ink-3); font:500 .59rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity:1; transform:none; }
.js [data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .72s var(--ease), transform .72s var(--ease); }
.js [data-reveal].is-visible { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .primary-nav { gap:.85rem; }
  .primary-nav a { font-size:.6rem; }
  .hero-layout { grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); }
}

/* Generated block fields — snapped to a grid so they feel algorithmic, not decorative. */
.algo-block-field {
  position:absolute; pointer-events:none; z-index:1; isolation:isolate;
}
.algo-block-field--hero { right:0; top:18%; width:min(40vw,560px); height:55%; }
.algo-block-field--shift { right:3%; top:14%; width:min(32vw,430px); height:72%; }
.algo-block-field--cta { right:3%; top:18%; width:min(30vw,250px); height:64%; z-index:0; }
.algo-block,
.algo-link,
.swiss-composition__block {
  transform:translateZ(0);
  will-change:opacity, transform, filter, left, top, width, height;
  transition:left .26s var(--ease), top .26s var(--ease), width .26s var(--ease), height .26s var(--ease), opacity .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.algo-block {
  position:absolute; display:block; border-radius:0;
  box-shadow:var(--block-shadow-1), var(--block-shadow-2);
  pointer-events:auto;
}
@media (hover:hover) and (pointer:fine) {
  .algo-block,
  .swiss-composition__block { cursor:crosshair; }
}
.algo-block[data-elev="2"] { box-shadow:var(--block-shadow-2); }
.algo-block[data-elev="3"] { box-shadow:var(--block-shadow-3); }
.algo-block--ink { background:var(--ink); }
.algo-block--coral { background:var(--coral); }
.algo-block--teal { background:var(--teal); }
.algo-block--blue { background:var(--blue); }
.algo-block--yellow { background:var(--yellow); }
.algo-block-field--shift .algo-block--yellow { background:#E9B634; }
.algo-block-field--shift .algo-block,
.algo-block-field--cta .algo-block { opacity:.96; }
.algo-block-field--cta .algo-block--ink { background:rgba(36,39,41,.92); }
.algo-link {
  position:absolute; display:block; background:rgba(36,39,41,.13);
}
.algo-link--h { height:1px; }
.algo-link--v { width:1px; }
.algo-link[data-tone="dark"] { background:rgba(36,39,41,.19); }
.algo-link[data-tone="soft"] { background:rgba(36,39,41,.09); }
.algo-link[data-tone="light"] { background:rgba(248,245,238,.16); }
.algo-block.is-hidden,
.algo-link.is-hidden,
.swiss-composition__block.is-hidden {
  opacity:.02 !important;
}
.algo-block.is-glitching,
.algo-link.is-glitching,
.swiss-composition__block.is-glitching {
  animation:algoGlitch var(--glitch-duration, 1.35s) cubic-bezier(.22,.74,.18,1);
}
@keyframes algoGlitch {
  0% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
  10% {
    opacity:.92;
    transform:translate3d(-1px,0,0) skewX(-8deg) scaleX(1.03);
    filter:
      drop-shadow(-1px 0 0 rgba(255,68,178,.9))
      drop-shadow(1px 0 0 rgba(0,238,255,.9))
      saturate(1.35);
  }
  18% {
    opacity:.55;
    transform:translate3d(2px,-1px,0) skewX(10deg) scaleY(.98);
    filter:
      drop-shadow(-2px 0 0 rgba(255,95,109,.95))
      drop-shadow(2px 0 0 rgba(0,220,255,.95))
      drop-shadow(0 0 5px rgba(184,88,255,.45))
      hue-rotate(-8deg) saturate(1.55);
  }
  28% {
    opacity:.12;
    transform:translate3d(-3px,1px,0) skewY(6deg) scaleX(.97);
    filter:
      drop-shadow(-3px 0 0 rgba(255,71,163,1))
      drop-shadow(3px 0 0 rgba(49,247,255,1))
      drop-shadow(0 0 9px rgba(140,80,255,.55));
  }
  40% {
    opacity:0;
    transform:translate3d(2px,0,0) scale(.96);
    filter:
      drop-shadow(-4px 0 0 rgba(255,79,174,.95))
      drop-shadow(4px 0 0 rgba(53,239,255,.95));
  }
  56% {
    opacity:.08;
    transform:translate3d(-2px,0,0) skewX(-12deg) scaleX(1.04);
    filter:
      drop-shadow(-4px 0 0 rgba(255,84,186,.95))
      drop-shadow(4px 0 0 rgba(37,240,255,.95))
      drop-shadow(0 0 10px rgba(95,68,255,.5))
      saturate(1.7);
  }
  70% {
    opacity:.82;
    transform:translate3d(1px,0,0) skewX(8deg) scale(1.01);
    filter:
      drop-shadow(-2px 0 0 rgba(255,85,170,.8))
      drop-shadow(2px 0 0 rgba(70,240,255,.8))
      drop-shadow(0 0 6px rgba(116,78,255,.35));
  }
  84% {
    opacity:.95;
    transform:translate3d(-1px,0,0) scale(1);
    filter:
      drop-shadow(-1px 0 0 rgba(255,98,187,.5))
      drop-shadow(1px 0 0 rgba(60,231,255,.5));
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
}


/* ---------- Creative generation / small AI studio ---------- */
.creative-engine-section {
  position:relative; overflow:hidden; background:var(--paper);
}
.creative-engine-section::before {
  content:"IMAGE / SOUND"; position:absolute; z-index:0;
  right:clamp(1rem,4vw,4rem); top:clamp(2rem,6vw,5rem);
  color:rgba(36,39,41,.035); white-space:nowrap; pointer-events:none;
  font:700 clamp(4.2rem,10vw,10rem)/.75 var(--sans); letter-spacing:-.08em;
}
.creative-engine-section > .container { position:relative; z-index:1; }
.creative-engine-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.creative-engine-card {
  position:relative; min-height:290px; padding:clamp(1.5rem,3vw,2.7rem);
  background:rgba(252,250,245,.94); overflow:hidden;
}
.creative-engine-card::after {
  content:""; position:absolute; right:0; top:0; width:clamp(34px,4vw,58px); height:7px;
  background:var(--coral); box-shadow:var(--block-shadow-1);
}
.creative-engine-card:nth-child(2)::after { background:var(--teal); width:clamp(54px,7vw,96px); }
.creative-engine-card:nth-child(3)::after { background:var(--blue); width:clamp(22px,3vw,42px); }
.creative-engine-card h3 { margin:0 0 .9rem; max-width:15ch; font-size:clamp(1.35rem,2.1vw,2rem); line-height:1.05; letter-spacing:-.035em; }
.creative-engine-card p { margin:0; max-width:40ch; color:var(--ink-2); }
.creative-engine-cta {
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding:clamp(1.6rem,3vw,2.8rem) 0 0; margin-top:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid var(--rule);
}
.creative-engine-cta h3 { margin:0 0 .45rem; font-size:clamp(1.3rem,2vw,1.9rem); letter-spacing:-.025em; }
.creative-engine-cta p { margin:0; max-width:62ch; color:var(--ink-2); }
.creative-engine-cta .button { flex:0 0 auto; }

@media (max-width:940px) {
  .creative-engine-grid { grid-template-columns:1fr; }
  .creative-engine-card { min-height:0; }
  .utility-line__inner { padding-left:94px; }
  .brand__instrument { width:78px; height:78px; flex-basis:78px; margin-top:-26px; margin-bottom:-8px; }
  .brand__mark { width:78px; height:78px; }
  .nav-toggle { display:block; }
  .primary-nav {
    position:absolute; left:0; right:0; top:100%; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 0; background:var(--paper); border-block:1px solid var(--rule);
  }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { padding:.95rem var(--pad); font-size:.66rem; }
  .primary-nav a:not(.nav-action)::after { display:none; }
  .nav-action { margin:.5rem var(--pad); justify-content:center; }
  .nav-shell { position:relative; }
  .hero-layout { grid-template-columns:1fr; }
  .section-heading, .guide-tier__head { grid-template-columns:1fr; gap:1rem; }
  .section-heading h2, .page-hero h1 { max-width:none; }
  .two-column, .article-shell, .contact-layout, .shift-worker-layout { grid-template-columns:1fr; }
  .article-aside { position:static; }
  .footer-main { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-column:last-child { grid-column:2/4; }
}
@media (max-width:720px) {
  .creative-engine-cta { align-items:stretch; flex-direction:column; }
  .creative-engine-cta .button { align-self:flex-start; }
  .utility-line__inner > span:first-child { display:none; }
  .utility-line__inner { justify-content:flex-end; padding-left:0; }
  .nav-shell { min-height:72px; }
  .brand__wordmark > span { font-size:.92rem; }
  .brand__wordmark b { font-size:.44rem; }
  .brand__instrument { width:66px; height:66px; flex-basis:66px; margin-top:-24px; margin-bottom:-6px; }
  .brand__mark { width:66px; height:66px; }
  .brand__core { width:20px; height:20px; }
  .brand__core b { display:none; }
  .home-hero { min-height:auto; }
  .hero-layout { padding-block:4rem 5rem; }
  .display-title { font-size:clamp(3.2rem,16vw,5.25rem); }
  .hero-proof { display:grid; grid-template-columns:1fr; }
  .hero-proof span { padding:0; border-right:0; border-bottom:1px solid var(--rule); }
  .hero-proof span:last-child { border-bottom:0; }
  .page-hero .container::after { display:none; }
  .engagement { grid-template-columns:2.8rem 1fr; gap:.9rem; }
  .timeline-row { grid-template-columns:1fr; gap:.5rem; }
  .cta-panel { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .footer-column:last-child { grid-column:auto; }
}
@media (max-width:520px) {
  .brand { gap:.65rem; }
  .brand__instrument { width:58px; height:58px; flex-basis:58px; }
  .brand__mark { width:58px; height:58px; }
  .brand__wordmark b { display:none; }
  .nav-toggle { width:40px; height:40px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .button { width:100%; }
  .footer-main { grid-template-columns:1fr; }
  .footer-brand, .footer-column:last-child { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* ============================================================
   V4 / SWISS BLOCK FIELD
   Concentric geometry is reserved for the honest-map page only.
   Everywhere else: cropped typography, asymmetric blocks, one-pixel rules.
   ============================================================ */

/* Header mark: a compact typographic flag, not an instrument dial. */
.utility-line__status i {
  width:6px; height:6px; border:0; border-radius:0; background:var(--teal);
}
.utility-line__status i::after { display:none; }
.brand__instrument {
  background:var(--ink); border:0; overflow:hidden;
}
.brand__mark { transition:transform .45s var(--ease); }
.brand__instrument:hover .brand__mark { transform:translateX(4px); }
.brand__coordinate {
  right:5px; bottom:4px; padding:2px 3px;
  background:var(--ink); color:rgba(248,245,238,.55);
}
.brand--footer .brand__instrument { background:var(--ink); border:0; }

/* Home: a static Swiss composition. The tiny yellow register is the easter egg. */
.swiss-composition {
  position:relative; justify-self:end;
  width:min(43vw,590px); aspect-ratio:1;
  overflow:hidden; isolation:isolate;
  background:rgba(248,245,238,.52);
  border:1px solid var(--rule);
}
.swiss-composition::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--rule-soft) 25%, transparent calc(25% + .5px),
                           transparent calc(50% - .5px), var(--rule-soft) 50%, transparent calc(50% + .5px),
                           transparent calc(75% - .5px), var(--rule-soft) 75%, transparent calc(75% + .5px)),
    linear-gradient(0deg, transparent calc(25% - .5px), var(--rule-soft) 25%, transparent calc(25% + .5px),
                          transparent calc(50% - .5px), var(--rule-soft) 50%, transparent calc(50% + .5px),
                          transparent calc(75% - .5px), var(--rule-soft) 75%, transparent calc(75% + .5px));
}
.swiss-composition__type {
  position:absolute; z-index:4; margin:0; font-weight:700; line-height:.72;
  letter-spacing:-.13em; user-select:none;
}
.swiss-composition__type--m {
  left:-4%; top:5%; font-size:clamp(13rem,24vw,22rem); color:var(--ink);
}
.swiss-composition__type--s {
  right:-4%; bottom:-7%; font-size:clamp(12rem,22vw,20rem);
  color:transparent; -webkit-text-stroke:1px rgba(36,39,41,.52);
}
.swiss-composition__word {
  position:absolute; z-index:4; right:4.5%; top:4%; writing-mode:vertical-rl;
  font:600 clamp(1.1rem,2vw,1.8rem)/1 var(--sans); letter-spacing:.22em;
}
.swiss-composition__note {
  position:absolute; z-index:4; font:500 .54rem/1.35 var(--mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.swiss-composition__note--a { left:4%; bottom:4%; }
.swiss-composition__note--b { right:14%; top:52%; transform:rotate(-90deg); transform-origin:right top; }
.swiss-composition__block {
  position:absolute; z-index:2; box-shadow:var(--block-shadow-2);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.swiss-composition__block--ink { right:18%; top:18%; width:30%; height:11%; background:var(--ink); }
.swiss-composition__block--coral { left:37%; top:45%; width:49%; height:4.5%; background:var(--coral); }
.swiss-composition__block--teal { left:9%; top:68%; width:20%; height:8%; background:var(--teal); }
.swiss-composition__block--blue { right:4%; bottom:15%; width:8%; height:25%; background:var(--blue); }
.swiss-composition__block--yellow {
  left:51%; bottom:6%; width:18px; height:18px; background:var(--yellow); cursor:help;
  box-shadow:var(--block-shadow-3); z-index:5;
}
.swiss-composition__block--yellow b {
  position:absolute; left:26px; bottom:0; width:23ch; padding:.65rem .75rem;
  background:var(--ink); color:var(--paper); font:500 .52rem/1.45 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; opacity:0; transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none;
}
.swiss-composition__block--yellow:hover b { opacity:1; transform:none; }
.swiss-composition:hover .swiss-composition__block { transform:translateY(-1px); box-shadow:var(--block-shadow-3); }
.swiss-composition__rule { position:absolute; z-index:1; background:var(--rule-dark); }
.swiss-composition__rule--x { left:0; right:0; top:61%; height:1px; }
.swiss-composition__rule--y { top:0; bottom:0; left:31%; width:1px; }

/* Interior heroes: large cropped type + quiet color-block notation. */
.page-hero::before {
  content:"MS"; position:absolute;
  width:auto; aspect-ratio:auto; border-radius:0;
  right:-.04em; top:50%; transform:translateY(-48%);
  background:none; opacity:1; pointer-events:none;
  color:rgba(36,39,41,.055);
  font:700 clamp(13rem,27vw,30rem)/.72 var(--sans);
  letter-spacing:-.14em; white-space:nowrap;
}
.page-hero::after { content:none; }
.page-hero .container::before {
  content:""; position:absolute; right:35%; top:16%; width:1px; height:68%;
  background:var(--rule); pointer-events:none;
}
.page-hero .container::after { content:"MS / TYPE FIELD"; }

body[data-page="start-here"] .page-hero::before { content:"01"; }
body[data-page="guides"] .page-hero::before { content:"G"; }
body[data-page="guide-your-first-week"] .page-hero::before { content:"01"; }
body[data-page="guide-what-to-ask-for"] .page-hero::before { content:"02"; }
body[data-page="guide-creative-work"] .page-hero::before { content:"03"; }
body[data-page="guide-keeping-things-private"] .page-hero::before { content:"04"; }
body[data-page="guide-build-your-voice-assistant"] .page-hero::before { content:"05"; }
body[data-page="guide-turn-a-project-into-a-system"] .page-hero::before { content:"06"; }
body[data-page="guide-private-library"] .page-hero::before { content:"07"; }
body[data-page="guide-connect-your-work"] .page-hero::before { content:"08"; }
body[data-page="example-local-ai"] .page-hero::before { content:"09"; }
body[data-page="example-ai-shift-worker"] .page-hero::before { content:"10"; }
body[data-page="example-creative-studio"] .page-hero::before { content:"11"; }
body[data-page="example-small-business-system"] .page-hero::before { content:"12"; }
body[data-page="sessions"] .page-hero::before { content:"24"; }
body[data-page="about"] .page-hero::before { content:"A"; }
body[data-page="answers"] .page-hero::before { content:"?"; }
body[data-page="contact"] .page-hero::before { content:"→"; }
body[data-page="privacy"] .page-hero::before { content:"P"; }
body[data-page="terms"] .page-hero::before { content:"T"; }
body[data-page="404"] .page-hero::before { content:"404"; }
body[data-page="what-ai-is-good-at"] .page-hero::before { content:"03"; }
body[data-page="what-ai-is-good-at"] .page-hero .container::after { content:"MS / MAP FIELD"; }

/* Replace every remaining decorative dot/dial with a square or bar. */
.page-hero__meta span::before {
  width:5px; height:5px; border:0; border-radius:0; background:var(--teal);
}
.capability-card::after, .library-card::after {
  width:16px; height:4px; border:0; border-radius:0; background:var(--ink);
}
.capability-card:nth-child(5n+1)::after, .library-card:nth-child(4n+1)::after { background:var(--coral); }
.capability-card:nth-child(5n+2)::after, .library-card:nth-child(4n+2)::after { background:var(--teal); }
.capability-card:nth-child(5n+3)::after, .library-card:nth-child(4n+3)::after { background:var(--blue); }
.capability-card:nth-child(5n+4)::after, .library-card:nth-child(4n+4)::after { background:var(--yellow); }
.library-card--advanced::after { background:#E9B634; }
.prose ul, .article ul { list-style-type:square; }

/* Cards now signal that every level is readable, not a placeholder. */
.library-card--concept .library-card__meta span:last-child { color:var(--teal); }
.library-card--advanced .text-link { color:var(--paper); border-color:#E9B634; }
.library-card--advanced .text-link:hover { color:#E9B634; }
.guide-tier__head { position:relative; }
.guide-tier__head::after {
  content:""; position:absolute; right:0; bottom:-1px; width:clamp(70px,10vw,145px); height:5px;
  background:var(--coral);
}
.guide-tier:nth-child(2) .guide-tier__head::after { background:var(--teal); }
.guide-tier:nth-child(3) .guide-tier__head::after { background:var(--blue); }

/* Dark section and CTA use typography/blocks rather than rings. */
.shift-worker-section::before {
  content:"24/7"; width:auto; aspect-ratio:auto; right:-.05em; top:50%;
  transform:translateY(-47%); border-radius:0; background:none; opacity:1;
  color:rgba(248,245,238,.055); font:700 clamp(14rem,27vw,29rem)/.72 var(--sans);
  letter-spacing:-.12em; white-space:nowrap;
}
.shift-worker-section::after { content:none; }
.cta-panel::after {
  content:"MS"; width:260px; height:180px; aspect-ratio:auto;
  right:-35px; top:50%; transform:translateY(-50%); border:0; border-radius:0; box-shadow:none;
  display:flex; align-items:center; justify-content:center; background:none;
  color:rgba(36,39,41,.075); font:700 9rem/.75 var(--sans); letter-spacing:-.12em;
}


/* Generated block fields — snapped to a grid so they feel algorithmic, not decorative. */
.algo-block-field {
  position:absolute; pointer-events:none; z-index:1; isolation:isolate;
}
.algo-block-field--hero { right:0; top:18%; width:min(40vw,560px); height:55%; }
.algo-block-field--shift { right:3%; top:14%; width:min(32vw,430px); height:72%; }
.algo-block-field--cta { right:3%; top:18%; width:min(30vw,250px); height:64%; z-index:0; }
.algo-block,
.algo-link,
.swiss-composition__block {
  transform:translateZ(0);
  will-change:opacity, transform, filter, left, top, width, height;
  transition:left .26s var(--ease), top .26s var(--ease), width .26s var(--ease), height .26s var(--ease), opacity .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.algo-block {
  position:absolute; display:block; border-radius:0;
  box-shadow:var(--block-shadow-1), var(--block-shadow-2);
  pointer-events:auto;
}
@media (hover:hover) and (pointer:fine) {
  .algo-block,
  .swiss-composition__block { cursor:crosshair; }
}
.algo-block[data-elev="2"] { box-shadow:var(--block-shadow-2); }
.algo-block[data-elev="3"] { box-shadow:var(--block-shadow-3); }
.algo-block--ink { background:var(--ink); }
.algo-block--coral { background:var(--coral); }
.algo-block--teal { background:var(--teal); }
.algo-block--blue { background:var(--blue); }
.algo-block--yellow { background:var(--yellow); }
.algo-block-field--shift .algo-block--yellow { background:#E9B634; }
.algo-block-field--shift .algo-block,
.algo-block-field--cta .algo-block { opacity:.96; }
.algo-block-field--cta .algo-block--ink { background:rgba(36,39,41,.92); }
.algo-link {
  position:absolute; display:block; background:rgba(36,39,41,.13);
}
.algo-link--h { height:1px; }
.algo-link--v { width:1px; }
.algo-link[data-tone="dark"] { background:rgba(36,39,41,.19); }
.algo-link[data-tone="soft"] { background:rgba(36,39,41,.09); }
.algo-link[data-tone="light"] { background:rgba(248,245,238,.16); }
.algo-block.is-hidden,
.algo-link.is-hidden,
.swiss-composition__block.is-hidden {
  opacity:.02 !important;
}
.algo-block.is-glitching,
.algo-link.is-glitching,
.swiss-composition__block.is-glitching {
  animation:algoGlitch var(--glitch-duration, 1.35s) cubic-bezier(.22,.74,.18,1);
}
@keyframes algoGlitch {
  0% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
  10% {
    opacity:.92;
    transform:translate3d(-1px,0,0) skewX(-8deg) scaleX(1.03);
    filter:
      drop-shadow(-1px 0 0 rgba(255,68,178,.9))
      drop-shadow(1px 0 0 rgba(0,238,255,.9))
      saturate(1.35);
  }
  18% {
    opacity:.55;
    transform:translate3d(2px,-1px,0) skewX(10deg) scaleY(.98);
    filter:
      drop-shadow(-2px 0 0 rgba(255,95,109,.95))
      drop-shadow(2px 0 0 rgba(0,220,255,.95))
      drop-shadow(0 0 5px rgba(184,88,255,.45))
      hue-rotate(-8deg) saturate(1.55);
  }
  28% {
    opacity:.12;
    transform:translate3d(-3px,1px,0) skewY(6deg) scaleX(.97);
    filter:
      drop-shadow(-3px 0 0 rgba(255,71,163,1))
      drop-shadow(3px 0 0 rgba(49,247,255,1))
      drop-shadow(0 0 9px rgba(140,80,255,.55));
  }
  40% {
    opacity:0;
    transform:translate3d(2px,0,0) scale(.96);
    filter:
      drop-shadow(-4px 0 0 rgba(255,79,174,.95))
      drop-shadow(4px 0 0 rgba(53,239,255,.95));
  }
  56% {
    opacity:.08;
    transform:translate3d(-2px,0,0) skewX(-12deg) scaleX(1.04);
    filter:
      drop-shadow(-4px 0 0 rgba(255,84,186,.95))
      drop-shadow(4px 0 0 rgba(37,240,255,.95))
      drop-shadow(0 0 10px rgba(95,68,255,.5))
      saturate(1.7);
  }
  70% {
    opacity:.82;
    transform:translate3d(1px,0,0) skewX(8deg) scale(1.01);
    filter:
      drop-shadow(-2px 0 0 rgba(255,85,170,.8))
      drop-shadow(2px 0 0 rgba(70,240,255,.8))
      drop-shadow(0 0 6px rgba(116,78,255,.35));
  }
  84% {
    opacity:.95;
    transform:translate3d(-1px,0,0) scale(1);
    filter:
      drop-shadow(-1px 0 0 rgba(255,98,187,.5))
      drop-shadow(1px 0 0 rgba(60,231,255,.5));
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
}

@media (max-width:940px) {
  .swiss-composition { width:min(90vw,620px); justify-self:center; margin-top:2rem; }
  .algo-block-field--hero { width:50vw; opacity:.86; }
  .page-hero .container::before { right:24%; }
}
@media (max-width:720px) {
  .swiss-composition { width:100%; margin-left:0; }
  .swiss-composition__type--m { font-size:52vw; }
  .swiss-composition__type--s { font-size:48vw; }
  .page-hero::before { right:clamp(.55rem, 3.4vw, 1.25rem); font-size:50vw; opacity:.64; }
  .algo-block-field--hero { right:-14%; width:72vw; opacity:.62; }
  .page-hero .container::before { display:none; }
  .algo-block-field--shift { opacity:.52; width:65vw; }
  .algo-block-field--cta { width:44vw; opacity:.62; }
}
@media (max-width:520px) {
  .swiss-composition__block--yellow b { left:auto; right:0; bottom:26px; }
  .algo-block-field--hero { opacity:.42; }
  .algo-block-field--cta { opacity:.48; }
}


/* ============================================================
   V6.6 / INTERACTIVE EASTER-EGG REFINEMENT
   Keep every generated shape above the broad hero content layer so
   even the low-left teal and yellow registers remain hoverable.
   ============================================================ */
.page-hero .algo-block-field--hero { z-index:4; }
.shift-worker-section .algo-block-field--shift { z-index:4; }
.cta-panel .algo-block-field--cta { z-index:3; }

.ai-joke-popover {
  position:fixed;
  z-index:10020;
  left:0;
  top:0;
  max-width:min(29ch, calc(100vw - 24px));
  padding:.62rem .72rem .58rem;
  border-left:2px solid var(--coral);
  background:rgba(32,36,38,.965);
  color:var(--paper);
  box-shadow:2px 3px 11px rgba(36,39,41,.12);
  font:500 .54rem/1.46 var(--mono);
  letter-spacing:.085em;
  text-transform:uppercase;
  text-shadow:-.45px 0 rgba(0,238,255,.32), .45px 0 rgba(255,68,178,.28);
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,5px,0) scale(.985);
  transform-origin:50% 100%;
  transition:opacity .18s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  pointer-events:none;
}
.ai-joke-popover.is-visible {
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
  transition-delay:0s;
}
@media (max-width:720px) {
  .page-hero .algo-block-field--hero { z-index:3; }
}


/* ============================================================
   V7 / CASH REGISTER
   ============================================================ */
body[data-page="book"] .page-hero::before { content:"$"; }
body[data-page="thanks"] .page-hero::before { content:"✓"; }

.cash-register-strip { border-block:1px solid var(--rule); }
.cash-register-strip__inner {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr);
  gap:clamp(2rem,5vw,6rem); align-items:center;
}
.cash-register-strip h2 { margin:.35rem 0 .8rem; font-size:clamp(2rem,4vw,4rem); line-height:.95; letter-spacing:-.055em; }
.cash-register-strip p { margin:0; max-width:62ch; color:var(--ink-2); }
.cash-register-strip__action { display:flex; align-items:flex-end; justify-content:space-between; gap:1.3rem; border-left:1px solid var(--rule); padding-left:clamp(1.4rem,3vw,3rem); }
.cash-register-price { display:grid; gap:.2rem; }
.cash-register-price b { font:700 clamp(3rem,6vw,5.7rem)/.75 var(--sans); letter-spacing:-.08em; }
.cash-register-price small { max-width:18ch; font:500 .56rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

.checkout-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:clamp(2rem,6vw,7rem); align-items:start; }
.checkout-main h2 { margin:.55rem 0 .8rem; font-size:clamp(2rem,4.2vw,4.2rem); line-height:.95; letter-spacing:-.055em; }
.checkout-intro { max-width:58ch; color:var(--ink-2); margin:0 0 2.3rem; }
.checkout-focus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.checkout-focus-card { position:relative; min-height:210px; padding:clamp(1.35rem,2.6vw,2.15rem); background:var(--paper); cursor:pointer; display:flex; flex-direction:column; transition:background .2s var(--ease), transform .2s var(--ease); }
.checkout-focus-card input { position:absolute; opacity:0; pointer-events:none; }
.checkout-focus-card .card-code { margin-bottom:auto; color:var(--ink-3); }
.checkout-focus-card strong { display:block; margin-top:2rem; font-size:clamp(1.25rem,2vw,1.75rem); line-height:1; letter-spacing:-.035em; }
.checkout-focus-card > span:last-child { display:block; margin-top:.8rem; color:var(--ink-2); font-size:.93rem; line-height:1.5; }
.checkout-focus-card::after { content:""; position:absolute; top:0; right:0; width:5px; height:100%; background:transparent; }
.checkout-focus-card:has(input:checked) { background:var(--paper-2); }
.checkout-focus-card:has(input:checked)::after { background:var(--coral); }
.checkout-focus-card:nth-child(2):has(input:checked)::after { background:var(--teal); }
.checkout-focus-card:nth-child(3):has(input:checked)::after { background:var(--blue); }
.checkout-focus-card:nth-child(4):has(input:checked)::after { background:var(--yellow); }
.checkout-focus-card:focus-within { outline:2px solid var(--coral); outline-offset:-2px; }

.checkout-register { position:sticky; top:7.5rem; border:1px solid var(--rule-dark); background:var(--ink); color:var(--paper); padding:clamp(1.4rem,3vw,2.3rem); box-shadow:var(--block-shadow-3); }
.cash-register-display { display:grid; padding-bottom:1.6rem; border-bottom:1px solid rgba(248,245,238,.22); }
.cash-register-display span, .cash-register-display small { font:500 .57rem/1.35 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(248,245,238,.62); }
.cash-register-display strong { margin:.8rem 0 .3rem; font:700 clamp(4.4rem,8vw,7.5rem)/.72 var(--sans); letter-spacing:-.09em; color:var(--paper); }
.checkout-includes { list-style:none; padding:0; margin:1.55rem 0; }
.checkout-includes li { position:relative; padding:.72rem 0 .72rem 1.25rem; border-bottom:1px solid rgba(248,245,238,.12); color:rgba(248,245,238,.82); font-size:.91rem; }
.checkout-includes li::before { content:"+"; position:absolute; left:0; color:var(--yellow); font-family:var(--mono); }
.checkout-register .checkout-button { width:100%; justify-content:space-between; background:var(--paper); color:var(--ink); border-color:var(--paper); }
.checkout-register .checkout-button:hover { background:var(--yellow); border-color:var(--yellow); }
.checkout-note { margin:.85rem 0 0; font:500 .57rem/1.5 var(--mono); letter-spacing:.04em; color:rgba(248,245,238,.55); }
.register-receipt { margin-top:1.8rem; padding-top:1.15rem; border-top:1px dashed rgba(248,245,238,.22); display:grid; gap:.3rem; font:500 .5rem/1.35 var(--mono); letter-spacing:.12em; color:rgba(248,245,238,.35); }

@media (max-width:940px) {
  .cash-register-strip__inner, .checkout-layout { grid-template-columns:1fr; }
  .cash-register-strip__action { border-left:0; border-top:1px solid var(--rule); padding:1.6rem 0 0; }
  .checkout-register { position:relative; top:auto; }
}
@media (max-width:620px) {
  .checkout-focus-grid { grid-template-columns:1fr; }
  .checkout-focus-card { min-height:180px; }
  .cash-register-strip__action { align-items:stretch; flex-direction:column; }
}

/* ============================================================
   V8 / PRODUCTIZED SHOP — outcomes before calendar time
   ============================================================ */
body[data-page="shop"] .page-hero::before { content:"$"; }
body[data-page="intake"] .page-hero::before { content:"IN"; }
body[data-page="order-thanks"] .page-hero::before { content:"OK"; }

.product-home-section { overflow:hidden; }
.product-path-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  border:1px solid var(--rule); background:var(--rule);
}
.product-path-card {
  position:relative; display:flex; flex-direction:column; min-height:250px;
  padding:clamp(1.35rem,2.8vw,2.35rem); background:var(--paper);
}
.product-path-card::after {
  content:""; position:absolute; right:0; top:0; width:5px; height:38%; background:var(--coral);
}
.product-path-card:nth-child(2)::after { background:var(--teal); height:62%; }
.product-path-card:nth-child(3)::after { background:var(--blue); height:82%; }
.product-path-card .card-code { margin-bottom:auto; color:var(--ink-3); }
.product-path-card strong { margin-top:2.5rem; font-size:clamp(1.45rem,2.4vw,2.15rem); line-height:.95; letter-spacing:-.045em; }
.product-path-card p { margin:.85rem 0 1.25rem; color:var(--ink-2); }
.product-path-card .text-link { margin-top:auto; align-self:flex-start; }
.product-path-price { margin-top:auto; font:500 .58rem/1.35 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.product-path-price b { display:block; margin-top:.25rem; font:700 clamp(2.4rem,4vw,4rem)/.8 var(--sans); letter-spacing:-.075em; color:var(--ink); }
.product-home-action {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem;
  padding:clamp(1.5rem,3vw,2.5rem); border:1px solid var(--rule); border-top:0; background:var(--paper-2);
}
.product-home-action > span { max-width:68ch; color:var(--ink-2); }
.product-home-action b { color:var(--ink); }

.async-first-section .product-path-card { min-height:220px; }
.live-preflight {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(1.5rem,5vw,5rem);
}
.live-preflight h2 { margin:.45rem 0 .75rem; font-size:clamp(2rem,4.3vw,4.2rem); line-height:.94; letter-spacing:-.055em; }
.live-preflight p { max-width:66ch; margin:0; color:var(--ink-2); }
.cta-button-stack { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }

.shop-principles { padding-bottom:clamp(3.4rem,7vw,6rem); }
.shop-tier-heading {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:clamp(2rem,8vw,8rem);
  align-items:end; margin-bottom:clamp(1.8rem,4vw,3.2rem); padding-bottom:1.25rem; border-bottom:1px solid var(--rule-dark);
}
.shop-tier-heading h2 { margin:.6rem 0 0; font-size:clamp(2.4rem,5.7vw,6rem); line-height:.86; letter-spacing:-.075em; }
.shop-tier-heading p { margin:0; color:var(--ink-2); }
.shop-grid { display:grid; gap:1px; border:1px solid var(--rule); background:var(--rule); }
.shop-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.shop-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shop-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.shop-card {
  position:relative; display:flex; flex-direction:column; min-height:100%;
  padding:clamp(1.35rem,2.5vw,2.25rem); background:var(--paper); overflow:hidden;
}
.shop-card::after { content:""; position:absolute; left:0; top:0; width:38%; height:5px; background:var(--coral); }
.shop-card:nth-child(2)::after { width:62%; background:var(--teal); }
.shop-card:nth-child(3)::after { width:78%; background:var(--blue); }
.shop-card:nth-child(4)::after { width:24%; background:var(--yellow); }
.shop-card--async::after { height:6px; }
.shop-card--bundle::after { width:54%; }
.shop-card__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.shop-card__top .card-code { color:var(--ink-3); }
.shop-badge {
  padding:.35rem .48rem; border:1px solid var(--rule);
  font:500 .51rem/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.shop-card h3 { margin:clamp(2.8rem,5vw,5rem) 0 .8rem; font-size:clamp(1.55rem,2.35vw,2.35rem); line-height:.94; letter-spacing:-.05em; }
.shop-card__lead { margin:0 0 1.25rem; color:var(--ink-2); }
.shop-card ul { list-style:none; margin:.35rem 0 2rem; padding:0; }
.shop-card li { position:relative; padding:.62rem 0 .62rem 1.15rem; border-bottom:1px solid var(--rule-soft); font-size:.9rem; color:var(--ink-2); }
.shop-card li::before { content:"+"; position:absolute; left:0; color:var(--coral); font-family:var(--mono); }
.shop-card__footer { display:flex; flex-direction:column; align-items:stretch; gap:1.1rem; margin-top:auto; padding-top:1.25rem; }
.shop-card__footer .button { justify-content:space-between; width:100%; }
.shop-price { display:grid; gap:.2rem; }
.shop-price b { font:700 clamp(3rem,5vw,5.1rem)/.72 var(--sans); letter-spacing:-.085em; }
.shop-price small { font:500 .54rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.shop-featured {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.45fr); gap:clamp(2rem,7vw,7rem); align-items:center;
  margin-top:1px; padding:clamp(1.8rem,4vw,4rem); background:var(--ink); color:var(--paper); border:1px solid var(--ink);
}
.shop-featured h3 { margin:.75rem 0 .8rem; font-size:clamp(2.2rem,5vw,5rem); line-height:.87; letter-spacing:-.065em; }
.shop-featured p { max-width:62ch; color:rgba(248,245,238,.74); }
.shop-featured .card-code { color:rgba(248,245,238,.5); }
.shop-featured__facts { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.shop-featured__facts span { padding:.45rem .6rem; border:1px solid rgba(248,245,238,.2); font:500 .54rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.shop-featured__buy { display:grid; gap:1.2rem; }
.shop-featured .shop-price small { color:rgba(248,245,238,.5); }
.shop-featured .button { width:100%; justify-content:space-between; }

.productized-build-section { position:relative; overflow:hidden; background:var(--night); color:var(--paper); }
.productized-build-section::before {
  content:"01"; position:absolute; right:2%; top:50%; transform:translateY(-48%);
  font:700 clamp(13rem,28vw,31rem)/.72 var(--sans); letter-spacing:-.13em; color:rgba(248,245,238,.035); pointer-events:none;
}
.productized-build-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.55fr); gap:clamp(2rem,8vw,8rem); align-items:center; }
.productized-build-layout h2 { margin:.7rem 0 1rem; font-size:clamp(3rem,7vw,7rem); line-height:.82; letter-spacing:-.08em; }
.productized-build-layout p { max-width:62ch; color:rgba(248,245,238,.72); }
.build-boundaries { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; }
.build-boundaries span { padding:.48rem .62rem; border:1px solid rgba(248,245,238,.2); font:500 .54rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.productized-build-register { display:grid; padding:clamp(1.4rem,3vw,2.4rem); border:1px solid rgba(248,245,238,.32); background:rgba(248,245,238,.055); box-shadow:var(--block-shadow-3); }
.productized-build-register .card-code { color:rgba(248,245,238,.5); }
.productized-build-register > strong { margin:2rem 0 .25rem; font:700 clamp(4.5rem,8vw,8rem)/.7 var(--sans); letter-spacing:-.09em; }
.productized-build-register > small { font:500 .54rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:rgba(248,245,238,.48); }
.productized-build-register p { margin:1.5rem 0; font-size:.92rem; }
.productized-build-register .button { justify-content:space-between; }

.delivery-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid var(--rule); background:var(--rule); }
.delivery-steps article { min-height:210px; padding:clamp(1.25rem,2.5vw,2.1rem); background:var(--paper); }
.delivery-steps b { font:700 clamp(2.6rem,5vw,5rem)/.8 var(--sans); letter-spacing:-.07em; color:var(--rule-dark); }
.delivery-steps h3 { margin:2.6rem 0 .65rem; font-size:1.4rem; }
.delivery-steps p { margin:0; color:var(--ink-2); }
.live-last-resort { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(2rem,8vw,8rem); }
.live-last-resort h2 { margin:.65rem 0 .85rem; font-size:clamp(2.6rem,5.8vw,6rem); line-height:.87; letter-spacing:-.07em; }
.live-last-resort p { max-width:66ch; margin:0; color:var(--ink-2); }
.live-last-resort > div:last-child { display:grid; gap:1.1rem; min-width:240px; }

.intake-layout { display:grid; grid-template-columns:minmax(280px,.65fr) minmax(0,1.15fr); gap:clamp(2rem,8vw,8rem); align-items:start; }
.intake-copy { position:sticky; top:7.5rem; }
.intake-copy h2 { margin:.6rem 0 1rem; font-size:clamp(2.5rem,5vw,5rem); line-height:.88; letter-spacing:-.065em; }
.intake-copy p { color:var(--ink-2); }
.intake-signal { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; }
.intake-signal span { padding:.45rem .58rem; border:1px solid var(--rule); font:500 .52rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.intake-form { padding:clamp(1.25rem,3vw,2.4rem); border:1px solid var(--rule-dark); background:var(--paper); }
.form-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.intake-form label span { color:var(--ink-3); font-weight:400; }
#intake-status { border:1px solid var(--coral); padding:1rem; margin-bottom:1.2rem; background:var(--paper); }

@media (max-width:1120px) {
  .shop-grid--four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .product-path-grid, .shop-grid--three, .shop-grid--two,
  .shop-featured, .productized-build-layout, .shop-tier-heading,
  .intake-layout, .live-last-resort, .live-preflight { grid-template-columns:1fr; }
  .product-home-action { grid-template-columns:1fr; }
  .intake-copy { position:relative; top:auto; }
  .live-last-resort > div:last-child { min-width:0; }
}
@media (max-width:620px) {
  .shop-grid--four, .delivery-steps, .form-split { grid-template-columns:1fr; }
  .product-path-card { min-height:210px; }
  .shop-featured__facts { align-items:flex-start; flex-direction:column; }
  .shop-card h3 { margin-top:2.5rem; }
}


/* V9 / product detail system */
.shop-card__actions { display:flex; align-items:center; justify-content:space-between; gap:.9rem; margin-top:1.2rem; }
.shop-card__actions .text-link { margin-top:0; }
.shop-featured__buy { display:flex; flex-direction:column; align-items:flex-end; gap:1rem; }
.shop-featured__buy .text-link { margin-top:0; }
.productized-build-register .register-links { display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; }
.productized-build-register .text-link { color:var(--paper); border-color:rgba(248,245,238,.45); }
.productized-build-register .text-link:hover { color:#E9B634; border-color:#E9B634; }
.product-detail-hero { overflow:hidden; }
.product-detail-hero .container { position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(280px,.55fr); gap:clamp(2rem,6vw,6rem); align-items:end; }
.product-detail-meta { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.product-detail-meta span, .detail-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.48rem .7rem; border:1px solid var(--rule); background:rgba(248,245,238,.7); color:var(--ink-2); font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.product-register { position:relative; display:grid; gap:1rem; padding:clamp(1.4rem,3vw,2.1rem); border:1px solid var(--rule); background:rgba(248,245,238,.72); box-shadow:var(--block-shadow-3); }
.product-register::after { content:''; position:absolute; right:1rem; top:1rem; width:12px; height:12px; background:var(--yellow); box-shadow:var(--block-shadow-1); }
.product-register .shop-price { align-items:flex-start; }
.product-register .shop-price b { font-size:clamp(3.4rem,7vw,5.6rem); }
.product-register p { margin:0; color:var(--ink-2); }
.product-register__actions { display:grid; gap:.8rem; }
.product-detail-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1.4rem,4vw,3rem); align-items:start; }
.product-copy h2 { margin:.2rem 0 1rem; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.05em; }
.product-copy p { color:var(--ink-2); }
.detail-list, .product-sidebar-list { display:grid; gap:.85rem; margin:1.2rem 0 0; padding:0; list-style:none; }
.detail-list li, .product-sidebar-list li { position:relative; padding-left:1.2rem; color:var(--ink-2); }
.detail-list li::before, .product-sidebar-list li::before { content:''; position:absolute; left:0; top:.5rem; width:7px; height:7px; background:var(--teal); box-shadow:var(--block-shadow-1); }
.product-steps { display:grid; gap:1px; border:1px solid var(--rule); background:var(--rule); }
.product-step { background:var(--paper); padding:1.2rem 1.2rem 1.25rem; }
.product-step b { display:block; margin-bottom:.8rem; color:var(--ink-3); font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.product-step h3 { margin:0 0 .55rem; font-size:1.05rem; }
.product-step p { margin:0; color:var(--ink-2); font-size:.95rem; }
.product-sidecards { display:grid; gap:1px; border:1px solid var(--rule); background:var(--rule); }
.product-sidecard { background:var(--paper); padding:1.15rem 1.15rem 1.2rem; }
.product-sidecard h3 { margin:0 0 .65rem; font-size:1rem; }
.related-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--rule); background:var(--rule); }
.related-products a { display:grid; gap:.8rem; min-height:170px; padding:1.2rem 1.2rem 1.4rem; background:var(--paper); text-decoration:none; color:inherit; }
.related-products a:hover { background:var(--paper-2); }
.related-products strong { font-size:1.15rem; line-height:1.05; letter-spacing:-.04em; }
.related-products span { color:var(--ink-3); font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.detail-signal { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.detail-signal span { font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width: 960px) {
  .product-detail-hero .container, .product-detail-grid { grid-template-columns:1fr; }
  .related-products { grid-template-columns:1fr; }
  .shop-card__actions { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   V10 — PERSUASION LAYER
   Before/after comparison, promises, and the fit finder.
   ============================================================ */

/* --- Before / after the shift --- */
.week-grid { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:820px){ .week-grid { grid-template-columns:1fr 1fr; } }

.week-panel { background:var(--paper); padding:clamp(1.5rem,2.8vw,2.4rem); }
.week-panel--after { background:var(--ink); color:var(--paper); }
.week-panel__tag { display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
  font:500 .655rem/1.35 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.week-panel__tag::before { content:""; width:16px; height:2px; background:var(--ink-3); }
.week-panel--after .week-panel__tag { color:var(--sun); }
.week-panel--after .week-panel__tag::before { background:var(--sun); }
.week-panel h3 { margin:0 0 1.2rem; font-size:clamp(1.25rem,2vw,1.6rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.week-panel--after h3 { color:var(--paper); }

.week-list { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.week-list li { padding:.85rem 0; border-top:1px solid var(--rule-3); font-size:.95rem; color:var(--ink-2); }
.week-list li:first-child { border-top:0; padding-top:0; }
.week-panel--after .week-list li { border-color:rgba(255,255,255,.13); color:rgba(255,255,255,.8); }
.week-panel--after .week-list li b { color:var(--paper); font-weight:600; }

/* --- Promises / risk reversal --- */
.promise-grid { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:760px){ .promise-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .promise-grid { grid-template-columns:repeat(4,1fr); } }
.promise { background:var(--paper); padding:clamp(1.4rem,2.4vw,1.9rem); }
.promise__num { display:block; margin-bottom:.9rem;
  font:500 .655rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.promise:nth-child(4n+1) .promise__num { color:var(--coral); }
.promise:nth-child(4n+2) .promise__num { color:var(--teal); }
.promise:nth-child(4n+3) .promise__num { color:var(--cobalt); }
.promise:nth-child(4n+4) .promise__num { color:var(--sun); }
.promise h3 { margin:0 0 .55rem; font-size:1.05rem; font-weight:700; letter-spacing:-.012em; }
.promise p { margin:0; font-size:.92rem; color:var(--ink-2); }

.guarantee {
  display:grid; gap:clamp(1.2rem,3vw,2.5rem); align-items:center;
  grid-template-columns:1fr; padding:clamp(1.7rem,3.4vw,2.6rem);
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
}
@media (min-width:860px){ .guarantee { grid-template-columns:1fr auto; } }
.guarantee__tag { font:500 .655rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); }
.guarantee h2 { margin:.8rem 0 .7rem; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; letter-spacing:-.026em; line-height:1.12; color:var(--paper); }
.guarantee p { margin:0; color:rgba(255,255,255,.78); max-width:56ch; font-size:.98rem; }
.guarantee .button { border-color:var(--paper); color:var(--paper); }
.guarantee .button:hover { background:var(--paper); color:var(--ink); }

/* --- Fit finder --- */
.fit { max-width:760px; }
.fit__step { border-top:1px solid var(--rule); padding:clamp(1.4rem,3vw,2.1rem) 0; }
.fit__step:last-of-type { border-bottom:1px solid var(--rule); }
.fit__q { display:flex; align-items:baseline; gap:.9rem; margin:0 0 1.1rem;
  font-size:clamp(1.15rem,2vw,1.42rem); font-weight:700; letter-spacing:-.018em; }
.fit__q i { font:500 .655rem/1 var(--mono); letter-spacing:.14em; color:var(--coral); font-style:normal; flex:none; }

.fit__options { display:grid; gap:.55rem; }
@media (min-width:640px){ .fit__options { grid-template-columns:repeat(2,1fr); } }
.fit__opt {
  text-align:left; padding:.95rem 1.1rem; background:var(--paper);
  border:1px solid var(--rule-2); cursor:pointer; font-size:.95rem; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.fit__opt:hover { border-color:var(--ink); transform:translateY(-1px); }
.fit__opt[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.fit__result { margin-top:2.5rem; border:1px solid var(--ink); background:var(--paper); padding:clamp(1.5rem,3vw,2.3rem); display:none; }
.fit__result.is-open { display:block; }
.fit__result-tag { font:500 .655rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--coral); }
.fit__result h3 { margin:.85rem 0 .6rem; font-size:clamp(1.4rem,2.5vw,1.95rem); font-weight:700; letter-spacing:-.024em; line-height:1.1; }
.fit__result p { margin:0 0 1.1rem; color:var(--ink-2); }
.fit__result-why { border-left:2px solid var(--coral); padding-left:1rem; margin-bottom:1.4rem; font-size:.94rem; color:var(--ink-2); }
.fit__result-price { display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.4rem; }
.fit__result-price b { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; }
.fit__result-price small { font:500 .655rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.fit__actions { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.fit__reset { background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3);
  font:500 .655rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--rule-2); }
.fit__reset:hover { color:var(--coral); border-color:var(--coral); }

/* Decorative algo blocks must never sit on top of a call to action. */
.cta-panel { position: relative; }
.cta-panel > *:not(.algo-block-field) { position: relative; z-index: 2; }
.guarantee > * { position: relative; z-index: 2; }

/* The type-field label had content but no positioning, so it rendered as a
   stray line of body text under every page hero. Make it the instrument
   marking it was meant to be. */
.page-hero .container::after {
  position: absolute;
  right: 0;
  bottom: 0;
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .45;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Generated block fields must not land on the action column.
   The CTA panel is a two-column grid (copy | actions), and the
   cta field was pinned to right:3% — directly behind the buttons.
   Stacking order was already correct; the problem was placement:
   a dark decorative block behind a dark button, with a coral block
   crowding the label. Move the field into the dead space between
   the two columns instead, and stop it short of the actions.
   ------------------------------------------------------------ */
.algo-block-field--cta {
  right: auto;
  left: 48%;
  top: 14%;
  width: min(20vw, 178px);
  height: 66%;
}

/* Below the two-column breakpoint the panel stacks, so the field
   would sit on top of the copy. Retire it there. */
@media (max-width: 760px) {
  .algo-block-field--cta { display: none; }
}

/* ------------------------------------------------------------
   Shift-worker field: keep it above the step panel.
   The field sat at top:14% height:72% (y 154-940 at 1440w) while
   the step list occupies y 398-779 and the disclaimer y 795-823,
   so blocks drifted straight across the copy. It also carries
   z-index:4, above the content layer, so lowering the stack alone
   would not help — and the panel is only 2.5% white, so blocks
   would still read through it. Confine the field to the clear
   band above the panel instead.
   ------------------------------------------------------------ */
.shift-worker-section .algo-block-field--shift {
  top: 5%;
  height: 27%;
}

/* Once the layout stacks there is no clear band left, so retire it. */
@media (max-width: 980px) {
  .shift-worker-section .algo-block-field--shift { display: none; }
}

/* ------------------------------------------------------------
   The composition "S" — caught mid-glitch, on purpose.
   It was a 1px text-stroke on a ~300px glyph, which browsers
   alias badly: it read as broken rather than deliberate. Now a
   heavier, greyer outline (no hairline to fall apart) with two
   offset colour copies sliced into horizontal bands, so it looks
   like a letter halfway through displacing rather than a
   rendering fault.
   ------------------------------------------------------------ */
.swiss-composition__type--s {
  color: transparent;
  -webkit-text-stroke: 2px rgba(36, 39, 41, .22);
  paint-order: stroke fill;
}

.swiss-composition__type--s::before,
.swiss-composition__type--s::after {
  content: "S";
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: transparent;
  pointer-events: none;
}

/* displaced left, coral, upper + lower slices */
.swiss-composition__type--s::before {
  -webkit-text-stroke: 2px rgba(226, 58, 22, .38);
  transform: translate(-7px, 2px);
  -webkit-mask-image: repeating-linear-gradient(180deg,
    #000 0 6%, transparent 6% 23%);
  mask-image: repeating-linear-gradient(180deg,
    #000 0 6%, transparent 6% 23%);
}

/* displaced right, blue, offset slices so the bands interleave */
.swiss-composition__type--s::after {
  -webkit-text-stroke: 2px rgba(31, 79, 216, .32);
  transform: translate(8px, -3px);
  -webkit-mask-image: repeating-linear-gradient(180deg,
    transparent 0 13%, #000 13% 18%, transparent 18% 31%);
  mask-image: repeating-linear-gradient(180deg,
    transparent 0 13%, #000 13% 18%, transparent 18% 31%);
}

/* Bring the S back inside the frame so the letterform actually reads,
   and give the base outline enough weight to hold at this size. */
.swiss-composition__type--s {
  right: -1.5%;
  bottom: -2%;
  -webkit-text-stroke: 3px rgba(36, 39, 41, .30);
}
/* Wider intact runs between displaced bands: the letter stays a letter. */
.swiss-composition__type--s::before {
  -webkit-text-stroke: 3px rgba(226, 58, 22, .34);
  transform: translate(-6px, 2px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 33%);
  mask-image: repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 33%);
}
.swiss-composition__type--s::after {
  -webkit-text-stroke: 3px rgba(31, 79, 216, .30);
  transform: translate(7px, -3px);
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 17%, #000 17% 23%, transparent 23% 41%);
  mask-image: repeating-linear-gradient(180deg, transparent 0 17%, #000 17% 23%, transparent 23% 41%);
}

/* ------------------------------------------------------------
   Mail sheet — the chooser that replaces a bare mailto: link
   ------------------------------------------------------------ */
.mail-sheet { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 1.25rem; }
.mail-sheet__backdrop { position: absolute; inset: 0; background: rgba(27, 26, 24, .55); backdrop-filter: blur(3px); }
.mail-sheet__panel {
  position: relative; width: min(430px, 100%); background: var(--paper);
  border: 1px solid var(--ink); padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 26px 60px rgba(27, 26, 24, .22);
}
.mail-sheet__tag { font: 500 .625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.mail-sheet__to { margin: .7rem 0 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; word-break: break-all; }
.mail-sheet__sub { margin: .35rem 0 0; font-size: .88rem; color: var(--ink-2); }
.mail-sheet__acts { display: grid; gap: .55rem; margin-top: 1.35rem; }
.mail-sheet__acts .button { width: 100%; justify-content: center; }
.mail-sheet__note { margin: 1.05rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--ink-3); }
.mail-sheet__close {
  margin-top: 1.1rem; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 .625rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule-2);
}
.mail-sheet__close:hover { color: var(--coral); border-color: var(--coral); }

/* ------------------------------------------------------------
   The composition "S" — full chromatic aberration.
   The previous treatment sat between Swiss restraint and a glitch
   and committed to neither. This commits: a solid dark letterform
   with true red/cyan channel separation multiplied over the paper,
   torn into offset scanline bands, with occasional glitch bursts.
   ------------------------------------------------------------ */
.swiss-composition__type--s {
  right: -1.5%;
  bottom: -2%;
  color: transparent;
  -webkit-text-stroke: 3px rgba(30, 33, 35, .82);
  /* fine scanlines cut through the base, CRT-style */
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 7px);
  mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 7px);
}

.swiss-composition__type--s::before,
.swiss-composition__type--s::after {
  content: "S";
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: transparent;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* red channel, displaced left, torn into wide bands */
.swiss-composition__type--s::before {
  -webkit-text-stroke: 3px #FF1F3D;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 9%, transparent 9% 15%);
  mask-image: repeating-linear-gradient(180deg, #000 0 9%, transparent 9% 15%);
  animation: s-tear-red 7s steps(1, end) infinite;
}

/* cyan channel, displaced right, bands offset so the tears interleave */
.swiss-composition__type--s::after {
  -webkit-text-stroke: 3px #00D8E8;
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 7%, #000 7% 14%, transparent 14% 19%);
  mask-image: repeating-linear-gradient(180deg, transparent 0 7%, #000 7% 14%, transparent 14% 19%);
  animation: s-tear-cyan 7s steps(1, end) infinite;
}

/* Mostly settled, with short bursts — a signal breaking up, not a strobe. */
@keyframes s-tear-red {
  0%, 74%   { transform: translate(-9px, 0); }
  76%       { transform: translate(-19px, 3px); }
  78%       { transform: translate(-3px, -3px); }
  80%       { transform: translate(-14px, 1px); }
  82%, 100% { transform: translate(-9px, 0); }
}
@keyframes s-tear-cyan {
  0%, 74%   { transform: translate(9px, 0); }
  76%       { transform: translate(2px, -3px); }
  78%       { transform: translate(17px, 3px); }
  80%       { transform: translate(5px, -1px); }
  82%, 100% { transform: translate(9px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .swiss-composition__type--s::before { animation: none; transform: translate(-9px, 0); }
  .swiss-composition__type--s::after  { animation: none; transform: translate(9px, 0); }
}

/* Base stays a solid letterform — scanlining it as well as the colour
   channels shredded the S into dashes and it stopped reading. Only the
   displaced channels tear. */
.swiss-composition__type--s {
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-text-stroke: 3.5px rgba(30, 33, 35, .88);
}
.swiss-composition__type--s::before {
  -webkit-text-stroke: 3.5px #FF1F3D;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 11%, transparent 11% 20%);
  mask-image: repeating-linear-gradient(180deg, #000 0 11%, transparent 11% 20%);
}
.swiss-composition__type--s::after {
  -webkit-text-stroke: 3.5px #00C4D6;
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 9%, #000 9% 18%, transparent 18% 26%);
  mask-image: repeating-linear-gradient(180deg, transparent 0 9%, #000 9% 18%, transparent 18% 26%);
}

/* Contain the channel blending to the letterform. Without isolation the
   multiply blend reaches past the S and washes out the blocks behind it. */
.swiss-composition__type--s { isolation: isolate; }