/* ============================================================
   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; }
}