/* illi Loom-style landing, Amanda iteration 3 (2026-11-08): proportions measured on atlassian.com/software/loom at 1440 and phone width,
   rebuilt in illi's own tokens. Reference numbers that drove the provisional values: content 1152 of 1440 (80 percent), gutters 136,
   hero title 64 over section titles 48 over body 16, marquee 64 below the film with 32px marks and 64px gaps on a 90s loop,
   card radius 8 to 16, card body padding 24, dark band near-black, light band off-white, section padding 80 to 96.
   Every declaration references a board token or a named provisional token; the two breakpoints are the only raw numbers. */

@import url('illi-tokens.css');

@font-face{font-family:Inter;src:url('inter-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('inter-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Sora;src:url('sora-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---- role aliases (board tokens) ---- */
  --paper:var(--illi-surface-card);
  --band:var(--illi-surface-sunken);
  --card:var(--illi-surface-raised);
  --art:var(--illi-bone-200);
  --ink:var(--illi-text-primary);
  --heading:var(--illi-text-heading);
  --muted:var(--illi-text-secondary);
  --line:var(--illi-border-divider);
  --line-soft:var(--illi-border-field);
  --red:var(--illi-red-600);
  --red-hover:var(--illi-red-700);
  --red-hover-dark:var(--illi-red-500);
  --on-red:var(--illi-on-accent);
  --focus:var(--illi-bone-950);
  --accent-2:var(--illi-accent-secondary);
  --pause:var(--illi-yellow-500);
  --stage-bg:var(--illi-gray-900);
  --dark-bg:var(--illi-gray-800);
  --dark-ink:var(--illi-bone-50);
  --dark-muted:var(--illi-bone-400);
  --dark-line:var(--illi-gray-600);
  --dark-field:var(--illi-gray-750);
  --card-dark:var(--illi-bone-950);         /* owner ruling 2026-11-08: feature card bodies in dark bone, not grey */
  --card-dark-ink:var(--illi-bone-50);
  --card-dark-muted:var(--illi-bone-100);    /* 4.5:1 on bone-950; bone-400 would fall to 3.6:1 */
  --card-dark-line:var(--illi-bone-800);
  --scroll-thumb:var(--illi-bone-600);
  --scroll-track:var(--illi-bone-100);

  /* ---- PROVISIONAL tokens, adapted from the reference's proportions ---- */
  --p-page-max:1680px;                      /* owner 2026-11-11: raised from 1440 so the film grows on big monitors */
  --p-content:80vw;                         /* reference: 1152 of 1440 */
  --p-gutter-min:var(--illi-space-lg);
  --p-hairline:1px;
  --p-track-display:-.03em;
  --p-track-title:-.02em;
  --title-family:var(--illi-font-display);   /* owner ruling 2026-11-09: every title in Sora, FAQ questions included. The board's h3 family is still Inter; board change pending */
  --title-weight:var(--illi-weight-bold);
  --p-focus-width:2px;
  --p-focus-offset:4px;
  --p-underline-offset:4px;
  --p-underline-width:1px;
  --p-press-shift:1px;
  --p-fluid-display:clamp(36px,4.4vw,var(--illi-type-display-size));
  --p-fluid-section:clamp(28px,3.2vw,var(--illi-type-h1-size));
  --p-h1-phone:36px;
  --p-measure-h1:12ch;
  --p-measure-intro:38ch;
  --p-measure-lede:60ch;
  --p-measure-body:52ch;
  --p-measure-trial:44ch;
  --p-measure-note:56ch;
  --p-measure-close:16ch;
  --p-measure-stack:760px;
  --p-measure-send:400px;                    /* the send-to-computer box: one email field's worth of width */
  --p-header-h:60px;
  --p-wordmark-head:52px;
  --p-wordmark-head-phone:44px;
  --p-wordmark-close:clamp(96px,9vw,132px);
  --p-field-h:48px;                          /* touch target: the field and its button are used on phones only */
  --p-mark-h:32px;                           /* reference marquee mark height */
  --p-strip-gap:var(--illi-space-4xl);       /* reference marquee gap 64 */
  --p-strip-dur:90s;                         /* reference marquee loop */
  --p-strip-glyph:28px;
  --p-chip:48px;
  --p-head-real:calc(var(--illi-type-body-sm-size) + var(--illi-space-md) * 4);   /* the header's real height: its small button (one text line plus its padding) plus the header's own padding */
  --p-hero-gap:var(--illi-space-3xl);         /* between the claim and the film */
  --p-hero-cols:minmax(0,4fr) minmax(0,7fr);  /* claim to film */
  --p-hero-pad:clamp(var(--illi-space-xl),4svh,var(--illi-space-3xl));   /* one breathing step, used above the film and above and below the strip; it grows with the window's height */
  --p-hero-film-room:calc(100svh - var(--p-head-real) - var(--p-hero-pad) * 3 - var(--p-chip));   /* the height the first screen has left for the film */
  --p-hero-film-floor:240px;                 /* the film is never shorter than this; a window too short for it scrolls instead */
  --p-hero-display:clamp(36px,min(4.2vw - 3px,8svh),var(--illi-type-display-size));   /* the claim always sets in two lines inside its column, and yields to a short window */
  --p-hero-intro:clamp(var(--illi-type-body-size),1.45vw,var(--illi-type-h3-size));    /* the intro stays on two lines as the column narrows */
  --p-card-radius:var(--illi-shape-lg);
  --p-card-art-ratio:1 / 1;
  --p-diagram:136px;
  --p-story-mark:96px;
  --p-col-icon:40px;
  --p-story-w:400px;                         /* fixed: the card must not stretch with the window */
  --p-story-side:28%;
  --p-story-h:460px;
  --p-story-speed:16;                        /* carousel drift, pixels per second */
  --p-wordmark-foot:40px;
  --p-glyph-h:18px;                          /* the sign-off mark, as in the emails */
  --p-story-h-phone:360px;
  --p-chev:16px;
  --p-anim:4.6s;
  --p-move:7px;
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* fallback: one overshoot */
  --t-fast:150ms;
  --t-settle:260ms;
  --t-spring:520ms;
  --p-lift:var(--illi-space-sm);              /* how far a hovered card rises */
  --p-art-zoom:1.08;                          /* reference zooms its card image to 1.1 */
}
@supports (transition-timing-function:linear(0,1)){
  :root{--ease-spring:linear(0,.45 12%,.9 22%,1.1 34%,1.03 46%,.97 58%,1.01 76%,1)}   /* overshoot, small rebound, settle */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--p-header-h) + var(--illi-space-xl));scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--illi-type-body-family),sans-serif;font-size:var(--illi-type-body-size);line-height:var(--illi-type-body-line);-webkit-font-smoothing:antialiased}
::selection{background:var(--illi-accent-tint);color:var(--illi-text-primary)}
a{color:inherit;text-decoration:none;text-underline-offset:var(--p-underline-offset);text-decoration-thickness:var(--p-underline-width)}
a:hover{text-decoration:underline}
a,button{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[tabindex]):focus-visible{outline:var(--p-focus-width) solid var(--focus);outline-offset:var(--p-focus-offset);border-radius:var(--illi-shape-sm)}
img{display:block}
h1,h2{font-family:var(--illi-font-display),sans-serif;font-weight:var(--illi-weight-bold);letter-spacing:var(--p-track-display);color:var(--ink);margin:0;text-wrap:balance}
h2{font-size:var(--p-fluid-section);line-height:var(--illi-type-h1-line)}
h3{font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line);margin:0;color:var(--ink)}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}

/* ---------- containers and bands (the reference's 80 percent content column) ---------- */
.container{width:min(var(--p-content),var(--p-page-max));margin-inline:auto;padding-inline:0}
.band-soft{background:var(--band)}
.band-dark{background:var(--dark-bg);color:var(--dark-ink)}
.band-dark h2,.band-dark h3{color:var(--dark-ink)}
.section-head{margin-bottom:var(--illi-space-3xl)}
.section-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--illi-space-xl)}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;gap:var(--illi-space-md);background:var(--red);color:var(--on-red);font-weight:var(--illi-weight-semibold);font-size:var(--illi-type-body-size);line-height:1;padding:var(--illi-space-lg) var(--illi-space-xl);border-radius:var(--illi-shape-full);white-space:nowrap;border:0;cursor:pointer;transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.button:hover{background:var(--red-hover);text-decoration:none}
.button:active{transform:translateY(var(--p-press-shift))}
.button.small{padding:var(--illi-space-md) var(--illi-space-lg);font-size:var(--illi-type-body-sm-size);gap:var(--illi-space-sm)}
.band-dark .button:hover{background:var(--red-hover-dark)}
.trial{font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);color:var(--muted)}
.cta-stack{display:flex;flex-direction:column;align-items:center;gap:var(--illi-space-md);text-align:center}

/* ---------- header ---------- */
/* the header band runs edge to edge as a box-shadow, not a 100vw-wide box: 100vw also counts the Windows scrollbar, so a box that wide
   overhangs the page and makes a 7 px sideways scroll; a shadow never widens the page. clip-path keeps the shadow to the header's height. */
.site-head{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;min-height:var(--p-header-h);width:min(var(--p-content),var(--p-page-max));margin-inline:auto;padding-block:var(--illi-space-md);background:var(--paper)}
.site-head::before,.site-head::after{content:"";position:absolute;left:0;right:0;z-index:-1;clip-path:inset(0 -100vmax)}
.site-head::before{top:0;bottom:0;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper)}
.site-head::after{bottom:0;height:var(--p-hairline);background:transparent;box-shadow:0 0 0 100vmax transparent;transition:background-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.site-head.is-stuck::after{background:var(--line);box-shadow:0 0 0 100vmax var(--line)}
.brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.brand:hover{text-decoration:none}
.brand img{width:var(--p-wordmark-head);height:auto}
.site-head nav{display:flex;align-items:center;gap:var(--illi-space-2xl);font-size:var(--illi-type-body-sm-size);font-weight:var(--illi-weight-medium)}

/* ---------- hero: claim and action, then the film (stacked here; side by side on desktop, see "desktop first screen") ---------- */
.hero{padding-block:var(--illi-space-3xl) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--illi-space-4xl);align-items:start}
h1{font-size:var(--p-fluid-display);line-height:var(--illi-type-display-line);max-width:var(--p-measure-h1)}
.intro{margin-top:var(--illi-space-lg);text-wrap:pretty;font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line);color:var(--muted);max-width:var(--p-measure-intro)}
.hero-action{display:flex;flex-direction:column;align-items:flex-start;gap:var(--illi-space-md);padding-top:var(--illi-space-sm)}
.hero-action .trial{margin:0}
.device-note{font-weight:var(--illi-weight-medium);color:var(--heading)}   /* phones and tablets only: illi is for a computer, so the button below offers a reminder */
/* phones and tablets held upright (owner request 2026-11-11): the film comes before the button, so the order is claim, film, action */
@media(max-width:1024px) and (orientation:portrait){
  .is-phone .hero-main{display:flex;flex-direction:column}
  .is-phone .hero-grid{display:contents}
  .is-phone .hero-copy{order:1}
  .is-phone .stage{order:2}
  .is-phone .stage-error{order:3}
  .is-phone .hero-action{order:4;margin-top:var(--illi-space-xl);padding-top:0}
}
.audience{margin-top:var(--illi-space-lg);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);color:var(--muted);max-width:var(--p-measure-intro)}
.stage{position:relative;margin-top:var(--illi-space-3xl)}
.stage .player{width:100%;aspect-ratio:16 / 9;border-radius:var(--illi-shape-xl);overflow:hidden;background:var(--stage-bg)}   /* the film holds its 16:9 place before the player script runs */
/* keyboard focus on the film: a ring outside the picture, in the page's focus ink (the player's own inset ring sits under the video and cannot be seen) */
.stage .player:focus-visible{outline:var(--p-focus-width) solid var(--focus);outline-offset:var(--p-focus-offset);box-shadow:none}
.stage-error{margin-top:var(--illi-space-sm);font-size:var(--illi-type-body-sm-size);color:var(--heading)}

/* ---------- moving strip, the last row of the hero (reference marquee: 64 below, 90s loop): chip + what it does + how ---------- */
.strip-wrap{padding-block:var(--p-strip-gap) var(--illi-space-6xl);overflow:hidden}
.strip{position:relative;padding-block:var(--illi-space-lg);margin-block:calc(var(--illi-space-lg) * -1);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}   /* the padding keeps the raised chips' shadows inside the mask */
.strip-track{display:flex;align-items:center;gap:var(--p-strip-gap);width:max-content;animation:strip-scroll var(--p-strip-dur) linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track li{display:flex;align-items:center;gap:var(--illi-space-md);white-space:nowrap}
/* strip chips, redrawn 2026-11-11: a raised round button carrying one bold glyph (owner direction: soft raised look, icons drawn from the idea) */
.chip{display:grid;place-items:center;width:var(--p-chip);height:var(--p-chip);border-radius:var(--illi-shape-circle);background:linear-gradient(145deg,var(--illi-bone-50),var(--illi-bone-300));box-shadow:calc(var(--p-chip) * .1) calc(var(--p-chip) * .1) calc(var(--p-chip) * .23) var(--illi-bone-600),calc(var(--p-chip) * -.1) calc(var(--p-chip) * -.1) calc(var(--p-chip) * .23) var(--illi-white);color:var(--heading);flex-shrink:0}
.chip .g{width:var(--p-strip-glyph);height:var(--p-strip-glyph);overflow:visible}
.chip .g .ln{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.chip .g .wide{stroke-width:3}
.chip .g .sf{fill:none;stroke:var(--illi-bone-600);stroke-width:3;stroke-linecap:round}
.chip .g .rd{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chip .g .fr{fill:var(--red)}
.chip .g .fi{fill:currentColor}
.chip .g .fy{fill:var(--pause)}
.chip .g .tag{stroke:var(--illi-bone-50);stroke-width:1.4}
.chip .g text{font-family:var(--illi-font-display),sans-serif;font-weight:var(--illi-weight-bold);font-size:7.6px;fill:var(--illi-white)}
.txt{display:flex;flex-direction:column;gap:var(--illi-space-xs)}
.txt .do{font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);color:var(--ink);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line)}
.txt .how{color:var(--muted);font-size:var(--illi-type-caption-size);line-height:var(--illi-type-caption-line)}
@keyframes strip-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- features: the reference's image-top cards over a solid body ---------- */
.features{padding-block:var(--illi-space-5xl)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--illi-space-xl)}
.card{display:flex;flex-direction:column;border-radius:var(--p-card-radius);overflow:hidden;background:var(--card-dark);color:var(--card-dark-ink)}
.card-art{aspect-ratio:var(--p-card-art-ratio);background:var(--art);display:grid;place-items:center}
/* hover bounce (owner request 2026-11-09): the card rises on a spring and its diagram swells a touch */
.card,.card .diagram{transition:transform var(--t-spring) var(--ease-spring)}
@media(hover:hover){
  .card:hover{transform:translateY(calc(var(--p-lift) * -1))}
  .card:hover .diagram{transform:scale(var(--p-art-zoom))}
}
.card-body{padding:var(--illi-space-xl);display:flex;flex-direction:column;gap:var(--illi-space-sm);flex:1}
.card-label{display:inline-block;align-self:flex-start;font-size:var(--illi-type-small-size);line-height:var(--illi-type-small-line);font-weight:var(--illi-weight-medium);color:var(--card-dark-muted);padding:var(--illi-space-xs) var(--illi-space-sm);border:var(--p-hairline) solid var(--card-dark-line);border-radius:var(--illi-shape-full)}
.card h3{color:var(--card-dark-ink);margin-top:var(--illi-space-xs)}
.card p{color:var(--card-dark-muted);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-line)}

/* card pictures, redrawn 2026-11-11 (owner direction): each picture is drawn from the idea it has to get across, in the soft raised look.
   The speed card shows illi's control in bone with red marks (owner direction, same day: someone who does not have illi yet will not miss the red body), built to the hub's own measurements; all four use raised bone surfaces with red accents. */
.diagram{width:var(--p-diagram);height:var(--p-diagram);color:var(--heading);overflow:visible}
.nm-defs{position:absolute;width:0;height:0}
.nm-hi{stop-color:var(--illi-bone-50)}.nm-lo{stop-color:var(--illi-bone-400)}
.nm-shade{flood-color:var(--illi-bone-800)}.nm-glow{flood-color:var(--illi-white)}
.nm-deep{flood-color:var(--illi-bone-800);flood-opacity:.9}.nm-drop{flood-color:var(--illi-bone-950);flood-opacity:.55}
.diagram .trk{fill:var(--illi-bone-500)}
.diagram .trk-on{fill:var(--illi-bone-600)}
.diagram .was{fill:var(--illi-bone-700)}
.diagram .rd{fill:none;stroke:var(--red);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.diagram .fr,.card .diagram .flag{fill:var(--red)}
.diagram .fi{fill:currentColor}
.diagram .pause{fill:var(--pause)}
.diagram .cursor{fill:currentColor;stroke:var(--illi-bone-50);stroke-width:.9;stroke-linejoin:round}
/* the hub: three stacked discs, the reading and the rim arrow. Ratios are the extension's (144 box: middle inset 29, inner inset 35, arrow 22 x 9 at top 9, reading 21);
   body in bone, reading and arrow in red */
.d-speed{display:grid;place-items:center;--hub:calc(var(--p-diagram) * .74)}
.hub{position:relative;display:block;width:var(--hub);height:var(--hub)}
.hub i{position:absolute;border-radius:var(--illi-shape-circle);background:linear-gradient(145deg,var(--illi-bone-50),var(--illi-bone-400))}
.hub .o{inset:0;box-shadow:calc(var(--hub) * -.021) calc(var(--hub) * -.021) calc(var(--hub) * .042) var(--illi-white),calc(var(--hub) * .021) calc(var(--hub) * .021) calc(var(--hub) * .042) var(--illi-bone-700)}
.hub .m{inset:20.14%;box-shadow:calc(var(--hub) * -.028) calc(var(--hub) * -.028) calc(var(--hub) * .056) var(--illi-white),calc(var(--hub) * .028) calc(var(--hub) * .028) calc(var(--hub) * .056) var(--illi-bone-700)}
.hub .n{inset:24.3%;display:grid;place-items:center;box-shadow:calc(var(--hub) * -.035) calc(var(--hub) * -.035) calc(var(--hub) * .069) var(--illi-white),calc(var(--hub) * .035) calc(var(--hub) * .035) calc(var(--hub) * .069) var(--illi-bone-700)}
.hub b{grid-area:1 / 1;font-style:normal;font-family:var(--illi-font-display),sans-serif;font-weight:var(--illi-weight-bold);font-size:calc(var(--hub) * .146);line-height:1;color:var(--red)}
.hub .arrow{position:absolute;inset:0;z-index:1}
.hub .arrow svg{position:absolute;top:6.25%;left:50%;width:15.3%;height:6.25%;translate:-50% 0;overflow:visible;fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.diagram .prog{fill:none;stroke:var(--illi-bone-600);stroke-width:7.5;stroke-linecap:round;stroke-dasharray:100 100}
.diagram .arc{stroke-dasharray:100 100}
.diagram .ring{stroke-width:1.6;opacity:0}
.diagram .vtrk,.diagram .vprog{fill:none;stroke-width:1.8;stroke-linecap:round}
.diagram .vtrk{stroke:var(--illi-bone-600)}
.diagram .vprog{stroke:var(--red);stroke-dasharray:100 100;stroke-dashoffset:60}
.diagram .ln2{fill:none;stroke:var(--illi-bone-600);stroke-width:2.8;stroke-linecap:round}
.diagram .typ{stroke-dasharray:100 100}
.d-replay .prog{stroke-dashoffset:64.4}
.hub .read{display:block;height:1em;overflow:hidden}
.hub .roll,.hub .roll span{display:block}   /* the readings stacked one per line; the roll moves a whole line at a time, so the number flips in place like the real one */
/* owner ruling 2026-11-09: a diagram rests as a complete still drawing and plays only while its card is hovered
   (or once, on touch screens, when the card scrolls into view: .is-playing). Every loop starts and ends on the resting picture.
   Owner direction 2026-11-11: the movement has to show the feature happening, step by step:
   speed    the reading ticks down in tenths from 2.0x to 1.0x with the arrow pointing down, then picks back up to 2.0x with the arrow pointing up
            (the hub shows one decimal: ui-manager.ts, currentSpeed.toFixed(1))
   replay   the video plays forward, then the knob jumps back along the red arc to the earlier spot
   mark     the video plays, a double-click pulses, the bookmark drops where the knob is, the video carries on
   pause    the pointer is on the video and it plays; the pointer leaves for the other window, the video pauses and waits while a line is typed */
.diagram .knob,.diagram .prog,.diagram .was,.diagram .arc,.diagram .tip,.diagram .ring,.diagram .flag,.diagram .cursor,.diagram .bars,.diagram .vprog,.diagram .typ,.hub .arrow,.hub .roll{transform-box:fill-box;transform-origin:center;animation-duration:var(--p-anim);animation-timing-function:linear;animation-iteration-count:infinite}
:is(.card:hover,.card.is-playing) .d-speed .arrow{animation-name:d-speed-arrow}
:is(.card:hover,.card.is-playing) .d-speed .roll{animation-name:d-speed-roll}
:is(.card:hover,.card.is-playing) .d-replay .knob{animation-name:d-replay-knob}
:is(.card:hover,.card.is-playing) .d-replay .prog{animation-name:d-replay-prog}
:is(.card:hover,.card.is-playing) .d-replay .was{animation-name:d-replay-was}
:is(.card:hover,.card.is-playing) .d-replay .arc{animation-name:d-replay-arc}
:is(.card:hover,.card.is-playing) .d-replay .tip{animation-name:d-replay-tip}
:is(.card:hover,.card.is-playing) .d-mark .knob{animation-name:d-mark-knob}
:is(.card:hover,.card.is-playing) .d-mark .prog{animation-name:d-mark-prog}
:is(.card:hover,.card.is-playing) .d-mark .r1{animation-name:d-mark-ring}
:is(.card:hover,.card.is-playing) .d-mark .r2{animation-name:d-mark-ring2}
:is(.card:hover,.card.is-playing) .d-mark .flag{animation-name:d-mark-flag}
:is(.card:hover,.card.is-playing) .d-pause .cursor{animation-name:d-pause-cursor}
:is(.card:hover,.card.is-playing) .d-pause .bars{animation-name:d-pause-bars}
:is(.card:hover,.card.is-playing) .d-pause .vprog{animation-name:d-pause-vprog}
:is(.card:hover,.card.is-playing) .d-pause .typ{animation-name:d-pause-typ}
.card.is-playing .diagram *{animation-iteration-count:1}
@keyframes d-speed-arrow{0%,7%{transform:rotate(0);animation-timing-function:var(--ease-out)}12%,49%{transform:rotate(180deg);animation-timing-function:var(--ease-out)}55%,100%{transform:rotate(360deg)}}
@keyframes d-speed-roll{0%,12%{transform:translateY(0);animation-timing-function:steps(10,end)}46%,56%{transform:translateY(-10em);animation-timing-function:steps(10,end)}92%,100%{transform:translateY(0)}}
@keyframes d-replay-knob{0%,12%{transform:translateX(0)}44%,52%{transform:translateX(24px);animation-timing-function:var(--ease-out)}66%,100%{transform:translateX(0)}}
@keyframes d-replay-prog{0%,12%{stroke-dashoffset:64.4}44%,52%{stroke-dashoffset:0;animation-timing-function:var(--ease-out)}66%,100%{stroke-dashoffset:64.4}}
@keyframes d-replay-was{0%,5%{opacity:1}11%,52%{opacity:0}56%,100%{opacity:1}}
@keyframes d-replay-arc{0%,5%{opacity:1;stroke-dashoffset:0}11%{opacity:0;stroke-dashoffset:0}12%,51%{opacity:0;stroke-dashoffset:100}52%{opacity:1;stroke-dashoffset:100;animation-timing-function:var(--ease-out)}66%,100%{opacity:1;stroke-dashoffset:0}}
@keyframes d-replay-tip{0%,5%{opacity:1}11%,63%{opacity:0}68%,100%{opacity:1}}
@keyframes d-mark-knob{0%,5%{transform:translateX(0);animation-timing-function:var(--ease-out)}12%,16%{transform:translateX(-31px)}40%,54%{transform:translateX(-17px)}82%,100%{transform:translateX(0)}}
@keyframes d-mark-prog{0%,5%{stroke-dashoffset:0;animation-timing-function:var(--ease-out)}12%,16%{stroke-dashoffset:85.5}40%,54%{stroke-dashoffset:46.9}82%,100%{stroke-dashoffset:0}}
@keyframes d-mark-ring{0%,40%{opacity:0;transform:scale(.6)}41%{opacity:.9;transform:scale(.6)}47%,100%{opacity:0;transform:scale(1.9)}}
@keyframes d-mark-ring2{0%,44%{opacity:0;transform:scale(.6)}45%{opacity:.9;transform:scale(.6)}51%,100%{opacity:0;transform:scale(1.9)}}
@keyframes d-mark-flag{0%,4%{opacity:1;transform:translateY(0)}10%,47%{opacity:0;transform:translateY(calc(var(--p-move) * -1.6));animation-timing-function:var(--ease-spring)}56%,100%{opacity:1;transform:translateY(0)}}
@keyframes d-pause-cursor{0%,8%{transform:translate(0,0);animation-timing-function:var(--ease-out)}20%,50%{transform:translate(-27px,-17px);animation-timing-function:var(--ease-out)}62%,100%{transform:translate(0,0)}}
@keyframes d-pause-bars{0%,17%{opacity:1}21%,53%{opacity:0}57%,100%{opacity:1}}
@keyframes d-pause-vprog{0%,6%{opacity:1;stroke-dashoffset:60}10%{opacity:0;stroke-dashoffset:60}11%{opacity:0;stroke-dashoffset:78}16%,21%{opacity:1;stroke-dashoffset:78}54%,100%{opacity:1;stroke-dashoffset:60}}
@keyframes d-pause-typ{0%,6%{opacity:1;stroke-dashoffset:0}10%{opacity:0;stroke-dashoffset:0}11%{opacity:0;stroke-dashoffset:100}12%,62%{opacity:1;stroke-dashoffset:100}90%,100%{opacity:1;stroke-dashoffset:0}}

/* ---------- where it works: one compact dark row, three facts ---------- */
.where{padding-block:var(--illi-space-5xl)}
.where-row{display:flex;flex-direction:column;gap:var(--illi-space-3xl)}   /* title on one line on top, four facts in one row beneath (owner ruling 2026-11-09) */
.where h2{font-size:var(--p-fluid-section);line-height:var(--illi-type-h1-line)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--illi-space-2xl)}
.facts li{display:flex;flex-direction:column;gap:var(--illi-space-md);font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line);text-wrap:balance}
.col-icon{width:var(--p-col-icon);height:var(--p-col-icon);flex-shrink:0;color:var(--dark-ink)}
.col-icon .ink{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.col-icon .fill{fill:var(--dark-muted)}   /* bone-950 was too dim on the dark band */

/* ---------- stories: the side-panel card, tall at every window width, on a slow moving rail ---------- */
.stories{padding-block:var(--illi-space-6xl) var(--illi-space-5xl);overflow:hidden}
/* a real carousel: it drifts by itself, and the visitor can drag, swipe, scroll or use the side arrows */
.story-carousel{position:relative}
.story-viewport{overflow-x:auto;scrollbar-width:none;cursor:grab;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}
.story-viewport::-webkit-scrollbar{display:none}
.story-viewport.is-dragging{cursor:grabbing;user-select:none}
.story-track{display:flex;align-items:stretch;gap:var(--illi-space-xl);width:max-content}
.story-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;width:var(--illi-space-3xl);height:var(--illi-space-3xl);border-radius:var(--illi-shape-circle);border:var(--p-hairline) solid var(--line-soft);background:var(--paper);color:var(--heading);display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.story-arrow:hover{background:var(--band);border-color:var(--heading)}
.story-arrow.prev{left:var(--illi-space-xl)}
.story-arrow.next{right:var(--illi-space-xl)}
.story{flex:0 0 var(--p-story-w);min-height:var(--p-story-h);display:grid;grid-template-columns:var(--p-story-side) minmax(0,1fr);border-radius:var(--p-card-radius);overflow:hidden;background:var(--card);border:var(--p-hairline) solid var(--line)}
.story-side{background:var(--art);padding:var(--illi-space-xl) var(--illi-space-lg)}
.story-mark{display:block;font-family:var(--illi-font-display),sans-serif;font-weight:var(--illi-weight-bold);font-size:var(--p-story-mark);line-height:.8;color:var(--illi-bone-700)}
.story-body{margin:0;padding:var(--illi-space-2xl) var(--illi-space-xl);display:flex;flex-direction:column;gap:var(--illi-space-xl)}
.story-body blockquote{margin:0;font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line);color:var(--ink)}
.story-body blockquote p{text-wrap:pretty}
.story-body figcaption{margin-top:auto;font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);font-weight:var(--illi-weight-medium);color:var(--muted)}

/* ---------- answers: same card language, a row opens on hover or focus ---------- */
.faq{padding-block:var(--illi-space-5xl)}
.faq-stack{margin:0;display:grid;gap:var(--illi-space-xl);max-width:var(--p-measure-stack)}   /* wider gap 2026-11-11: room for the raised cards' shadows */
/* owner request 2026-11-11: the heading and the cards sit as one column in the middle of the page; the text inside stays left-aligned */
.faq .section-head,.faq-stack{max-width:var(--p-measure-stack);margin-inline:auto}
/* soft raised look, owner request 2026-11-11: a closed question is a raised slab the colour of the band; an open one presses in */
.faq-item{background:linear-gradient(145deg,var(--illi-bone-50),var(--illi-bone-200));border-radius:var(--p-card-radius);padding:var(--illi-space-xl);cursor:default;box-shadow:var(--illi-space-sm) var(--illi-space-sm) var(--illi-space-lg) var(--illi-bone-500),calc(var(--illi-space-sm) * -1) calc(var(--illi-space-sm) * -1) var(--illi-space-lg) var(--illi-white);transition:box-shadow var(--t-settle) var(--ease-out),background var(--t-settle) var(--ease-out)}
.faq-item:hover,.faq-item:focus-within{background:var(--band);box-shadow:inset var(--illi-space-xs) var(--illi-space-xs) var(--illi-space-md) var(--illi-bone-500),inset calc(var(--illi-space-xs) * -1) calc(var(--illi-space-xs) * -1) var(--illi-space-md) var(--illi-white)}
.faq-item dt{display:flex;justify-content:space-between;align-items:center;gap:var(--illi-space-lg);font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line)}
.faq-item .chev{flex-shrink:0;width:var(--p-chev);height:var(--p-chev);color:var(--heading);transition:transform var(--t-settle) var(--ease-out),color var(--t-settle) var(--ease-out)}
.faq-item dd{margin:0;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-settle) var(--ease-out)}
.faq-item dd>div{overflow:hidden;color:var(--muted);max-width:var(--p-measure-body);text-wrap:pretty;padding-top:0;transition:padding-top var(--t-settle) var(--ease-out)}
.faq-item:hover dd,.faq-item:focus-within dd{grid-template-rows:1fr}
.faq-item:hover dd>div,.faq-item:focus-within dd>div{padding-top:var(--illi-space-md)}
.faq-item:hover .chev,.faq-item:focus-within .chev{transform:rotate(180deg);color:var(--red)}
@media(hover:none){.faq-item dd{grid-template-rows:1fr}.faq-item dd>div{padding-top:var(--illi-space-md)}.faq-item .chev{display:none}}

/* ---------- close: the reference's centered dark finale ---------- */
.close-inner{padding-block:var(--illi-space-6xl);display:flex;flex-direction:column;align-items:center;text-align:center}
.close-mark{width:var(--p-wordmark-close);height:auto;margin-bottom:var(--illi-space-2xl)}
.close h2{font-size:var(--p-fluid-display);line-height:var(--illi-type-display-line);max-width:var(--p-measure-close)}
.close .cta-stack{margin-top:var(--illi-space-2xl)}
.close .trial{color:var(--dark-muted);font-size:var(--illi-type-body-size);line-height:var(--illi-type-body-line);max-width:var(--p-measure-trial)}
.signoff{display:inline-flex;align-items:center;gap:var(--illi-space-md);margin-top:var(--illi-space-3xl);font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);font-size:var(--illi-type-body-size);line-height:var(--illi-type-body-line);color:var(--dark-muted)}
.signoff img{height:var(--p-glyph-h);width:auto}
.band-dark :where(a,[tabindex],input,button):focus-visible{outline-color:var(--dark-ink)}
/* send popup, phones and tablets only (reworked 2026-11-11, owner request): every install button there opens it. A light card over a
   dimmed page: why (illi is for a computer), what happens (a link by email), one labelled field, one full-width button */
.send-dialog{width:calc(100vw - var(--illi-space-xl) * 2);max-width:var(--p-measure-send);margin:var(--illi-space-5xl) auto auto;padding:0;border:0;border-radius:var(--p-card-radius);background:var(--paper);color:var(--ink)}
.send-dialog::backdrop{background:color-mix(in srgb,var(--illi-gray-900) 70%,transparent)}
.send{position:relative;padding:var(--illi-space-2xl) var(--illi-space-xl) var(--illi-space-xl)}
.send-close{position:absolute;top:var(--illi-space-sm);right:var(--illi-space-sm);display:grid;place-items:center;width:var(--illi-space-3xl);height:var(--illi-space-3xl);padding:0;border:0;border-radius:var(--illi-shape-circle);background:none;color:var(--muted);cursor:pointer}
.send-title{padding-right:var(--illi-space-2xl);font-family:var(--title-family),sans-serif;font-weight:var(--title-weight);letter-spacing:var(--p-track-title);font-size:var(--illi-type-h3-size);line-height:var(--illi-type-h3-line);color:var(--ink);text-wrap:balance}
.send-why{margin-top:var(--illi-space-sm);color:var(--muted);text-wrap:pretty}
.send-label{display:block;margin-top:var(--illi-space-xl);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);font-weight:var(--illi-weight-medium);color:var(--heading)}
.send-row{display:flex;flex-direction:column;gap:var(--illi-space-md);margin-top:var(--illi-space-sm)}
.send-input{width:100%;height:var(--p-field-h);padding:0 var(--illi-space-lg);font:inherit;color:var(--ink);background:var(--card);border:var(--p-hairline) solid var(--line-soft);border-radius:var(--illi-shape-full);caret-color:var(--ink)}
.send-input:focus{border-color:var(--heading);outline:none}
.send-input[aria-invalid="true"]{border-color:var(--red)}
.send-row .button{height:var(--p-field-h);padding-block:0;justify-content:center}
.send-status{margin-top:var(--illi-space-md);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);color:var(--ink)}
.send-status:empty{display:none}
.send-status.is-error{color:var(--red-hover)}
.send.is-sent .send-why,.send.is-sent .send-label,.send.is-sent .send-row{display:none}

/* ---------- footer: one slim row (owner ruling 2026-11-09): mark, tagline, the real pages, legal ---------- */
.site-foot{padding-block:var(--illi-space-xl);font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line);color:var(--muted)}
.foot-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--illi-space-md) var(--illi-space-xl)}
.foot-row .brand img{width:var(--p-wordmark-foot)}
.foot-tag{margin-right:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--illi-space-sm) var(--illi-space-xl);font-weight:var(--illi-weight-medium);color:var(--heading)}
.foot-legal{font-size:var(--illi-type-small-size);line-height:var(--illi-type-small-line)}

/* ---------- conversion feedback and the review switch ---------- */
.cta-note{position:fixed;left:50%;bottom:var(--illi-space-xl);translate:-50% 0;background:var(--dark-bg);color:var(--dark-ink);font-size:var(--illi-type-body-sm-size);padding:var(--illi-space-md) var(--illi-space-lg);border-radius:var(--illi-shape-full);opacity:0;transition:opacity var(--t-settle) var(--ease-out);pointer-events:none;z-index:10}
.cta-note.is-on{opacity:1}

/* ---------- tablet ---------- */
@media(max-width:1024px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--illi-space-xl)}
}

/* ---------- desktop first screen, side by side (owner 2026-11-10): header, claim and CTA on the left, the WHOLE film on the right and the
   moving strip under both fit one screen. Nothing is stretched to the window: the film is as wide as its column, or narrower when the
   window is too short to show all of it (--p-hero-film-room), and the hero is exactly as tall as the film plus the strip. So there are no
   empty bands; on a tall window the next section shows under the strip instead. The claim column is centred against the film.
   A tablet held sideways gets the same layout. ---------- */
@media(min-width:1025px),(min-width:960px) and (orientation:landscape) and (min-height:501px){
  .hero{padding-block:0}
  .hero-main{display:grid;grid-template-columns:var(--p-hero-cols);column-gap:var(--p-hero-gap);align-items:center;padding-top:var(--p-hero-pad)}
  .hero-grid{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:var(--illi-space-2xl)}
  .hero h1{font-size:var(--p-hero-display)}
  .hero .intro{font-size:var(--p-hero-intro)}
  .hero-action{padding-top:0}
  .stage{grid-column:2;grid-row:1;margin-top:0;display:flex;justify-content:flex-end}
  .stage .player{width:min(100%,max(var(--p-hero-film-floor),var(--p-hero-film-room)) * 16 / 9)}
  .stage-error{grid-column:2;grid-row:2}
  .strip-wrap{padding-block:var(--p-hero-pad)}
}
/* wide screens (owner 2026-11-11): the claim grows with the film, so the two columns keep the proportions they have at 1440 and the claim
   stays centred against the film. --p-hero-u is the film's width over its width at 1440 (703), as a length: 1px at 1440, stopping at
   1.2857px, where the headline reaches 72px (above that the page's other titles would look small beside it).
   The multipliers are the board sizes in px: display 56, h3 21, body 16, body-sm 14, and spaces 12 16 24 32. */
@media(min-width:1441px){
  /* the header and the strip grow by the same step, worked out from the page width alone (--p-wide-v: 1px at 1440, 1.2857px from 1920),
     so the whole first screen stays in proportion. Multipliers: header 60 and its real height 62, wordmark 52, chip 48, glyph 28, strip gap 64 */
  :root{--p-wide-v:clamp(1px,min(var(--p-content),var(--p-page-max)) / 1152,1.2857px);
    --p-header-h:calc(60 * var(--p-wide-v));--p-head-real:calc(62 * var(--p-wide-v));--p-wordmark-head:calc(52 * var(--p-wide-v));
    --p-chip:calc(48 * var(--p-wide-v));--p-strip-glyph:calc(28 * var(--p-wide-v));--p-strip-gap:calc(64 * var(--p-wide-v))}
  .site-head{padding-block:calc(12 * var(--p-wide-v))}
  .site-head nav{font-size:calc(14 * var(--p-wide-v));gap:calc(32 * var(--p-wide-v))}
  .site-head .button.small{font-size:calc(14 * var(--p-wide-v));padding:calc(12 * var(--p-wide-v)) calc(16 * var(--p-wide-v))}
  .strip-track li{gap:calc(12 * var(--p-wide-v))}
  .txt{gap:calc(4 * var(--p-wide-v))}
  .txt .do{font-size:calc(14 * var(--p-wide-v))}
  .txt .how{font-size:calc(13 * var(--p-wide-v))}
  :root{--p-hero-u:clamp(.8px,min((min(var(--p-content),var(--p-page-max)) - var(--p-hero-gap)) * 7 / 11,max(var(--p-hero-film-floor),var(--p-hero-film-room)) * 16 / 9) / 703,1.2857px)}
  .hero-grid{gap:calc(32 * var(--p-hero-u))}
  .hero h1{font-size:calc(56 * var(--p-hero-u))}
  .hero .intro{font-size:calc(21 * var(--p-hero-u));margin-top:calc(16 * var(--p-hero-u))}
  .hero-action{gap:calc(12 * var(--p-hero-u))}
  .hero-action .button{font-size:calc(16 * var(--p-hero-u));padding:calc(16 * var(--p-hero-u)) calc(24 * var(--p-hero-u))}
  .hero-action .trial,.hero .audience{font-size:calc(14 * var(--p-hero-u))}
  .hero .audience{margin-top:calc(16 * var(--p-hero-u))}
}
@media(min-width:1200px) and (max-width:1365px){
  .hero-grid{gap:var(--illi-space-xl)}          /* on these widths the film is a little shorter than the claim at full spacing; two tighter gaps keep the claim inside the film's height */
  .hero .audience{margin-top:var(--illi-space-md)}
  .hero .intro{margin-top:var(--illi-space-md)}
}
@media(max-width:1199px){
  :root{--p-hero-cols:minmax(0,2fr) minmax(0,3fr);--p-hero-gap:var(--illi-space-2xl)}   /* a narrow window gives the claim a little more of the row, so no line of it breaks early */
}
@media(min-width:1025px) and (max-height:640px),(min-width:960px) and (orientation:landscape) and (min-height:501px) and (max-height:640px){
  .hero-grid{gap:var(--illi-space-xl)}
  .hero .intro{margin-top:var(--illi-space-md)}
  .audience{margin-top:var(--illi-space-sm)}
}

/* ---------- a phone turned sideways: the film becomes the screen. It is as large as the screen allows at 16:9 on a dark full-width stage;
   the header stops sticking so it does not cover the picture, and the page settles on the film when it is scrolled near it
   (landing.js also brings the film up when the phone is turned while the film is on screen or playing). The rest of the page runs on below. ---------- */
@media(orientation:landscape) and (max-height:500px) and (max-width:1024px){
  html{scroll-padding-top:0;scroll-snap-type:y proximity}
  .site-head{position:static}
  .hero-main{width:auto}
  .hero-grid,.stage-error{width:min(var(--p-content),var(--p-page-max));margin-inline:auto}
  .stage{display:flex;justify-content:center;background:var(--stage-bg);scroll-snap-align:start}
  .stage .player{width:min(100%,100svh * 16 / 9);border-radius:0}
  .strip-wrap{padding-block:var(--illi-space-2xl)}
  .stage .player:focus-visible{outline-color:var(--dark-ink);outline-offset:calc(var(--p-focus-width) * -1)}
}

/* ---------- phone ---------- */
@media(max-width:680px){
  :root{--p-content:calc(100vw - var(--illi-space-2xl) * 2)}   /* reference phone gutter 32 */
  .site-head{padding-block:var(--illi-space-sm)}
  .brand img{width:var(--p-wordmark-head-phone)}
  .site-head nav{gap:var(--illi-space-lg)}
  .site-head nav>a:not(.button){display:none}
  .hero{padding-block:var(--illi-space-xl) 0}
  h1{font-size:var(--p-h1-phone)}
  h2{font-size:var(--illi-type-h2-size);line-height:var(--illi-type-h2-line)}
  .intro{font-size:var(--illi-type-body-size);line-height:var(--illi-type-body-line);margin-top:var(--illi-space-md)}
  .stage{margin-top:var(--illi-space-2xl)}
  .stage .player{border-radius:var(--illi-shape-md)}
  .strip-wrap{padding-block:var(--illi-space-2xl) var(--illi-space-4xl)}
  .section-head{margin-bottom:var(--illi-space-xl)}
  .features,.faq{padding-block:var(--illi-space-4xl)}
  .cards{grid-template-columns:minmax(0,1fr);gap:var(--illi-space-lg)}
  .card-art{aspect-ratio:16 / 9}
  .where{padding-block:var(--illi-space-4xl)}
  .close h2{font-size:var(--illi-type-h2-size);line-height:var(--illi-type-h2-line)}
  .where-row{gap:var(--illi-space-xl)}
  .facts{grid-template-columns:minmax(0,1fr);gap:var(--illi-space-lg)}
  .facts li{flex-direction:row;align-items:center;font-size:var(--illi-type-body-size)}
  .stories{padding-block:var(--illi-space-4xl)}
  .story{flex-basis:78vw;min-height:var(--p-story-h-phone)}
  .story-arrow.prev{left:var(--illi-space-sm)}
  .story-arrow.next{right:var(--illi-space-sm)}
  .story-side{padding:var(--illi-space-lg) var(--illi-space-md)}
  .story-mark{font-size:var(--illi-type-display-size)}
  .story-body{padding:var(--illi-space-xl) var(--illi-space-lg)}
  .story-body blockquote,.faq-item dt{font-size:var(--illi-type-body-size);line-height:var(--illi-type-body-line)}
  .faq-item{padding:var(--illi-space-lg)}
  .faq-item dd>div{font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line)}
  .close-inner{padding-block:var(--illi-space-4xl)}
  .close .trial{font-size:var(--illi-type-body-sm-size);line-height:var(--illi-type-body-sm-line)}
  .site-foot{padding-block:var(--illi-space-lg)}
  .foot-tag{flex-basis:60%}
  .foot-links{flex-basis:100%;gap:var(--illi-space-sm) var(--illi-space-lg)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.cta-note,.faq-item,.faq-item dd,.faq-item dd>div,.faq-item .chev{transition:none}
  .diagram *{animation:none!important}
  .card,.card .diagram{transition:none}
  .card:hover,.card:hover .diagram{transform:none}
  .d-mark .r1{opacity:.4}
  .strip-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:var(--illi-space-md)}
  .story-arrow{transition:none}
  .strip{mask-image:none}
}