/* Elena Sofia Olivieri, portfolio: page and project styles. Shared reel engine styles are in reel.css */

  :root {
    /* one cool grey scale (Apple-like, the faintest hint of blue, never warm), from the page to the ink.
       Every grey on the page comes from here. Text uses only 900–600, all at least 4.5:1 on the page (AA):
       900 titles, links and actions (16:1), 800 emphasis (12:1), 700 reading text (8.8:1), 600 secondary and meta (4.9:1).
       Below 600 never for text: 500 icons and control glyphs (3.5:1), 400 underlines and separators, 300 control borders,
       200 lines, 100–150 surfaces, 50 the page (a cool white, never cream), white the cards on surfaces */
    --white: #FFFFFF;
    --gray-50: #FEFEFE;
    --gray-100: #F5F5F7;
    --gray-150: #EFEFF2;
    --gray-200: #E8E8ED;
    --gray-300: #D2D2D7;
    --gray-400: #AEAEB2;
    --gray-500: #86868B;
    --gray-600: #6E6E73;
    --gray-700: #48484A;
    --gray-800: #333336;
    --gray-900: #1D1D1F;
    /* spacing: one 8-based scale (4 only for hairline gaps inside a line of text) */
    --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;
    /* type: six sizes, all even, each with its line height and tracking (tighter as it grows) */
    --fs-display: 40px; --lh-display: 44px; --tr-display: -0.025em;   /* the name */
    --fs-title: 28px;   --lh-title: 34px;   --tr-title: -0.015em;     /* project and section titles */
    --fs-heading: 20px; --lh-heading: 28px; --tr-heading: -0.01em;    /* header, closing line */
    --fs-body: 16px;    --lh-body: 24px;                              /* reading text */
    --fs-small: 14px;   --lh-small: 20px;                             /* years, links, cards, footer */
    --fs-meta: 12px;    --lh-meta: 16px;    --tr-meta: 0.01em;        /* status, counts, time */
    /* roles */
    --bg: var(--gray-50);
    --card: var(--white);
    --ink: var(--gray-900);
    --text: var(--gray-700);
    --muted: var(--gray-600);
    --meta: var(--gray-600);
    --icon: var(--gray-500);
    --hint: var(--gray-400);
    --line: var(--gray-200);
    --focus: color-mix(in srgb, var(--gray-900) 55%, transparent);
    --surface-1: var(--gray-100);
    --surface-2: var(--gray-150);
    --surface-3: var(--gray-200);
    --surface-4: var(--gray-150);
    --display: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --body: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light; /* light mode only, also on devices set to dark */
  }
  @media (max-width: 900px) { :root { --fs-display: 32px; --lh-display: 36px; --fs-title: 24px; --lh-title: 30px; } }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: 16px; scrollbar-gutter: stable; }
  body {
    margin: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg); color: var(--ink);
    font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--ink); text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  /* keyboard focus, the Apple way: a soft ring set a little apart, that follows the shape of what it surrounds
     (round on the pill button, rounded on cards). Grey from the scale, 3.8:1 on the page so it is always seen.
     Only on keyboard use (:focus-visible), never on a mouse click */
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  a:not(.button):focus-visible { border-radius: 4px; }
  img { max-width: 100%; }

  /* Two columns like druids: fixed intro on the left, scrolling work on the right */
  .layout {
    max-width: 1240px; margin: 0 auto; padding: 0 var(--space-5);
    display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 0 var(--space-7); overflow-anchor: none;
  }
  .intro {
    position: fixed; top: 0; left: max(8px, calc((100vw - 1240px) / 2 + 8px)); width: min(400px, calc(100vw - 16px)); z-index: 2;
    height: 100dvh; overflow-y: auto;
    padding: var(--space-7) var(--space-2) var(--space-6) 0; margin-left: 0; scrollbar-width: thin;
    /* the column scrolls, so it clips: 24px of room on the left (taken back with the margin) keep the focus rings
       of the portrait and the Email link whole */
    padding-left: var(--space-4);
  }
  .feed { grid-column: 2; padding: var(--space-7) 0 var(--space-6); max-width: 680px; min-width: 0; }
  .feed > section:first-child,
  .feed > [hidden] + section { margin-top: 0; }

  /* Hero */
  /* Illustrated sticker with a transparent background and its own white outline, so it works in both themes */
  .portrait { display: block; width: auto; height: 144px; margin-left: 0; object-fit: contain; object-position: left center; }
  .portrait--pending { opacity: 0; }
  .activity-panel { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; min-height: 128px; max-width: var(--name-width, 100%); margin-top: var(--space-5); padding: var(--space-3) 0 var(--space-3) var(--space-3); }
  /* nothing in the left column runs past the last letter of the name (--name-width, measured in main.js) */
  .intro .status, .intro .contacts { max-width: var(--name-width, 100%); }
  .activity-panel .portrait { position: absolute; left: -14px; top: -35px; height: 154px; width: auto; margin: 0; }
  .intro h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 500; color: var(--ink); margin: var(--space-4) 0 var(--space-2); }
  .portrait-toggle { position: absolute; left: -14px; top: -35px; width: 154px; height: 154px; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; }
  .portrait-toggle .portrait { position: static; height: 100%; width: auto; margin: 0; }
  .portrait-toggle__hint { position: absolute; right: 2px; bottom: 0; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--gray-300); border-radius: 50%; background: var(--card); color: var(--icon); font-size: var(--fs-small); line-height: 1; }
  .portrait-toggle:hover .portrait-toggle__hint { background: var(--gray-100); color: var(--ink); }
  .now { grid-column: 2; min-width: 0; margin: 0; }
  .now__meta, .now__mood { margin: 0; }
  .now__meta { padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); color: var(--meta); font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
  .location { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .location svg { flex: none; color: var(--icon); }
  .now__meta { display: flex; align-items: center; gap: var(--space-3); }
  .now__mood { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); font-weight: 400; color: var(--text); }
  @media (max-width: 380px) {
    .activity-panel { grid-template-columns: 96px minmax(0, 1fr); }
    .activity-panel .portrait { height: 120px; left: -11px; top: -22px; }
    .portrait-toggle { width: 120px; height: 120px; left: -11px; top: -22px; }
  }
  /* status pill: a soft grey surface, the first words in ink */
  .status {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--surface-1);
    font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted);
  }
  .status b { font-weight: 600; color: var(--ink); }
  /* below 900px the name is smaller, so the pill drops to the meta size to stay on one line within it */
  @media (max-width: 900px) { .status { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); } }
  /* a small calendar page before the words (28 Oct, C3 of previews/status-calendar.html): green band, the day under it.
     The last page of the month before sits on top and falls away once (class go, set by main.js), the 1st of the free month stays */
  .status { padding-left: 10px; }
  .status__cal { position: relative; flex: none; perspective: 40px; }
  .status .cal { display: grid; grid-template-rows: 5px 1fr; width: 14px; height: 15px; border-radius: 3px; overflow: hidden; background: var(--card);
    box-shadow: 0 0 0 1px color-mix(in srgb, #32945C 35%, transparent), 0 1px 2px color-mix(in srgb, var(--gray-900) 8%, transparent); }
  .status .cal::before { content: ""; background: #32945C; }
  .status .cal i { font-style: normal; font-size: 8px; line-height: 10px; font-weight: 600; letter-spacing: 0; text-align: center; color: var(--ink); }
  .status .cal--before { position: absolute; inset: 0; transform-origin: 50% 0; }
  .status__cal.go .cal--before { animation: status-tear 1.1s cubic-bezier(.45, 0, .2, 1) both; }
  .status__cal.done .cal--before, .work-dialog__status .cal--before { opacity: 0; }   /* the copy in the offer panel shows the free month only */
  @keyframes status-tear { 0% { transform: none; opacity: 1; } 60% { transform: rotateX(-80deg) translateY(-2px); opacity: 1; } 100% { transform: rotateX(-90deg) translateY(-6px); opacity: 0; } }
  .intro .bio { max-width: var(--name-width, 100%); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--text); margin-bottom: var(--space-4); }
  @media (max-width: 900px) { .intro .bio { max-width: none; } }   /* one column: the bio runs the full width */
  .intro .contacts { font-size: var(--fs-small); line-height: var(--lh-small); gap: var(--space-2) var(--space-3); }
  .intro .contacts a { color: var(--text); font-weight: 400; text-decoration-color: var(--hint); }
  .intro .contacts a:hover { color: var(--ink); }
  h1 {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.025em;
    font-size: var(--fs-display); line-height: var(--lh-display); margin: 0 0 var(--space-3);
  }
  .bio { margin: 0 0 var(--space-4); }
  .contacts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }

  section { margin-top: var(--space-8); }
  h2 {
    font-family: var(--display); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title);
    margin: 0 0 var(--space-4);
  }

  /* Help list */
  .help { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
  .help { color: var(--text); }
  .help b { display: block; font-weight: 500; color: var(--gray-800); }


  /* Projects */
  /* no lines between projects: the space and the year carry the break (96px between one case and the next) */
  .project { padding: var(--space-6) 0; }
  .project:first-child { padding-top: var(--space-1); }
  /* case titles carry the page: they are what people scan. The sticky "What a ride so far" stays small */
  .project h3 {
    font-family: var(--display); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title);
    margin: 0 0 var(--space-3); letter-spacing: var(--tr-title);
  }
  .project__heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-1); }
  .project__heading h3 { margin: 0; }
  .project__year { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; margin: 0 0 var(--space-1); font-variant-numeric: tabular-nums; }
  .visual {
    margin-top: var(--space-4); aspect-ratio: 16 / 10; border-radius: 14px; position: relative; overflow: hidden;
  }
  .visual::after {
    content: ""; position: absolute; inset: 14% 22% -8% 22%; border-radius: 22px 22px 0 0;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 6%, transparent);
  }
  /* three tiles for a mobile product: the tall one (3:4, 3/5 of the width) sets the height, the two on the right share it */
  .trio { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .trio__tile { position: relative; overflow: hidden; border-radius: 14px; container-type: inline-size; }
  .trio__tall { grid-row: span 2; aspect-ratio: 3 / 4; }
  @media (max-width: 560px) {
    .trio { grid-template-columns: 1fr; grid-template-rows: none; }
    .trio__tall { grid-row: auto; }
    .trio__tile:not(.trio__tall) { aspect-ratio: 4 / 3; }
  }
  /* Teaching: a live critique board drawn in code. It scales like an image (sizes in cqw) and stays light in dark mode, like a screenshot */
  .board {
    position: relative; margin-top: var(--space-4); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; container-type: inline-size;
    background-color: #F3F3F5; background-image: radial-gradient(#D6D6DC 1px, transparent 1.2px); background-size: 3cqw 3cqw;
    color: #1D1D1F;
  }
  .board__wire {
    position: absolute; left: 32%; top: 14%; width: 36%; height: 72%; background: #fff; border-radius: 1.6cqw;
    box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .08); padding: 2.4cqw; display: flex; flex-direction: column; gap: 1.4cqw;
  }
  .board__wire i { display: block; height: 1.2cqw; background: #E6E6EA; border-radius: .6cqw; }
  .board__wire i:nth-child(1) { height: 2cqw; width: 45%; }
  .board__wire i:nth-child(2) { height: 14cqw; background: #EFEFF2; }
  .board__wire i:nth-child(4) { width: 70%; }
  .board__wire i:last-child { margin-top: auto; height: 4cqw; width: 55%; background: #1D1D1F; border-radius: 99px; }
  .board__note {
    position: absolute; width: 17cqw; min-height: 14cqw; padding: 1.6cqw; background: #FFF1A8;
    font-family: "Caveat", "Bradley Hand", cursive; font-weight: 700; font-size: 2.6cqw; line-height: 1.1;
    box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .08);
  }
  .board__note:nth-of-type(1) { left: 7%; top: 12%; transform: rotate(-4deg); }
  .board__note:nth-of-type(2) { right: 7%; top: 16%; transform: rotate(3deg); background: #FFE98A; }
  .board__note:nth-of-type(3) { left: 9%; top: 58%; transform: rotate(2deg); background: #FFF4BD; animation: board-drag 9s ease-in-out infinite; }
  .board__cursor { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: .4cqw; }
  .board__cursor svg { width: 2.6cqw; height: 2.6cqw; }
  .board__cursor span { font-size: 1.6cqw; font-weight: 600; padding: .3cqw 1cqw; border-radius: 99px; margin-top: 1.6cqw; white-space: nowrap; }
  .board__cursor--elena { left: 76%; top: 80%; animation: board-elena 9s ease-in-out infinite; }
  .board__cursor--elena span { background: #1D1D1F; color: #fff; }
  .board__cursor--student { left: 30%; top: 8%; animation: board-student 9s ease-in-out infinite; }
  .board__cursor--student span { background: #fff; color: #1D1D1F; border: 1px solid #D6D6DC; }
  .board__bubble {
    position: absolute; left: 66%; top: 60%; z-index: 2; max-width: 26cqw; padding: 1cqw 1.4cqw;
    background: #fff; border: 1px solid #D6D6DC; border-radius: 1.4cqw 1.4cqw 1.4cqw .3cqw;
    font-size: 1.7cqw; line-height: 1.3; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .06); opacity: 0; animation: board-bubble 9s ease-in-out infinite;
  }
  .board__bubble b { display: block; font-size: 1.4cqw; font-weight: 600; color: #6E6E73; }
  @keyframes board-elena { 0% { left: 76%; top: 80%; } 22%, 60% { left: 58%; top: 74%; } 80% { left: 84%; top: 44%; } 100% { left: 76%; top: 80%; } }
  @keyframes board-bubble { 0%, 26% { opacity: 0; transform: translateY(.6cqw); } 32%, 66% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
  @keyframes board-student {
    0% { left: 30%; top: 8%; } 18%, 26% { left: 16%; top: 66%; } 46% { left: 20%; top: 74%; }
    60% { left: 34%; top: 92%; } 85% { left: 26%; top: 30%; } 100% { left: 30%; top: 8%; }
  }
  @keyframes board-drag { 0%, 26% { transform: rotate(2deg) translate(0, 0); } 46%, 82% { transform: rotate(-1deg) translate(4cqw, 6cqw); } 100% { transform: rotate(2deg) translate(0, 0); } }
  /* still for now: the critique frame with Elena's comment on screen (the loop keyframes above are kept for later) */
  .board__note, .board__cursor, .board__bubble { animation: none !important; }
  .board__bubble { opacity: 1; }
  /* Proptech audit: a listing screen where a cursor drops numbered findings, in a loop. Stays light in dark mode, like a screenshot */
  .audit {
    position: relative; margin-top: var(--space-4); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; container-type: inline-size;
    background: #F3F3F5; color: #1D1D1F;
  }
  .audit__listing {
    position: absolute; left: 6%; top: 8%; width: 44%; height: 84%; background: #fff; border-radius: 1.6cqw;
    box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .07); padding: 1.8cqw; display: flex; flex-direction: column; gap: 1.2cqw; font-size: 1.6cqw;
  }
  .audit__photo { height: 15cqw; border-radius: 1cqw; background: linear-gradient(160deg, #E9EAEE, #DADCE2); display: grid; place-items: center; }
  .audit__photo svg { width: 7cqw; height: 7cqw; opacity: .5; }
  .audit__price { font-size: 2.6cqw; font-weight: 700; letter-spacing: -.02em; }
  .audit__addr { color: #6E6E73; }
  .audit__chips { display: flex; gap: .8cqw; }
  .audit__chips span { padding: .3cqw 1cqw; border-radius: 99px; background: #F1F1F4; font-size: 1.4cqw; }
  .audit__cta { margin-top: auto; text-align: center; padding: 1cqw; border-radius: 99px; background: #1D1D1F; color: #fff; font-weight: 600; }
  .audit__pin {
    position: absolute; z-index: 2; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%;
    background: #D93B3B; color: #fff; font-size: 1.6cqw; font-weight: 700; display: grid; place-items: center;
    box-shadow: 0 0 0 .5cqw rgba(217, 59, 59, .18); transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
  }
  .audit__pin--mid { background: #E5A000; box-shadow: 0 0 0 .5cqw rgba(229, 160, 0, .2); }
  .audit__findings { position: absolute; left: 56%; top: 10%; width: 38%; display: grid; gap: 1.4cqw; }
  .audit__finding {
    display: grid; grid-template-columns: 3cqw 1fr; gap: 1cqw; align-items: start; padding: 1.2cqw; border-radius: 1.2cqw;
    background: #fff; font-size: 1.55cqw; line-height: 1.3; opacity: 0; transform: translateY(1cqw); transition: opacity .4s ease, transform .4s ease;
  }
  .audit__finding b { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #D93B3B; color: #fff; display: grid; place-items: center; font-size: 1.4cqw; }
  .audit__finding--mid b { background: #E5A000; }
  .audit__finding small { display: block; color: #6E6E73; font-size: 1.3cqw; margin-top: .3cqw; }
  .audit .on { transform: none; opacity: 1; }
  .audit__pin.on { transform: scale(1); }
  .audit__cursor {
    position: absolute; z-index: 5; left: 104%; top: 104%; display: flex; align-items: flex-start; gap: .4cqw; pointer-events: none;
    transition: left .8s cubic-bezier(.4, 0, .2, 1), top .8s cubic-bezier(.4, 0, .2, 1);
  }
  .audit__cursor svg { width: 2.6cqw; height: 2.6cqw; transition: transform .15s ease; }
  .audit__cursor.click svg { transform: scale(.8); }
  .audit__cursor span { font-size: 1.6cqw; font-weight: 600; padding: .3cqw 1cqw; border-radius: 99px; margin-top: 1.6cqw; background: #1D1D1F; color: #fff; }
  /* still for now: all three findings on screen, no cursor */
  .audit__pin, .audit__finding { transform: none; opacity: 1; transition: none; }
  .audit__cursor { display: none; }
  /* AI RegTech: the legal assistant story, built in code. Everything is scoped under .reel */
  /* the reel is the size container: everything inside is sized in cqw, so it scales like an image */
  .reel {
    background: radial-gradient(120% 90% at 0% 0%, #F1E6FA 0%, transparent 60%), radial-gradient(90% 90% at 0% 100%, #FBE8EF 0%, transparent 60%),
                linear-gradient(135deg, #F6EEFA, #ECE1F8);
  }

  .reel .app {
    --bg: #FAFAFB; --card: #FFFFFF; --line: #ECEAF0; --text: #22222A; --text-2: #55555F; --text-3: #7C7C88;
    --accent: #86307A; --accent-soft: #F7EDF5; --accent-mid: #C99BC0; --accent-line: #ECD3E7; --accent-wash: #FDF8FC; --ok: #15803D;
    /* 1 unit = 1% of the app width (the app is 86% of the reel) */
    --u: .86cqw;
    position: absolute; left: 7%; width: 86%; top: 8%; height: 84%;
    border-radius: calc(.9 * var(--u)); overflow: hidden; background: var(--bg); color: var(--text-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 calc(.8 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .04), 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, .07);
    font-family: "Satoshi", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: calc(1.9 * var(--u)); line-height: 1.45;
  }

  .reel .bar { position: absolute; left: 0; right: 0; top: 0; height: calc(5.4 * var(--u)); display: flex; align-items: center; gap: var(--u); padding: 0 calc(3 * var(--u)); border-bottom: 1px solid var(--line); background: var(--card); font-size: calc(1.6 * var(--u)); z-index: 3; }

  .reel .bar .dots { display: flex; gap: calc(.7 * var(--u)); margin-right: calc(1.4 * var(--u)); }

  .reel .bar .dots i { width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 50%; background: #F2C4C1; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); }
  .reel .bar .dots i:nth-child(2) { background: #F3DDB0; }
  .reel .bar .dots i:nth-child(3) { background: #C3E2C6; }

  .reel .bar b { font-weight: 500; color: var(--text); }


  /* shared pieces */
  .reel .avatar { flex: none; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: calc(.6 * var(--u)); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: calc(2 * var(--u)); }

  .reel .card { background: var(--card); border-radius: calc(.7 * var(--u)); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 calc(.3 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .03); }

  .reel .field { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.2 * var(--u)) calc(1.2 * var(--u)) calc(2.2 * var(--u)); color: var(--text-3); }

  .reel .field .send { flex: none; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(.6 * var(--u)); background: var(--accent); color: #fff; display: grid; place-items: center; font-size: calc(1.8 * var(--u)); }

  .reel .cite { display: inline-grid; place-items: center; min-width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); padding: 0 calc(.5 * var(--u)); margin-left: calc(.7 * var(--u)); border-radius: calc(.35 * var(--u)); background: var(--accent-soft); color: var(--accent); font-size: calc(1.35 * var(--u)); font-weight: 500; vertical-align: calc(.25 * var(--u)); transition: background .4s ease, color .4s ease; }

  .reel .cite.lit { background: var(--accent); color: #fff; }

  .reel .cite + .cite { margin-left: calc(.35 * var(--u)); }

  /* Myna UI icons: each says its size in units (--sz), the stroke is worked out so the line is 1.5/24 of 2.2 units everywhere */
  .reel svg.rxi { flex: none; width: calc(var(--sz) * var(--u)); height: calc(var(--sz) * var(--u)); stroke-width: calc(3.3 / var(--sz)); }

  /* everything that enters later starts hidden; the script brings it in */
  .reel .later { opacity: 0; }


  /* --- welcome: start from a topic --- */
  .reel .welcome { position: absolute; left: calc(7 * var(--u)); right: calc(7 * var(--u)); top: calc(8.4 * var(--u)); display: grid; gap: calc(2 * var(--u)); justify-items: center; }

  .reel .welcome .avatar { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); font-size: calc(2.6 * var(--u)); }

  .reel .welcome h3 { font-family: inherit; margin: 0; font-size: calc(3.2 * var(--u)); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--text); }

  .reel .welcome .lead { margin: calc(-1.2 * var(--u)) 0 calc(.4 * var(--u)); color: var(--text-3); font-size: calc(1.8 * var(--u)); }

  .reel .welcome .field { width: 100%; }

  .reel .typed { color: var(--text); white-space: nowrap; overflow: hidden; }

  .reel .w-field { transition: box-shadow .3s ease; }

  /* fixed geometry: nothing in the field can change size while typing */
  .reel .w-field { height: calc(6.4 * var(--u)); }

  .reel .w-field .text { position: relative; flex: 1 1 0; display: flex; align-items: center; min-width: 0; height: calc(2.8 * var(--u)); overflow: hidden; }

  .reel .w-field .typed { flex: none; display: block; line-height: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); }

  .reel .w-field .send { flex: 0 0 calc(4 * var(--u)); }

  .reel .w-field .ph { position: absolute; left: 0; top: 0; line-height: calc(2.8 * var(--u)); color: var(--text-3); white-space: nowrap; pointer-events: none; }

  .reel .w-field.filled .ph { visibility: hidden; }

  .reel .w-field.focus { box-shadow: 0 0 0 calc(.3 * var(--u)) var(--accent-soft), 0 1px 2px rgba(0, 0, 0, .04), 0 calc(.3 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .03); }

  .reel .caret { width: 1.5px; height: calc(2.2 * var(--u)); margin-left: 1px; background: var(--accent); border-radius: 1px; opacity: 0; }

  .reel .w-field.focus .caret { opacity: 1; animation: rt-blink 1s steps(1) infinite; }

  .reel .w-field.is-typing .caret { animation: none; opacity: 1; }

  @keyframes rt-blink { 50% { opacity: 0; } }

  .reel .topics { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--u)); }

  .reel .topic { padding: calc(1.6 * var(--u)) calc(1.8 * var(--u)); display: grid; grid-template-columns: calc(4 * var(--u)) 1fr; align-items: center; gap: 0 calc(1.4 * var(--u)); transition: background .5s ease, box-shadow .5s ease; }

  .reel .topic .ic { grid-row: span 2; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(.5 * var(--u)); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }

  .reel .topic b { font-weight: 500; color: var(--text); font-size: calc(1.8 * var(--u)); line-height: 1.25; align-self: end; }

  .reel .topic span { color: var(--text-3); font-size: calc(1.65 * var(--u)); align-self: start; }

  .reel .topic.lit { background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line), 0 1px 2px rgba(0, 0, 0, .04); }


  /* --- chat --- */
  .reel .q { position: absolute; right: calc(5 * var(--u)); top: calc(8.8 * var(--u)); max-width: 64%; margin: 0; padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border-radius: calc(.7 * var(--u)) calc(.7 * var(--u)) calc(.2 * var(--u)) calc(.7 * var(--u)); background: var(--accent-soft); color: var(--text); }

  .reel .reply { position: absolute; left: calc(5 * var(--u)); right: calc(5 * var(--u)); top: calc(17.6 * var(--u)); display: flex; gap: calc(1.8 * var(--u)); align-items: flex-start; }

  .reel .slot { position: relative; flex: 1; }

  .reel .slot > * { position: absolute; left: 0; top: 0; right: 0; }

  .reel .typing { display: inline-flex; gap: calc(.8 * var(--u)); padding: calc(1.6 * var(--u)) calc(2 * var(--u)); right: auto !important; }

  .reel .typing i { width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 50%; background: var(--accent-mid); animation: rt-bounce 1.2s ease-in-out infinite; }

  .reel .typing i:nth-child(2) { animation-delay: .15s; }
 .reel .typing i:nth-child(3) { animation-delay: .3s; }

  @keyframes rt-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-40%); opacity: 1; } }

  .reel .searching { display: grid; grid-template-columns: calc(2.2 * var(--u)) 1fr; grid-template-rows: calc(4.4 * var(--u)) auto; column-gap: calc(1.2 * var(--u)); align-items: center; color: var(--text-2); }

  .reel .searching > div { display: contents; }

  .reel .searching small { grid-column: 2; margin-top: calc(-.4 * var(--u)); color: var(--text-3); font-size: calc(1.65 * var(--u)); align-self: start; }

  .reel .spinner { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; border: calc(.35 * var(--u)) solid var(--accent-soft); border-top-color: var(--accent); animation: rt-spin .9s linear infinite; }

  @keyframes rt-spin { to { transform: rotate(360deg); } }

  .reel .skeleton { display: grid; gap: calc(1.3 * var(--u)); padding-top: calc(1.4 * var(--u)); }

  .reel .skeleton i { display: block; height: calc(1.6 * var(--u)); border-radius: calc(.3 * var(--u)); background: linear-gradient(90deg, var(--accent-soft) 0%, var(--accent-wash) 40%, var(--accent-soft) 80%) 0 0 / 200% 100%; animation: rt-shimmer 1.4s linear infinite; }

  @keyframes rt-shimmer { to { background-position: -200% 0; } }

  .reel .answer { position: relative !important; padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)); }

  .reel .answer > p { margin: 0 0 calc(1.2 * var(--u)); font-weight: 500; color: var(--text); }

  .reel .answer ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--u); }

  .reel .answer li { display: grid; grid-template-columns: calc(2.4 * var(--u)) 1fr; }

  .reel .answer li::before { content: ""; width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); border-radius: 50%; background: #D3D2DA; margin-top: calc(1 * var(--u)); }

  .reel .answer li b { color: var(--text); font-weight: 500; }

  .reel .foot { display: flex; align-items: center; gap: calc(1.2 * var(--u)); margin-top: calc(1.6 * var(--u)); padding-top: calc(1.4 * var(--u)); border-top: 1px solid var(--line); font-size: calc(1.6 * var(--u)); color: var(--text-3); }

  .reel .foot a { color: var(--accent); font-weight: 500; }

  .reel .updated, .reel .tip { display: inline-flex; align-items: center; gap: calc(.4 * var(--u)); }
  .reel .updated { color: #166534; font-size: calc(1.5 * var(--u)); font-weight: 500; }
  .reel .votes { position: relative; margin-left: auto; display: flex; gap: calc(.4 * var(--u)); }
  .reel .vote { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); display: grid; place-items: center; border-radius: calc(.4 * var(--u)); color: #A3A3AE; transition: color .3s ease; }
  .reel .vote.lit { color: var(--accent); }
  .reel .vote.lit svg { fill: var(--accent-soft); }
  .reel .tip {
    position: absolute; right: 0; bottom: calc(100% + .8 * var(--u)); white-space: nowrap; padding: calc(.7 * var(--u)) calc(1.2 * var(--u));
    border-radius: calc(.5 * var(--u)); background: #fff; color: var(--text-2); font-size: calc(1.5 * var(--u));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 calc(.6 * var(--u)) calc(1.8 * var(--u)) rgba(0, 0, 0, .08);
  }
  .reel .composer { position: absolute; left: calc(5 * var(--u)); right: calc(5 * var(--u)); bottom: calc(3 * var(--u)); }


  /* --- sources sheet, slides over the chat from the right --- */
  .reel .panel {
    position: absolute; top: calc(5.4 * var(--u)); right: 0; bottom: 0; width: 42%; z-index: 2; transform: translateX(125%);
    background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-left: 1px solid rgba(0, 0, 0, .05); box-shadow: calc(-1.2 * var(--u)) 0 calc(4 * var(--u)) rgba(0, 0, 0, .06), inset 1px 0 0 rgba(255, 255, 255, .8);
    padding: calc(3 * var(--u)) calc(2.6 * var(--u)); display: flex; flex-direction: column; gap: calc(1.4 * var(--u));
  }

  .reel .panel header { display: flex; justify-content: space-between; align-items: baseline; }

  .reel .panel header b { font-weight: 500; color: var(--text); }

  .reel .panel header span { color: var(--text-3); font-size: calc(1.65 * var(--u)); }

  .reel .src { display: grid; grid-template-columns: calc(2.6 * var(--u)) 1fr; gap: 0 calc(1.2 * var(--u)); padding: calc(1.4 * var(--u)); border-radius: calc(.6 * var(--u)); background: rgba(240, 239, 244, .7); transition: background .4s ease; }

  .reel .src.on { background: var(--accent-soft); }

  .reel .src .box { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: calc(.3 * var(--u)); border: calc(.25 * var(--u)) solid #C9C6D1; display: grid; place-items: center; margin-top: calc(.1 * var(--u)); transition: background .3s ease, border-color .3s ease; }

  .reel .src.on .box { background: var(--accent); border-color: var(--accent); }

  .reel .src .box svg { color: #fff; opacity: 0; transition: opacity .3s ease; }

  .reel .src.on .box svg { opacity: 1; }

  .reel .src b { font-weight: 500; font-size: calc(1.7 * var(--u)); color: var(--text); }

  .reel .src > span:last-child { grid-column: 2; color: var(--text-3); font-size: calc(1.65 * var(--u)); line-height: 1.35; }

  .reel .btn { margin-top: auto; display: flex; align-items: center; justify-content: center; height: calc(4 * var(--u)); border-radius: calc(.6 * var(--u)); background: var(--accent); color: #fff; font-weight: 500; font-size: calc(1.7 * var(--u)); transition: opacity .3s ease; }

  .reel .btn.busy { opacity: .6; }


  .reel .popover {
    position: absolute; z-index: 6; width: calc(40 * var(--u)); padding: calc(1.6 * var(--u)) calc(1.8 * var(--u)); opacity: 0; pointer-events: none;
    background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-radius: calc(.7 * var(--u));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 calc(.8 * var(--u)) calc(2.4 * var(--u)) rgba(0, 0, 0, .07), inset 0 0 0 1px rgba(255, 255, 255, .7); font-size: calc(1.75 * var(--u)); line-height: 1.4;
    display: grid; grid-template-columns: auto 1fr; gap: calc(.3 * var(--u)) calc(1 * var(--u)); transform-origin: 0 0;
  }

  .reel .popover .cite { margin: 0; grid-row: span 3; align-self: start; vertical-align: 0; }

  .reel .popover b { font-weight: 500; color: var(--text); font-size: calc(1.9 * var(--u)); }

  .reel .popover small { color: var(--text-3); font-size: calc(1.6 * var(--u)); }

  .reel .popover span:last-child { color: var(--text-2); }

  .reel .cursor { position: absolute; z-index: 9; width: calc(3 * var(--u)); left: 0; top: 0; pointer-events: none; will-change: transform; transform-origin: 0 0; }

  .reel .q, .reel .w-field, .reel .panel, .reel .answer, .reel .line { will-change: transform, opacity; }

  .reel .cursor svg { display: block; width: 100%; }

  .reel .avatar .spark { width: 46%; height: 46%; }
  /* micro-interactions: rolling counters, a line that lights up when the answer is updated, the new citation */
  .reel .sel, .reel .n { display: inline-block; }
  .reel .cite-new { opacity: 0; }
  .reel .app { will-change: transform; }
  .reel .app::after {
    content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(0, 0, 0, .05);
  }
  /* finished project images: full width, rounded like the placeholder boxes */
  .shot { display: block; width: 100%; height: auto; margin-top: var(--space-4); border-radius: 14px; }
  .shot + .shot { margin-top: var(--space-3); }


  /* Section title stays on screen while the projects scroll, with a call to action next to it */
  .ride__head {
    position: sticky; top: 0; z-index: 100; background: var(--bg); isolation: isolate;   /* above every layer of the reels and close-ups (they go up to 30) */
    padding: var(--space-5) 0 var(--space-3); margin: calc(-1 * var(--space-5)) 0 var(--space-4); /* breathing room above when it sticks */ border-bottom: 1px solid var(--line);
  }
  .ride__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
  .ride__head h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 500; color: var(--text); letter-spacing: var(--tr-heading); margin: 0; }
  /* Keep the desktop header at its initial viewport position in either tab. */
  @media (min-width: 901px) {
    .ride__head { top: var(--space-5); }
    .ride__head::before {
      content: ""; position: absolute; inset: calc(-1 * var(--space-5)) 0 100%;
      background: var(--bg); pointer-events: none;
    }
  }
  /* The year of the project in view, next to the title */
  .ride__title { display: flex; align-items: baseline; gap: var(--space-2); }
  .ride__year { display: inline-block; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 600; letter-spacing: var(--tr-heading); color: var(--muted); font-variant-numeric: tabular-nums; }
  /* The line under the header fills up as you scroll through the work */
  .ride__head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
    transform-origin: left; transform: scaleX(var(--progress, 0));
  }
  .ride__cta { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-weight: 400; color: var(--muted); }
  /* just above 900px the right column is narrow and "Are you next?" pushed the button to a line of its own (a three-line sticky header):
     there only the button stays, next to the title (28 Oct, previews/footer-header.html). The words are a bare text node, so font-size 0 hides them */
  @media (min-width: 901px) and (max-width: 999px) { .ride__cta { font-size: 0; gap: 0; } }
  /* mobile only (shown in the max-width 900px block): the face that opens the bio, and "↑ Top" at the end. Both added by main.js */
  .ride__face, .ride__back { display: none; }
  /* the figure free, no box, sitting on the bar's line, with the "+" of the bio portrait (F of previews/mobile-bar-face.html, 29 Oct).
     56 tall in a 44 row: 4 out at the top, 8 at the bottom down to the line */
  .ride__face { position: relative; flex: none; align-self: flex-end; width: 50px; height: 56px; margin: -4px 0 -8px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
  .ride__face-clip { position: absolute; inset: 0; overflow: hidden; }
  .ride__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.14) translateY(4%); transform-origin: 50% 0; }   /* cut to the figure's edges (the PNG has ~7% of air around it) */
  .ride__face-hint { position: absolute; right: -3px; bottom: 6px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--gray-300); border-radius: 50%; background: var(--card); color: var(--icon); font-size: var(--fs-meta); line-height: 1; font-weight: 500; }
  .ride__back {
    align-items: center; gap: var(--space-1); height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
    font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--ink); cursor: pointer;
  }
  /* the bio in a sheet from the bottom, opened by the face: same portrait, bio, status and contacts as the column on top */
  .about-sheet {
    position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: 88dvh; overflow: auto;
    padding: var(--space-3) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 20px 20px 0 0; background: var(--bg); color: var(--text);
    box-shadow: 0 -8px 32px color-mix(in srgb, var(--gray-900) 14%, transparent);
  }
  .about-sheet::backdrop { background: color-mix(in srgb, var(--gray-900) 32%, transparent); }
  .about-sheet__close { position: absolute; right: var(--space-3); top: var(--space-3); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-1); color: var(--ink); cursor: pointer; }
  .about-sheet__portrait { display: block; height: 112px; width: auto; margin-top: var(--space-2); }
  /* the time and what she's probably doing, next to the portrait as in the bio (always open here, the face's "+" already opened it) */
  .about-sheet__top { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; padding-right: 52px; }   /* clear of the close button */
  .about-sheet__top .now { grid-column: 2; }
  .about-sheet h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: 600; color: var(--ink); text-wrap: balance; }
  .about-sheet .bio { margin: 0 0 var(--space-3); color: var(--text); text-wrap: pretty; }
  .about-sheet .contacts { margin-top: var(--space-4); font-size: var(--fs-small); line-height: var(--lh-small); gap: var(--space-2) var(--space-3); }
  .about-sheet .contacts a { color: var(--text); font-weight: 400; text-decoration-color: var(--hint); }
  @media (prefers-reduced-motion: no-preference) {
    .about-sheet[open] { animation: about-up .45s cubic-bezier(.22, 1, .36, 1); }
    .about-sheet[open]::backdrop { animation: about-fade .3s ease; }
  }
  @keyframes about-up { from { transform: translateY(100%); } }
  @keyframes about-fade { from { opacity: 0; } }

  /* Switcher between client work and side projects */
  /* a segmented control (28 Oct, option B of previews/fix-generici.html): a white pill slides on a grey track under the selected tab.
     The pill (.switcher__pill) is added by main.js; without script the selected tab gets the white itself */
  .switcher { position: relative; display: inline-flex; align-items: center; padding: 3px; margin-top: var(--space-2); border-radius: 999px; background: var(--surface-1); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
  .tab { position: relative; z-index: 1; display: inline-flex; align-items: center; font: inherit; color: var(--muted); background: none; border: 0; padding: 6px var(--space-3); border-radius: 999px; cursor: pointer; }
  .tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
  .tab[aria-selected="true"] { cursor: default; }
  .switcher:not(:has(.switcher__pill)) .tab[aria-selected="true"], .switcher__pill { background: var(--card); box-shadow: 0 1px 2px color-mix(in srgb, var(--gray-900) 8%, transparent), 0 2px 8px color-mix(in srgb, var(--gray-900) 6%, transparent); }
  .switcher__pill { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .switcher__pill.ready { transition: transform .4s cubic-bezier(.45, 0, .2, 1), width .4s cubic-bezier(.45, 0, .2, 1); } }
  /* My apps: a short intro, then one card per app, no picture: name, one line and the stage as four black ticks (27 Oct). Named .myapp, .app is the reels' own class */
  .apps__intro { display: grid; justify-items: start; gap: var(--space-1); margin-bottom: var(--space-5); }
  .apps__intro p { margin: 0; max-width: 42rem; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
  .apps__intro a, .myapp__link { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; text-decoration-color: var(--hint); }
  /* one card per app, one under the other, all the same height (27 Oct, previews/my-apps-final.html): white, the idea on the left in a rounded box on the app's own tint
     (corners like the client work visuals), name, line and the stage as four ticks on the right. Below 640px the picture goes on top. --tint and --accent come from SIDE in main.js */
  .myapps { display: grid; gap: var(--space-3); }
  .myapp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); height: 272px; background: var(--card); }
  .myapp__pic { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--tint); }
  .myapp__info { display: grid; align-content: center; justify-items: start; gap: var(--space-2); }
  .myapp h3 { margin: 0; font-family: var(--display); font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: 600; color: var(--ink); text-wrap: balance; }
  .myapp__text { margin: 0 0 var(--space-3); color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); text-wrap: pretty; }
  .myapp__stage { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  .myapp__stage b { margin-right: var(--space-1); color: var(--ink); font-weight: 600; }
  .myapp__ticks { display: flex; gap: var(--space-1); }
  /* thin segments, like the progress bars in Apple's own apps: four short lines, done ones full, today's one half */
  .myapp__ticks i { position: relative; width: 20px; height: 4px; border-radius: 2px; background: var(--tint); overflow: hidden; }
  .myapp__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
  .myapp__ticks i.on::after { transform: scaleX(1); }
  .myapp__ticks i.now::after { transform: scaleX(.5); }
  .myapp.wait .myapp__ticks i::after { transform: scaleX(0); }
  .myapp.go .myapp__ticks i.on::after { animation: myapp-fill .35s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--k) * 110ms); }
  .myapp.go .myapp__ticks i.now::after { animation: myapp-half .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--k) * 110ms); }
  @keyframes myapp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes myapp-half { from { transform: scaleX(0); } to { transform: scaleX(.5); } }
  .myapp__link { margin-top: var(--space-2); }
  @media (max-width: 640px) {
    .myapps { gap: var(--space-6); }
    .myapp { grid-template-columns: minmax(0, 1fr); grid-template-rows: 240px auto; height: auto; }
  }
  /* Tea Notes: the watch is one picture (Apple's bezel with the screen inside), 16px of air above and below */
  .myapp__watch { display: block; width: 153px; height: auto; filter: drop-shadow(0 13px 16px rgba(29, 29, 31, .2)) drop-shadow(0 2px 2px rgba(29, 29, 31, .14)); }
  @media (max-width: 640px) { .myapp__watch { width: 130px; } }
  /* the garden bed, seen from above: soil, white squares with the plants, the zucchini on its way in with the pointer */
  /* never wider than its box minus 16px a side, the right column gets narrow between 900 and 1100px */
  .myapp__bed { position: relative; width: min(256px, 100% - 32px); }
  @media (max-width: 640px) { .myapp__bed { width: min(220px, 100% - 32px); } }
  .myapp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: var(--space-2); border-radius: 16px; background: #CDB79E; }
  .myapp__grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #DCCAB4; }
  .myapp__grid i.on { background: var(--white); box-shadow: 0 1px 1px rgba(29, 29, 31, .04); }
  .myapp__bed .veg { display: block; width: 78%; height: 78%; background-position: center; background-size: contain; background-repeat: no-repeat; }
  .veg--tomato { background-image: url(assets/projects/apps/garden-tomato.png); }
  .veg--zucchini { background-image: url(assets/projects/apps/garden-zucchini.png); }
  .veg--carrot { background-image: url(assets/projects/apps/garden-carrot.png); }
  .myapp__drag { position: absolute; left: 73%; top: 31%; display: grid; place-items: center; width: 25%; aspect-ratio: 1; border-radius: 10px; background: var(--white);
    transform: rotate(-5deg) scale(1.06); box-shadow: 0 2px 4px rgba(29, 29, 31, .1), 0 14px 28px rgba(29, 29, 31, .2); }
  .myapp__drag svg { position: absolute; right: -10px; bottom: -14px; width: 22px; height: 22px; transform: rotate(5deg); }
  .project__label { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  .project__text { margin: 0; color: var(--text); }
  /* line breaks: titles balanced across their lines, paragraphs never end on a lone word. Page text only, never inside the reels */
  .intro h1, .ride__head h2, .feed > section > h2, .project__heading h3, .archive > h3, .archive__row h3 { text-wrap: balance; }
  .intro .bio, .now__mood, .help li, .project__text, .archive > p, .archive__more, footer p { text-wrap: pretty; }
  .num, .role { color: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
  .cta { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
  /* one button size for the whole page: 44px high (the touch target), 14px semibold, height set by min-height, not by the padding */
  .button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-4);
    position: relative; isolation: isolate; overflow: visible;
    background: var(--ink);
    color: var(--white); text-decoration: none; border: 0; border-radius: 999px;
    font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600;
    box-shadow: none;
    transition: none;
  }
  @property --liquid-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .button::before { display: none; }
  .button::after { display: none; }
  .button:hover { background: var(--gray-800); box-shadow: none; }
  .button:active { box-shadow: inset 0 2px 2px color-mix(in srgb, var(--gray-900) 24%, transparent), 0 1px 2px color-mix(in srgb, var(--gray-900) 10%, transparent); }
  @keyframes liquid-border { to { --liquid-angle: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover::before { animation: none; } }
  /* the footer: set apart by a line, two short notes in the smallest size */
  footer { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
    font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); color: var(--muted); }
  /* the footer sits at the end of the right column, as wide as the projects (28 Oct, option A of previews/fix-generici.html):
     one short colophon: signature, tools, then the note on the screens (version B of previews/footer-versions.html) */
  footer p { margin: 0; }

  /* Email copied: a small dark note next to the link it belongs to, gone after a moment. Under the link by default
     (in the left column, above it would cover the status pill), placed per spot below so it always stays in view */
  .work-dialog__contact { position: relative; }
  .copy-at { position: relative; display: inline-flex; }
  .copied {
    position: absolute; left: 0; top: calc(100% + var(--space-2)); white-space: nowrap; pointer-events: none;
    padding: var(--space-1) var(--space-2); border-radius: 6px; background: var(--ink); color: var(--white);
    font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); font-weight: 500;
    opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .copied.on { opacity: 1; transform: none; }
  .ride__cta .copied, .case__bar .copied { left: auto; right: 0; }   /* buttons on the right edge: the note lines up with their right side */
  .cta__actions .copied { left: calc(100% + var(--space-3)); top: calc(50% - var(--lh-meta) / 2 - var(--space-1)); }   /* the closing button: beside it, inside the grey box */

  /* "Try it" on the cards you can play with, a small glass pill */
  .try-hint {
    position: absolute; right: var(--space-3); top: var(--space-3); z-index: 40; display: inline-flex; align-items: center; gap: var(--space-1);
    height: 28px; padding: 0 var(--space-2) 0 var(--space-2); border-radius: 999px; pointer-events: none;
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px rgba(29, 29, 31, .06), 0 2px 8px rgba(29, 29, 31, .10);
    color: var(--ink); font-family: var(--body); font-weight: 600; font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta);
    opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .try-hint[data-pos="bottom"] { top: auto; bottom: var(--space-3); }
  .try-hint.on { opacity: 1; transform: none; }
  .try-hint.gone { display: none; }
  @media (prefers-reduced-motion: reduce) { .copied, .try-hint { transition: none; } }

  /* The pointer (mouse only, switched on by main.js): the arrow of a design tool, like the cursors in the reels,
     with a name tag that says what a click does. Without the script the system pointer stays */
  .has-pointer, .has-pointer * { cursor: none !important; }
  .has-pointer .try-hint { display: none; }   /* the tag does its job */
  .pointer { position: fixed; left: 0; top: 0; z-index: 1000; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
  .pointer.on { opacity: 1; }
  .pointer svg { position: absolute; left: -2.5px; top: -1.7px; width: 20px; height: 20px; transform-origin: 2.5px 1.7px; transition: transform .15s ease; filter: drop-shadow(0 1px 2px rgba(29, 29, 31, .15)); }
  .pointer.down svg { transform: scale(.88); }
  .pointer b {
    position: absolute; left: 14px; top: 19px; padding: 2px var(--space-2); border-radius: 999px; background: var(--ink); color: var(--white);
    font-family: var(--body); font-weight: 600; font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 2px 6px rgba(29, 29, 31, .15);   /* a white edge like the arrow's, so it reads on dark cards too */
    opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity .15s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .pointer.word b { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .pointer svg, .pointer b { transition: none; } }

  @media (prefers-reduced-motion: no-preference) {
    .project__text { transition: color .2s ease; }
  }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (max-width: 900px) {
    .layout { display: block; padding: 0 var(--space-3); }
    .portrait { height: 144px; width: auto; margin-left: 0; }
    .intro { position: static; left: auto; width: auto; height: auto; overflow: visible; padding: var(--space-6) 0 0; margin-left: 0; }
    .feed { grid-column: auto; padding-top: var(--space-7); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }   /* 96 made room for the old bottom bar (gone 29 Oct): 32 now, plus the iPhone's home bar */
    .project { padding: var(--space-5) 0; }   /* 64 between cases: 96 felt like a gap once the sticky head takes its share of the screen */
    /* mobile (29 Oct, previews/mobile-nav.html): one short bar at the top with the face, the tabs and "Say hello", 61px instead of the 192 of a head and a bottom bar.
       The title sits above it and scrolls away (main.js moves it), the year is left to each project, which shows its own */
    .ride > h2 { margin: 0 0 var(--space-3); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 500; color: var(--text); letter-spacing: var(--tr-heading); }
    .ride__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; margin-top: calc(-1 * var(--space-2)); }
    .ride__top { display: contents; }
    .ride__title { align-items: center; }
    .ride__year { display: none; }
    .ride__face { display: block; }
    .ride__head .switcher { order: 1; flex: none; margin-top: 0; margin-right: auto; }   /* next to the face at any width: space-between alone put it in the middle on wider phones and tablets */
    .ride__head .tab { padding: 9px 10px; }   /* 44 tall like the button next to it (3 + 9 + 20 + 9 + 3), 10 on the sides so face, tabs and button fit 343px */
    .ride__cta .button { white-space: nowrap; }
    .ride__cta { order: 2; display: grid; justify-items: end; align-items: center; gap: 0; font-size: 0; line-height: 0; }   /* no room for "Are you next?" (.ride__ask, main.js) */
    .ride__ask { display: none; }
    /* once the closing card is on screen (it has its own "Say hello") the bar's button makes way for "↑ Top" (.is-end, main.js) */
    .ride__cta > * { grid-area: 1 / 1; }
    .ride__back { display: inline-flex; opacity: 0; transform: translateY(6px); pointer-events: none; }
    .ride__head.is-end .ride__cta > .copy-at, .ride__head.is-end .ride__cta > .button { opacity: 0; transform: translateY(-6px); pointer-events: none; }
    .ride__head.is-end .ride__back { opacity: 1; transform: none; pointer-events: auto; }
    @media (prefers-reduced-motion: no-preference) { .ride__cta > * { transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); } }
    /* before it sticks only the tabs show (the face and "Say hello" would repeat the bio and the contacts just above): they come in once it reaches the top (.is-stuck, main.js) */
    .ride__face, .ride__cta { transition: opacity .25s ease; }
    .ride__head .switcher { transition: transform .35s cubic-bezier(.45, 0, .2, 1); }
    .ride__head:not(.is-stuck) .ride__face, .ride__head:not(.is-stuck) .ride__cta { opacity: 0; pointer-events: none; }
    .ride__head:not(.is-stuck) .switcher { transform: translateX(calc(-50px - var(--space-2))); }   /* to the left edge, where the face goes */
    @media (prefers-reduced-motion: reduce) { .ride__face, .ride__cta, .ride__head .switcher { transition: none; } }
  }
  @media (max-width: 560px) {
  }

  /* Co-living app: shared expenses between flatmates, on a phone. Frame, phone and touch come from reel.css, all scoped under .cl */
  .cl { background: #26262A; }
  /* MingCute icons: one line weight for the whole project. Each icon gives its size in screen units (--sz), the stroke is worked out so it is always .5cqw on screen */
  .cl svg.ic { width: calc(var(--sz, 6) * 1cqw); height: calc(var(--sz, 6) * 1cqw); stroke-width: calc(.5 * 24 / var(--sz, 6)); }
  .cl .reel-phone { --phone-w: 42cqw; left: 29%; top: max(3.75cqw, 20px); }
  /* inside the screen: 1cqw = 1% of the screen width. Type scale: 11 / 5.6 / 4.4 / 3.9 */
  .cl .ui {
    --card: #FFFFFF; --text: #22222A; --text-2: #55555F; --text-3: #6F6F7A; --line: #ECEAF0;
    --accent: #EF5B45; --accent-soft: #FDECE8; --ok: #1F7A4D; --ok-soft: #E3F4EA;
    position: absolute; inset: 0; color: var(--text-2);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 4.4cqw; line-height: 1.35;
  }
  .cl .ui b { font-weight: 500; color: var(--text); }
  .cl .ui small { font-size: 3.9cqw; }
  .cl .card { background: var(--card); border-radius: 3cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 .8cqw 2.4cqw rgba(0, 0, 0, .04); }
  .cl .num { font-variant-numeric: tabular-nums; }
  .cl .later { opacity: 0; }

  /* avatars: photos */
  .cl .av { width: 9cqw; height: 9cqw; border-radius: 50%; overflow: hidden; flex: none; background: #E8E9ED; box-shadow: 0 0 0 .8cqw #FAFAFB; }
  .cl .av img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

  /* the flat: context, quieter than the amount */
  .cl .flat { position: absolute; left: 6cqw; right: 6cqw; top: 14cqw; }
  .cl .flat small { display: block; color: var(--text-3); }
  .cl .flat__row { display: flex; justify-content: space-between; align-items: center; }
  .cl .flat__row > b { font-size: 5.6cqw; font-weight: 600; letter-spacing: -.01em; }
  .cl .stack { display: flex; }
  .cl .stack .av + .av { margin-left: -2.4cqw; }

  /* what you owe: the one thing on screen that matters */
  .cl .owe { position: absolute; left: 6cqw; right: 6cqw; top: 36cqw; padding: 5cqw; display: grid; gap: 3.6cqw; }
  .cl .owe__who { display: flex; align-items: center; gap: 3cqw; }
  .cl .owe__who .av { width: 10cqw; height: 10cqw; box-shadow: none; }
  .cl .owe__label { position: relative; flex: 1; height: 6cqw; }
  .cl .owe__label > span { position: absolute; left: 0; top: 0; line-height: 6cqw; white-space: nowrap; }
  .cl .owe__state { position: relative; height: 13cqw; }
  .cl .owe__state > * { position: absolute; left: 0; right: 0; top: 0; }
  .cl .owe__amount { font-size: 11cqw; font-weight: 700; color: var(--text); letter-spacing: -.03em; line-height: 13cqw; }
  /* settled: a quiet confirmation, not a headline */
  .cl .square { display: flex; align-items: center; gap: 2cqw; height: 13cqw; font-weight: 500; color: var(--ok); }
  .cl .square i { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--ok-soft); display: grid; place-items: center; }
  .cl .square i svg { --sz: 3.7; }
  .cl .owe__action { position: relative; height: 12cqw; }
  .cl .owe__action > * { position: absolute; inset: 0; }
  .cl .btn { display: flex; align-items: center; justify-content: center; gap: 2cqw; height: 12cqw; border-radius: 2.6cqw; background: var(--accent); color: #fff; font-weight: 500; will-change: transform; }
  .cl .done-note { display: flex; align-items: center; justify-content: center; height: 12cqw; border-radius: 2.6cqw; background: #F3F2F6; font-size: 3.9cqw; }

  /* why: the shared expense behind it */
  .cl .why { position: absolute; left: 6cqw; right: 6cqw; top: 94cqw; }
  .cl .why > small { display: block; margin-bottom: 2.4cqw; color: var(--text-3); }
  .cl .exp { padding: 4cqw; display: grid; grid-template-columns: 10cqw 1fr auto; gap: .4cqw 3cqw; align-items: center; }
  .cl .exp__ic { grid-row: span 2; width: 10cqw; height: 10cqw; border-radius: 2.4cqw; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
  .cl .exp__ic svg { --sz: 5.5; }
  .cl .exp small { color: var(--text-3); white-space: nowrap; }
  .cl .exp .num { grid-row: span 2; text-align: right; font-weight: 500; color: var(--text); }
  .cl .exp .num small { display: block; font-weight: 400; }

  /* tab bar */
  .cl .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 19cqw; padding: 2.4cqw 4cqw 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; box-shadow: 0 -1px 0 var(--line); }
  .cl .tabs span { display: grid; justify-items: center; align-content: start; gap: .6cqw; font-size: 3.9cqw; color: var(--text-3); }
  .cl .tabs span.on { color: var(--text); }
  .cl .tabs svg { --sz: 6; }

  /* pay sheet */
  .cl .scrim { position: absolute; inset: 0; background: rgba(20, 20, 24, .32); opacity: 0; }
  .cl .sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 3cqw 6cqw 11cqw; border-radius: 5cqw 5cqw 0 0; background: #fff; transform: translateY(105%); will-change: transform; }
  .cl .sheet__grab { width: 11cqw; height: 1.2cqw; margin: 0 auto 6cqw; border-radius: 1cqw; background: #DADAE0; }
  .cl .sheet__to { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; margin-bottom: 6cqw; }
  .cl .sheet__to .av { width: 14cqw; height: 14cqw; box-shadow: none; }
  .cl .sheet__to b { font-size: 11cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .cl .method { display: flex; justify-content: space-between; align-items: center; padding: 3.6cqw 4cqw; margin-bottom: 4cqw; border-radius: 2.6cqw; background: #F3F2F6; }
  .cl .sheet .btn { position: relative; height: 13cqw; }
  .cl .b-pay > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; }
  .cl .spinner { display: block; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: .6cqw solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: cl-spin .8s linear infinite; }
  @keyframes cl-spin { to { transform: rotate(360deg); } }
  .cl .sent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3cqw; background: #fff; border-radius: inherit; opacity: 0; }
  .cl .sent__check { width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
  .cl .sent__check svg { --sz: 8; }
  .cl .sent b { font-size: 5.6cqw; font-weight: 600; }

  /* a new shared expense: iOS banner, below the notch, never over it */
  .cl .notice { position: absolute; left: 3.5cqw; right: 3.5cqw; top: 10.5cqw; padding: 3.2cqw 4cqw; display: grid; grid-template-columns: 10cqw 1fr; gap: 0 3cqw; align-items: center; border-radius: 5cqw; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .14); opacity: 0; will-change: transform, opacity; z-index: 25; }
  .cl .notice .av { grid-row: span 2; width: 10cqw; height: 10cqw; box-shadow: none; }
  .cl .notice small { color: var(--text-2); }

  /* Co-living, two phones side by side: expenses on the left, repairs on the right. Tall 3:4 boxes so the phones stay readable
     at half the column; one under the other on phones. They take turns (reelRelay in reel.js) */
  .cl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .cl-duo > .reel-frame { margin-top: 0; aspect-ratio: 3 / 4; }
  /* backgrounds: the RegTech gradient (three radials + a linear) turned to the coral of the app, mirrored on the two boxes */
  .cl-duo > .cl--fix { background: radial-gradient(120% 90% at 0% 0%, #FAEBE3 0%, transparent 60%), radial-gradient(90% 90% at 0% 100%, #FCE6E1 0%, transparent 60%), radial-gradient(45% 75% at 100% 0%, #FBE5E0 0%, transparent 70%), linear-gradient(135deg, #FAF0EA, #F8E3DA); }
  .cl-duo > .cl:not(.cl--fix) { background: radial-gradient(120% 90% at 100% 0%, #FAEBE3 0%, transparent 60%), radial-gradient(90% 90% at 100% 100%, #FCE6E1 0%, transparent 60%), radial-gradient(45% 75% at 0% 0%, #FBE5E0 0%, transparent 70%), linear-gradient(225deg, #FAF0EA, #F8E3DA); }
  .cl-duo .reel-phone { --phone-w: 72cqw; left: 14cqw; top: max(5cqw, 20px); }
  @media (max-width: 560px) { .cl-duo { grid-template-columns: 1fr; } }

  /* repairs phone: three views stacked like an iOS navigation (services under, report in the middle, tracker on top).
     Inside the screen 1cqw = 1% of the screen width. Same type scale as the expenses phone: 7 / 5.6 / 4.4 / 3.9 */
  .cl--fix .fx-view { position: absolute; inset: 0; background: #FAFAFB; will-change: transform; }
  .cl--fix .fx-home { z-index: 1; transform: translateX(-28%); }
  .cl--fix .fx-report { z-index: 2; transform: translateX(100%); }
  .cl--fix .fx-track { z-index: 3; box-shadow: -2cqw 0 6cqw rgba(0, 0, 0, .06); }
  .cl--fix .fx-head { position: absolute; left: 6cqw; right: 6cqw; top: 14cqw; display: flex; justify-content: space-between; align-items: center; }
  .cl--fix .fx-h1 { font-size: 7cqw; font-weight: 700; letter-spacing: -.02em; }
  .cl--fix .fx-head .av { width: 10cqw; height: 10cqw; box-shadow: none; }
  .cl--fix .fx-seg { position: absolute; left: 6cqw; top: 28cqw; display: flex; padding: 1cqw; border-radius: 3cqw; background: #EEEDF2; }
  .cl--fix .fx-seg span { padding: 1.8cqw 4cqw; border-radius: 2.2cqw; font-size: 3.9cqw; }
  .cl--fix .fx-seg span.on { background: #fff; color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
  .cl--fix .fx-h2 { position: absolute; left: 6cqw; top: 44cqw; font-size: 5.2cqw; font-weight: 600; }
  .cl--fix .fx-rooms { position: absolute; left: 6cqw; right: 6cqw; top: 53cqw; display: grid; gap: 2.6cqw; }
  .cl--fix .fx-room { position: relative; height: 20cqw; padding: 0 4cqw; display: flex; align-items: center; justify-content: space-between; border-radius: 3cqw; overflow: hidden; color: #fff; font-size: 4.6cqw; font-weight: 600; background-size: cover; background-position: center; will-change: transform; }
  .cl--fix .fx-room::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 20, 24, .62), rgba(20, 20, 24, .15)); }
  .cl--fix .fx-room > * { position: relative; }
  .cl--fix .fx-room svg { --sz: 5; }
  /* room photos: placeholders until the Unsplash photos are in */
  .cl--fix .r1 { background-color: #8D8579; } .cl--fix .r2 { background-color: #9A8F84; } .cl--fix .r3 { background-color: #7F8C93; } .cl--fix .r4 { background-color: #8B9196; }

  /* navigation bar of the pushed views */
  .cl--fix .fx-nav { position: absolute; left: 4cqw; right: 6cqw; top: 13cqw; display: flex; align-items: center; gap: 2.4cqw; }
  .cl--fix .fx-nav svg { flex: none; --sz: 7; color: var(--text); }
  .cl--fix .fx-nav b { display: block; font-size: 5.6cqw; font-weight: 600; letter-spacing: -.01em; }
  .cl--fix .fx-nav small { display: block; color: var(--text-3); }

  /* report form */
  .cl--fix .fx-lbl { position: absolute; left: 6cqw; color: var(--text-3); }
  .cl--fix .fx-l1 { top: 34cqw; } .cl--fix .fx-l2 { top: 66cqw; } .cl--fix .fx-l3 { top: 110cqw; }
  .cl--fix .fx-chips { position: absolute; left: 6cqw; right: 6cqw; top: 40cqw; display: flex; flex-wrap: wrap; gap: 2.2cqw; }
  .cl--fix .chip { position: relative; display: flex; align-items: center; gap: 1.6cqw; height: 9.6cqw; padding: 0 3.6cqw; border-radius: 2.4cqw; background: #fff; color: var(--text); font-size: 4.2cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 .6cqw 1.8cqw rgba(0, 0, 0, .04); will-change: transform; }
  .cl--fix .chip__on { position: absolute; inset: 0; border-radius: inherit; background: var(--accent-soft); opacity: 0; }
  .cl--fix .chip__ic { position: relative; display: none; }
  .cl--fix .fx-sink .chip__ic { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; margin-left: -.6cqw; color: var(--accent); opacity: 0; }
  .cl--fix .fx-sink .chip__ic svg { --sz: 4.4; }
  .cl--fix .chip > :not(.chip__on) { z-index: 1; }
  .cl--fix .fx-note { position: absolute; left: 6cqw; right: 6cqw; top: 72cqw; height: 32cqw; padding: 4cqw; font-size: 4.4cqw; color: var(--text); will-change: transform; }
  .cl--fix .fx-ph { position: absolute; left: 4cqw; top: 4cqw; color: var(--text-3); }
  .cl--fix .fx-caret { display: inline-block; width: .5cqw; height: 5cqw; margin-left: .3cqw; vertical-align: -1cqw; background: var(--accent); opacity: 0; animation: fx-blink 1s steps(1) infinite; }
  @keyframes fx-blink { 50% { visibility: hidden; } }
  .cl--fix .fx-photos { position: absolute; left: 6cqw; top: 116cqw; display: flex; gap: 2.6cqw; }
  .cl--fix .fx-add, .cl--fix .fx-thumb { width: 20cqw; height: 20cqw; border-radius: 3cqw; }
  .cl--fix .fx-add { display: grid; place-items: center; background: #EEEDF2; color: var(--text-2); will-change: transform; }
  .cl--fix .fx-add svg { --sz: 7; }
  .cl--fix .fx-thumb { background: #7F8C93 center / cover; opacity: 0; }
  .cl--fix .fx-send { position: absolute; left: 6cqw; right: 6cqw; top: 146cqw; height: 13cqw; }
  .cl--fix .fx-send > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; }

  /* keyboard: iOS light, letters only, enough to read as typing */
  .cl--fix .fx-kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 24; padding: 2.4cqw 1cqw 14cqw; display: grid; gap: 2.6cqw; background: #D3D5DB; transform: translateY(100%); will-change: transform; }
  .cl--fix .kb__row { display: flex; justify-content: center; gap: 1.4cqw; }
  .cl--fix .k { display: grid; place-items: center; width: 8.4cqw; height: 10.6cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 .3cqw 0 #898A8D; color: #000; font-size: 5cqw; }
  .cl--fix .k--w { width: 11.6cqw; background: #ABB0BA; }
  .cl--fix .k--w2 { width: 21cqw; background: #ABB0BA; font-size: 3.9cqw; }
  .cl--fix .k--space { flex: 1; max-width: 50cqw; font-size: 3.9cqw; color: #555; }

  /* tracker: four steps on a rail, the booked visit is the card that matters */
  .cl--fix .fx-steps { position: absolute; left: 6cqw; right: 6cqw; top: 34cqw; }
  .cl--fix .fx-step { position: relative; z-index: 1; padding-left: 11cqw; will-change: transform, opacity; }
  .cl--fix .fx-step b { display: block; color: var(--text); font-size: 4.6cqw; }
  .cl--fix .fx-step small { display: block; color: var(--text-3); }
  .cl--fix .s1, .cl--fix .s2 { height: 19cqw; }
  .cl--fix .s3 { height: 45cqw; }
  .cl--fix .fx-dot { position: absolute; left: 0; top: .4cqw; z-index: 1; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 .6cqw #D9D8DE; color: #fff; will-change: transform, opacity; }
  .cl--fix .fx-dot svg { --sz: 3.8; }
  .cl--fix .done .fx-dot { background: var(--accent); box-shadow: none; }
  .cl--fix .s4 b, .cl--fix .s4 small { color: #A3A2AB; }
  /* the steps have their own layer (will-change), so the rail goes under them as a whole, not just under the dots */
  .cl--fix .fx-rail { position: absolute; z-index: 0; left: 3cqw; top: 3cqw; width: .7cqw; height: 83cqw; margin-left: -.35cqw; background: #E4E3E8; border-radius: 1cqw; }
  .cl--fix .fx-rail i { position: absolute; left: 0; right: 0; background: var(--accent); transform-origin: 50% 0; }
  .cl--fix .fx-rail .l1 { top: 0; height: 19cqw; }
  .cl--fix .fx-rail .l2 { top: 19cqw; height: 19cqw; }
  .cl--fix .fx-rail .l3 { display: none; }
  .cl--fix .fx-visit { margin-top: -1cqw; padding: 4.4cqw; display: grid; gap: .6cqw; }
  .cl--fix .fx-visit small { color: var(--accent); font-weight: 500; }
  .cl--fix .fx-visit b { font-size: 7cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
  .cl--fix .fx-visit span { color: var(--text-2); }

  /* "Report sent": the iOS banner of the expenses phone, with a check instead of a face */
  .cl--fix .fx-toast .sent__check { grid-row: span 2; width: 10cqw; height: 10cqw; }
  .cl--fix .fx-toast .sent__check svg { --sz: 5.5; }

  /* Fundraising platform: a product shot that bleeds off the right and bottom edges. Frame from reel.css, cursor/camera from reel.js, all scoped under .fr */
  /* background from Elena's Figma (node 146:8820): solid blue with three soft white glows */
  .fr {
    /* lighter than the original #0052FF (it read too heavy at this size): the system's Blue/80 base, glows a touch stronger */
    background:
      radial-gradient(34cqw 32cqw at 57% 17%, rgba(255, 255, 255, .48), rgba(255, 255, 255, .3) 35%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(40cqw 36cqw at 29.5% 83%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .32) 35%, rgba(255, 255, 255, .11) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(40cqw 36cqw at 103.6% 83%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .32) 35%, rgba(255, 255, 255, .11) 70%, rgba(255, 255, 255, 0)),
      #3D7BFF;
  }
  /* tones from the product mockup (node 563:12761): black sidebar, white header, light grey workspace, white cards, blue actions */
  .fr .app {
    --bg: #F2F2F2; --card: #FFFFFF; --line: #EEEEF1; --outline: #E2E2E7; --text: #1A1A1A; --text-2: #5A5A5A; --text-3: #707070; --chip: #F3F3F3; --btn2: #F5F5F5;
    --side: #2A2A2E; --side-on: #48484E; --side-text: #A9A9AF;
    --accent: #0052FF; --progress: #6C97FF; --accent-soft: #E5EEFF; --accent-line: #99B6FF; --accent-wash: #F5F8FF; --ok: #15803D; --ok-soft: #E4F4E9;
    /* a product shot, not a window: the app starts inside the frame and runs 20px past its right and bottom edges.
       --bleed keeps the right/bottom content clear of the hidden strip. 1 unit = 1% of the app width */
    --bleed: 20px; --u: calc(.91cqw + .2px);
    position: absolute; left: 9%; top: 10%; width: calc(91% + var(--bleed)); height: calc(90% + var(--bleed));
    border-radius: calc(1 * var(--u)); overflow: hidden; background: var(--bg); color: var(--text-2);
    box-shadow: 0 1px 2px rgba(0, 15, 51, .08), 0 calc(.8 * var(--u)) calc(2 * var(--u)) rgba(0, 15, 51, .1), 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 15, 51, .18);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: calc(1.8 * var(--u)); line-height: 1.5; letter-spacing: .005em;
    will-change: transform;
  }
  .fr .app::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
  .fr b { font-weight: 500; color: var(--text); }
  .fr small { font-size: calc(1.55 * var(--u)); color: var(--text-3); letter-spacing: .015em; }
  .fr .num { font-variant-numeric: tabular-nums; }
  .fr .later { opacity: 0; }
  /* the resting frame (before playing, between loops, reduced motion): the Series A model with the P&L drawer open */
  .fr .app.rest .v-inv { opacity: 0; }
  .fr .app.rest .v-model { opacity: 1; }
  .fr .app.rest .pl { transform: none; }
  .fr .app.rest .pl-scrim { opacity: 1; }
  .fr .card { background: var(--card); border-radius: calc(.85 * var(--u)); box-shadow: calc(-.17 * var(--u)) calc(-.17 * var(--u)) calc(.45 * var(--u)) rgba(0, 15, 51, .02), 0 calc(.35 * var(--u)) calc(.45 * var(--u)) rgba(0, 15, 51, .06); }
  .fr svg.i { width: calc(1.9 * var(--u)); height: calc(1.9 * var(--u)); display: block; flex: none; }

  /* sidebar: black, the active place in dark grey, the highlight travels between places */
  .fr .side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(6 * var(--u)); background: var(--side); z-index: 5; }
  .fr .side__hl { position: absolute; left: var(--u); top: calc(12.4 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(.5 * var(--u)); background: var(--side-on); will-change: transform; }
  .fr .nav { position: absolute; left: var(--u); top: calc(2.4 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); display: grid; place-items: center; color: var(--side-text); transition: color .35s ease; }
  .fr .nav svg.i { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
  .fr .n-rep { top: calc(7.4 * var(--u)); }
  .fr .n-inv { top: calc(12.4 * var(--u)); }
  .fr .nav.on { color: #fff; }

  /* views: a white header, then the light grey workspace */
  .fr .view { position: absolute; left: calc(6 * var(--u)); right: var(--bleed); top: 0; bottom: var(--bleed); will-change: transform, opacity; }
  .fr .vh { display: flex; justify-content: space-between; align-items: center; padding: calc(3.8 * var(--u)) calc(3.4 * var(--u)) calc(2.4 * var(--u)); background: var(--card); border-bottom: 1px solid var(--line); }
  .fr .vh__t { display: grid; }
  .fr .vh__t b { font-size: calc(2.6 * var(--u)); font-weight: 500; letter-spacing: -.005em; line-height: 1.3; margin-bottom: calc(.2 * var(--u)); }
  .fr .body { padding: calc(2.4 * var(--u)) calc(3.4 * var(--u)); }
  .fr .btn { position: relative; display: inline-grid; place-items: center; height: calc(3.8 * var(--u)); padding: 0 calc(1.8 * var(--u)); border-radius: calc(.55 * var(--u)); font-weight: 500; line-height: 1.2; white-space: nowrap; will-change: transform; }
  /* colour only where it matters: one blue action per screen, everything else neutral */
  .fr .btn--ghost { color: var(--text); background: var(--btn2); }
  .fr .btn--solid { color: #fff; background: var(--accent); }
  .fr .btn .ic { display: inline-flex; align-items: center; gap: calc(.7 * var(--u)); }
  .fr .chip { display: inline-flex; align-items: center; gap: calc(.5 * var(--u)); padding: calc(.25 * var(--u)) calc(.9 * var(--u)); border-radius: calc(.3 * var(--u)); background: var(--chip); font-size: calc(1.55 * var(--u)); color: var(--text-2); white-space: nowrap; }
  /* status: three pills of the same shape and size, each with its own Phosphor icon and tint */
  .fr .st { display: inline-flex; align-items: center; gap: calc(.55 * var(--u)); height: calc(2.6 * var(--u)); padding: 0 calc(1 * var(--u)) 0 calc(.75 * var(--u)); border-radius: calc(.45 * var(--u)); font-size: calc(1.55 * var(--u)); font-weight: 400; color: #4A4A50; white-space: nowrap; }
  .fr .st svg.i { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
  .fr .st--prog { background: #FFF6E0; }
  .fr .st--prog svg.i { color: #D08A00; }
  .fr .st--done { background: #EDF8F1; }
  .fr .st--done svg.i { color: #1E9E57; }
  .fr .st--idle { background: #F3F3F5; }
  .fr .st--idle svg.i { color: #9A9AA2; }
  /* tags: outlined, dark text, easy to read on white */
  .fr .tag { display: inline-flex; align-items: center; padding: calc(.3 * var(--u)) calc(.9 * var(--u)); border-radius: calc(.4 * var(--u)); background: var(--card); box-shadow: inset 0 0 0 1px var(--outline); color: #3A3A3F; font-size: calc(1.55 * var(--u)); white-space: nowrap; }
  .fr .chip svg.i { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); }

  /* investors: the best match leads, the other matches follow in one compact list */
  .fr .mono { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(.55 * var(--u)); display: grid; place-items: center; font-size: calc(1.55 * var(--u)); font-weight: 600; letter-spacing: .02em; flex: none; }
  .fr .logo { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(.7 * var(--u)); display: grid; place-items: center; flex: none; }
  .fr .logo svg { width: 64%; height: 64%; }
  .fr .best .logo { width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); border-radius: calc(.7 * var(--u)); }
  .fr .mono--dark { background: #EEF3FF; color: #3559C7; }
  .fr .mono--line { background: #F3F3F5; color: var(--text-2); }
  .fr .mono--soft { background: #F3F3F5; color: var(--text-2); }
  .fr .who { display: grid; }
  .fr .tags { display: flex; gap: calc(.4 * var(--u)); }
  .fr .best { display: grid; grid-template-columns: calc(5.6 * var(--u)) 1fr auto auto; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(2.6 * var(--u)); }
  .fr .best .mono { width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); font-size: calc(1.8 * var(--u)); }
  .fr .best .who b { font-size: calc(2.6 * var(--u)); letter-spacing: -.005em; line-height: 1.25; }
  .fr .best .eyebrow { color: var(--accent); font-weight: 500; }
  .fr .ring { display: flex; align-items: center; gap: calc(1 * var(--u)); padding-right: calc(1 * var(--u)); }
  .fr .ring svg { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); transform: rotate(-90deg); }
  .fr .ring b { font-size: calc(1.8 * var(--u)); line-height: 1.2; }
  .fr .ring > span { display: grid; }
  .fr .copy { will-change: transform; }
  .fr .copy .slot { justify-items: center; align-items: center; }
  .fr .copy .slot > *, .fr .gen .slot > * { justify-self: center; }
  .fr .copy .slot > span { display: inline-flex; align-items: center; gap: calc(.7 * var(--u)); }
  .fr .copy .c-ok { color: var(--ok); }
  .fr .more { display: flex; justify-content: space-between; align-items: baseline; margin: calc(2.2 * var(--u)) calc(.4 * var(--u)) calc(1 * var(--u)); }
  .fr .more b { font-size: calc(1.55 * var(--u)); color: var(--text-2); font-weight: 500; }
  .fr .rows { display: grid; gap: calc(1 * var(--u)); }
  .fr .row { display: grid; grid-template-columns: calc(4 * var(--u)) 1fr calc(17 * var(--u)) calc(7 * var(--u)) calc(11 * var(--u)); align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.4 * var(--u)) calc(2.4 * var(--u)); }
  .fr .row .num { text-align: right; }
  .fr .row .focus { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fr .row .ticket { color: var(--text-2); }
  .fr .bar-s { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(1 * var(--u)); }
  .fr .bar-s b { font-size: calc(1.55 * var(--u)); }
  .fr .tip { position: absolute; z-index: 7; padding: calc(.7 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(.5 * var(--u)); background: #1A1A1A; color: #fff; font-size: calc(1.55 * var(--u)); white-space: nowrap; box-shadow: 0 calc(.6 * var(--u)) calc(1.8 * var(--u)) rgba(0, 0, 0, .14); pointer-events: none; }

  /* financial model: name and status together, progress on its own, one action per row */
  .fr .list { display: grid; gap: calc(1.2 * var(--u)); }
  .fr .mod { display: grid; grid-template-columns: calc(4.6 * var(--u)) 1fr calc(14 * var(--u)) calc(10.5 * var(--u)); align-items: center; gap: calc(2.2 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.4 * var(--u)); }
  .fr .mod .mod__ic { width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); }
  /* readiness: the whole model in one number, it moves when a statement is completed */
  .fr .ready { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: calc(1.4 * var(--u)) calc(2 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.4 * var(--u)); }
  .fr .ready b.big { font-size: calc(2.6 * var(--u)); line-height: 1.2; }
  .fr .ready .track { grid-column: 1 / -1; height: calc(.8 * var(--u)); }

  .fr .mod__ic { width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); border-radius: calc(.55 * var(--u)); background: var(--chip); color: var(--text); display: grid; place-items: center; }
  .fr .mod__ic svg.i { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); }
  .fr .mod__t { display: flex; align-items: center; gap: calc(1.6 * var(--u)); margin-bottom: calc(.3 * var(--u)); }
  .fr .prog { display: grid; grid-template-columns: 1fr calc(4.6 * var(--u)); align-items: center; gap: calc(1.2 * var(--u)); }
  .fr .prog small { text-align: right; color: var(--text-2); }
  .fr .slot { position: relative; display: inline-grid; }
  .fr .slot > * { grid-area: 1 / 1; justify-self: start; }
  .fr .pl .vh .slot > * { justify-self: end; }
  .fr .track { display: block; height: calc(.6 * var(--u)); border-radius: calc(.3 * var(--u)); background: #E6E6E9; overflow: hidden; }
  .fr .fill { display: block; height: 100%; background: var(--progress); transform-origin: 0 50%; will-change: transform; }
  .fr .mod .btn, .fr .mod .slot, .fr .mod .slot .btn { width: calc(10.5 * var(--u)); padding: 0; }

  /* P&L sheet, slides over the model from the right */
  /* P&L: a full-height drawer from the right edge, over a soft scrim. Right/bottom padding include the hidden bleed strip */
  .fr .pl-scrim { position: absolute; inset: 0; z-index: 3; background: rgba(18, 22, 34, .16); opacity: 0; }
  .fr .pl {
    position: absolute; top: 0; right: 0; bottom: 0; width: calc(52% + var(--bleed)); z-index: 4; transform: translateX(105%); will-change: transform;
    background: #fff; box-shadow: calc(-.6 * var(--u)) 0 calc(2 * var(--u)) rgba(0, 15, 51, .06), calc(-2 * var(--u)) 0 calc(6 * var(--u)) rgba(0, 15, 51, .12);
    padding: calc(6.4 * var(--u)) calc(3.4 * var(--u) + var(--bleed)) calc(3 * var(--u) + var(--bleed)) calc(3.4 * var(--u)); display: flex; flex-direction: column;
  }
  .fr .pl .vh { padding: 0 0 calc(1.6 * var(--u)); background: none; border-bottom: 0; }
  .fr .tbl { display: grid; grid-template-columns: 1.75fr .85fr .85fr 1.45fr; }
  .fr .tbl > * { white-space: nowrap; }
  .fr .tbl > * { height: calc(4 * var(--u)); display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .fr .tbl > .lbl { justify-content: flex-start; color: var(--text-2); }
  .fr .tbl > small { border-bottom-color: transparent; }
  .fr .tbl .key { color: var(--text); font-weight: 500; }
  .fr .cell { position: relative; width: 92%; height: calc(3.2 * var(--u)); padding: 0 var(--u); display: flex; align-items: center; justify-content: flex-end; border-radius: calc(.5 * var(--u)); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); transition: box-shadow .3s ease; }
  .fr .cell.focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 calc(.35 * var(--u)) var(--accent-soft); }
  .fr .cell .ph { position: absolute; right: var(--u); color: var(--text-3); font-size: calc(1.55 * var(--u)); }
  .fr .cell.filled .ph { visibility: hidden; }
  .fr .cell .typed { color: var(--text); white-space: nowrap; }
  .fr .caret { width: 1.5px; height: calc(2 * var(--u)); margin-left: 1px; background: var(--accent); border-radius: 1px; opacity: 0; }
  .fr .cell.focus .caret { opacity: 1; animation: fr-blink 1s steps(1) infinite; }
  .fr .cell.is-typing .caret { animation: none; opacity: 1; }
  @keyframes fr-blink { 50% { opacity: 0; } }
  .fr .roll { display: inline-block; }
  .fr .pl__foot { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-top: auto; }
  .fr .note { flex: 1; min-width: 0; display: flex; gap: var(--u); align-items: center; height: calc(3.8 * var(--u)); padding: 0 calc(1.4 * var(--u)); white-space: nowrap; border-radius: calc(.55 * var(--u)); background: var(--chip); }
  .fr .note svg.i { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); flex: none; color: var(--text-3); }
  .fr .note small { color: var(--text-2); }
  .fr .pl .b-save { flex: none; }

  /* reports */
  .fr .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.4 * var(--u)); }
  .fr .rep { position: relative; padding: calc(2.2 * var(--u)); display: grid; gap: calc(.3 * var(--u)); align-content: start; transition: background .35s ease, box-shadow .35s ease; }
  .fr .rep .mod__ic { width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); margin-bottom: calc(1.4 * var(--u)); }
  .fr .rep .fmt { display: flex; align-items: center; gap: calc(.8 * var(--u)); margin-top: calc(1.4 * var(--u)); padding-top: calc(1.3 * var(--u)); border-top: 1px solid var(--line); }
  .fr .rep b { white-space: nowrap; }
    .fr .rep.on { background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line), 0 calc(.35 * var(--u)) calc(.45 * var(--u)) rgba(0, 15, 51, .06); }
  /* checkbox: Phosphor Square, swapped for the filled CheckSquare when picked */
  .fr .box { position: absolute; right: calc(1.8 * var(--u)); top: calc(1.8 * var(--u)); width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); }
  .fr .box > span { position: absolute; inset: 0; transition: opacity .3s ease; }
  .fr .box svg.i { width: 100%; height: 100%; }
  .fr .box__off { color: #B4B4B9; }
  .fr .box__on { color: var(--accent); opacity: 0; }
  .fr .rep.on .box__on { opacity: 1; }
  .fr .rep.on .box__off { opacity: 0; }
  /* a picked card keeps its icon readable: the icon tile takes the selection tint */
  .fr .rep .mod__ic { transition: background .35s ease, color .35s ease; }
  .fr .rep.on .mod__ic { background: var(--accent-soft); color: var(--accent); }
  .fr .gen { transition: opacity .35s ease; opacity: .45; }
  .fr .gen.ready { opacity: 1; }
  /* the two labels sit in a fixed box, centred on both axes, so swapping them can never shift the text */
  .fr .gen { width: calc(18.5 * var(--u)); }
  .fr .gen .slot { position: absolute; inset: 0; display: grid; place-items: center; }
  .fr .gen .g-idle { display: inline-flex; align-items: center; }
  .fr .gen .busy { display: inline-flex; align-items: center; gap: var(--u); }
  .fr .spinner { width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); border-radius: 50%; border: calc(.3 * var(--u)) solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: fr-spin .8s linear infinite; }
  @keyframes fr-spin { to { transform: rotate(360deg); } }
  /* toast: dark on the light workspace so it reads at a glance */
  .fr .toast { position: absolute; left: 50%; bottom: calc(3.4 * var(--u)); display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.5 * var(--u)) calc(2.6 * var(--u)) calc(1.5 * var(--u)) calc(1.6 * var(--u)); margin-left: calc(-17 * var(--u)); width: calc(34 * var(--u)); border-radius: calc(.85 * var(--u)); background: #1C1C1F; box-shadow: 0 calc(.6 * var(--u)) calc(1.6 * var(--u)) rgba(0, 15, 51, .18), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 15, 51, .22); }
  .fr .toast b { color: #fff; }
  .fr .toast small { color: #B9B9C0; }
  .fr .toast i { flex: none; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%; background: #1E9E57; color: #fff; display: grid; place-items: center; }
  .fr .toast i svg.i { width: 62%; height: 62%; }

  /* the arrow's tip is at (3, 2) of its 24px box: shift it so the tip, not the box corner, lands on the target */
  .fr .cursor { position: absolute; z-index: 9; width: calc(3 * var(--u)); left: 0; top: 0; margin: calc(-.25 * var(--u)) 0 0 calc(-.375 * var(--u)); pointer-events: none; will-change: transform; transform-origin: calc(.375 * var(--u)) calc(.25 * var(--u)); }
  .fr .cursor svg { display: block; width: 100%; }
  /* End of the page: earlier work as a compact archive, then where I'm heading, then the call to action */
  /* Earlier work: one compact, deliberate list instead of empty project cards */
  .archive { padding: var(--space-6) 0 var(--space-2); border-top: 1px solid var(--line); }
  .archive > h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); margin: 0 0 var(--space-2); }
  .archive > p { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  .project.archive__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
  .project.archive__row:first-of-type { padding-top: var(--space-3); }
  .archive__row .project__year { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
  .archive__row h3 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; letter-spacing: 0; }
  .archive__row .project__text { grid-column: 2; font-size: var(--fs-small); line-height: var(--lh-small); }
  .archive__more { margin: 0; padding: var(--space-3) 0 0 108px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  /* "Earlier work" in one line: the year on the left as in the archive rows, a title and one sentence, under a hairline */
  .project.earlier { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
  .project.earlier .project__year { margin: 0; }
  .project.earlier h3 { margin: 0 0 var(--space-1); font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: 0; }
  .project.earlier .project__text { margin: 0; max-width: 52ch; }
  @media (max-width: 560px) { .project.earlier { grid-template-columns: 1fr; gap: var(--space-1); } }
  /* Ways to start: three grey cards side by side (one under the other on phones), then the price line */
  .ways { padding-top: var(--space-6); margin-top: var(--space-2); border-top: 1px solid var(--line); }
  .ways h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); margin: 0 0 var(--space-4); text-wrap: balance; }
  .ways__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .ways__list > li { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4) var(--space-3); border-radius: 14px; background: var(--surface-1); }
  .ways__when { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); }
  .ways__list h4 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--ink); text-wrap: balance; }
  .ways__list p { margin: 0; color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); text-wrap: pretty; }
  .ways .ways__note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  @media (max-width: 560px) { .ways__list { grid-template-columns: 1fr; } }

  /* Work with me: the existing offer lives in a modal drawer, outside the project tabs. */
  .contacts__work {
    appearance: none; padding: 0; border: 0; background: none; font: inherit;
    color: var(--ink); font-weight: 500; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; border-radius: 4px;
  }
  .contacts__work:hover { text-decoration-thickness: 2px; }
  .button[data-work-open] { border: 0; font-family: inherit; cursor: pointer; }
  html.work-dialog-open { overflow: hidden; }
  .work-dialog {
    position: fixed; inset: auto 0 0; margin: 0 auto;
    width: min(1040px, calc(100% - var(--space-5))); max-width: none;
    height: calc(100vh - var(--space-5)); height: calc(100dvh - var(--space-5)); max-height: none;
    padding: var(--space-6); border: 0; border-radius: 16px 16px 0 0;
    background: var(--bg); color: var(--ink); font: inherit;
    overflow: hidden; overscroll-behavior: contain;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .04);
  }
  .work-dialog[open] { display: flex; flex-direction: column; }
  .work-dialog::backdrop {
    background: rgba(29, 29, 31, .2);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .work-dialog__head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
  .work-dialog__head h2 { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 500; }
  .work-dialog__close {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 50%; background: var(--surface-1); color: var(--muted); cursor: pointer;
  }
  .work-dialog__close:hover { background: var(--surface-2); color: var(--ink); }
  .work-dialog__status { flex-shrink: 0; align-self: flex-start; margin: 0 0 var(--space-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .work-dialog .ways {
    display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0;
    padding: 0 var(--space-1) 0 0; margin: 0 0 var(--space-3); border: 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .work-dialog .ways__list {
    flex: 1 0 auto;   /* may grow to fill the panel, never shrink: shrinking let the cards spill over the note below */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    align-items: stretch; gap: 0 var(--space-3);
  }
  .work-dialog .ways__list > li {
    grid-row: auto; align-self: stretch; min-width: 0; box-sizing: border-box; padding: var(--space-3);
    grid-template-rows: auto auto auto auto auto 1fr auto; gap: var(--space-1);
    border-radius: 16px;
  }
  .ways__badge {
    position: relative; height: 112px; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) var(--space-2);
    overflow: hidden; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
  }
  .ways__badge::before, .ways__badge::after {
    content: ""; position: absolute; border-radius: 50%; opacity: .55;
  }
  .ways__badge::before { width: 74px; height: 74px; right: -22px; top: -32px; background: var(--surface-3); }
  .ways__badge::after { width: 46px; height: 46px; left: -14px; bottom: -24px; background: var(--surface-3); }
  .ways__badge span { position: absolute; left: 12px; top: 12px; width: 22px; height: 14px; border-radius: 4px; background: var(--line); }
  .ways__badge i { position: absolute; right: 12px; bottom: 12px; width: 30px; height: 4px; border-radius: 999px; background: var(--line); }
  .ways__badge--2 { background: var(--surface-1); }
  .ways__badge--3 { background: var(--surface-3); }
  .work-dialog .ways__price {
    display: flex; flex-wrap: wrap; align-items: baseline; align-self: start;
    gap: 0 var(--space-1); color: var(--ink); padding: var(--space-1) 0 var(--space-2);
  }
  .ways__price strong { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: 500; }
  .ways__price-prefix { font-size: var(--fs-small); }
  .ways__price-unit { color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); white-space: nowrap; }
  .ways__included { align-self: start; }
  .ways__included h5 { margin: 0 0 var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
  .ways__included ul { list-style: none; padding: 0; margin: 0; }
  .ways__included li { padding-block: var(--space-2); border-top: 1px solid var(--line); color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); text-wrap: pretty; }
  .work-dialog .ways__scope { align-self: end; padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .ways__meta { display: flex; align-items: center; }
  .work-dialog .ways__when { margin-bottom: 0; text-align: left; }
  .work-dialog .ways__list h4 { font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 500; text-wrap: initial; }
  .work-dialog .ways__description { padding-bottom: var(--space-1); }
  .work-dialog .ways__note { font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .work-dialog__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-shrink: 0; align-items: center; gap: var(--space-2); margin-top: auto; padding: 0; border-radius: 14px; background: transparent; text-align: center; }
  .work-dialog__contact > .copied { left: 50%; transform: translateX(-50%); }
  .work-dialog__contact .button { width: 100%; gap: var(--space-2); }
  .work-dialog__contact .button--quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .work-dialog__contact .button--quiet:hover { background: var(--surface-2); }
  /* The native modal sits above the custom page pointer; keep its cursor visible. */
  html.has-pointer .work-dialog, html.has-pointer .work-dialog * { cursor: auto !important; }
  html.has-pointer .work-dialog button, html.has-pointer .work-dialog a,
  html.has-pointer .work-dialog button *, html.has-pointer .work-dialog a * { cursor: pointer !important; }
  html.work-dialog-open .pointer { visibility: hidden; }
  @media (min-width: 901px) and (max-height: 820px) {
    .work-dialog { padding: var(--space-5); }
    .work-dialog__head h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); }
    .work-dialog__status { margin-bottom: var(--space-3); }
    .work-dialog .ways { margin-bottom: var(--space-3); }
    .work-dialog .ways__list > li { padding: var(--space-3); gap: var(--space-2); }
    .ways__included li { padding-block: var(--space-2); }
    .work-dialog .ways__price { padding-block: 0; }
    .work-dialog__contact { gap: var(--space-2) var(--space-3); padding: var(--space-2); }
  }
  @media (max-width: 900px) {
    .work-dialog { width: 100%; height: 100dvh; border-left: 0; border-radius: 0; padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
    .work-dialog .ways__list { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--space-3); }
    .work-dialog .ways__list > li { grid-row: auto; grid-template-rows: none; }
    .work-dialog__status { margin-bottom: var(--space-5); }
    .work-dialog__contact { padding: var(--space-3); }
  }

  .cta__alt { color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); text-decoration-color: var(--hint); }
  .cta__alt:hover { color: var(--ink); }
  /* The closing: one question in two tones (the main one in ink, the open door in grey under it), the actions, one line that reassures */
  .ride .cta.cta--end { margin-top: var(--space-6); padding: var(--space-5); border: 0; border-radius: 14px; background: var(--surface-1); display: grid; gap: var(--space-4); }
  .cta__ask { margin: 0; font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--ink); text-wrap: pretty; }
  .cta__ask .cta__door { display: block; font-weight: 500; color: var(--muted); }
  /* the case study invite, one quiet line under the button, for those not ready to write yet (28 Oct, option A of previews/fix-generici.html) */
  .cta__more { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); text-wrap: pretty; }
  .cta__more a { font-weight: 600; text-decoration-color: var(--hint); }
  /* My apps are mine, not a client brief: no closing question under them */
  .ride .cta.cta--end[hidden] { display: none; }
  .cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
  .cta--end .cta__reply { margin: calc(-1 * var(--space-2)) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); text-wrap: pretty; }
  @media (max-width: 900px) {
  }
  @media (max-width: 560px) {
    .project.archive__row { grid-template-columns: 1fr; gap: 0; }
    .archive__row .project__text { grid-column: 1; }
    .archive__more { padding-left: 0; }
      }

  /* ===== Crypto exchange bento: one big moving card, two still close-ups. Brand colours kept (Elena's choice) ===== */
  .cx-bento { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); margin-top: var(--space-4); }
  .cx-bento > * { position: relative; overflow: hidden; border-radius: 14px; container-type: inline-size; }
  /* the RegTech background with its hues turned: lilac to green, pink to blue, darker and calmer than RegTech (lightness -17%, saturation -12%) */
  .cx-big { grid-column: 1 / -1; aspect-ratio: 16 / 10; background: radial-gradient(90% 100% at 55% 0%, #EAEAEA 0%, transparent 62%), radial-gradient(60% 90% at 0% 100%, #F5F5F5 0%, transparent 60%), radial-gradient(50% 80% at 100% 100%, #F5F5F5 0%, transparent 70%), linear-gradient(135deg, #F0F0F0, #EDEDED); }
  /* phone: the screen, with the iPhone frame from the Figma bezel component laid over it */
  /* screen corners: about 11.5% of the screen width (2.6cqw on a 22.59cqw screen), close to a real iPhone (~12%).
     In cqw of the card, so the shape stays the same at every width (about 17px on desktop) */
  .cx-big { --cx-r: 2.6cqw; }
  .cx-ph { position: relative; width: 22.59cqw; height: 48.91cqw; }
  .cx-ph > img { position: absolute; display: block; max-width: none; }
  .cx-ph > .scr { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--cx-r); }
  .cx-wall .cx-ph > .scr { box-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .08); }   /* bare screens on the light card: a soft lift instead of the device frame */
  .cx-ph > .bez { top: -3.32%; left: -9.74%; width: 119.65%; height: 106.64%; z-index: 3; pointer-events: none; }

  /* A · the wall, tilted, drifting along the diagonal */
  .cx-wall { position: absolute; left: -28cqw; top: -46cqw; width: 156cqw; height: 156cqw; transform: rotate(-12deg); will-change: transform; }
  .cx-col { position: absolute; top: 0; width: 22.59cqw; will-change: transform; }
  .cx-track { display: grid; gap: 5.44cqw; will-change: transform; }
  /* the phone that steps out of the wall: upright, centred, 54% of the card's width in height */
  .cx-hero { position: absolute; left: 37.53cqw; top: 4.25cqw; width: 24.94cqw; height: 54cqw; opacity: 0; will-change: transform, opacity; }
  .cx-hscr { position: absolute; inset: 0; overflow: hidden; border-radius: var(--cx-r); background: #fff; }
  .cx-hscr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
  /* the lesson flow inside the phone, rebuilt from the Figma (node 7:7125): fixed header, progress bar, text cut at a sentence so the arrows always show.
     1px of the 375 × 812 design = .2667cqw. Matter YP is not on the web: Figtree */
  .cx-hscr { container-type: inline-size; }
  .cx-lesson { position: absolute; inset: 0; background: #fff; color: #000; font-family: "Figtree", -apple-system, sans-serif; opacity: 0; transform-origin: 0 0; z-index: 1; }
  .cx-lhead { position: absolute; left: 0; right: 0; top: 0; height: 75.2cqw; background: url("assets/projects/crypto/lesson-1.jpg") 0 0 / 100% auto no-repeat; }
  .cx-bar { position: absolute; left: 0; right: 0; top: 75.2cqw; height: 1.07cqw; background: #EDEDED; }
  .cx-bar i { position: absolute; inset: 0; background: #00D372; transform-origin: 0 50%; transform: scaleX(.3333); }
  .cx-page { position: absolute; left: 4.27cqw; right: 4.27cqw; top: 81.6cqw; opacity: 0; }
  .cx-page.on { opacity: 1; }
  .cx-tag { display: inline-flex; align-items: center; height: 6.4cqw; padding: 0 2.4cqw; border-radius: 6.4cqw; background: #F2F2F2; font-weight: 700; font-size: 3.8cqw; }
  .cx-page h5 { margin: 3.2cqw 0 0; font-size: 6.4cqw; line-height: 8.53cqw; font-weight: 600; letter-spacing: -.13cqw; }
  .cx-page p { margin: 3.2cqw 0 0; font-size: 4.27cqw; line-height: 6.4cqw; letter-spacing: -.05cqw; }
  .cx-btn { position: absolute; top: 194.6cqw; width: 12.8cqw; height: 12.8cqw; border-radius: 50%; display: grid; place-items: center; }
  .cx-btn svg { width: 45%; }
  .cx-btn.cx-fwd { left: 43.6cqw; background: #00D372; color: #fff; }
  .cx-btn.cx-bwd { left: 36.2cqw; background: #F2F2F2; color: #000; opacity: 0; }
  .cx-lesson.cx-two .cx-btn.cx-fwd { left: 52cqw; }
  .cx-lesson.cx-two .cx-btn.cx-bwd { opacity: 1; }
  .cx-hero > .bez { position: absolute; top: -3.32%; left: -9.74%; width: 119.65%; height: 106.64%; max-width: none; z-index: 3; pointer-events: none; }
  .cx-hero > .bez { display: none; }   /* trial 13 Oct: no device at all, the screen steps out bare. To bring the frame back, delete this line */
  /* hotspots where the finger lands, measured on the 375 × 812 Figma screens */
  .cx-hot { position: absolute; transform: translate(-50%, -50%); }
  .h-tile { left: 18.78%; top: 48.68%; width: 29.1%; height: 13.44%; }
  /* recap: rebuilt from the Figma (4.1_QuizResult). 1px of the 375px design = .2667cqw. Matter YP is not on the web: Figtree instead */
  .cx-recap { position: absolute; inset: 0; background: #fff; color: #000; font-family: "Figtree", -apple-system, sans-serif; opacity: 0; transform-origin: 0 0; z-index: 2; }
  .cx-recap .reel-phone__status { color: #000; }
  .cx-check { position: absolute; left: 39.33cqw; top: 27.2cqw; width: 21.33cqw; height: 21.33cqw; border-radius: 50%; background: #00D372; display: grid; place-items: center; z-index: 2; }
  .cx-check svg { width: 46%; color: #fff; }
  .cx-rcard { position: absolute; left: 4.27cqw; right: 4.27cqw; top: 37.87cqw; padding: 14.93cqw 4.27cqw 4.27cqw; border: 1px solid #E0E0E0; border-radius: 4.27cqw; }
  .cx-rcard h4 { margin: 0; font-size: 6.4cqw; line-height: 8.53cqw; font-weight: 600; letter-spacing: -.13cqw; text-align: center; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; }
  .cx-rcard h4 svg { width: 6.4cqw; height: 6.4cqw; }
  .cx-rcard p { margin: 0 0 4.27cqw; font-size: 4.27cqw; line-height: 6.4cqw; letter-spacing: -.05cqw; text-align: center; }
  .cx-rcard ul { margin: 0; padding: 0 0 0 6.4cqw; font-size: 4.27cqw; line-height: 6.4cqw; letter-spacing: -.05cqw; }
  .cx-rcard li + li { margin-top: 1.6cqw; }
  .cx-close { position: absolute; left: 4.27cqw; right: 4.27cqw; top: 194.67cqw; height: 12.8cqw; border-radius: 26.7cqw; background: #F5F5F5; display: grid; place-items: center; font-weight: 600; font-size: 4.27cqw; }
  /* confetti: bursts from the check, then drifts down and fades */
  .cx-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
  .cx-confetti i { position: absolute; left: 50%; top: 37.9cqw; opacity: 0; will-change: transform, opacity; }
  /* soft shadow under the phone while it is lifted out of the wall */
  .cx-hshadow { position: absolute; inset: 1.5% 3%; border-radius: var(--cx-r); box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, .22), 0 .6cqw 1.4cqw rgba(0, 0, 0, .12); opacity: 0; }
  .cx-hscr > img { transform-origin: 0 0; will-change: transform, opacity; }
  /* press feedback where the finger lands: a soft grey wash under the finger */
  .cx-hot { pointer-events: none; }   /* only marks where the finger lands, nothing is drawn */
  .cx-a .reel-tap { z-index: 4; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; }

  /* the two close-ups: cool flat grey, the right one 2/3 the width of the left, same height. Both are interactive:
     they open on their strongest state, a click (or tap, or Enter) changes them */
  .cx-small { background: radial-gradient(120% 90% at 0% 0%, #EAEAEA 0%, transparent 60%), radial-gradient(90% 90% at 0% 100%, #F5F5F5 0%, transparent 60%), radial-gradient(45% 75% at 100% 0%, #F5F5F5 0%, transparent 70%), linear-gradient(135deg, #F0F0F0, #EDEDED); }
  .cx-small.cx-s1 { background: radial-gradient(110% 90% at 100% 100%, #EAEAEA 0%, transparent 62%), radial-gradient(80% 80% at 0% 0%, #F5F5F5 0%, transparent 60%), radial-gradient(60% 70% at 100% 0%, #F5F5F5 0%, transparent 70%), linear-gradient(45deg, #EDEDED, #F0F0F0); }
  .cx-small.cx-s2 { background: radial-gradient(100% 80% at 100% 0%, #EAEAEA 0%, transparent 62%), radial-gradient(90% 90% at 0% 100%, #F5F5F5 0%, transparent 60%), radial-gradient(50% 70% at 0% 0%, #F5F5F5 0%, transparent 70%), linear-gradient(225deg, #EDEDED, #F0F0F0); }
  .cx-s1 { aspect-ratio: 3 / 2; cursor: pointer; }
  @media (max-width: 560px) { .cx-bento { grid-template-columns: 1fr; } .cx-big { grid-column: auto; } .cx-s2 { aspect-ratio: 1; } }   /* stacked: at half width the close-ups would be unreadable */
  .cx-soft { box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .05), 0 2cqw 6cqw rgba(0, 0, 0, .08); }

  /* B · design system (Figma 1:30118 light, YP-DS 1:19711 dark): the Button component in a light and a dark frame.
     One frame at a time, everything on the centre line: the switch on top, the frame below, the other theme waiting right
     behind and peeking out a hair at the top. Hovering or focusing the switch slides the front frame down, so the first row
     behind shows whole. 1 design px = --u */
  .cx-sheet { --u: .17cqw; position: absolute; left: 50%; top: 27.4cqw; width: 58cqw; box-sizing: border-box; padding: calc(26 * var(--u)) calc(18 * var(--u)); border-radius: 3cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)) calc(8 * var(--u)); justify-items: center; letter-spacing: calc(-.2 * var(--u)); transform-origin: 50% 0; transition: transform .55s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
  .cx-sheet.front { transform: translateX(-50%); z-index: 2; }
  .cx-sheet.back { transform: translateX(-50%) translateY(-3.6cqw) scale(.94); z-index: 1; }
  .cx-s1.peek .cx-sheet.front { transform: translateX(-50%) translateY(8cqw); }
  .cx-b { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(40 * var(--u)); min-width: calc(76 * var(--u)); box-sizing: border-box; padding: 0 calc(16 * var(--u)); border-radius: calc(100 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1; font-weight: 600; white-space: nowrap; }
  .cx-b img { display: block; max-width: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .cx-b.i { padding-right: calc(12 * var(--u)); }
  .cx-lt { background: #fff; color: #000; }
  .cx-lt .p { background: #00D372; color: #fff; }
  .cx-lt .p.ld { background: #80E9B8; }
  .cx-lt .s { background: #F5F5F5; }
  .cx-lt .off { background: #F5F5F5; color: #BCBCBC; }
  .cx-lt .g.off { background: none; }
  .cx-dk { background: #1C1C1C; color: #fff; }   /* a step lighter than the file (#131312), so it sits better on the grey */
  .cx-dk .s { background: #252525; }
  .cx-dk .s.hv { background: #2F2F2F; }
  .cx-dk .off { color: #5A5A5A; }
  /* the switch, a component of the same system: segmented control, centred above the frames */
  .cx-tgl { position: absolute; left: 50%; top: 7cqw; transform: translateX(-50%); z-index: 3; display: grid; grid-template-columns: 1fr 1fr; padding: .7cqw; border-radius: 10cqw; background: #fff; box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .06); }
  .cx-tgl::before { content: ""; position: absolute; left: .7cqw; top: .7cqw; bottom: .7cqw; width: calc(50% - .7cqw); border-radius: 10cqw; background: #EDEDED; transition: transform .45s cubic-bezier(.45, 0, .2, 1), background-color .45s ease; }
  .cx-tgl[data-theme="dark"]::before { transform: translateX(100%); background: #1C1C1C; }   /* the thumb takes the colour of the theme it picks */
  .cx-tgl button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1.1cqw; padding: 1.4cqw 3cqw; border: 0; background: none; border-radius: 10cqw; font: inherit; font-size: 2.8cqw; font-weight: 600; letter-spacing: -.02cqw; color: #6E6E73; cursor: pointer; transition: color .3s ease; }
  .cx-tgl button svg { width: 3.2cqw; height: 3.2cqw; }
  .cx-tgl button[aria-pressed="true"] { color: #000; }
  .cx-tgl[data-theme="dark"] button[aria-pressed="true"] { color: #fff; }

  /* C · Clubs (Figma 1:29945): the four tiers as a stack, Bronze in front. Each card is a strip (--y, --s). Hovering the
     stack fans it open a little, the card under the pointer slides up out of it (--lift); a click pulls it out and lays it on top */
  .cx-stack { --p: .32cqw; }
  .cx-club { --y: 0cqw; --s: 1; --lift: 0cqw; --ds: 0; position: absolute; left: 50%; top: calc(50% + 12cqw); box-sizing: border-box; width: calc(242 * var(--p)); padding: calc(16 * var(--p)); border: 1px solid #E0E0E0; border-radius: calc(16 * var(--p)); background: #fff; color: #000; font: inherit; letter-spacing: calc(-.2 * var(--p)); text-align: left; cursor: pointer; transform-origin: 50% 0; transform: translate(-50%, -50%) translateY(calc(var(--y) + var(--lift))) scale(calc(var(--s) + var(--ds))); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; will-change: transform; }
  .cx-club img { display: block; max-width: none; }
  .cx-club .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(16 * var(--p)); }
  .cx-club b { display: block; font-size: calc(16 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 600; margin-bottom: calc(4 * var(--p)); }
  .cx-club .tag { display: flex; width: max-content; align-items: center; gap: calc(2 * var(--p)); height: calc(16 * var(--p)); padding: 0 calc(8 * var(--p)) 0 calc(3 * var(--p)); border-radius: calc(100 * var(--p)); font-size: calc(10 * var(--p)); line-height: calc(16 * var(--p)); font-weight: 600; letter-spacing: calc(.2 * var(--p)); text-transform: uppercase; }
  .cx-club .tag img { width: calc(16 * var(--p)); height: calc(16 * var(--p)); }
  .cx-club .badge { width: calc(40 * var(--p)); height: calc(40 * var(--p)); }
  .cx-club .btn { display: block; width: max-content; padding: calc(8 * var(--p)) calc(16 * var(--p)); border-radius: calc(100 * var(--p)); background: #F5F5F5; font-size: calc(14 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 600; }
  .cx-club[data-k="3"] { --y: -33cqw; --s: .82; z-index: 1; }
  .cx-club[data-k="2"] { --y: -22cqw; --s: .88; z-index: 2; }
  .cx-club[data-k="1"] { --y: -11cqw; --s: .94; z-index: 3; }
  .cx-club[data-k="0"] { z-index: 4; cursor: default; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .05), 0 2cqw 6cqw rgba(0, 0, 0, .08); }
  .cx-club:not([data-k="0"]) { box-shadow: 0 -.2cqw 1.2cqw rgba(0, 0, 0, .05); }
  @media (hover: hover) {
    .cx-stack:hover .cx-club[data-k="2"] { --y: -19.5cqw; }
    .cx-stack:hover .cx-club[data-k="1"] { --y: -6cqw; }
    .cx-stack:hover .cx-club[data-k="0"] { --y: 7.5cqw; }
    .cx-club[data-k="1"]:hover, .cx-club[data-k="2"]:hover { --lift: -6cqw; --ds: .03; box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .12); }
    .cx-club[data-k="3"]:hover { --lift: -2.5cqw; --ds: .03; box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .12); }   /* the top card has little room above */
  }

  /* ===== Fundraising close-ups: two equal 4:3 boxes under the reel, cool flat grey like the Crypto ones ===== */
  .vz-bento { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
  .vz-bento > * { position: relative; overflow: hidden; border-radius: 14px; container-type: inline-size; aspect-ratio: 5 / 2;   /* one wide, low box: only the balance sheet deck */
    /* the same background as the Fundraising reel above (Elena's Figma, node 146:8820): solid blue with soft white glows, scaled to these half-width boxes so the blue reads the same */
    background:
      radial-gradient(20cqw 18cqw at 62% 14%, rgba(255, 255, 255, .48), rgba(255, 255, 255, .3) 35%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(24cqw 21cqw at 18% 88%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .32) 35%, rgba(255, 255, 255, .11) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(24cqw 21cqw at 104% 86%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .32) 35%, rgba(255, 255, 255, .11) 70%, rgba(255, 255, 255, 0)),
      #3D7BFF; }
  .vz-bento img { display: block; max-width: none; }
  .vz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* the balance sheet deck (Elena's cards, Figma 14:6209: white, #EDEDED border, 8px corners, grey icon tile; Inter like the reel).
     One card in front, the next two just showing behind, page dots below. A flip sends the front card round to the back. 1 design px = --p */
  .vz-deck { --p: .28cqw; font-family: "Inter", sans-serif; cursor: pointer; }
  /* the deck keeps the proportions it had in its half-width 3:4 box: a centred stage, half as wide, with its own cqw.
     Margins in % follow the box width: -24.6% centres it, -32.96% puts the middle of the stack and dots at the box's middle */
  .vz-stage { position: absolute; left: 50%; top: 50%; width: 49.2%; margin: -32.96% 0 0 -24.6%; aspect-ratio: 3 / 4; container-type: inline-size; }
  .vz-card { position: absolute; left: 50%; top: 46cqw; box-sizing: border-box; width: calc(292 * var(--p)); height: 40cqw; padding: calc(20 * var(--p)); display: flex; gap: calc(16 * var(--p)); border: 1px solid #EDEDED; border-radius: calc(8 * var(--p)); background: #fff; transform-origin: 50% 0; transition: transform .5s cubic-bezier(.45, 0, .2, 1), box-shadow .5s ease; will-change: transform; touch-action: pan-y; user-select: none; }
  .vz-card[data-d="0"] { transform: translateX(-50%); z-index: 9; box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .06); }
  .vz-card[data-d="1"] { transform: translateX(-50%) translateY(-2.2cqw) scale(.95); z-index: 8; box-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .03); }
  .vz-card[data-d="2"], .vz-card[data-d="3"], .vz-card[data-d="4"], .vz-card[data-d="5"], .vz-card[data-d="6"] { transform: translateX(-50%) translateY(-4.4cqw) scale(.9); z-index: 7; }
  .vz-card[data-d="3"], .vz-card[data-d="4"], .vz-card[data-d="5"], .vz-card[data-d="6"] { z-index: 6; }
  .vz-ico { flex: none; display: grid; place-items: center; width: calc(56 * var(--p)); height: calc(56 * var(--p)); border-radius: calc(8 * var(--p)); background: #F8F8F8; }
  .vz-ico img { width: calc(28 * var(--p)); height: calc(28 * var(--p)); }
  .vz-txt { min-width: 0; display: flex; flex-direction: column; }
  .vz-txt b { font-size: calc(16 * var(--p)); line-height: 1.4; font-weight: 500; letter-spacing: calc(-.24 * var(--p)); color: #1A1A1A; }
  .vz-txt span.d { margin-top: calc(4 * var(--p)); font-size: calc(14 * var(--p)); line-height: 1.4; letter-spacing: calc(-.14 * var(--p)); color: #7C7C7C; }
  .vz-amt { margin-top: auto; font-size: calc(18 * var(--p)); font-weight: 500; letter-spacing: calc(-.3 * var(--p)); color: #1A1A1A; font-variant-numeric: tabular-nums; }
  .vz-dots { position: absolute; left: 50%; top: 91cqw; transform: translateX(-50%); display: flex; gap: 1.4cqw; z-index: 6; }   /* page dots: the only hint that there is more */
  .vz-dots i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background-color .3s ease; }   /* white on the blue */
  .vz-dots i.on { background: #fff; }
  /* the Input type menu (Figma 232:45521). Söhne is not on the web: Inter. 1 design px = --q */
  .vz-menu { --q: .32cqw; font-family: "Inter", sans-serif; }
  .vz-m-wrap { position: absolute; left: 50%; top: 50%; width: calc(238 * var(--q)); height: calc(238 * var(--q)); transform: translate(-50%, -50%); }
  .vz-m-field { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; height: calc(48 * var(--q)); padding: 0 calc(16 * var(--q)); border: 0; border-radius: calc(6.9 * var(--q)); background: #fff; font: inherit; font-size: calc(18 * var(--q)); line-height: 1.3; color: #808080; cursor: pointer; text-align: left; }
  .vz-m-field .val { display: flex; align-items: center; gap: calc(10 * var(--q)); }
  .vz-m-field .val img { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
  .vz-m-field.has .val { color: #000; }
  .vz-m-field > img { width: calc(13.8 * var(--q)); height: calc(13.8 * var(--q)); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .vz-menu.open .vz-m-field > img { transform: rotate(180deg); }
  .vz-m-list { position: absolute; left: 0; right: 0; top: calc(56 * var(--q)); box-sizing: border-box; height: calc(182 * var(--q)); padding: calc(9.2 * var(--q)); display: flex; flex-direction: column; gap: calc(2.5 * var(--q)); border-radius: calc(10 * var(--q)); background: #fff; transform-origin: 50% 0; opacity: 0; transform: translateY(calc(-6 * var(--q))) scale(.97); pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
  .vz-menu.open .vz-m-list { opacity: 1; transform: none; pointer-events: auto; }
  .vz-m-hl { position: absolute; left: calc(9.2 * var(--q)); right: calc(9.2 * var(--q)); top: calc(9.2 * var(--q)); height: calc(52.9 * var(--q)); border-radius: calc(5 * var(--q)); background: #E5EEFF; transform: translateY(calc(var(--i, 1) * 55.4 * var(--q))); transition: transform .32s cubic-bezier(.45, 0, .2, 1); }
  .vz-m-item { position: relative; display: flex; align-items: center; gap: calc(13 * var(--q)); flex: 1; padding: 0 calc(9.2 * var(--q)); border: 0; border-radius: calc(5 * var(--q)); background: none; font: inherit; font-size: calc(18 * var(--q)); line-height: 1.3; color: #000; cursor: pointer; text-align: left; }
  .vz-m-item img { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
  .vz-menu.open .vz-m-item { animation: vz-m-in .4s cubic-bezier(.22, 1, .36, 1) both; }
  .vz-menu.open .vz-m-item:nth-of-type(2) { animation-delay: .04s; }
  .vz-menu.open .vz-m-item:nth-of-type(3) { animation-delay: .08s; }
  @keyframes vz-m-in { from { opacity: 0; transform: translateY(calc(-4 * var(--q))); } }
  .vz-deck:focus-visible, .vz-m-field:focus-visible, .vz-m-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  /* phones: one under the other, back to 4:3 (tall they would be 450px each) */
  @media (max-width: 560px) {
    .vz-bento { grid-template-columns: 1fr; }
    .vz-bento > * { aspect-ratio: 4 / 3; }
    .vz-stage { width: 100%; margin: -37.5% 0 0 -50%; }
    .vz-deck { --p: .26cqw; }
    .vz-card { top: 18cqw; height: 37cqw; }
    .vz-dots { top: 60cqw; }
    .vz-menu { --q: .252cqw; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vz-card, .vz-m-list, .vz-m-hl, .vz-m-field > img { transition: none; }
    .vz-menu.open .vz-m-item { animation: none; }
  }

  /* ===== AI RegTech close-ups: a wide box (3/5) and a square one (2/5) under the reel, like the Crypto bento.
     One background, the reel's, spread across the row (rxFitBg), with a hint of pink on the folder too.
     Satoshi and plum like the reel, white cards with no borders, very light grey shadows ===== */
  .rx-bento { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); margin-top: var(--space-3);
    --accent: #86307A; --accent-soft: #F7EDF5; --t1: #22222A; --t3: #7C7C88; --ok: #15803D; --ok-soft: #E4F4E9; --del: #B42318; --del-soft: #FDECEA;
    font-family: "Satoshi", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif; }
  .rx-bento > * { position: relative; overflow: hidden; border-radius: 14px; container-type: inline-size;
    background: radial-gradient(120% 90% at 0% 0%, #F1E6FA 0%, transparent 60%), radial-gradient(90% 90% at 0% 100%, #FBE8EF 0%, transparent 60%), radial-gradient(45% 75% at 100% 0%, #FAE6F0 0%, transparent 70%), linear-gradient(135deg, #F6EEFA, #ECE1F8); }
  .rx-wide { aspect-ratio: 3 / 2; }
  @media (max-width: 560px) { .rx-bento { grid-template-columns: 1fr; } .rx-fold-box { aspect-ratio: 4 / 3; } }
  .rx-card { background: #fff; border-radius: 3cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1cqw 3.5cqw rgba(0, 0, 0, .05); }

  /* the redline: what changed in the decree, only the real change. "and" is struck, ", " and "and tax crimes" are typed in */
  .rx-red { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 78cqw; padding: 5.4cqw 5.6cqw 6cqw; transform: translate(-50%, -50%); font-size: 4.6cqw; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; color: var(--t1); user-select: none; cursor: pointer; }
  .rx-yr { display: block; margin-bottom: 2cqw; font-size: 2.6cqw; line-height: 1.2; font-weight: 700; letter-spacing: .08em; color: var(--t3); }
  .rx-roll { display: inline-grid; vertical-align: top; }
  .rx-roll > * { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
  .rx-roll > :last-child { transform: translateY(70%); opacity: 0; color: var(--accent); }
  .rx-red.is-new .rx-roll > :first-child { transform: translateY(-70%); opacity: 0; }
  .rx-red.is-new .rx-roll > :last-child { transform: none; opacity: 1; }
  .rx-txt { display: block; position: relative; z-index: 0; }
  .rx-red del, .rx-red ins { position: relative; white-space: nowrap; text-decoration: none; }
  .rx-red del { transition: color .35s ease; }
  .rx-red del::before, .rx-red ins::before { content: ""; position: absolute; inset: 0 -.5cqw; z-index: -1; border-radius: .8cqw; opacity: 0; transition: opacity .35s ease; }
  .rx-red del::before { background: var(--del-soft); }
  .rx-red del::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: .25cqw; background: var(--del); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.45, 0, .2, 1); }
  .rx-red.struck del { color: var(--del); }
  .rx-red.struck del::before { opacity: 1; }
  .rx-red.struck del::after { transform: none; }
  .rx-red ins { color: var(--ok); }
  .rx-red ins::before { background: var(--ok-soft); }
  .rx-red ins.gap::before { display: none; }
  .rx-red.typed ins::before { opacity: 1; }
  .rx-ch { position: relative; opacity: 0; }
  .rx-ch.on { opacity: 1; }
  .rx-ch.at::after { content: ""; position: absolute; right: -.2cqw; top: .12em; bottom: .08em; width: .3cqw; background: var(--accent); animation: rx-blink 1s steps(1) infinite; }
  @keyframes rx-blink { 50% { opacity: 0; } }

  /* the legal inventory: a folder, the changed document up front, two more behind, the label on the glass pocket */
  .rx-fold { position: absolute; left: 50%; top: 50%; width: 76cqw; height: 66cqw; transform: translate(-50%, -50%); cursor: pointer; }
  @media (max-width: 560px) { .rx-fold { transform: translate(-50%, -50%) scale(.84); } }
  .rx-f-tab { position: absolute; left: 0; top: 0; width: 30cqw; height: 6cqw; border-radius: 2.4cqw 2.4cqw 0 0; background: #D7BFE2; clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
  .rx-f-back { position: absolute; left: 0; top: 5.6cqw; width: 76cqw; height: 60.4cqw; border-radius: 0 2.4cqw 2.4cqw 2.4cqw; background: #D7BFE2; }
  .rx-f-doc { position: absolute; left: 6cqw; top: 15cqw; box-sizing: border-box; width: 64cqw; height: 40cqw; padding: 4cqw 4.2cqw; transform-origin: 50% 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .rx-f-doc.d1 { transform: translateY(-3.2cqw) scale(.94); }
  .rx-f-doc.d2 { transform: translateY(-6.2cqw) scale(.88); }
  .rx-f-doc.d1, .rx-f-doc.d2 { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
  .rx-fold:hover .rx-f-doc.d0, .rx-fold:focus-visible .rx-f-doc.d0 { transform: translateY(-2.4cqw); }
  .rx-fold .rx-f-doc.d0.up { transform: translateY(-12cqw); }
  .rx-f-doc b { display: block; margin-top: 3.2cqw; font-size: 4.8cqw; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; color: var(--t1); }
  .rx-f-doc small { display: block; margin-top: 1cqw; font-size: 3.4cqw; color: var(--t3); }
  .rx-pill { position: relative; display: inline-grid; height: 6.4cqw; font-size: 3.2cqw; font-weight: 500; }
  .rx-pill > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 0 2.4cqw; border-radius: 1.6cqw; transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
  .rx-pill i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: currentColor; }
  .rx-pill svg { width: 3.2cqw; height: 3.2cqw; stroke-width: 3.5; }   /* about the same line as the reel next to it */
  .rx-p-upd { background: var(--accent-soft); color: var(--accent); }
  .rx-p-ok { background: var(--ok-soft); color: var(--ok); opacity: 0; transform: scale(.7); }
  .rx-fold.done .rx-p-upd { opacity: 0; transform: scale(.7); }
  .rx-fold.done .rx-p-ok { opacity: 1; transform: none; }
  .rx-f-front { position: absolute; left: 0; top: 44cqw; box-sizing: border-box; width: 76cqw; height: 22cqw; padding: 0 4.6cqw 4.4cqw; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 2.4cqw;
    background: rgba(234, 216, 241, .74); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 1cqw 3.4cqw rgba(90, 30, 80, .08); }
  .rx-f-front b { font-size: 4.6cqw; font-weight: 500; letter-spacing: -.02em; color: #4A2645; }
  .rx-f-meta { display: flex; align-items: center; gap: 2cqw; margin-top: 1cqw; font-size: 3.6cqw; color: #6E4E69; }
  /* 31 Oct (previews/regtech-folder.html): the folder's texts had the page's 16/24px line, so the narrower the tile the lower
     they sat: "Legal inventory" spilled over the top of the glass and the document's subtitle slid under it. Every line in cqw,
     the pill a block of its own, the pocket's two lines centred, the subtitle always 10-20px above the glass */
  .rx-f-doc .rx-pill { display: grid; width: max-content; }
  .rx-f-doc .rx-pill > span { height: 6.4cqw; line-height: 6.4cqw; }
  .rx-f-doc b { line-height: 6cqw; }
  .rx-f-doc small { line-height: 4.6cqw; }
  .rx-f-front { justify-content: center; padding: 0 4.6cqw; }
  .rx-f-front b { display: block; line-height: 6cqw; }
  .rx-f-meta { line-height: 5cqw; }
  .rx-red:focus-visible, .rx-fold:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .rx-bento *, .rx-bento *::before, .rx-bento *::after { transition: none !important; animation: none !important; } }

  @media (prefers-reduced-motion: reduce) {
    .cx-sheet, .cx-tgl::before, .cx-club { transition: none; }
  }

  /* ===== Coaching app, client side. Elena's screens (Figma "Export x Claude": Obiettivi 17:9302 / 17:9251, Passi settimanali 17:9388,
     Attività 17:6646, Scegli attività 17:6504, Badge Allenamenti 17:8816, Integrazioni 17:9856), her badges, icons and the app logos,
     drawn quieter: Manrope, RegTech-style lime and yellow ground, large titles, white cards with barely-there shadows, lime instead of her red ===== */
  /* drawn in content-box like its preview (the rest of the site is border-box); rules below that need border-box say so */
  .cp *, .cp *::before, .cp *::after { box-sizing: content-box; }
  .cp { --lime: #C8F135; --lime-ink: #557300; --lime-on: #16171A; --wash: .28; --halo: .55; --ground: #E3E5F7;
    --g900: #16171A; --g700: #45474D; --g500: #8C8F97; --g300: #C9CBD1; --g100: #ECEDF1; --g50: #F5F6F8; --ok: #34C759;
    /* the RegTech background with its hues turned: only periwinkle: the deeper one where RegTech has pink, a lighter one where it has lilac */
    background: radial-gradient(120% 90% at 0% 0%, #D8DAF6 0%, transparent 60%), radial-gradient(90% 90% at 0% 100%, #AFB4F2 0%, transparent 60%), radial-gradient(45% 75% at 100% 0%, #AEB3F0 0%, transparent 70%), linear-gradient(135deg, #E3E5F7, #D0D3F3); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--g900); letter-spacing: 0; line-height: normal; }
  .cp-reel { background: radial-gradient(100% 90% at 100% 0%, #D8DAF6 0%, transparent 60%), radial-gradient(80% 80% at 0% 100%, #AFB4F2 0%, transparent 60%), radial-gradient(60% 60% at 0% 0%, #AEB3F0 0%, transparent 70%), linear-gradient(315deg, #E3E5F7, #D0D3F3); }
  .cp-acts { background: radial-gradient(110% 90% at 0% 100%, #D8DAF6 0%, transparent 60%), radial-gradient(90% 90% at 100% 0%, #AFB4F2 0%, transparent 60%), radial-gradient(60% 60% at 100% 100%, #AEB3F0 0%, transparent 70%), linear-gradient(45deg, #E3E5F7, #D0D3F3); }
  .cp-one { background: radial-gradient(90% 100% at 50% 0%, #D8DAF6 0%, transparent 60%), radial-gradient(70% 90% at 100% 100%, #AFB4F2 0%, transparent 60%), radial-gradient(50% 70% at 0% 100%, #AEB3F0 0%, transparent 70%), linear-gradient(180deg, #E3E5F7, #D0D3F3); }
  .cp .num { font-variant-numeric: tabular-nums; color: inherit; font-weight: inherit; } /* the site's .num is for the project texts */
  .cp img { display: block; max-width: none; }
  .cp svg.i { width: 100%; height: 100%; display: block; }
  .cp .card { background: #fff; border-radius: calc(20 * var(--p)); box-shadow: 0 0 0 calc(.5 * var(--p)) rgba(0, 0, 0, .04), 0 calc(4 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, .04); }

  /* ---------- the phone: Goals ---------- */
  .cp-reel .reel-phone { --phone-w: 66cqw; left: 15.6cqw; top: 9.1cqw; }
  /* zoomed in like the Co-living phone: the tile cuts the phone at 670 of its 780 screen units, in the empty band between
     the last card (653 at most) and the tab bar (696), so no card is sliced and the tab bar never shows */
  .cp-reel .reel-phone__screen { background: var(--g50); }
  .cp .reel-phone__status { color: var(--g900); font-family: -apple-system, BlinkMacSystemFont, "Manrope", sans-serif; }
  .cp .ui { --p: calc(100cqw / 360); position: absolute; inset: 0; overflow: hidden; }
  .cp .scr { position: absolute; inset: 0; background: var(--g50); will-change: transform; }
  .cp .push { transform: translateX(100%); z-index: 4; box-shadow: calc(-6 * var(--p)) 0 calc(20 * var(--p)) rgba(0, 0, 0, .05); }
  .cp .at { position: absolute; }
  .cp .ui .card { position: absolute; left: calc(16 * var(--p)); width: calc(328 * var(--p)); box-sizing: border-box; }
  .cp .back { left: calc(12 * var(--p)); top: calc(54 * var(--p)); width: calc(32 * var(--p)); height: calc(32 * var(--p)); padding: calc(4 * var(--p)); box-sizing: border-box; }
  .cp .ttl { left: calc(20 * var(--p)); top: calc(88 * var(--p)); font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }
  /* type scale in the phone: 34 / 24 / 17 / 15 / 13 */
  .cp .seg { position: absolute; left: calc(16 * var(--p)); top: calc(140 * var(--p)); width: calc(328 * var(--p)); height: calc(36 * var(--p)); padding: calc(3 * var(--p)); box-sizing: border-box; border-radius: calc(11 * var(--p)); background: var(--g100); display: grid; grid-template-columns: repeat(3, 1fr); }
  .cp .seg i { position: absolute; left: calc(3 * var(--p)); top: calc(3 * var(--p)); width: calc(107.3 * var(--p)); height: calc(30 * var(--p)); border-radius: calc(9 * var(--p)); background: #fff; box-shadow: 0 calc(1 * var(--p)) calc(3 * var(--p)) rgba(0, 0, 0, .1); will-change: transform; }
  .cp .seg span { position: relative; display: grid; place-items: center; font-size: calc(14 * var(--p)); font-weight: 600; color: var(--g700); }
  .cp .goal { height: calc(132 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)); }
  .cp .g-top { display: flex; justify-content: space-between; align-items: baseline; }
  .cp .g-top b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .g-top em { font-style: normal; font-size: calc(15 * var(--p)); font-weight: 700; color: var(--lime-ink); }
  .cp .g-val { margin-top: calc(6 * var(--p)); display: flex; align-items: baseline; gap: calc(4 * var(--p)); }
  .cp .g-val b { font-size: calc(24 * var(--p)); line-height: calc(30 * var(--p)); font-weight: 800; letter-spacing: -.03em; }
  .cp .g-val span { font-size: calc(15 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bar { position: relative; height: calc(8 * var(--p)); margin-top: calc(10 * var(--p)); border-radius: calc(4 * var(--p)); background: var(--g100); overflow: hidden; }
  .cp .bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--lime); transform-origin: 0 50%; }
  .cp .foot { display: flex; align-items: center; gap: calc(6 * var(--p)); margin-top: calc(10 * var(--p)); font-size: calc(14 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .foot .end { margin-left: auto; color: var(--g700); font-weight: 600; }
  .cp small .day { margin-right: .45em; color: var(--g700); font-weight: 600; }
  .cp .foot svg { width: calc(15 * var(--p)); height: calc(15 * var(--p)); }
  .cp .goal.done { height: calc(76 * var(--p)); padding: 0 calc(18 * var(--p)) 0 calc(16 * var(--p)); display: flex; align-items: center; gap: calc(14 * var(--p)); }
  .cp .d-ic { flex: none; width: calc(40 * var(--p)); height: calc(40 * var(--p)); border-radius: 50%; background: var(--lime); color: var(--lime-on); display: grid; place-items: center; }
  .cp .d-ic svg { width: calc(22 * var(--p)); height: calc(22 * var(--p)); }
  .cp .d-tx { flex: 1; min-width: 0; display: grid; gap: calc(3 * var(--p)); }
  .cp .d-tx b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .d-tx small { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .d-val { flex: none; font-size: calc(20 * var(--p)); line-height: calc(26 * var(--p)); font-weight: 800; letter-spacing: -.02em; }
  /* in progress: the goal the coach cares about this week is a dark hero with a ring, the others are rows with their own icon */
  .cp .hero { height: calc(148 * var(--p)); padding: calc(18 * var(--p)); background: #1C1D21; color: #fff; display: flex; align-items: center; gap: calc(18 * var(--p)); box-shadow: 0 calc(6 * var(--p)) calc(18 * var(--p)) rgba(0, 0, 0, .14); }
  .cp .ring { position: relative; flex: none; width: calc(108 * var(--p)); height: calc(108 * var(--p)); }
  .cp .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .cp .ring .tr { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 9; }
  .cp .ring .pr { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; }
  .cp .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(26 * var(--p)); font-weight: 800; letter-spacing: -.03em; }
  .cp .h-tx { min-width: 0; display: grid; gap: calc(2 * var(--p)); }
  .cp .h-tx small { font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 600; color: rgba(255, 255, 255, .62); }
  .cp .h-tx b { font-size: calc(30 * var(--p)); line-height: calc(36 * var(--p)); font-weight: 800; letter-spacing: -.03em; }
  .cp .h-tx span { font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 500; color: rgba(255, 255, 255, .62); }
  .cp .h-tx .foot { margin-top: calc(8 * var(--p)); color: rgba(255, 255, 255, .78); }
  .cp .row { height: calc(124 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)); }
  .cp .r-top { display: flex; align-items: center; gap: calc(12 * var(--p)); }
  .cp .r-ic { flex: none; width: calc(40 * var(--p)); height: calc(40 * var(--p)); border-radius: calc(12 * var(--p)); background: var(--g100); color: #3B3B3B; display: grid; place-items: center; }
  .cp .r-ic svg { width: calc(22 * var(--p)); height: calc(22 * var(--p)); }
  .cp .r-tx { flex: 1; min-width: 0; display: grid; }
  .cp .r-tx b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .r-tx span { font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .r-tx span b { font-size: inherit; color: var(--g900); font-weight: 800; }
  .cp .r-top em { font-style: normal; font-size: calc(17 * var(--p)); font-weight: 800; color: var(--lime-ink); }
  .cp .row .bar { margin-top: calc(14 * var(--p)); }
  /* badge detail (from Elena's "Piramidi d'Egitto" screen, with a workout shield): ring, count, stats, recent sessions */
  .cp .bd-ring { position: absolute; left: 50%; top: calc(62 * var(--p)); width: calc(156 * var(--p)); height: calc(156 * var(--p)); margin-left: calc(-78 * var(--p)); }
  .cp .bd-ring::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #fff; box-shadow: 0 calc(4 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, .05); }
  .cp .bd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .cp .bd-ring .tr { fill: none; stroke: var(--g100); stroke-width: 6; }
  .cp .bd-ring .pr { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; }
  .cp .bd-ring img { position: absolute; left: 50%; top: 50%; width: calc(92 * var(--p)); height: calc(100 * var(--p)); margin: calc(-50 * var(--p)) 0 0 calc(-46 * var(--p)); }
  .cp .bd-hd { position: absolute; left: 0; right: 0; top: calc(230 * var(--p)); text-align: center; display: grid; gap: calc(4 * var(--p)); }
  .cp .bd-hd h5 { margin: 0; font-size: calc(28 * var(--p)); line-height: calc(34 * var(--p)); font-weight: 800; letter-spacing: -.03em; }
  .cp .bd-hd p { margin: 0; font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bd-hd p b { color: var(--g900); font-weight: 800; font-size: calc(22 * var(--p)); }
  .cp .bd-hd small { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bd-hd small b { color: var(--g700); font-weight: 700; }
  .cp .bd-card { padding: calc(16 * var(--p)); }
  .cp .bd-card h6 { margin: 0 0 calc(10 * var(--p)); display: flex; justify-content: space-between; align-items: baseline; font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .bd-card h6 span { font-size: calc(14 * var(--p)); font-weight: 700; color: var(--lime-ink); }
  .cp .bd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--p)); }
  .cp .bd-stats span { display: grid; justify-items: center; gap: calc(2 * var(--p)); padding: calc(10 * var(--p)) 0; border-radius: calc(12 * var(--p)); background: var(--g50); }
  .cp .bd-stats b { font-size: calc(20 * var(--p)); line-height: calc(26 * var(--p)); font-weight: 800; letter-spacing: -.02em; }
  .cp .bd-stats small { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bd-row { display: flex; align-items: center; gap: calc(12 * var(--p)); height: calc(54 * var(--p)); }
  .cp .bd-row + .bd-row { box-shadow: inset 0 calc(.6 * var(--p)) 0 var(--g100); }
  .cp .bd-row .ico { flex: none; width: calc(38 * var(--p)); height: calc(38 * var(--p)); border-radius: calc(11 * var(--p)); display: grid; place-items: center; }
  .cp .bd-row .ico img { width: calc(18 * var(--p)); height: calc(18 * var(--p)); }
  .cp .bd-row > span:nth-child(2) { flex: 1; display: grid; }
  .cp .bd-row b { font-size: calc(16 * var(--p)); line-height: calc(21 * var(--p)); font-weight: 700; }
  .cp .bd-row small { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bd-row em { font-style: normal; font-size: calc(17 * var(--p)); font-weight: 800; }
  .cp .bd-row em small { font-size: calc(14 * var(--p)); font-weight: 600; }
  /* completed list: the way into the badges */
  .cp .goal.blink { height: calc(76 * var(--p)); padding: 0 calc(14 * var(--p)) 0 calc(16 * var(--p)); display: flex; align-items: center; gap: calc(14 * var(--p)); }
  .cp .bl-imgs { flex: none; display: flex; }
  .cp .bl-imgs img { width: calc(34 * var(--p)); height: calc(37 * var(--p)); }
  .cp .bl-imgs img + img { margin-left: calc(-10 * var(--p)); }
  .cp .bl-chev { flex: none; width: calc(22 * var(--p)); height: calc(22 * var(--p)); color: var(--g500); }
  /* the badges page: the workout milestones, three earned, the 100 on its way, the rest still grey. No scrolling */
  .cp .bwrap { top: calc(140 * var(--p)); padding: calc(18 * var(--p)) calc(16 * var(--p)) calc(20 * var(--p)); }
  .cp .bhd { display: flex; justify-content: space-between; align-items: baseline; padding: 0 calc(4 * var(--p)); }
  .cp .bhd b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .bhd span { font-size: calc(15 * var(--p)); font-weight: 600; color: var(--g500); }
  .cp .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: calc(16 * var(--p)); margin-top: calc(16 * var(--p)); perspective: calc(700 * var(--p)); }
  .cp .bg { display: grid; justify-items: center; align-content: start; text-align: center; }
  .cp .bg img { width: calc(80 * var(--p)); height: calc(87 * var(--p)); will-change: transform; }
  .cp .bg b { margin-top: calc(8 * var(--p)); font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; }
  .cp .bg small { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .bg.lock img { filter: grayscale(1) contrast(.85) brightness(1.12); opacity: .45; }
  .cp .bg.lock b { color: var(--g500); }
  .cp .bg.due img { filter: grayscale(1) contrast(.9) brightness(1.08); opacity: .75; }
  .cp .bg.due small { color: var(--lime-ink); font-weight: 700; }
  .cp .later { opacity: 0; }
  .cp .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: calc(84 * var(--p)); padding-top: calc(9 * var(--p)); box-sizing: border-box; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; align-content: start; background: rgba(255, 255, 255, .94); box-shadow: 0 calc(-.6 * var(--p)) 0 var(--g100); z-index: 6; }
  .cp .tabs span { display: grid; justify-items: center; gap: calc(5 * var(--p)); color: var(--g500); }
  .cp .tabs span svg { width: calc(26 * var(--p)); height: calc(26 * var(--p)); }
  .cp .tabs span.on::after { content: ""; width: calc(5 * var(--p)); height: calc(5 * var(--p)); border-radius: 50%; background: var(--g900); }
  .cp .tabs span.on { color: var(--g900); }
  /* the goal page */
  .cp .steps { top: calc(140 * var(--p)); height: calc(484 * var(--p)); padding: calc(20 * var(--p)); }
  .cp .big { display: flex; align-items: baseline; gap: calc(8 * var(--p)); }
  .cp .big b { font-size: calc(56 * var(--p)); line-height: 1; font-weight: 800; letter-spacing: -.05em; }
  .cp .big span { font-size: calc(17 * var(--p)); color: var(--g500); font-weight: 600; }
  .cp .steps p { margin: calc(10 * var(--p)) 0 0; font-size: calc(15 * var(--p)); color: var(--g700); }
  .cp .steps p b { color: var(--g900); font-weight: 800; }
  .cp .chart { position: absolute; left: calc(20 * var(--p)); right: calc(20 * var(--p)); top: calc(182 * var(--p)); height: calc(236 * var(--p)); }
  .cp .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
  .cp .chart text { font-family: "Manrope", sans-serif; font-size: 14px; fill: #8C8F97; font-weight: 600; font-variant-numeric: tabular-nums; }
  .cp .mask { position: absolute; left: calc(36 * var(--p)); right: 0; top: 0; bottom: calc(38 * var(--p)); background: #fff; transform-origin: 100% 50%; transform: scaleX(0); }
  .cp .legend { position: absolute; left: calc(20 * var(--p)); bottom: calc(22 * var(--p)); display: flex; align-items: center; gap: calc(7 * var(--p)); font-size: calc(14 * var(--p)); font-weight: 500; color: var(--g500); }
  .cp .legend i { width: calc(20 * var(--p)); border-top: calc(2 * var(--p)) dashed var(--lime-ink); }
  .cp .legend b { color: var(--g900); font-weight: 700; }

  /* ---------- the three panels on the right: one Figma px = --p ---------- */
  .cp-panel { --p: calc(82cqw / 328); display: grid; place-items: center; }
  .cp-panel > .card { width: calc(328 * var(--p)); box-sizing: border-box; }
  .cp-panel h4 { margin: 0; font-size: calc(19 * var(--p)); line-height: calc(26 * var(--p)); font-weight: 700; letter-spacing: -.01em; }
  .cp-panel .hd { display: flex; justify-content: space-between; align-items: baseline; }
  .cp-panel .hd span { font-size: calc(14 * var(--p)); font-weight: 600; color: var(--g500); letter-spacing: .01em; }

  /* activities: her activity card, filtered by her chips */
  /* activities: her activity cards in a row, white, the one in the middle whole and its neighbours peeking at the edges.
     Swipe, drag, click a neighbour or use the arrow keys. Inside a card one Figma px = --q (cards drawn 240 wide) */
  .cp-acts { display: block; }
  .cp-car { position: absolute; left: 0; right: 0; top: 50%; padding-bottom: 24px; transform: translateY(-50%); touch-action: pan-y; cursor: grab; outline: none; }
  .cp-car.drag { cursor: grabbing; }
  .cp-track { position: relative; display: flex; align-items: stretch; gap: 3cqw; will-change: transform; transition: transform .5s cubic-bezier(.45, 0, .2, 1); }
  .cp-car.drag .cp-track { transition: none; }
  .cp-ac { --q: calc(78cqw / 260); position: relative; flex: none; width: 78cqw; box-sizing: border-box; padding: calc(18 * var(--q)) calc(18 * var(--q)) calc(16 * var(--q)); border-radius: calc(18 * var(--q)); background: #fff;
    display: grid; grid-template-columns: calc(42 * var(--q)) 1fr; column-gap: calc(14 * var(--q)); align-items: center;
    box-shadow: 0 0 0 calc(.5 * var(--q)) rgba(0, 0, 0, .04), 0 calc(4 * var(--q)) calc(14 * var(--q)) rgba(0, 0, 0, .05); transform: scale(.92); transition: transform .5s cubic-bezier(.45, 0, .2, 1); user-select: none; }
  .cp-ac.on { transform: none; }
  .cp-ac .ico { grid-row: span 2; width: calc(42 * var(--q)); height: calc(42 * var(--q)); border-radius: calc(12 * var(--q)); display: grid; place-items: center; }
  .cp-ac .ico img { width: calc(20 * var(--q)); height: calc(20 * var(--q)); object-fit: contain; pointer-events: none; }
  /* activity icons: light grey tile, anthracite glyph (the SVGs are single-colour, flattened with a filter) */
  .cp .ico { background: var(--g100); }
  .cp .ico img { filter: brightness(0) invert(23%); }
  .cp-ac b { align-self: end; font-size: calc(17 * var(--q)); line-height: calc(22 * var(--q)); font-weight: 700; letter-spacing: -.01em; }
  .cp-ac small { align-self: start; margin-top: calc(2 * var(--q)); font-size: calc(13 * var(--q)); line-height: calc(18 * var(--q)); font-weight: 500; color: var(--g500); white-space: nowrap; }
  .cp-ac .st { grid-column: 1 / -1; display: flex; gap: calc(14 * var(--q)); margin-top: calc(16 * var(--q)); padding-top: calc(14 * var(--q)); box-shadow: inset 0 calc(.6 * var(--q)) 0 var(--g100); font-size: calc(13 * var(--q)); line-height: calc(18 * var(--q)); font-weight: 600; color: var(--g700); white-space: nowrap; }
  .cp-ac .st span { display: flex; align-items: center; gap: calc(5 * var(--q)); }
  .cp-ac .st svg { flex: none; width: calc(14 * var(--q)); height: calc(14 * var(--q)); color: var(--g500); }
  .cp-dots { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 6px; }
  .cp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(22, 23, 26, .18); transition: background-color .3s ease; }
  .cp-dots i.on { background: var(--g900); }
  .cp-car:focus-visible .cp-ac.on { outline: 3px solid var(--focus); outline-offset: 3px; }

  /* health app: one app, one switch, the three numbers the coach sees. Oura on the site (Apple Health was the other option) */
  .cp-one { display: grid; place-items: center; }
  /* everything in cqw, no px floors: the card scales like a picture, so the name row never spills out of a narrow tile */
  .cp-one .card { width: 86cqw; box-sizing: border-box; padding: 5cqw; border-radius: 6cqw; }
  .cp-one .top { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4.2cqw; width: 100%; cursor: pointer; }
  .cp-one .app { width: 12cqw; aspect-ratio: 1; flex: none; border-radius: 22.5%; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .06); }
  .cp-one .app img { width: 100%; height: 100%; object-fit: cover; }
  .cp-one .nm { flex: 1; display: grid; gap: .6cqw; min-width: 0; }
  .cp-one .nm b { font-size: 5.2cqw; line-height: 1.3; white-space: nowrap; font-weight: 700; letter-spacing: -.01em; }
  .cp-one .nm small { display: grid; white-space: nowrap; font-size: 4.2cqw; line-height: 1.35; font-weight: 500; color: var(--g500); }
  .cp-one .nm small span { grid-area: 1 / 1; transition: opacity .25s ease; }
  .cp-one .nm small .y, .cp-one [aria-checked="true"] .nm small .n { opacity: 0; }
  .cp-one [aria-checked="true"] .nm small .y { opacity: 1; }
  .cp-one .sw { position: relative; flex: none; width: 17.3cqw; height: 10.5cqw; border-radius: 5.25cqw; background: #E5E5EA; overflow: hidden; }
  .cp-one .sw::before { content: ""; position: absolute; inset: 0; background: var(--ok); opacity: 0; transition: opacity .25s ease; }
  .cp-one .sw::after { content: ""; position: absolute; left: .75cqw; top: .75cqw; width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; box-shadow: 0 .75cqw 1.9cqw rgba(0, 0, 0, .15), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .cp-one [aria-checked="true"] .sw::before { opacity: 1; }
  .cp-one [aria-checked="true"] .sw::after { transform: translateX(6.8cqw); }
  .cp-one .data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 4.4cqw; }
  .cp-one .chip { display: grid; gap: .4cqw; padding: 2.4cqw 2.8cqw; border-radius: 3cqw; background: var(--g100); transition: background-color .3s ease; }
  .cp-one .chip b { white-space: nowrap; font-size: 4.8cqw; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; transition: color .3s ease; }
  .cp-one .chip span { font-size: 3.8cqw; line-height: 1.3; font-weight: 600; color: var(--g500); }
  .cp-one.off .chip { background: var(--g50); }
  .cp-one.off .chip b { color: var(--g300); }
  .cp-one .top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
  @media (prefers-reduced-motion: reduce) { .cp *, .cp *::before, .cp *::after { transition: none !important; } }
  @media (max-width: 560px) { .cp-panel { --p: calc(84cqw / 328); } }

  /* Private case study pages (site/p/…): one column, the same animations as the home page, nothing from the two-column layout */
  .case__bar, .case__main, .case__foot { max-width: calc(680px + 2 * var(--space-3)); margin: 0 auto; padding-left: var(--space-3); padding-right: var(--space-3); }
  .case__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); }
  .case__home { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; text-decoration: none; }
  .case__home:hover { text-decoration: underline; text-decoration-color: var(--hint); }
  .case__main { padding-top: var(--space-7); padding-bottom: var(--space-4); }
  .case__eyebrow { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  .case h1 { font-weight: 500; margin: 0 0 var(--space-3); text-wrap: balance; }
  .case__lead { margin: 0 0 var(--space-5); font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--ink); text-wrap: pretty; }
  .case__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .case__facts div { min-width: 0; }
  .case__facts dt { color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); }
  .case__facts dd { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); font-weight: 500; }
  .case section { margin-top: var(--space-7); }
  .case section > p { max-width: 560px; margin: 0 0 var(--space-3); color: var(--text); text-wrap: pretty; }
  .case h2 { margin-bottom: var(--space-3); text-wrap: balance; }
  .case__todo { color: var(--muted) !important; }
  .case__steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
  .case__steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); column-gap: var(--space-2); }
  .case__steps li::before { content: counter(step); grid-row: span 2; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
  .case__steps h3 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--ink); }
  .case__steps p { margin: 0; max-width: 560px; color: var(--text); text-wrap: pretty; }
  .case__end { padding-top: var(--space-5); border-top: 1px solid var(--line); }
  .case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); font-size: var(--fs-small); line-height: var(--lh-small); }
  .case__foot { display: block; margin-top: 0; border-top: 0; padding-top: 0; padding-bottom: var(--space-6); }
  .case__foot p { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); text-wrap: pretty; }
  @media (max-width: 900px) { .case__main { padding-top: var(--space-6); } .case section { margin-top: var(--space-6); } }
  /* A screenshot still to come: a grey box with the label, same shape as the reels */
  .case__shot { display: grid; place-content: center; gap: var(--space-1); margin: 0 0 var(--space-4); aspect-ratio: 16 / 10; border-radius: 14px; background: var(--surface-1); text-align: center; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
  .case__shot small { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--tr-meta); max-width: 360px; }
  .case__label { margin: var(--space-4) 0 var(--space-1); color: var(--ink); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
  .case__label + p { margin-top: 0; }

  /* ===== Listing chat (proptech, 2022). One idea from Elena's wizard (Figma "Export x Claude" 39:13826): the asking price against
     the spread of similar homes, one gesture. A big phone cut by the bottom of the tile, so it doesn't look like the other phones.
     Geist for the whole row (the project's Open Sans left out, Elena's choice). Mocha in tones only (the brand petrol and purple left out): chocolate for what matters, latte for
     the rest, cream for wells and selections. The verdict alone speaks in green (in line) and red (above) ===== */
  .hp { --map: #EAE5DC; --acc: #7A4B33; --acc-tint: #F3EAE2; --acc-soft: #D9C4B4; --ink: #201A17; --ink-2: #61574F; --line: #E3D8CE; --chat: #F7F2EE; --well: #F4EEE8;
    --good: #2E7D4F; --good-tint: #E2F1E7; --down: #C23A2B; --down-tint: #FBE3DF; --ground: #D6E1EB;
    background: var(--ground); font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); letter-spacing: 0; line-height: normal; }
  .hp img { display: block; max-width: none; }
  .hp .num { font-variant-numeric: tabular-nums; color: inherit; font-weight: inherit; } /* the site's .num is for the project texts */

  /* ---------- the phone: price step ---------- */
  .hp-reel .reel-phone { --phone-w: 80cqw; left: 10cqw; top: 10cqw; }
  .hp .reel-phone__screen { background: #fff; }
  /* white device: white bezel and notch, a silver rim and buttons, a softer shadow */
  /* a white iPhone with Dynamic Island (the "All white" Elena picked): white border round the display,
     a thin aluminium edge, a hairline round the screen. Not how a real iPhone looks from the front, chosen for the lighter look */
  .hp .reel-phone { background: #F9F9FA; padding: calc(var(--phone-w) * .03);
    box-shadow: inset 0 0 0 calc(var(--phone-w) * .005) #FFFFFF, inset 0 0 0 calc(var(--phone-w) * .009) #DCDCE1, inset 0 0 0 calc(var(--phone-w) * .011) #C4C4CA, 0 1.6cqw 4cqw rgba(60, 40, 25, .16); }
  .hp .reel-phone__screen { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
  .hp .reel-phone__btn { background: #D4D4DA; }
  /* the status bar keeps the system font of reel.css, like every phone on the site. The battery full and green */
  .hp .reel-phone__status { color: #000; }
  .hp .sb-batt rect:nth-child(2) { fill: #34C759; }
  .hp .ui { --p: calc(100cqw / 360); position: absolute; inset: 0; overflow: hidden; font-size: calc(15 * var(--p)); }
  .hp .ui > * { position: absolute; }
  /* Hugeicons: one line weight for the whole project. Each icon gives its size in UI units (--sz), the stroke is worked out so it is always 1.5 units on screen */
  .hp svg.ic { width: calc(var(--sz, 24) * var(--p)); height: calc(var(--sz, 24) * var(--p)); stroke-width: calc(1.5 * 24 / var(--sz, 24)); }
  /* the price step: the agent asks, the price in big, the verdict, the spread of similar homes and a slider the finger drags */
  .hp .v-av { left: calc(16 * var(--p)); top: calc(70 * var(--p)); width: calc(44 * var(--p)); height: calc(44 * var(--p)); }
  .hp .v-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .hp .v-av::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(11 * var(--p)); height: calc(11 * var(--p)); border-radius: 50%; background: #34C759; box-shadow: 0 0 0 calc(2 * var(--p)) #fff; }
  .hp .v-bubble { left: calc(70 * var(--p)); right: calc(16 * var(--p)); top: calc(70 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(16 * var(--p)); border-top-left-radius: calc(4 * var(--p)); background: var(--chat); font-size: calc(16 * var(--p)); line-height: calc(22 * var(--p)); color: var(--ink); }
  .hp .v-label { left: calc(16 * var(--p)); top: calc(156 * var(--p)); font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 600; color: var(--ink-2); }
  .hp .v-price { left: calc(15 * var(--p)); top: calc(180 * var(--p)); font-size: calc(40 * var(--p)); line-height: calc(52 * var(--p)); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
  /* the verdict: small and quiet, a filled Hugeicons circle and the words in the same colour, green or red */
  .hp .v-chip { left: calc(16 * var(--p)); top: calc(246 * var(--p)); display: flex; align-items: center; gap: calc(6 * var(--p)); height: calc(30 * var(--p)); padding: 0 calc(12 * var(--p)) 0 calc(7 * var(--p)); border-radius: calc(6 * var(--p)); font-size: calc(14 * var(--p)); font-weight: 500; white-space: nowrap; }
  .hp .v-chip svg { flex: none; }
  .hp .v-ok { background: var(--good-tint); color: var(--good); }
  .hp .v-ok .ck { display: contents; }
  .hp .v-hi { background: var(--down-tint); color: var(--down); opacity: 0; }
  .hp .v-chart { left: calc(16 * var(--p)); width: calc(328 * var(--p)); top: calc(316 * var(--p)); height: calc(96 * var(--p)); }
  .hp .v-chart svg { display: block; width: 100%; height: 100%; }
  .hp .v-rail { left: calc(16 * var(--p)); width: calc(328 * var(--p)); top: calc(428 * var(--p)); height: calc(4 * var(--p)); border-radius: calc(2 * var(--p)); background: var(--well); }
  .hp .v-track { left: calc(16 * var(--p)); width: calc(328 * var(--p)); top: calc(430 * var(--p)); height: 0; will-change: transform; z-index: 2; }
  .hp .v-knob { position: absolute; left: calc(-14 * var(--p)); top: calc(-14 * var(--p)); width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1 * var(--p)) rgba(0, 0, 0, .06), 0 calc(2 * var(--p)) calc(8 * var(--p)) rgba(0, 0, 0, .18); }
  .hp .v-line { position: absolute; left: 50%; bottom: 100%; width: calc(2 * var(--p)); height: calc(112 * var(--p)); margin-left: calc(-1 * var(--p)); background: var(--ink); border-radius: calc(1 * var(--p)); }
  .hp .v-touch { position: absolute; left: 50%; top: 50%; width: calc(52 * var(--p)); height: calc(52 * var(--p)); margin: calc(-26 * var(--p)) 0 0 calc(-26 * var(--p)); border-radius: 50%; background: rgba(30, 30, 36, .16); box-shadow: 0 0 0 calc(1.5 * var(--p)) rgba(255, 255, 255, .8); opacity: 0; }
  .hp .v-axis { left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(452 * var(--p)); display: flex; justify-content: space-between; font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 600; color: var(--ink-2); }
  .hp .v-note { left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(492 * var(--p)); margin: 0; font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); color: var(--ink-2); }

  /* ---------- the panels ---------- */
  .hp-panel { --q: calc(100cqw / 280); display: grid; place-items: center; }
  @media (max-width: 560px) { .hp-panel { --q: calc(100cqw / 370); } }

  /* the buyer's side, from the listing page (Figma "Export x Claude" 43:15422). White cards in panel units (--q).
     --hp-line is the phone's 1.5 units turned into card units, so the card icons draw the same line on screen as the phone icons */
  .hp-buy { --hp-line: 1.264; }
  @media (max-width: 560px) { .hp-buy { --hp-line: 1.160; } }
  /* the proptech row: the phone a little narrower and the cards a little wider than Coaching's 3:2, so the two rows don't mirror each other.
     The cards count in --q over 330 here, so they keep their margins in the wider, shorter tiles */
  .trio--hp { grid-template-columns: 11fr 9fr; }
  .trio--hp .hp-panel { --q: calc(100cqw / 330); }
  @media (max-width: 560px) { .trio--hp { grid-template-columns: 1fr; } .trio--hp .hp-panel { --q: calc(100cqw / 370); } }
  /* soft white glows on the blue ground, the same falloff as the Fundraising ones (choice A of previews/proptech-glow.html).
     The sizes are radii and stay small: on a light ground a wide glow only whitens the tile */
  .trio--hp .hp-reel { background:
      radial-gradient(20cqw 17cqw at 62% 10%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38) 35%, rgba(255, 255, 255, .13) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(24cqw 20cqw at 12% 90%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38) 35%, rgba(255, 255, 255, .13) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(21cqw 18cqw at 104% 78%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .35) 35%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0)),
      var(--ground); }
  .trio--hp .hp-area { background:
      radial-gradient(22cqw 18cqw at 70% 8%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38) 35%, rgba(255, 255, 255, .13) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(24cqw 20cqw at 2% 100%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38) 35%, rgba(255, 255, 255, .13) 70%, rgba(255, 255, 255, 0)),
      var(--ground); }
  .trio--hp .hp-media { background:
      radial-gradient(24cqw 20cqw at 100% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38) 35%, rgba(255, 255, 255, .13) 70%, rgba(255, 255, 255, 0)),
      radial-gradient(21cqw 17cqw at 22% 100%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .35) 35%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0)),
      var(--ground); }
  .hp.hp-buy svg.ic { flex: none; width: calc(var(--sz) * var(--q)); height: calc(var(--sz) * var(--q)); stroke-width: calc(var(--hp-line) * 24 / var(--sz)); }
  .hp-buy .card { width: calc(244 * var(--q)); padding: calc(16 * var(--q)); box-sizing: border-box; background: #fff; border-radius: calc(6 * var(--q)); }
  .hp-buy h4 { margin: 0 0 calc(12 * var(--q)); font-size: calc(17 * var(--q)); line-height: calc(22 * var(--q)); font-weight: 700; color: var(--ink); }
  .hp-buy button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hp-buy button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .hp-buy [role=tabpanel] { position: absolute; inset: 0; }
  .hp-buy [role=tabpanel][hidden] { display: block; visibility: hidden; }

  /* the neighbourhood: a segmented control, three rows under it */
  .hp-area .seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(32 * var(--q)); padding: calc(2 * var(--q)); box-sizing: border-box; border-radius: calc(5 * var(--q)); background: var(--well); }
  .hp-area .thumb { position: absolute; left: calc(2 * var(--q)); top: calc(2 * var(--q)); bottom: calc(2 * var(--q)); width: calc((100% - 4 * var(--q)) / 3); border-radius: calc(4 * var(--q)); background: #fff; transition: transform .4s cubic-bezier(.45,0,.2,1); }
  .hp-area .seg [role=tab] { position: relative; border-radius: calc(4 * var(--q)); font-size: calc(13 * var(--q)); line-height: calc(16 * var(--q)); font-weight: 600; color: var(--ink-2); transition: color .3s; }
  .hp-area .seg [aria-selected="true"] { color: var(--ink); }
  .hp-area .views { position: relative; height: calc(102 * var(--q)); margin-top: calc(10 * var(--q)); }
  .hp-area .row { display: flex; align-items: center; gap: calc(10 * var(--q)); height: calc(34 * var(--q)); font-size: calc(13 * var(--q)); line-height: calc(18 * var(--q)); }
  .hp-area .row + .row { box-shadow: inset 0 calc(1 * var(--q)) 0 var(--well); }
  .hp-area .row .ic { color: var(--acc); }
  .hp-area .row .t { flex: 1; }
  .hp-area .row .d { font-weight: 700; }
  .hp-area .bar .t { flex: none; width: calc(62 * var(--q)); }
  .hp-area .track { flex: 1; height: calc(8 * var(--q)); border-radius: calc(2 * var(--q)); background: var(--well); overflow: hidden; }
  .hp-area .track i { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(var(--v)); }
  .hp-area .bar .d { width: calc(32 * var(--q)); text-align: right; }

  /* the listing: a photo, the floor plan and the map in one frame, the three views under it with an icon over the label */
  .hp-media .card { padding: calc(8 * var(--q)); }
  .hp-media .stage { position: relative; height: calc(140 * var(--q)); border-radius: calc(4 * var(--q)); overflow: hidden; background: var(--map); box-shadow: inset 0 0 0 calc(1 * var(--q)) rgba(0, 0, 0, .04); }
  .hp-media .stage svg, .hp-media .stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* the photo says it is one of many: a small counter in the corner, like every listing app */
  .hp-media .count { position: absolute; right: calc(6 * var(--q)); top: calc(6 * var(--q)); padding: calc(2 * var(--q)) calc(6 * var(--q)); border-radius: calc(4 * var(--q)); background: rgba(0, 0, 0, .55); color: #fff; font-size: calc(12 * var(--q)); line-height: calc(16 * var(--q)); font-weight: 600; }
  .hp-media .tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(6 * var(--q)); }
  .hp-media .tabs [role=tab] { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--q)); padding: calc(6 * var(--q)) 0 calc(4 * var(--q)); border-radius: calc(4 * var(--q)); font-size: calc(12 * var(--q)); line-height: calc(16 * var(--q)); font-weight: 600; color: var(--ink-2); transition: color .3s, background-color .3s; }
  .hp-media .tabs [aria-selected="true"] { color: var(--acc); background: var(--acc-tint); }
  @media (prefers-reduced-motion: reduce) { .hp-area .thumb { transition: none; } }

/* ===== Co-living, two flatmates (20 October): Vale's phone and Luca's, one story. Markup and behaviour in COLIVING2 (main.js) ===== */
  /* stage: today's co-living background, one frame */
  .cl2 { background: radial-gradient(70% 90% at 0% 0%, #FAEBE3 0%, transparent 60%), radial-gradient(60% 90% at 0% 100%, #FCE6E1 0%, transparent 60%), radial-gradient(70% 90% at 100% 0%, #FAEBE3 0%, transparent 60%), radial-gradient(60% 90% at 100% 100%, #FCE6E1 0%, transparent 60%), linear-gradient(135deg, #FAF0EA, #F8E3DA); }

  /* iPhone 13 (2021), midnight */
  /* 27 Oct: big and cut by the bottom edge, no device, only the two screens with round corners and a soft shadow, like Young Platform
     (version B of previews/coliving-big.html). The camera goes down when the story needs the tab bar */
  .cl2 .reel-phone { --phone-w: 40cqw; top: 8cqw; padding: 0; background: transparent; border-radius: calc(var(--phone-w) * .125);
    box-shadow: 0 .4cqw 1cqw rgba(20, 20, 30, .08), 0 3cqw 7cqw rgba(20, 20, 30, .16); }
  .cl2 .reel-phone__btn, .cl2 .reel-phone__notch { display: none; }
  /* without the notch the status bar sits lower, like on a phone with no cut-out: the time is no longer squeezed into the corner */
  .cl2 .reel-phone__status { height: 15cqw; padding: 0 6cqw; }
  .cl2 .reel-phone__btn { background: #2C2E34; }
  .cl2 .reel-phone__notch { width: 41.5cqw; margin-left: -20.75cqw; height: 8.4cqw; border-radius: 0 0 5cqw 5cqw; }
  .cl2 .p-left { left: 8cqw; } .cl2 .p-right { left: 52cqw; }


  /* the app, direction 2: the people first. 1pt = 100/390 of the screen, nothing below 15pt */
  .cl2 .ui { --pt: calc(100cqw / 390); --accent: #EF5B45; --ink2: #1F1A17; --mute: #6F6763; --soft: #F6F3F1;
    position: absolute; inset: 0; background: #fff; color: var(--ink2); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: calc(17 * var(--pt)); line-height: 1.3; letter-spacing: -.01em; }
  .cl2 b { font-weight: 700; }
  .cl2 .m { color: var(--mute); font-size: calc(15 * var(--pt)); }
  .cl2 .num { font-variant-numeric: tabular-nums; }
  .cl2 .later { opacity: 0; }
  .cl2 .stk { display: grid; } .cl2 .stk > * { grid-area: 1 / 1; }
  .cl2 svg.ic { width: calc(var(--sz) * var(--pt)); height: calc(var(--sz) * var(--pt)); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: calc(46.8 / var(--sz)); flex: none; }   /* .5cqw on screen, like the rest of the co-living project */
  .cl2 .av { display: block; width: calc(var(--s, 32) * var(--pt)); height: calc(var(--s, 32) * var(--pt)); border-radius: 50%; overflow: hidden; flex: none; background: #DDD; }
  .cl2 .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cl2 .v { position: absolute; inset: 0; background: #fff; }
  .cl2 .v:not(.v-home):not(.v-repairs) { transform: translateX(100%); }
  .cl2 .v-repairs { opacity: 0; }
  /* tab bar, icons only (labels would be under 15pt) */
  .cl2 .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: calc(83 * var(--pt)); display: grid; grid-template-columns: repeat(3, 1fr); padding-top: calc(10 * var(--pt)); background: rgba(255,255,255,.94); box-shadow: 0 -1px 0 #F3F0EE; }   /* after the tab views in the markup, before the pushed ones: a pushed screen covers it */
  .cl2 .tabs .t { display: grid; justify-items: center; align-content: start; color: #A39A95; }
  .cl2 .tabs .t > * { grid-area: 1 / 1; } .cl2 .tabs .t .c { color: var(--accent); }
  .cl2 .tabs .t-exp .c { opacity: 1; } .cl2 .tabs .t-rep .c, .cl2 .tabs .t-pro .c { opacity: 0; }
  .cl2 .abs { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); top: var(--y); }
  .cl2 .h { font-size: calc(34 * var(--pt)); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; }
  .cl2 .back { position: absolute; left: calc(14 * var(--pt)); top: calc(56 * var(--pt)); color: var(--ink2); }   /* dark, not coral (27 Oct) */

  .cl2 .mates { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--pt)); text-align: center; }
  .cl2 .mate { position: relative; padding: calc(10 * var(--pt)) 0 calc(12 * var(--pt)); }
  .cl2 .mate .mhl { position: absolute; inset: 0; border-radius: calc(16 * var(--pt)); background: #FFF1EC; }
  .cl2 .mate > :not(.mhl) { position: relative; }
  .cl2 .mate .av { --s: 58; margin: 0 auto calc(8 * var(--pt)); }
  .cl2 .mate b { display: block; font-size: calc(15 * var(--pt)); }
  .cl2 .mate .m { display: block; line-height: 1.2; }
  .cl2 .mate .owe { color: #C2412E; font-weight: 600; }
  .cl2 .mate.you .av { box-shadow: 0 0 0 calc(2.5 * var(--pt)) #fff, 0 0 0 calc(4.5 * var(--pt)) var(--ink2); }
  .cl2 .say { font-size: calc(28 * var(--pt)); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
  .cl2 .say em { font-style: normal; color: var(--accent); }
  .cl2 .sub { display: block; margin-top: calc(4 * var(--pt)); }
  .cl2 .btn { display: grid; place-items: center; height: calc(52 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--accent); color: #fff; font-weight: 700; }
  .cl2 .btn { position: relative; } .cl2 .btn > * { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; }
  .cl2 .btn .p-rem { position: absolute; inset: 0; border-radius: inherit; background: var(--soft); color: var(--ink2); }
  .cl2 .bill { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(13 * var(--pt)) 0; border-top: 1px solid #F5F2F0; }
  .cl2 .bill .tx { flex: 1; } .cl2 .bill .tx .m { display: block; } .cl2 .bill .av { --s: 30; }
  .cl2 .bill .go { color: var(--accent); }
  .cl2 .opt { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--pt)); padding: 0 calc(18 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--soft); font-weight: 600; margin-bottom: calc(8 * var(--pt)); }
  .cl2 .opt .on-l { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(18 * var(--pt)); border-radius: inherit; background: var(--ink2); color: #fff; }
  .cl2 .note { min-height: calc(80 * var(--pt)); padding: calc(14 * var(--pt)) calc(16 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--soft); display: grid; align-content: start; }
  .cl2 .note > * { grid-area: 1 / 1; } .cl2 .note .ph { color: #A39A95; }
  .cl2 .caret { opacity: 0; } .cl2 .caret i { display: inline-block; width: calc(2 * var(--pt)); height: calc(20 * var(--pt)); background: var(--accent); vertical-align: -.2em; margin-left: 1px; animation: cl2-blink 1s steps(1) infinite; }
  @keyframes cl2-blink { 50% { opacity: 0; } }
  .cl2 .tell { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
  .cl2 .tell .faces { display: flex; } .cl2 .tell .faces .av { --s: 30; margin-left: calc(-8 * var(--pt)); box-shadow: 0 0 0 calc(2.5 * var(--pt)) #fff; }
  .cl2 .tell .faces .av:first-child { margin-left: 0; }
  .cl2 .visit { padding: calc(20 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--soft); }
  .cl2 .visit .big { display: block; font-size: calc(34 * var(--pt)); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; margin: calc(4 * var(--pt)) 0; }
  .cl2 .spin { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 50%; border: calc(2.5 * var(--pt)) solid currentColor; border-right-color: transparent; animation: cl2-spin .8s linear infinite; }
  @keyframes cl2-spin { to { transform: rotate(360deg); } }


  .cl2 .plus { position: absolute; right: calc(20 * var(--pt)); top: calc(104 * var(--pt)); color: var(--accent); }
  .cl2 .mate .gets, .cl2 .bill .gets { color: #2E7D4F; font-weight: 600; }
  .cl2 .bill .rt { display: grid; justify-items: end; text-align: right; } .cl2 .bill .rt .stk { justify-items: end; }
  .cl2 .bill .due { color: #C2412E; }
  .cl2 .opt .m { font-weight: 400; margin-left: auto; margin-right: 0; }
  .cl2 .past { display: flex; align-items: center; justify-content: space-between; padding: calc(14 * var(--pt)) calc(18 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--soft); }
  .cl2 .past .tx .m { display: block; } .cl2 .past .fixed { color: #2E7D4F; font-weight: 600; }
  .cl2 .call { color: var(--accent); }
  .cl2 .addph { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
  .cl2 .addph .sq { width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); border-radius: calc(14 * var(--pt)); border: calc(1.5 * var(--pt)) dashed #CFC6C1; display: grid; place-items: center; color: var(--mute); }
  .cl2 .pills { display: flex; gap: calc(8 * var(--pt)); margin-top: calc(8 * var(--pt)); }
  .cl2 .pill { position: relative; flex: 1; text-align: center; padding: calc(10 * var(--pt)) 0; border-radius: calc(12 * var(--pt)); background: var(--soft); font-weight: 600; font-size: calc(15 * var(--pt)); }
  .cl2 .pill .on-l { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--ink2); color: #fff; }
  .cl2 .tgl-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--pt)); }
  .cl2 .tgl { position: relative; flex: none; width: calc(51 * var(--pt)); height: calc(31 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #E9E9EA; }
  .cl2 .tgl .tgl-on { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; }
  .cl2 .tgl .knob { position: absolute; left: calc(2 * var(--pt)); top: calc(2 * var(--pt)); width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: 0 calc(3 * var(--pt)) calc(8 * var(--pt)) rgba(0,0,0,.15); }
  .cl2 .visit .who { display: flex; align-items: center; gap: calc(12 * var(--pt)); margin-top: calc(16 * var(--pt)); padding-top: calc(14 * var(--pt)); border-top: 1px solid #EDE8E4; }
  .cl2 .visit .wi { width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink2); }
  .cl2 .acts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--pt)); }
  .cl2 .acts span { display: grid; place-items: center; height: calc(48 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--soft); color: var(--ink2); font-weight: 600; font-size: calc(15 * var(--pt)); }
  .cl2 .steps .step { display: grid; grid-template-columns: calc(24 * var(--pt)) 1fr auto; gap: calc(12 * var(--pt)); align-items: center; height: calc(44 * var(--pt)); }
  .cl2 .steps .step i { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) #CFC6C1; display: grid; place-items: center; }
  .cl2 .steps .step.on i { background: var(--ink2); box-shadow: none; color: #fff; }
  .cl2 .steps .step:not(.on) span:first-of-type { color: var(--mute); }
  /* tab bar with iOS labels: the only text under 15pt, a system element seen for a moment */
  .cl2 .tabs .t small { display: block; margin-top: calc(2 * var(--pt)); font-size: calc(10 * var(--pt)); font-weight: 500; letter-spacing: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; }
  .cl2 .tabs .t .g, .cl2 .tabs .t .c { display: grid; justify-items: center; }
  /* iOS 15 keyboard (system element) */
  .cl2 .kb { position: absolute; left: 0; right: 0; bottom: 0; height: calc(291 * var(--pt)); padding: calc(8 * var(--pt)) calc(3 * var(--pt)) 0; background: #D1D3D9; transform: translateY(100%); z-index: 48;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; font-size: calc(22 * var(--pt)); color: #000; }
  .cl2 .kb .r { display: flex; justify-content: center; gap: calc(6 * var(--pt)); margin-bottom: calc(12 * var(--pt)); }
  .cl2 .kb .k { width: calc(32.5 * var(--pt)); height: calc(42 * var(--pt)); border-radius: calc(5 * var(--pt)); background: #fff; box-shadow: 0 1px 0 #898A8D; display: grid; place-items: center; }
  .cl2 .kb .k.w { width: calc(42 * var(--pt)); background: #ABB0BA; } .cl2 .kb .k.w svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
  .cl2 .kb .k.sp { width: calc(190 * var(--pt)); font-size: calc(16 * var(--pt)); } .cl2 .kb .k.m { width: calc(88 * var(--pt)); background: #ABB0BA; font-size: calc(16 * var(--pt)); }
  .cl2 .kb .gap { width: calc(10 * var(--pt)); }

  /* banners and notifications, iOS 15 */
  .cl2 .ntf { position: absolute; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); top: var(--y); display: grid; grid-template-columns: calc(38 * var(--pt)) 1fr auto; column-gap: calc(10 * var(--pt)); align-items: center;
    padding: calc(14 * var(--pt)); border-radius: calc(22 * var(--pt)); background: rgba(245, 245, 247, .82); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; font-size: calc(15 * var(--pt)); letter-spacing: -.01em; color: #1C1C1E; opacity: 0; transform-origin: 50% 0; z-index: 40; }
  .cl2 .ntf.top { box-shadow: 0 calc(6 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, .14); }
  .cl2 .ntf .app { grid-row: span 2; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); background: var(--accent); color: #fff; display: grid; place-items: center; }
  .cl2 .ntf .t { color: #8A8A8E; align-self: start; } .cl2 .ntf .body { grid-column: 2 / 4; color: #3A3A3C; }

  /* Luca: lock screen on the project's graphite, dimmed while idle */
  .cl2 .lock { position: absolute; inset: 0; background: #26262A; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; text-align: center; }
  .cl2 .lock .lk { position: absolute; left: 50%; top: calc(52 * var(--pt)); transform: translateX(-50%); width: calc(16 * var(--pt)); height: calc(20 * var(--pt)); }
  .cl2 .lock .clock { position: absolute; left: 0; right: 0; top: calc(90 * var(--pt)); font-size: calc(84 * var(--pt)); line-height: 1; font-weight: 300; letter-spacing: -.02em; }
  .cl2 .lock .date { position: absolute; left: 0; right: 0; top: calc(184 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 500; }
  .cl2 .lockon .reel-phone__status { color: #fff; } .cl2 .lockon .reel-phone__home { background: #fff; }
  .cl2 .n1, .cl2 .n2 { --y: calc(262 * var(--pt)); text-align: left; }
  .cl2 .dimmer { position: absolute; inset: 0; background: #000; opacity: .38; z-index: 70; }

/* ===== Co-living, dark in the style of Cal AI (28 Oct, previews/coliving-dark.html). Overrides the .cl2 rules above;
   the old light markup is gone from main.js, its rules stay for the backup in backup/2026-10-28-coliving-prima-del-dark/ ===== */
/* Co-living, dark (28 Oct; blacks lifted a touch the same evening, bg #141416, cards #232326), in the style of Cal AI on Mobbin: near-black screen with a soft light on top, graphite cards with
   big round corners and a hairline edge, big semibold numbers, round back buttons, pill chips (the chosen one white), wide pill CTAs.
   Elena's flows and structure stay (balance and settle up, room → problem → note and photo → send, the 4-step request).
   Inter. Coral #EF5B45 only on the main action of each screen and on what Vale owes. 1pt = 100/390 of the screen, nothing below 15pt.
   Type, one role each: screen title 30/600, section 20/600, nav title 17/600, body 16/500, secondary 15/400 grey, amounts 600 */
.clf .fg { --bg: #141416; --card: #232326; --card2: #333337; --edge: rgba(255, 255, 255, .07); --ink2: #F5F5F7; --mute: #8E8E93;
  --hint: #66666B; --coral: #EF5B45; --sky: radial-gradient(140% 55% at 50% -12%, #2E2E32 0%, #141416 72%);
  background: var(--bg); color: var(--ink2); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: calc(16 * var(--pt)); line-height: 1.35; font-weight: 500; letter-spacing: -.011em; }
.clf .fg .v { background: var(--sky), var(--bg); transform: none; opacity: 1; }
.clf .fg b { font-weight: inherit; }
.clf .fg .num { font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; }
.clf .fg .k-ttl { font-size: calc(30 * var(--pt)); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.clf .fg .k-h { display: block; font-size: calc(20 * var(--pt)); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.clf .fg .k-cap { display: block; font-size: calc(15 * var(--pt)); line-height: 1.35; font-weight: 400; color: var(--mute); letter-spacing: -.005em; }
.clf .fg .k-card { background: var(--card); border-radius: calc(22 * var(--pt)); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--edge); }

/* header: the title and a pill on the right, like Cal AI's logo and streak */
.clf .fg .k-hi { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--pt)); }
.clf .fg .k-flat { display: inline-flex; align-items: center; height: calc(36 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--edge); font-size: calc(15 * var(--pt)); font-weight: 500; }

/* pushed screens: round back button, centred title (or a progress line) */
.clf .fg .k-nav { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--pt)); }
.clf .fg .k-cb { display: grid; place-items: center; flex: none; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; background: var(--card2); color: var(--ink2); }
.clf .fg .k-cb.k-ghost { visibility: hidden; }
.clf .fg .k-nt { font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.015em; }
.clf .fg .k-prog { flex: 1; height: calc(4 * var(--pt)); margin: 0 calc(16 * var(--pt)); border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.clf .fg .k-prog i { display: block; height: 100%; border-radius: inherit; background: var(--ink2); transform-origin: 0 50%; }

/* the flatmates, like the days on top of Cal AI: you on a card, Luca's ring coral while Vale owes him */
.clf .fg .k-fms { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--pt)); text-align: center; }
.clf .fg .k-fm { display: grid; justify-items: center; row-gap: calc(8 * var(--pt)); padding: calc(10 * var(--pt)) 0 calc(12 * var(--pt)); border-radius: calc(18 * var(--pt)); }
.clf .fg .k-fm.you { background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--edge); }
.clf .fg .k-fn { font-size: calc(15 * var(--pt)); font-weight: 500; color: var(--mute); }
.clf .fg .k-fm.you .k-fn { color: var(--ink2); }
.clf .fg .k-fr { position: relative; padding: calc(5 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--pt)) rgba(255, 255, 255, .14); }
.clf .fg .k-fr .av { --s: 44; background: var(--card2); }
.clf .fg .k-due { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--coral); }

/* balance: the big number and the main action */
.clf .fg .k-bal { display: flex; align-items: center; justify-content: space-between; padding: calc(22 * var(--pt)) calc(20 * var(--pt)) calc(22 * var(--pt)) calc(22 * var(--pt)); }
.clf .fg .k-big { display: block; font-size: calc(40 * var(--pt)); line-height: 1.1; font-weight: 600; letter-spacing: -.04em; margin-bottom: calc(4 * var(--pt)); }
.clf .fg .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); height: calc(44 * var(--pt)); padding: 0 calc(20 * var(--pt)); border-radius: 999px; background: var(--coral); color: #fff; font-size: calc(16 * var(--pt)); font-weight: 600; letter-spacing: -.01em; }
.clf .fg .k-wide { position: relative; display: grid; align-items: stretch; overflow: hidden; width: 100%; height: calc(56 * var(--pt)); padding: 0; box-sizing: border-box; }
.clf .fg .k-wide > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); }

/* bills coming up: two small cards side by side, like Cal AI's macros */
.clf .fg .rail { display: flex; gap: calc(10 * var(--pt)); width: max-content; }
.clf .fg .rail .k-card { display: grid; justify-items: start; width: calc(170 * var(--pt)); box-sizing: border-box; padding: calc(18 * var(--pt)); border-radius: calc(22 * var(--pt)); }
.clf .fg .k-amt { font-size: calc(24 * var(--pt)); line-height: 1.15; letter-spacing: -.03em; margin-bottom: calc(2 * var(--pt)); }
.clf .fg .k-tag { display: inline-flex; align-items: center; height: calc(30 * var(--pt)); margin-top: calc(14 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 999px; background: var(--card2); color: var(--ink2); font-size: calc(15 * var(--pt)); font-weight: 500; white-space: nowrap; }

/* settle up: the amount big in the middle, the two of them on a card, the euro running along the line */
.clf .fg .k-head { display: grid; justify-items: center; text-align: center; row-gap: calc(2 * var(--pt)); }
.clf .fg .k-hero { font-size: calc(56 * var(--pt)); line-height: 1.05; letter-spacing: -.045em; }
.clf .fg .k-pair { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: calc(14 * var(--pt)); padding: calc(20 * var(--pt)) calc(24 * var(--pt)); }
.clf .fg .k-who { display: grid; justify-items: center; row-gap: calc(2 * var(--pt)); min-width: calc(64 * var(--pt)); }
.clf .fg .k-who .av { --s: 48; position: relative; z-index: 2; margin-bottom: calc(8 * var(--pt)); background: var(--card2); }
.clf .fg .k-who .num { font-size: calc(20 * var(--pt)); letter-spacing: -.02em; }
.clf .fg .arrow { position: relative; height: calc(26 * var(--pt)); margin-top: calc(-55 * var(--pt)); }
.clf .fg .arrow .dash { position: absolute; left: 0; right: 0; top: 50%; height: 0; margin-top: calc(-.75 * var(--pt)); border-top: calc(1.5 * var(--pt)) dashed rgba(255, 255, 255, .2); }
.clf .fg .arrow .trail { position: absolute; left: 0; right: 0; top: 50%; height: calc(1.5 * var(--pt)); margin-top: calc(-.75 * var(--pt)); border-radius: 1px; background: var(--ink2); transform-origin: 0 50%; }
/* the euro: under Vale's photo at rest (placed by the script), it slides along the line and under Luca's photo. No fades */
.clf .fg .coin { position: absolute; z-index: 1; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); margin: calc(-13 * var(--pt)) 0 0 calc(-13 * var(--pt)); border-radius: 50%; background: var(--ink2); color: var(--bg); font-size: calc(15 * var(--pt)); font-weight: 600; display: grid; place-items: center; }
.clf .fg .k-hint { margin: 0; text-wrap: balance; padding: 0 calc(16 * var(--pt)); text-align: center; color: var(--mute); font-size: calc(15 * var(--pt)); font-weight: 400; line-height: 1.4; letter-spacing: -.005em; }
.clf .fg .spin { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: clf-spin .8s linear infinite; }
@keyframes clf-spin { to { transform: rotate(360deg); } }

/* rooms: photo cards, the name inside */
.clf .fg .k-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--pt)); }
.clf .fg .k-tile { display: grid; padding: calc(6 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--edge); }
.clf .fg .k-ph { display: block; height: calc(104 * var(--pt)); border-radius: calc(16 * var(--pt)); overflow: hidden; }
.clf .fg .k-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clf .fg .k-tn { padding: calc(10 * var(--pt)) calc(10 * var(--pt)) calc(6 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 500; }

/* the report: a big question like Cal AI's onboarding, pill chips (the chosen one white), the note in a card, the photo, send */
.clf .fg .k-q { display: grid; row-gap: calc(6 * var(--pt)); }
.clf .fg .k-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); }
.clf .fg .k-chip { position: relative; display: inline-flex; align-items: center; height: calc(44 * var(--pt)); padding: 0 calc(18 * var(--pt)); border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--edge); font-size: calc(15 * var(--pt)); font-weight: 500; }
.clf .fg .k-chip .on { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--ink2); color: var(--bg); font-weight: 600; }
.clf .fg .k-note { display: grid; row-gap: calc(4 * var(--pt)); padding: calc(16 * var(--pt)) calc(18 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 400; line-height: 1.4; }
.clf .fg .k-photo { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.clf .fg .k-pill { display: inline-flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(44 * var(--pt)); padding: 0 calc(18 * var(--pt)); border-radius: 999px; background: var(--card2); font-size: calc(15 * var(--pt)); font-weight: 600; }
/* the photo of the leak: a dripping bathroom tap (Unsplash, Sasikan Ulevik, 8jQC5RHWuSE), big enough to read on a phone */
.clf .fg .k-shot { position: relative; display: block; flex: none; width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border-radius: calc(14 * var(--pt)); overflow: hidden; }
.clf .fg .k-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clf .fg .k-shot svg { position: absolute; right: calc(3 * var(--pt)); top: calc(3 * var(--pt)); padding: calc(2 * var(--pt)); border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; }

/* the request, a classic stepper: a check in a circle for each step done, an empty ring for the one still to come,
   a thin line from one to the next. White, not coral: it is a status, not an action */
.clf .fg .rq { padding: calc(22 * var(--pt)); }
.clf .fg .rq-s { position: relative; display: grid; grid-template-columns: calc(24 * var(--pt)) 1fr; column-gap: calc(14 * var(--pt)); padding-bottom: calc(22 * var(--pt)); }
.clf .fg .rq-s:last-child { padding-bottom: 0; }
.clf .fg .rq-s:not(:last-child)::after { content: ""; position: absolute; left: calc(11.25 * var(--pt)); top: calc(28 * var(--pt)); bottom: calc(4 * var(--pt)); width: calc(1.5 * var(--pt)); border-radius: 1px; background: var(--ink2); }
.clf .fg .rq .st3::after { background: rgba(255, 255, 255, .14); }
.clf .fg .dot { position: relative; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(255, 255, 255, .22); }
.clf .fg .dot b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ink2); color: var(--bg); }
.clf .fg .st4 .dot b { display: none; }
.clf .fg .sc { display: grid; row-gap: calc(2 * var(--pt)); padding-top: calc(1 * var(--pt)); }   /* the time under the title, close to what it describes */
.clf .fg .sc b { font-size: calc(16 * var(--pt)); font-weight: 600; line-height: 1.4; }
.clf .fg .sc .tm { color: var(--mute); font-size: calc(15 * var(--pt)); font-weight: 400; line-height: 1.35; }
.clf .fg .sc .txt { margin-top: calc(6 * var(--pt)); color: var(--ink2); font-size: calc(15 * var(--pt)); font-weight: 400; line-height: 1.4; }
.clf .fg .off .sc b { color: var(--hint); font-weight: 500; }

/* the phones: white status bar, a light touch ring, no shadow. The background is the light pink of Elena's Figma (#FBEDEC) */
.cl2.clf .reel-phone { box-shadow: none; }
.cl2.clf .reel-phone__status { color: #fff; }
.cl2.clf .reel-tap { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .4); }
.cl2.clf { background: #FBEDEC; }

/* once settled there is nothing left to do: the button goes quiet, graphite instead of coral */
.clf .fg .k-wide .g-done { grid-area: auto; position: absolute; inset: 0; border-radius: inherit; background: var(--card2); color: var(--ink2); }
.clf .fg .k-stk { display: grid; justify-items: center; overflow: hidden; } .clf .fg .k-stk > * { grid-area: 1 / 1; }
/* the coral is its own layer, so it rolls away with the label and leaves no coral edge under the graphite */
.clf .fg .go { background: transparent; }
.clf .fg .k-wide .g-coral { grid-area: auto; position: absolute; inset: 0; border-radius: inherit; background: var(--coral); }

/* Co-living in two boxes (28 Oct, previews/coliving-split): one phone each, side by side on desktop, one under the other below 560px,
   so on a phone each screen gets the full width (about 260px instead of 137). Same story, same pink #FBEDEC, the phone cut by the bottom edge */
.cl2.clf.kc-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); background: none; }
.kc-split .kc-cell { position: relative; overflow: hidden; aspect-ratio: 20 / 29; border-radius: 14px; container-type: inline-size; background: #FBEDEC; }
.kc-split .reel-phone { --phone-w: 88cqw; top: 11cqw; left: 6cqw; }   /* as wide as the box allows: 20px of pink each side, a little more air on top */
/* on a phone one box only: the two cells sit in the same place, the second waits off to the right and slides in when the story needs it */
@media (max-width: 560px) {
  .cl2.clf.kc-split { grid-template-columns: 1fr; overflow: hidden; border-radius: 14px; }
  .kc-split .kc-cell { grid-area: 1 / 1; }
  .kc-split .kc-cell + .kc-cell { transform: translateX(calc(100% + 16px)); }
  /* same box and phone as the Proptech one above it: 343 × 457 and a 274px phone, 34px from the top and the sides */
  .kc-split .kc-cell { aspect-ratio: 3 / 4; }
  .kc-split .reel-phone { --phone-w: 80cqw; top: 10cqw; left: 10cqw; }
}
/* the interface drawn on a 360pt screen instead of 390: everything about 8% bigger, so it reads on a phone. The status bar keeps the iOS sizes */
.kc-split .ui { --pt: calc(100cqw / 360); }
.kc-split.clf .fg .rail .k-card { width: calc(155 * var(--pt)); }
/* the photo while it uploads: the slot in graphite with a spinner, above the photo and its close button */
.kc-split .k-shot .k-up { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit; background: var(--card2); opacity: 0; }
.kc-split .k-shot .k-up .spin { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }

  /* ---------- Coaching phone (28 Oct): workout records, goals, the coach's questionnaire. Was the goals + badges story,
     copy in backup/2026-10-28-coaching-prima-dei-record/. Studies in previews/coaching-goals.html, coaching-workout.html, coaching-best.html ---------- */
  /* Coaching, the workout records story on Elena's screens (Gamification › Personal best, Obiettivi › In corso, Attività, Questionari).
     Look A, after Cash App for the structure (big titles, round buttons, black pill), with the same finish as the activity and
     Oura cards beside the phone: grey app background, white cards with a hairline and a soft shadow, no outlines, a thin grey
     divider inside the card, Manrope, bold names, grey meta with the day darker than the time, grey icon tiles. Lime is the only accent.
     Type scale in the phone: 34 / 17 / 14. Everything is .g-* under .cgw, so the old Coaching rules never reach it */
  .cgw .ui * { box-sizing: border-box; }
  .cgw .ui { --sec: #64676F; --empty: #7F828A; font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--g900); }
  /* the app background: the hue of the icon tiles in the activity cards (#ECEDF1), two steps lighter */
  .cgw .reel-phone__screen, .cgw .g-scr { background: #F6F7F9; }
  .cgw .g-scr { position: absolute; inset: 0; will-change: transform; }
  /* the questionnaire clips its own steps: the answered questions sit to its left and must never show over the goals */
  .cgw .g-q { z-index: 3; overflow: hidden; transform: translateX(100%); box-shadow: calc(-4 * var(--p)) 0 calc(16 * var(--p)) rgba(0, 0, 0, .05); }
  .cgw .g-wk { z-index: 5; }
  /* the white card, as .cp .card and .cp-ac */
  .cgw .g-gc, .cgw .g-ex, .cgw .g-ib, .cgw .g-op, .cgw .g-ta { background: #fff; box-shadow: 0 0 0 calc(.5 * var(--p)) rgba(0, 0, 0, .035), 0 calc(2 * var(--p)) calc(8 * var(--p)) rgba(0, 0, 0, .03); }

  /* top bar and page title */
  .cgw .g-ib { position: absolute; top: calc(56 * var(--p)); left: calc(16 * var(--p)); width: calc(40 * var(--p)); height: calc(40 * var(--p)); padding: calc(9 * var(--p)); border-radius: 50%; color: var(--g900); }
  .cgw .g-title { position: absolute; left: calc(20 * var(--p)); top: calc(104 * var(--p)); font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }

  /* the goals */
  .cgw .g-tabs { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(160 * var(--p)); height: calc(36 * var(--p)); padding: calc(3 * var(--p)); border-radius: calc(12 * var(--p)); background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); }
  .cgw .g-tabs span { display: grid; place-items: center; border-radius: calc(9 * var(--p)); font-size: calc(14 * var(--p)); font-weight: 600; color: var(--g700); }
  .cgw .g-tabs .on { background: var(--g900); color: #fff; }
  .cgw .g-gc, .cgw .g-hero, .cgw .g-ex { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)) calc(14 * var(--p)); border-radius: calc(16 * var(--p)); }
  .cgw .g-sq { top: calc(212 * var(--p)); }
  .cgw .g-st2 { top: calc(340 * var(--p)); }
  .cgw .g-ws2 { top: calc(468 * var(--p)); }
  .cgw .g-gh { display: flex; align-items: center; gap: calc(14 * var(--p)); }
  .cgw .g-ai { flex: none; width: calc(42 * var(--p)); height: calc(42 * var(--p)); padding: calc(11 * var(--p)); border-radius: calc(12 * var(--p)); background: var(--g100); color: #3B3B3B; }
  .cgw .g-at { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--p)); }
  .cgw .g-at b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; letter-spacing: -.01em; }
  .cgw .g-at span { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--sec); white-space: nowrap; }
  .cgw .g-at em { margin-right: .45em; font-style: normal; font-weight: 600; color: var(--g700); }
  .cgw .g-gp { font-size: calc(17 * var(--p)); font-weight: 800; letter-spacing: -.01em; }
  /* the divider and the row of figures under it, as in the activity cards */
  .cgw .g-gb, .cgw .g-st3 { display: flex; align-items: center; margin-top: calc(14 * var(--p)); padding-top: calc(12 * var(--p)); box-shadow: inset 0 calc(.6 * var(--p)) 0 var(--g100); font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 600; color: var(--g700); white-space: nowrap; }
  .cgw .g-gb { gap: calc(12 * var(--p)); }
  .cgw .g-gb .g-bar { flex: 1; margin: 0; }
  .cgw .g-bar { position: relative; height: calc(8 * var(--p)); border-radius: calc(4 * var(--p)); background: var(--g100); overflow: hidden; }
  .cgw .g-bar i { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; }
  .cgw .g-st3 { gap: calc(16 * var(--p)); }
  .cgw .g-st3 span { display: flex; align-items: center; gap: calc(5 * var(--p)); }
  .cgw .g-st3 svg { width: calc(15 * var(--p)); height: calc(15 * var(--p)); color: var(--sec); }

  /* the workout summary */
  .cgw .g-ok { position: absolute; left: calc(152 * var(--p)); top: calc(72 * var(--p)); width: calc(56 * var(--p)); height: calc(56 * var(--p)); padding: calc(14 * var(--p)); border-radius: 50%; background: var(--lime); color: var(--lime-on); }
  .cgw .g-wt { position: absolute; left: 0; right: 0; top: calc(144 * var(--p)); text-align: center; font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }
  .cgw .g-ws { position: absolute; left: 0; right: 0; top: calc(188 * var(--p)); text-align: center; font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 500; color: var(--sec); }
  .cgw .g-ws b { color: var(--g900); font-weight: 700; }
  /* the record that moves the goal in a lime card, the session in a white one, both built like the activity cards; air around them */
  .cgw .g-hero { top: calc(236 * var(--p)); background: var(--lime); color: var(--lime-on); }
  .cgw .g-hero .g-ai { background: rgba(255, 255, 255, .55); color: var(--g900); }
  .cgw .g-hero .g-at span, .cgw .g-hero .g-at em { color: var(--g900); }
  .cgw .g-hero .g-at span { opacity: .78; }
  .cgw .g-hero .g-gp { font-size: calc(17 * var(--p)); }
  .cgw .g-hero .g-st3 { justify-content: space-between; box-shadow: inset 0 calc(.6 * var(--p)) 0 rgba(22, 23, 26, .14); color: var(--g900); font-weight: 500; }
  .cgw .g-hero .g-st3 b { margin-right: .35em; font-weight: 800; }
  .cgw .g-hero .g-st3 .end { font-weight: 600; }
  .cgw .g-ex { top: calc(368 * var(--p)); padding-bottom: calc(4 * var(--p)); }
  .cgw .g-ex > b { display: block; font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; letter-spacing: -.01em; }
  .cgw .g-rows { display: block; margin-top: calc(10 * var(--p)); }
  /* one record per row, split by the activity cards' thin divider: the exercise darker, what it is lighter, then how much it went up and the new value */
  .cgw .g-rw { display: flex; align-items: center; gap: calc(10 * var(--p)); height: calc(50 * var(--p)); box-shadow: inset 0 calc(.6 * var(--p)) 0 var(--g100); font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); }
  .cgw .g-rn { flex: 1; min-width: 0; display: grid; font-weight: 500; color: var(--sec); white-space: nowrap; }
  .cgw .g-rn em { font-style: normal; font-weight: 600; color: var(--g700); }
  .cgw .g-up { font-style: normal; font-weight: 700; color: var(--lime-ink); }
  .cgw .g-rw > b { min-width: calc(60 * var(--p)); text-align: right; font-size: calc(17 * var(--p)); font-weight: 800; letter-spacing: -.01em; color: var(--g900); }

  /* buttons */
  .cgw .g-btn { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); height: calc(52 * var(--p)); border-radius: calc(12 * var(--p)); background: var(--g900); color: #fff; display: grid; place-items: center; font-size: calc(17 * var(--p)); font-weight: 700; overflow: hidden; }
  .cgw .g-close { top: calc(594 * var(--p)); }
  .cgw .g-btn .lb { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(8 * var(--p)); }
  .cgw .g-btn .ok { opacity: 0; }
  .cgw .g-btn .ok svg { width: calc(20 * var(--p)); height: calc(20 * var(--p)); color: var(--lime); }

  /* the questionnaire: one question per step, a three-part progress bar, big question, big answers (Cash App's one-thing-per-screen) */
  /* header after the reference Elena picked: round back button, one continuous bar in lime, the count after it */
  .cgw .g-prog { position: absolute; left: calc(68 * var(--p)); right: calc(58 * var(--p)); top: calc(73 * var(--p)); height: calc(6 * var(--p)); border-radius: calc(3 * var(--p)); background: #fff; overflow: hidden; }
  .cgw .g-prog i { position: absolute; inset: 0; border-radius: inherit; background: var(--lime); transform-origin: 0 50%; transform: scaleX(.3333); }
  .cgw .g-qn { position: absolute; right: calc(20 * var(--p)); top: calc(67 * var(--p)); display: grid; justify-items: end; font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 600; color: var(--sec); }
  .cgw .g-qn span { grid-area: 1 / 1; }
  .cgw .g-qn .n2, .cgw .g-qn .n3 { opacity: 0; }
  .cgw .g-qs { position: absolute; left: 0; top: calc(112 * var(--p)); width: 100%; height: calc(400 * var(--p)); will-change: transform; }
  .cgw .g-qp { position: absolute; top: 0; width: 100%; padding: 0 calc(16 * var(--p)); }
  .cgw .g-qp.p2 { left: 100%; }
  .cgw .g-qp.p3 { left: 200%; }
  .cgw .g-qt { display: block; padding: 0 calc(4 * var(--p)); font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }
  .cgw .g-ta { position: relative; display: block; height: calc(120 * var(--p)); margin-top: calc(24 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)); border-radius: calc(16 * var(--p)); font-size: calc(17 * var(--p)); line-height: calc(24 * var(--p)); font-weight: 600; color: var(--g900); }
  .cgw .g-ph2 { position: absolute; left: calc(18 * var(--p)); top: calc(16 * var(--p)); color: var(--sec); font-weight: 500; }
  .cgw .g-ta:has(.g-tx:not(:empty)) .g-ph2 { visibility: hidden; }
  .cgw .g-caret { position: absolute; left: calc(18 * var(--p)); top: calc(18 * var(--p)); width: calc(2 * var(--p)); height: calc(20 * var(--p)); opacity: 0; }
  .cgw .g-ta:has(.g-tx:not(:empty)) .g-caret { position: relative; left: auto; top: auto; display: inline-block; vertical-align: calc(-4 * var(--p)); }
  .cgw .g-caret::after { content: ""; position: absolute; inset: 0; background: var(--g900); animation: g-blink 1s steps(1) infinite; }
  @keyframes g-blink { 50% { opacity: 0; } }
  .cgw .g-ops { display: grid; gap: calc(10 * var(--p)); margin-top: calc(24 * var(--p)); }
  .cgw .g-op { position: relative; height: calc(60 * var(--p)); padding: 0 calc(18 * var(--p)); border-radius: calc(16 * var(--p)); display: flex; align-items: center; justify-content: space-between; font-size: calc(17 * var(--p)); font-weight: 700; letter-spacing: -.01em; }
  .cgw .g-op > span:not(.g-rd) { position: relative; }
  .cgw .g-osel { position: absolute; inset: 0; border-radius: inherit; background: var(--lime); opacity: 0; }
  .cgw .g-rd { position: relative; width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.6 * var(--p)) var(--empty); }
  .cgw .g-rd i { position: absolute; inset: 0; padding: calc(4 * var(--p)); border-radius: 50%; background: var(--g900); color: #fff; opacity: 0; }
  .cgw .g-stars { display: flex; justify-content: space-between; margin-top: calc(32 * var(--p)); padding: 0 calc(8 * var(--p)); }
  .cgw .g-st { position: relative; width: calc(52 * var(--p)); height: calc(52 * var(--p)); color: var(--empty); }
  .cgw .g-st i { position: absolute; inset: 0; color: var(--g900); opacity: 0; }
  .cgw .g-sl { display: block; margin-top: calc(14 * var(--p)); text-align: center; font-size: calc(17 * var(--p)); font-weight: 700; color: var(--g700); opacity: 0; }
  .cgw .g-next, .cgw .g-send { top: calc(590 * var(--p)); }
  .cgw .g-send { opacity: 0; }

  /* the keyboard, the coach's notification (system elements) */
  .cgw .g-kb { position: absolute; left: 0; right: 0; bottom: 0; height: calc(270 * var(--p)); z-index: 4; padding: calc(8 * var(--p)) calc(3 * var(--p)) 0; display: grid; align-content: start; gap: calc(11 * var(--p)); background: #D1D3D9; transform: translateY(100%); will-change: transform; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; }
  .cgw .g-kb .kb__row { display: flex; justify-content: center; gap: calc(6 * var(--p)); }
  .cgw .g-kb .k { width: calc(30 * var(--p)); height: calc(42 * var(--p)); border-radius: calc(5 * var(--p)); background: #fff; box-shadow: 0 calc(1 * var(--p)) 0 rgba(0, 0, 0, .3); display: grid; place-items: center; font-size: calc(22 * var(--p)); color: #000; }
  .cgw .g-kb .k--w { width: calc(42 * var(--p)); background: #ADB1BA; }
  .cgw .g-kb .k--w2 { width: calc(84 * var(--p)); background: #ADB1BA; font-size: calc(15 * var(--p)); }
  .cgw .g-kb .k--space { width: calc(174 * var(--p)); font-size: calc(15 * var(--p)); }
  .cgw .g-bn { position: absolute; left: calc(10 * var(--p)); right: calc(10 * var(--p)); top: calc(52 * var(--p)); height: calc(76 * var(--p)); z-index: 10; padding: 0 calc(14 * var(--p)); display: flex; align-items: center; gap: calc(12 * var(--p)); border-radius: calc(22 * var(--p)); background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 calc(.5 * var(--p)) rgba(0, 0, 0, .04), 0 calc(4 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, .08); transform: translateY(-200%); will-change: transform; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; color: #111; }
  .cgw .g-app { flex: none; width: calc(38 * var(--p)); height: calc(38 * var(--p)); padding: calc(8 * var(--p)); border-radius: calc(9 * var(--p)); background: var(--lime); color: var(--lime-on); }
  .cgw .g-bt { flex: 1; min-width: 0; display: grid; font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); }
  .cgw .g-bt b { font-weight: 600; }
  .cgw .g-bn small { position: absolute; right: calc(14 * var(--p)); top: calc(14 * var(--p)); font-size: calc(13 * var(--p)); color: #6E6E73; }

  /* the white phone of the Proptech case (28 Oct, previews/coaching-frame.html): white bezel, aluminium edge, Dynamic Island,
     light buttons, a soft neutral shadow for the periwinkle. Centred, cut by the bottom edge */
  .cgw .reel-phone { left: 17cqw; background: #F9F9FA; padding: calc(var(--phone-w) * .03); border-radius: calc(var(--phone-w) * .175);
    box-shadow: inset 0 0 0 calc(var(--phone-w) * .005) #FFFFFF, inset 0 0 0 calc(var(--phone-w) * .009) #DCDCE1, inset 0 0 0 calc(var(--phone-w) * .011) #C4C4CA, 0 1.6cqw 4cqw rgba(40, 40, 70, .14); }
  .cgw .reel-phone__screen { border-radius: calc(var(--phone-w) * .155); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
  .cgw .reel-phone__btn { background: #D4D4DA; }

  /* workout summary (28 Oct, A of previews/coaching-best.html + D of coaching-workout.html): the record big in the lime card,
     the label above it, exercise and increase under the divider; the other records under a quiet title, two roomy rows */
  .cgw .g-ha { top: calc(228 * var(--p)); }
  .cgw .g-hl { display: flex; align-items: center; gap: calc(6 * var(--p)); font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 700; white-space: nowrap; }
  .cgw .g-hl svg { width: calc(16 * var(--p)); height: calc(16 * var(--p)); flex: none; }
  .cgw .g-hn { display: block; margin-top: calc(4 * var(--p)); font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }
  .cgw .g-ha .g-st3 em { margin-right: .35em; font-style: normal; font-weight: 800; }
  .cgw .g-sec { position: absolute; left: calc(20 * var(--p)); top: calc(384 * var(--p)); font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 600; color: var(--sec); }
  .cgw .g-ex { top: calc(412 * var(--p)); padding: calc(4 * var(--p)) calc(18 * var(--p)); }
  .cgw .g-ex .g-rows { margin-top: 0; }
  .cgw .g-ex .g-rw { height: calc(64 * var(--p)); }
  .cgw .g-ex .g-rw:first-child { box-shadow: none; }
  .cgw .g-ex .g-rn { gap: calc(2 * var(--p)); }
  /* inside the white phone a little less of the screen shows: the bottom buttons move up to keep 30 units of air above the cut */
  .cgw .g-close { top: calc(584 * var(--p)); }
  .cgw .g-next, .cgw .g-send { top: calc(580 * var(--p)); }

/* Co-living, one phone and one card (31 Oct, previews/coliving-one). Left: the repairs phone in motion, same box and phone as the split of 28 Oct.
   Right: settling up with Luca, out of the phone, on the same pink. On a phone the card goes under the phone box */
.kc-one .reel-phone { left: 6cqw; }
.kc-one .kc-paycell { display: grid; place-items: center; }
.kc-one .kc-pay { position: relative; inset: auto; width: 88cqw; box-sizing: border-box; display: grid; row-gap: calc(18 * var(--pt));
  padding: calc(28 * var(--pt)) calc(20 * var(--pt)) calc(22 * var(--pt)); border-radius: calc(30 * var(--pt));
  background: var(--sky), var(--bg); box-shadow: 0 1px 2px rgba(60, 20, 15, .06), 0 12px 32px rgba(60, 20, 15, .10); }
.kc-one .kc-pay .k-head { row-gap: calc(4 * var(--pt)); }
.kc-one .kc-pay .k-pair { padding: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(18 * var(--pt)); }
.kc-one .kc-pay .k-hint { padding: 0; }
.kc-one .kc-pay .k-btn { font: inherit; font-size: calc(16 * var(--pt)); font-weight: 600; color: #fff; border: 0; cursor: pointer; }
.kc-one .kc-pay .k-btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
/* Luca's ring: coral while Vale owes him, it goes as the euro reaches him */
.kc-one .kc-pay .k-ring { position: relative; display: block; margin-bottom: calc(8 * var(--pt)); }
.kc-one .kc-pay .k-ring .av { margin-bottom: 0; }
.kc-one .kc-pay .k-ring .k-due { inset: calc(-4 * var(--pt)); z-index: 3; }
/* the euro is the handle: a little bigger than in the phone, it says it can be grabbed */
.kc-one .kc-pay .coin { z-index: 4; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); margin: calc(-16 * var(--pt)) 0 0 calc(-16 * var(--pt)); font-size: calc(17 * var(--pt));
  cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.kc-one .kc-pay.grab .coin { cursor: grabbing; }
.kc-one .kc-pay.done .coin { cursor: default; }
.kc-one .kc-pay .k-pair { cursor: pointer; }


@media (max-width: 560px) {
  .cl2.clf.kc-split.kc-one { overflow: visible; border-radius: 0; row-gap: var(--space-3); }
  .kc-one .kc-cell { grid-area: auto; }
  .kc-one .kc-cell + .kc-cell { transform: none; }
  .kc-one .reel-phone { left: 10cqw; }
  .kc-one .kc-paycell { aspect-ratio: auto; padding: var(--space-4) 0; }   /* as tall as the card plus 24px of pink: a square cut it */
  .kc-one .kc-paycell .ui { --pt: calc(100cqw / 450); }   /* the phone's point: its screen is 80% of the same width, drawn on 360pt */
}

/* as tall as the Proptech row above (31 Oct): the same columns, 11fr/9fr. The phone box is the Proptech phone box (3:4, phone 80cqw
   at 10cqw from the top and the sides), the card box stretches to the same height, so neither looks stretched */
@media (min-width: 561px) {
  .cl2.clf.kc-split.kc-one { grid-template-columns: 11fr 9fr; }
  .kc-one .kc-cell { aspect-ratio: 3 / 4; }
  .kc-one .kc-paycell { aspect-ratio: auto; }
  .kc-one .reel-phone { --phone-w: 80cqw; top: 10cqw; left: 10cqw; }
  .kc-one .kc-paycell .ui { --pt: calc(100cqw / 368); }   /* the phone's point (its screen is 80cqw of the wider 11fr box, on 360pt): same text sizes in both boxes */
  .kc-one .kc-pay { width: 90cqw; padding-left: calc(16 * var(--pt)); padding-right: calc(16 * var(--pt)); }
  /* a longer line for the euro: the photos closer to the edges of the card */
  .kc-one .kc-pay .k-pair { padding-left: calc(12 * var(--pt)); padding-right: calc(12 * var(--pt)); column-gap: calc(8 * var(--pt)); }
  .kc-one .kc-pay .k-who { min-width: calc(52 * var(--pt)); }
}


  /* ---------- Coaching de-slop (31 Oct, previews/coaching-deslop.html, Elena's picks). One edge of 20 for everything in the phone,
     16 inside every card, one shadow for every white card, same width for the two cards beside the phone, details from
     previews/coaching-details.html, coaching-details-2.html, coaching-workout-air.html and coaching-workout-order.html.
     Copy of before in backup/2026-10-31-coaching-prima-del-deslop/ ---------- */
/* the outer edge: 20 left and right */
.cgw .g-ib { left: calc(20 * var(--p)); }
.cgw .g-title, .cgw .g-sec { left: calc(20 * var(--p)); }
.cgw .g-tabs,
.cgw .g-gc, .cgw .g-hero, .cgw .g-ex,
.cgw .g-btn { left: calc(20 * var(--p)); right: calc(20 * var(--p)); }
.cgw .g-qp { padding: 0 calc(20 * var(--p)); }
.cgw .g-qt { padding: 0; }
.cgw .g-qn { right: calc(20 * var(--p)); }
/* the progress bar between the back button (20 + 40) and the count, 12 of air on each side */
.cgw .g-prog { left: calc(72 * var(--p)); right: calc(56 * var(--p)); }
.cgw .g-stars { padding: 0; }

/* the inner edge: 16 on every side of every card */
.cgw .g-gc, .cgw .g-hero { padding: calc(16 * var(--p)); }
.cgw .g-ex { padding: 0 calc(16 * var(--p)); }
.cgw .g-ta { padding: calc(16 * var(--p)); }
.cgw .g-ph2 { left: calc(16 * var(--p)); top: calc(16 * var(--p)); }
.cgw .g-caret { left: calc(16 * var(--p)); top: calc(18 * var(--p)); }
.cgw .g-op { padding: 0 calc(16 * var(--p)); }

/* the two cards beside the phone: same width, same corners, same padding and the same type, so their edges line up
   one above the other. Before: activity card 78cqw, health card 86cqw, each with its own sizes */
.cp-ac { --q: calc(82cqw / 260); width: 82cqw; padding: calc(18 * var(--q)); }
.cp-ac small { color: var(--g600); }
.cp-one .card { --q: calc(82cqw / 260); width: 82cqw; padding: calc(18 * var(--q)); border-radius: calc(18 * var(--q)); }
/* the header reads as one band: the logo as tall as the two lines of text (36 vs 40), the switch close to it in height,
   all three on the same centre line. With the logo at 42 the text looked low beside it */
.cp-one .top { gap: calc(12 * var(--q)); }
.cp-one .app { width: calc(36 * var(--q)); border-radius: calc(10 * var(--q)); }
.cp-one .nm { gap: calc(2 * var(--q)); }
.cp-one .nm b { font-size: calc(17 * var(--q)); line-height: calc(22 * var(--q)); }
.cp-one .nm small { font-size: calc(13 * var(--q)); line-height: calc(18 * var(--q)); color: var(--g600); }
/* the switch, on, in lime: 48 × 29, a touch under the iOS 51 × 31 */
.cp-one .sw { width: calc(48 * var(--q)); height: calc(29 * var(--q)); border-radius: calc(14.5 * var(--q)); }
.cp-one .sw::before { background: var(--lime); }
.cp-one .sw::after { left: calc(2 * var(--q)); top: calc(2 * var(--q)); width: calc(25 * var(--q)); height: calc(25 * var(--q)); box-shadow: 0 calc(2 * var(--q)) calc(5 * var(--q)) rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
.cp-one [aria-checked="true"] .sw::after { transform: translateX(calc(19 * var(--q))); }
/* the three numbers as rows (A of previews/coaching-oura.html): the name on the left edge, the value on the right edge,
   a thin line between, like "Also beaten today" in the phone */
.cp-one .data { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: calc(16 * var(--q)); padding-top: calc(4 * var(--q)); box-shadow: inset 0 calc(.6 * var(--q)) 0 var(--g100); }
.cp-one .chip { display: flex; align-items: center; justify-content: space-between; height: calc(34 * var(--q)); padding: 0; border-radius: 0; background: none; }
.cp-one .chip + .chip { box-shadow: inset 0 calc(.6 * var(--q)) 0 var(--g100); }
.cp-one .chip b { font-size: calc(17 * var(--q)); line-height: calc(22 * var(--q)); }
.cp-one .chip span { font-size: calc(14 * var(--q)); line-height: calc(18 * var(--q)); font-weight: 600; color: var(--g700); }
.cp-one.off .chip { background: none; }
/* secondary text beside the phone in the phone's own grey (#64676F, at least 4.5:1), not the icon grey */
.cp { --g600: #64676F; }
/* the phone centred in its tile for real: 17cqw centred the screen width only, the bezel (3% a side) pushed it 8px right */
.cgw .reel-phone { left: calc((100cqw - var(--phone-w) * 1.06) / 2); }

/* one shadow for every white card in the case (31 Oct). Before: the cards in the phone 0 2 8 at 3% (about half of the
   ones beside it), the activity card 0 4 14 at 5%, the Oura card 0 4 14 at 4%. Now the same hairline and the same soft drop
   everywhere, in each card's own unit (about 2.5px down, 8px blur on desktop) */
.cgw .g-gc, .cgw .g-ex, .cgw .g-ib, .cgw .g-op, .cgw .g-ta { box-shadow: 0 0 0 calc(.5 * var(--p)) rgba(0, 0, 0, .04), 0 calc(3 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, .04); }
.cp-ac, .cp-one .card { box-shadow: 0 0 0 calc(.5 * var(--q)) rgba(0, 0, 0, .04), 0 calc(3 * var(--q)) calc(10 * var(--q)) rgba(0, 0, 0, .04); }

/* details picked by Elena (31 Oct, B, B, C of previews/coaching-details.html) */
/* the chosen tab: the iOS segmented control, white pill on a grey track like the site's own Client work/My apps tabs.
   The black pill was the strongest contrast on the screen, louder than the title */
.cgw .g-tabs { background: #E9EAEE; }
.cgw .g-tabs span { color: var(--sec); }
.cgw .g-tabs .on { background: #fff; color: var(--g900); font-weight: 700; box-shadow: 0 calc(1 * var(--p)) calc(3 * var(--p)) rgba(0, 0, 0, .1), 0 0 0 calc(.5 * var(--p)) rgba(0, 0, 0, .04); }
/* the app icon in the notification: graphite with the lime dumbbell, like a real app icon (the lime square read as a sticker) */
.cgw .g-app { background: #1C1D21; color: var(--lime); box-shadow: inset 0 0 0 calc(.5 * var(--p)) rgba(255, 255, 255, .08); }
/* the chosen stars in lime with a thin dark edge: lime because rating is a choice (as the chosen answer before it),
   the edge because lime alone on the near-white ground is 1.2:1 */
.cgw .g-st i { color: var(--lime); }
.cgw .g-st i svg { overflow: visible; }
.cgw .g-st i path { stroke: var(--g900); stroke-width: 34; stroke-linejoin: round; paint-order: stroke; }

/* details picked by Elena (31 Oct, previews/coaching-details-2.html) */
/* "Sent to your coach": the check in white, lime is for reaching something, not for sending */
.cgw .g-btn .ok svg { color: #fff; }
/* the questionnaire to the pixel (31 Oct): the boxes were already on 20, but what you see was not.
   The star glyph sits 80/960 inside its box, so the row looked 7.4 units shorter than the stepper and the answers.
   Every star now has the same thin edge (grey on the empty ones), and the row is pulled out so the first and last
   star touch 20 and 340 with their edge. The capital at the start of a big title sits 2.4 units inside its box
   (Manrope H at 34), pulled back so the question starts on the same line as the fields */
.cgw .g-st > svg path { stroke: var(--empty); stroke-width: 34; stroke-linejoin: round; paint-order: stroke; }
.cgw .g-stars { margin: calc(32 * var(--p)) calc(-6.52 * var(--p)) 0; }
.cgw .g-qt { text-indent: calc(-2.38 * var(--p)); }
.cgw .g-title { text-indent: calc(-1.02 * var(--p)); }

/* Workout complete, F of previews/coaching-workout-order.html (31 Oct): three personal bests side by side, none bigger than the
   others. On top, all centred: a small "Workout complete", the cup in the lime circle, how many records, type and length.
   Below, one card with the three records: name and kind on the left, value and increase on the right, the increases in a pale
   lime pill (the full lime stays on the cup), all in one column. Air: rows of 76, 48 above Close */
.cgw .g-ov { position: absolute; left: 0; right: 0; top: calc(76 * var(--p)); text-align: center; font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 600; color: var(--sec); }
.cgw .g-ok.g-tro { left: calc(148 * var(--p)); top: calc(108 * var(--p)); width: calc(64 * var(--p)); height: calc(64 * var(--p)); padding: calc(16 * var(--p)); }
.cgw .g-big { position: absolute; left: 0; right: 0; top: calc(184 * var(--p)); text-align: center; font-size: calc(34 * var(--p)); line-height: calc(40 * var(--p)); font-weight: 800; letter-spacing: -.035em; }
.cgw .g-bl { position: absolute; left: 0; right: 0; top: calc(228 * var(--p)); text-align: center; font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 600; color: var(--sec); }
.cgw .g-ex { top: calc(284 * var(--p)); padding: 0 calc(16 * var(--p)); }
.cgw .g-ex .g-rw { height: calc(76 * var(--p)); justify-content: space-between; }
.cgw .g-rn { flex: 1; display: grid; gap: calc(4 * var(--p)); }
.cgw .g-rn b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 700; letter-spacing: -.01em; color: var(--g900); }
.cgw .g-rn span { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: var(--sec); }
.cgw .g-rv { display: grid; justify-items: end; gap: calc(4 * var(--p)); }
.cgw .g-rv b { font-size: calc(17 * var(--p)); line-height: calc(22 * var(--p)); font-weight: 800; letter-spacing: -.01em; color: var(--g900); }
.cgw .g-up { padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: calc(6 * var(--p)); background: #E7F8A6; color: var(--g900); font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 700; }