/* The In-House System: shared styles for inhouse.html and inhouse-story.html (design v2, hot pink neon, 3 Nov 2026) */
  :root {
    --ink: #060406; --panel: #0f0a0e; --line: rgba(255,46,151,.22); --line2: #241820;
    --white: #ffffff; --grey: #b3a6af; --body: #ddd0d8;
    --pink: #ff2e97; --core: #ffe3f1; --glow: #ff0a85; --deep: #8a0047;
    --wrap: 1120px;
    /* curves from the Motion Design Method (Ly Studio/method/MOTION_DESIGN_METHOD.md, part 2A) */
    --out-expo: cubic-bezier(.16, 1, .3, 1); --out-quart: cubic-bezier(.25, 1, .5, 1);
    --in-out: cubic-bezier(.65, 0, .35, 1); --css-ease: cubic-bezier(.25, .1, .25, 1);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; color: var(--white); background: var(--ink); font: 400 17px/1.55 "Be Vietnam Pro", system-ui, sans-serif; overflow-x: hidden; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
  .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--grey); }
  .mono.p { color: var(--pink); }
  h1, h2, h3 { font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
  h1 { font-size: clamp(42px, 6vw, 84px); }
  h2 { font-size: clamp(34px, 5vw, 62px); }
  h3 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
  p { margin: 0; }
  .skip { position: absolute; left: -999px; top: 8px; background: var(--pink); color: #12000a; padding: 10px 14px; border-radius: 999px; z-index: 50; font-weight: 800; }
  .skip:focus { left: 12px; }
  :focus-visible { outline: 3px solid var(--core); outline-offset: 3px; border-radius: 6px; }

  /* grain: section H1, 4% monochrome noise so the dark gradients never band */
  body::after { content: ""; position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* The neon tube: one payoff phrase per screen, Tilt Neon, pale core and hot pink halo (design v2) */
  .tube { font-family: "Tilt Neon", "Be Vietnam Pro", sans-serif; font-weight: 400; letter-spacing: 0; white-space: nowrap; color: var(--core);
    text-shadow: 0 0 2px #fff, 0 0 6px var(--pink), 0 0 14px var(--pink), 0 0 30px var(--glow), 0 0 60px rgba(255,10,133,.7), 0 0 110px rgba(255,10,133,.45); }
  /* the one spell (Design Spells): the tube switches on like a real sign. Unlit first, two stutters, then steady. */
  .tube.ignite { color: #3a1a2c; text-shadow: none; }
  .tube.ignite.on { animation: ignite 1100ms steps(1, end) forwards; }
  @keyframes ignite {
    0% { color: #3a1a2c; text-shadow: none; }
    12% { color: var(--core); text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 24px var(--glow); }
    18% { color: #3a1a2c; text-shadow: none; }
    34% { color: var(--core); text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 24px var(--glow); }
    40% { color: #5a2a44; text-shadow: 0 0 6px rgba(255,46,151,.4); }
    56%, 100% { color: var(--core); text-shadow: 0 0 2px #fff, 0 0 6px var(--pink), 0 0 14px var(--pink), 0 0 30px var(--glow), 0 0 60px rgba(255,10,133,.7), 0 0 110px rgba(255,10,133,.45); }
  }
  .hum { animation: hum 9s 3s infinite; }
  @keyframes hum { 0%, 93%, 100% { opacity: 1 } 94% { opacity: .62 } 95% { opacity: 1 } 97% { opacity: .82 } 98% { opacity: 1 } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; background: var(--pink); color: #12000a; border: 0; border-radius: 999px; padding: 16px 28px; font: 800 17px/1 "Be Vietnam Pro", sans-serif; letter-spacing: -.01em; cursor: pointer; text-decoration: none;
    box-shadow: 0 0 0 1px #ff8cc6 inset, 0 0 18px rgba(255,46,151,.55), 0 0 44px rgba(255,10,133,.35); transition: background 150ms var(--out-quart), box-shadow 150ms var(--out-quart), transform 150ms var(--out-quart); }
  .btn:hover { background: #ff4fa8; box-shadow: 0 0 0 1px #ffb3d9 inset, 0 0 24px rgba(255,46,151,.8), 0 0 64px rgba(255,10,133,.5); }
  .btn:active { transform: scale(.98); }
  .btn[disabled] { opacity: .6; cursor: wait; }
  .btn.ghost { background: transparent; color: var(--white); box-shadow: 0 0 0 1px rgba(255,46,151,.55) inset; }
  .btn.ghost:hover { background: rgba(255,46,151,.12); }

  /* top bar: only on the lyvietvu.com/brandbuilder version; the inhousesystem.co landing drops every [data-only="lobe"] */
  .top { position: sticky; top: var(--lbb-h, 0px); z-index: 20; background: rgba(6,4,6,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
  .brand { font-weight: 900; letter-spacing: -.02em; font-size: 18px; text-decoration: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .brand .tube { font-size: 21px; }
  .nav { display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: var(--grey); }
  .nav a { text-decoration: none; padding: 8px 0; transition: color 150ms; } .nav a:hover { color: var(--pink); }
  .top .btn { min-height: 40px; padding: 11px 18px; font-size: 14px; white-space: nowrap; }
  .nav a[aria-current] { color: #fff; }
  /* menu button and full-screen menu: phones and narrow screens (the 7 links need about 1180 px) */
  .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: none; color: #fff; cursor: pointer; place-content: center; gap: 6px; flex: none; }
  .burger i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--out-expo); }
  .burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mnav { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--lbb-h, 0px) + 64px); z-index: 19; background: rgba(6,4,6,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow-y: auto; padding: 36px 0 120px; }
  .mnav[hidden] { display: none; }
  .mnav nav { display: grid; gap: 4px; }
  .mnav a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; font: 800 clamp(28px, 7vw, 44px)/1.1 "Be Vietnam Pro", sans-serif; letter-spacing: -.03em; color: #fff; text-decoration: none; border-bottom: 1px solid var(--line); }
  .mnav a span { font: 500 12px "IBM Plex Mono", monospace; color: var(--pink); letter-spacing: .08em; }
  .mnav a[aria-current], .mnav a:hover { color: var(--pink); }
  .mnav .k { margin: 28px 0 4px; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
  .mnav a.sm { font: 500 16px/1.4 "Be Vietnam Pro", sans-serif; letter-spacing: 0; color: var(--grey); }
  .mnav-open, .mnav-open body { overflow: hidden; }
  @media (max-width: 1180px) { .nav { display: none; } .burger { display: grid; } }

  /* hero */
  .hero { position: relative; overflow: hidden; padding: 72px 0 0; }
  .bloom { position: absolute; right: -10%; top: -20%; width: 75%; height: 120%; pointer-events: none;
    background: radial-gradient(ellipse 50% 45% at 60% 45%, rgba(255,10,133,.38), rgba(138,0,71,.18) 45%, transparent 72%); }
  .hero .grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: end; }
  .hero h1 { margin-top: 18px; }
  .hero h1 .tube { font-size: 1.12em; }
  .lede { color: var(--body); font-size: 19px; max-width: 30em; margin: 26px 0 30px; }
  .lede strong { color: #fff; }

  form.join { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; max-width: 640px; }
  .join label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .join input { min-height: 52px; background: rgba(15,10,14,.9); border: 1px solid #3a2232; color: #fff; border-radius: 999px; padding: 15px 20px; font: 500 16px "Be Vietnam Pro", sans-serif; min-width: 0; transition: border-color 150ms, box-shadow 150ms; }
  .join input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,46,151,.25); }
  .join input[aria-invalid="true"] { border-color: #ff6b9e; }
  .join input::placeholder { color: #8d7a86; }
  .join .hp { display: none; }
  .fine { margin-top: 14px; }
  .msg { margin-top: 14px; font-size: 15px; color: var(--core); min-height: 1.5em; }
  .msg.err { color: #ff9cc4; }

  .stage { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #000;
    box-shadow: 0 0 0 2px #ff9ccd, 0 0 0 4px var(--pink), 0 0 22px var(--pink), 0 0 60px rgba(255,10,133,.55), inset 0 0 30px rgba(255,10,133,.5); }
  .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .stage .spill { position: absolute; inset: 0; mix-blend-mode: lighten; pointer-events: none;
    background: radial-gradient(ellipse 55% 38% at 50% 22%, #6e0a42 0%, #3a0524 50%, transparent 80%); }
  .bignum { position: absolute; z-index: 2; top: 3%; left: 6%; font-size: clamp(110px, 11vw, 170px); line-height: .9; pointer-events: none; }
  .bignum.bl { top: auto; bottom: 5%; left: 6%; }   /* sticky-wall hero: the sign sits on his black tee, clear of the face */
  .bignum small { display: block; font-size: .2em; margin-top: -.05em; margin-left: .1em; }

  .proof { margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
  .proof .wrap > div { padding: 22px 0; }
  .proof b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .proof .wrap > div > span { color: var(--grey); font-size: 14px; }

  section { padding: 110px 0; position: relative; }
  .head { max-width: 780px; margin-bottom: 48px; }
  .head .mono { display: block; margin-bottom: 16px; }
  .head p { color: var(--body); margin-top: 18px; font-size: 18px; }

  .days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .day { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 340px;
    transition: border-color 400ms var(--in-out), box-shadow 400ms var(--in-out); }
  .day .n { font-family: "Tilt Neon", sans-serif; font-size: 72px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px #ff7ab9; transition: color 300ms, text-shadow 300ms; }
  .day.lit .n { color: var(--core); -webkit-text-stroke: 0; text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 20px var(--glow), 0 0 46px rgba(255,10,133,.6); }
  .day.lit:last-child { border-color: rgba(255,46,151,.55); box-shadow: 0 0 30px rgba(255,10,133,.18); }
  .day p { color: #cfc2ca; font-size: 15.5px; }
  .day ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: #e8dce3; }
  .day ul li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin: 0 9px 2px 0; box-shadow: 0 0 6px var(--glow); }
  .day .keep { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line2); font-size: 14px; color: #fff; }
  .day .keep i { font-style: normal; color: var(--pink); display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }

  .have { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; margin-top: 18px; max-width: 900px; padding: 0; list-style: none; }
  .have li { display: flex; gap: 14px; font-size: 18px; font-weight: 500; }
  .have li::before { content: ""; flex: 0 0 9px; height: 9px; margin-top: 9px; border-radius: 50%; background: var(--core); box-shadow: 0 0 6px var(--pink), 0 0 14px var(--glow); }

  .rule { height: 2px; max-width: var(--wrap); margin: 0 auto; background: linear-gradient(90deg, transparent, var(--pink) 20%, #ffd1e8 50%, var(--pink) 80%, transparent); box-shadow: 0 0 12px var(--pink), 0 0 28px rgba(255,10,133,.5);
    transform-origin: 50% 50%; }

  .why { background: radial-gradient(ellipse 70% 60% at 15% 40%, rgba(138,0,71,.35), transparent 70%), var(--panel); }
  .cols { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
  .why p { color: var(--body); font-size: 19px; margin-bottom: 18px; }
  .why .pull { font-size: clamp(40px, 5.4vw, 70px); font-weight: 900; letter-spacing: -.035em; line-height: 1.12; margin-top: 16px; color: #fff; }
  .why .pull .tube { display: inline-block; margin-top: .1em; font-size: 1.15em; }

  .books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .book { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 24px; min-height: 170px;
    transition: border-color 150ms var(--out-quart), transform 200ms var(--out-quart), box-shadow 150ms var(--out-quart); }
  .book:hover { border-color: rgba(255,46,151,.6); transform: translateY(-3px); box-shadow: 0 0 30px rgba(255,10,133,.16); transition-delay: 0ms; }
  .book b { font-size: 20px; letter-spacing: -.02em; }
  .book span:last-child { margin-top: auto; color: var(--pink); font-weight: 700; font-size: 15px; }

  .who { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; }
  .who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
  .who li { display: flex; gap: 14px; font-size: 18px; color: #f2e8ee; }
  .who li::before { content: ""; flex: 0 0 9px; height: 9px; margin-top: 9px; border-radius: 50%; background: var(--core); box-shadow: 0 0 6px var(--pink), 0 0 14px var(--glow); }
  .not { background: var(--panel); border: 1px dashed #4a2a3c; border-radius: 18px; padding: 26px; color: var(--body); font-size: 17px; align-self: start; }
  .not b { display: block; color: #fff; margin-bottom: 8px; font-size: 18px; }

  .after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .door { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 24px; }
  .door b { display: block; font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
  .door p { color: #cfc2ca; font-size: 15.5px; }

  .faq { max-width: 860px; }
  details { border-top: 1px solid var(--line2); }
  details:last-child { border-bottom: 1px solid var(--line2); }
  summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 21px; letter-spacing: -.015em; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; color: var(--pink); font-weight: 900; text-shadow: 0 0 10px var(--glow); transition: transform 300ms var(--out-expo); }
  details[open] summary::after { transform: rotate(45deg); }
  details p { color: #cfc2ca; padding: 0 0 22px; max-width: 46em; }

  .final { text-align: center; padding: 140px 0 130px; overflow: hidden;
    background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(255,10,133,.32), rgba(138,0,71,.14) 45%, transparent 75%); }
  .final h2 { font-size: clamp(42px, 6.2vw, 88px); }
  .final h2 .tube { display: inline-block; margin-top: .08em; font-size: 1.1em; }
  .final form.join { margin: 44px auto 0; }
  .final .msg { text-align: center; }

  footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--grey); font-size: 14px; }
  footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  footer a { text-decoration: none; } footer a:hover { color: var(--pink); }


  .meet { color: var(--pink); font-weight: 700; font-size: 15px; text-decoration: none; }
  .meet:hover { text-decoration: underline; }
  .team { background: radial-gradient(ellipse 55% 38% at 50% 50%, rgba(138,0,71,.28), transparent 72%); }
  .org { max-width: 1040px; }
  .boss { max-width: 420px; margin: 0 auto; text-align: center; background: var(--panel); border: 1px solid rgba(255,46,151,.55); border-radius: 18px; padding: 20px 22px; box-shadow: 0 0 30px rgba(255,10,133,.18); }
  .boss b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.03em; margin: 4px 0; }
  .boss span:last-child { color: var(--body); font-size: 15px; }
  .wires { display: block; width: 100%; height: 56px; overflow: visible; }
  .wires path { fill: none; stroke: var(--pink); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--glow)); stroke-dasharray: 1400; stroke-dashoffset: 0; }
  .js .wires path { stroke-dashoffset: 1400; }
  .js .wires.in path { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--in-out); }
  .crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .member { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color 150ms var(--out-quart), box-shadow 150ms var(--out-quart), transform 200ms var(--out-quart); }
  .member:hover { border-color: rgba(255,46,151,.6); box-shadow: 0 0 30px rgba(255,10,133,.18); transform: translateY(-3px); }
  .badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 400 22px "Tilt Neon", sans-serif; color: var(--core);
    box-shadow: 0 0 0 2px var(--pink), 0 0 16px rgba(255,10,133,.6), inset 0 0 14px rgba(255,10,133,.45); text-shadow: 0 0 8px var(--pink); }
  .member h3 { font-size: 21px; }
  .member p { color: #cfc2ca; font-size: 15px; }
  .member dl { margin: 0; display: grid; gap: 2px; font-size: 14px; }
  .member dt { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-top: 8px; }
  .member dd { margin: 0; color: #f2e8ee; }
  .free { margin-top: auto; align-self: flex-start; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #12000a; background: var(--pink); border-radius: 999px; padding: 7px 10px; }
  .steps { list-style: none; counter-reset: s; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 18px; color: var(--body); font-size: 16px; }
  .steps li::before { content: "0" counter(s); display: block; font: 400 34px "Tilt Neon", sans-serif; color: var(--core); text-shadow: 0 0 8px var(--pink), 0 0 20px var(--glow); margin-bottom: 8px; }
  .steps b { color: #fff; display: block; font-size: 19px; margin-bottom: 4px; }
  .later { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .later div { border: 1px dashed #4a2a3c; border-radius: 18px; padding: 18px 20px; opacity: .6; }
  .later b { display: block; font-size: 17px; } .later span { color: var(--grey); font-size: 14px; }
  .soon { display: inline-block; vertical-align: middle; margin-left: 8px; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); border: 1px solid var(--pink); border-radius: 999px; padding: 5px 8px; }
  @media (max-width: 900px) {
    .crew, .steps, .later { grid-template-columns: 1fr; }
    .wires { display: none; }
    .boss { margin-bottom: 16px; }
  }


  /* music: the Brand Builder bed (brand-v2, the LF02 music). On by default (Ly, 3 Nov); starts on the first tap if the browser blocks it. */

  /* the weekly loop: five stops joined by a neon track, the last one points back to the first */
  .loop { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
  .loop::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: linear-gradient(90deg, var(--pink), #ffd1e8, var(--pink)); box-shadow: 0 0 10px var(--pink); }
  .loop li { position: relative; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 46px 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: #cfc2ca; }
  .loop li::before { content: ""; position: absolute; top: 15px; left: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--core); box-shadow: 0 0 0 3px var(--ink), 0 0 10px var(--pink), 0 0 22px var(--glow); }
  .loop .who { font: 500 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
  .loop b { color: #fff; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
  .loop i { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); font-style: normal; font-size: 13px; color: #f2e8ee; }
  .loop .you { border-color: rgba(255,46,151,.55); box-shadow: 0 0 26px rgba(255,10,133,.18); }
  @media (max-width: 900px) {
    .loop { grid-template-columns: 1fr; padding-left: 26px; }
    .loop::before { left: 6px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--pink), #ffd1e8, var(--pink)); }
    .loop li { padding: 18px 16px; } .loop li::before { left: -27px; top: 20px; }
  }


  /* playbook covers in the Day 1 to 3 cards: a small book, tilted, a different pose of Ly on each (Ly, 3 Nov) */
  .book3d { margin: 6px 0 4px; perspective: 900px; display: flex; justify-content: center; }
  .book3d .cover { position: relative; width: 74%; aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: #0b070a;
    transform: rotateY(-14deg) rotateX(4deg); transform-origin: 30% 50%; transition: transform 500ms var(--out-expo), box-shadow 500ms var(--out-expo);
    box-shadow: inset 10px 0 12px -4px rgba(0,0,0,.65), inset 11px 0 0 -10px rgba(255,255,255,.12),
      1px 0 0 #2b2028, 2px 1px 0 #efe7ec, 3px 1px 0 #c9bec5, 4px 2px 0 #efe7ec, 5px 2px 0 #b8acb3, 6px 3px 0 #e6dde2,
      0 9px 20px rgba(0,0,0,.29), 0 37px 37px rgba(0,0,0,.26), 0 0 30px rgba(255,10,133,.16); }
  .day:hover .book3d .cover { transform: rotateY(-4deg) rotateX(2deg) translateY(-4px); }
  .book3d img { width: 100%; height: 58%; object-fit: cover; object-position: 50% 30%; }
  .book3d .cover::after { content: ""; position: absolute; left: 0; right: 0; top: 42%; height: 18%; background: linear-gradient(transparent, #0b070a); }
  .book3d .meta { position: absolute; left: 16px; right: 10px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
  .book3d .bk-k { font: 500 9px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
  .book3d b { font-weight: 900; font-size: 14px; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
  .book3d .bk-f { font: 500 8px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-top: 2px; }

  /* Day 4: four team members, four lines, one app (the app name swaps: Claude, ChatGPT, Gemini, Grok) */
  .intoapp { margin: 4px 0 0; }
  .intoapp .four { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
  .intoapp .four img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--pink), 0 0 12px rgba(255,10,133,.55); }
  .intoapp .feed { display: block; width: 100%; height: 52px; overflow: visible; }
  .intoapp .feed path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke: #ff2e97; stroke-dasharray: 6 10; filter: drop-shadow(0 0 3px var(--glow)); animation: flow 1.6s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -32; } }
  .intoapp .app { margin: 0 auto; width: max-content; min-width: 70%; text-align: center; border-radius: 14px; padding: 10px 16px; background: #120a10;
    box-shadow: 0 0 0 1px rgba(255,46,151,.7), 0 0 22px rgba(255,10,133,.35); }
  .intoapp .app-n { display: inline-block; font: 400 24px/1.2 "Tilt Neon", sans-serif; color: var(--core); text-shadow: 0 0 6px var(--pink), 0 0 16px var(--glow); }
  .intoapp .logos4 { display: flex; justify-content: center; gap: 12px; margin: 8px 0 4px; }
  .intoapp .logos4 img { width: 26px; height: 26px; opacity: .45; filter: grayscale(.4); transition: opacity 250ms, transform 300ms var(--out-expo), filter 250ms; }
  .intoapp .logos4 img.on { opacity: 1; filter: none drop-shadow(0 0 6px rgba(255,255,255,.35)); transform: scale(1.18); }
  .intoapp .app-n { font-size: 20px; }
  .intoapp .app-n.all { font-size: 16px; white-space: normal; }
  .intoapp .app-n.out { opacity: 0; transform: translateY(-8px); filter: blur(4px); transition: all 220ms var(--in-quart, cubic-bezier(.5,0,.75,0)); }
  .intoapp .app-n.in { animation: flipin 320ms cubic-bezier(.16,1,.3,1); }
  @keyframes flipin { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

  /* team cards: portraits in the neon ring; the paid roles shown greyed out */
  .badge { overflow: hidden; }
  .badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .member .badge { width: 84px; height: 84px; }
  .later div { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
  .later img { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
  @media (prefers-reduced-motion: reduce) { .intoapp .feed path { animation: none; } }

  /* phone: a pill that follows you once the hero form is off screen (one tap back to the form) */
  .dock { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 30; display: none; transform: translateY(140%); transition: transform 400ms var(--out-expo); }
  .dock .btn { width: 100%; }
  .dock.show { transform: none; }

  /* motion: C1 word blur and rise, C2 mask reveal, D cards. Everything is in place without JS. */
  .js .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.3em); }
  .js .w.in { opacity: 1; filter: blur(0); transform: none; transition: opacity 270ms var(--out-quart), filter 350ms var(--out-quart), transform 450ms var(--out-expo); }
  .js .rv { opacity: 0; transform: translateY(28px) scale(.98); }
  .js .rv.in { opacity: 1; transform: none; transition: opacity 300ms var(--out-quart), transform 500ms var(--out-expo); }
  .js .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
  .js .line > span { display: inline-block; transform: translateY(105%); }
  .js .line.in > span { transform: none; transition: transform 600ms var(--out-expo); }
  .js .line.open { overflow: visible; }   /* once the line has landed, let the neon glow spill past the mask */
  .js .bloom { opacity: 0; transform: scale(.5); }
  .js .bloom.in { opacity: 1; transform: none; transition: opacity 2000ms var(--css-ease) 750ms, transform 2000ms var(--css-ease) 750ms; }
  .js .rule { transform: scaleX(0); }
  .js .rule.in { transform: none; transition: transform 900ms var(--in-out); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hum, .tube.ignite.on { animation: none; }
    .tube.ignite { color: var(--core); text-shadow: 0 0 2px #fff, 0 0 6px var(--pink), 0 0 14px var(--pink), 0 0 30px var(--glow), 0 0 60px rgba(255,10,133,.7); }
    .js .line { overflow: visible; }
    .js .wires path { stroke-dashoffset: 0 !important; transition: none !important; }
    .js .w, .js .rv, .js .line > span, .js .bloom, .js .rule { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
    .dock { transition: none; }
  }

  @media (max-width: 900px) {
    .hero { padding-top: 40px; }
    .bloom { right: -40%; top: 20%; width: 140%; height: 90%; }
    .hero .grid, .cols, .who { grid-template-columns: 1fr; }
    .stage { aspect-ratio: 16 / 12; }
    .bignum { font-size: 26vw; }
    form.join { grid-template-columns: 1fr; }
    .proof .wrap { grid-template-columns: repeat(2, 1fr); }
    .days, .books, .after { grid-template-columns: 1fr; }
    .day { min-height: 0; }
    .have { grid-template-columns: 1fr; }
    section { padding: 80px 0; }
    .wrap { padding: 0 16px; }
    .brand { font-size: 14px; } .brand .tube { font-size: 16px; } .top .btn { padding: 10px 13px; font-size: 13px; }
    .top .wrap { gap: 10px; } .brand { margin-right: auto; }
    .dock { display: block; }
    .tube { white-space: normal; }   /* long neon phrases may wrap on phones rather than spill off the screen */
    footer { padding-bottom: 96px; }
  }