/* The front of the bright page: the hero's words and waitlist form, the "why" columns and the Join form at the end.
   Loaded after landing-bright.css and before mobile.css; the phone rules for these parts are at the end of this file. */

/* ---------- the waitlist form: the design system's ANIMAInput and ANIMAButton side by side, drawn into the form by the page's
   script ([data-anima-ds] carries the design system's tokens); the field turns red through its own aria-invalid ---------- */
.wl { position:relative; display:flex; align-items:center; gap:8px; min-height:40px; }
.wl .in { flex:1 1 auto; width:400px; min-width:0; }
.wl .anima-in-field:-webkit-autofill, .wl .anima-in-field:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 100px #fff inset; -webkit-text-fill-color:var(--sec-ink); }
.wl.busy button { opacity:.7; pointer-events:none; }
.hero .see { display:inline-flex; }
/* the hero's and the end's words carry a shadow over the photo; the components inherit none of it */
[data-anima-ds] { text-shadow:none; }
/* what went wrong, under the row, in the row's own space so nothing below it moves */
.wl .msg { position:absolute; left:0; top:100%; margin:.4rem 0 0 .2rem; font-size:13px; line-height:1.2; font-weight:500; color:#fff; text-shadow:0 1px 12px rgba(10,30,60,.45); white-space:nowrap; pointer-events:none; }
.wl .msg:empty { display:none; }
/* the line that takes the form's place once the address is in */
/* the optional second step: a white card hung under the confirmation line, over what is below, so nothing moves */
/* the second step, in the form's one row: the question in the page's white words, the answers as the page's light buttons */
.wl-after { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .75rem; min-height:2.85rem; }
.wl-after .q { margin:0; font-size:1.05rem; line-height:1.3; font-weight:500; letter-spacing:-.01em; color:#151D20; }
.end .wl-after .q { color:#fff; text-shadow:0 2px 20px rgba(10,30,60,.4); }
.hero .wl .msg { color:#2C3A41; text-shadow:none; }
.wl-after .opts { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.wl-after .opt { margin:0; padding:.6rem .9rem; border:0; border-radius:.625rem; background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(21,29,32,.18); backdrop-filter:blur(20px);
  font-family:inherit; font-size:.95rem; font-weight:600; line-height:1.2; color:#151D20; cursor:pointer; transition:background .2s; }
.wl-after .opt:hover { background:rgba(255,255,255,.88); }
.wl-after .opt:focus-visible { outline:2px solid #42BFFF; outline-offset:2px; }

/* ---------- the hero: two plain lines, dark over the glass; the form and the trust row under them ---------- */
.hero .copy { padding-top:calc(4rem + 9vh); }
.hero .title { line-height:1.06; }
.hero .title .main, .hero .title .sub { display:block; margin:0; font-family:'Nunito Sans','Noto Sans TC',system-ui,sans-serif; font-weight:700; font-size:1em; letter-spacing:-.01em; line-height:inherit; }
.hero .title .underline { display:none; }
.hero .cta { align-items:center; }
/* desktops lower the laptop (front and win stages together, so the move into the product keeps its origin) by --drop, which
   the page's script sets so the form-to-laptop gap matches the nav-to-headline gap; the glass behind stays where it stands */
@media (min-width:1024px) { .hero .stage.front, .hero .stage.win { bottom:calc(max(120vw, calc(100vh * 2.4)) * -131 / 1774 - var(--drop, 0px)); } }
.hero .trust { display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem 0; margin-top:1.4rem; font-size:13.5px; line-height:1.2; font-weight:500; letter-spacing:-.005em; color:#55636B; white-space:nowrap; }
.hero .trust span + span::before { content:"·"; margin:0 .28em; }
.hero .trust.rise { animation-delay:1.15s; }

/* ---------- why: three columns, one comparison each ---------- */
.spirit .lead h2 { font-size:40px; }
.spirit .figs.cmp { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.spirit .fig .lbl { display:block; font:600 12px/1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.spirit .fig .lbl + h3 { margin-top:10px; }
.spirit .fig .vs { display:grid; grid-template-columns:3.4rem minmax(0, 1fr); column-gap:10px; row-gap:14px; align-items:start; margin:16px 0 0; }
.spirit .fig .vs dt { font:600 11px/2.1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.spirit .fig .vs dd { margin:0; font-size:16px; line-height:1.5; letter-spacing:-.005em; color:var(--mut); }
.spirit .fig .vs dd.us { color:var(--tx); font-weight:500; }
.spirit .fig .vs dt:nth-of-type(2) { color:#1F59E0; }


/* ---------- phones ---------- */
@media (max-width:1023px) {
  .hero .copy .title { font-size:30px; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; }
  /* the headline breaks where its two halves meet (為你與 AI agents / 打造的團隊協作 App); a half too long for the line balances on its own */
  .hero .copy .title .main, .hero .copy .title .sub { display:block; }
  .hero .copy .body { font-size:16px; max-width:none; }
  .hero .cta { flex-direction:column; align-items:stretch; width:100%; max-width:24rem; }
  .hero .cta .wl { width:100%; }
  .hero .trust { flex-direction:column; align-items:center; gap:4px; margin-top:18px; font-size:13px; white-space:normal; }
  .hero .trust span + span::before { content:none; }
  .end .row .wl { width:100%; }
  .wl .in { width:auto; }
  .hero .see { display:flex; justify-content:center; }
  .wl .msg { left:0; right:0; margin-left:0; text-align:center; }
  .wl-after .q { width:100%; text-align:center; font-size:16px; }
  .spirit .figs.cmp { grid-template-columns:1fr; }
  /* each column becomes a row: the figure at the left spans the label, the title and the comparison on the right */
  .spirit .figs .fig { grid-template-rows:auto auto 1fr; }
  .spirit .fig .art { grid-row:1 / 4; grid-column:1; }
  .spirit .fig .lbl, .spirit .fig h3, .spirit .fig .vs { grid-column:2; }
  .spirit .fig .lbl { font-size:11px; }
  .spirit .fig .lbl + h3 { margin-top:6px; }
  .spirit .fig .vs { margin-top:10px; grid-template-columns:3rem minmax(0, 1fr); row-gap:6px; }
  .spirit .fig .vs dd { font-size:15px; line-height:1.45; }
}

/* a sub-pixel transform keeps GSAP from lifting the fixed panel out of the DOM to read its matrix, which reloaded the laptop screen iframe on every slide */
.hero { transform:translate(.01px, 0); }

/* the overview's value cards: a line of body copy under each heading (replaces the old Today / ANIMA comparison) */
.spirit .fig .fd { margin:12px 0 0; font-size:16px; line-height:1.5; color:var(--mut); }
/* company context: words on the left, the architecture on the right, each layer lit in turn */
.ctxsec .cxg { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:center; }
.ctxsec .lead p { margin:16px 0 0; font-size:18px; line-height:1.55; color:var(--mut); }
.ctxsec .cxl { display:inline-block; margin-top:20px; font-weight:600; color:var(--action-primary); text-decoration:none; }
.ctxsec .cxl:hover { text-decoration:underline; }
.arch { display:grid; gap:10px; font-size:14px; line-height:1.4; color:var(--tx); }
.arch .ar { background:var(--surface-page); border:1px solid var(--border-subtle); border-radius:12px; padding:10px 14px; animation:arlit 7.5s infinite; }
.arch .ar b { display:block; font-weight:700; }
.arch .ar small { display:block; margin-top:2px; font-size:13px; color:var(--mut); }
.arch .ws { background:var(--action-primary); border-color:var(--action-primary); color:var(--text-on-action); animation:none; }
.arch .ws small { color:rgba(255,255,255,.85); }
.arch .orch { border-color:var(--action-primary); }
.arch .flow { display:flex; align-items:center; justify-content:center; gap:12px; font-size:13px; color:var(--mut); }
.arch .flow i { width:2px; height:28px; background:var(--border-default); position:relative; overflow:hidden; }
.arch .flow i::after { content:""; position:absolute; left:0; top:0; width:2px; height:9px; background:var(--action-primary); animation:flowdot 1.6s linear infinite alternate; }
.arch .wi { display:grid; gap:8px; padding:12px; border-radius:14px; background:var(--surface-subtle); }
.arch .wi-l { font-weight:700; font-size:13px; color:var(--dim); }
.arch .wi .ar:nth-of-type(2) { animation-delay:1.5s } .arch .wi .ar:nth-of-type(3) { animation-delay:3s } .arch .wi .ar:nth-of-type(4) { animation-delay:4.5s } .arch .wi .ar:nth-of-type(5) { animation-delay:6s }
@keyframes arlit { 0%, 16%, 100% { border-color:var(--border-subtle); } 5%, 11% { border-color:var(--action-primary); } }
@keyframes flowdot { to { transform:translateY(19px); } }
/* the end: the heading over the waitlist form, the demo video slot and the Mac line */
.end .txt .cta-h { margin:28px 0 0; font-size:18px; font-weight:700; }
.end .txt .cta-h + .row { margin-top:6px; }
/* under the form, one quiet note: the Mac line, as the form's footnote. The demo slot waits, out of sight, for the demo video */
.end .txt .ex { display:flex; justify-content:center; margin-top:14px; }
.end .txt .demo-slot { display:none; }
.end .txt .mac-line { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; line-height:1.4; color:rgba(255,255,255,.72); white-space:nowrap; }
.end .txt .mac-line img { width:16px; height:16px; }
@media (prefers-reduced-motion: reduce) { .arch .ar, .arch .flow i::after { animation:none; } }
@media (max-width:1023px) {
  .spirit .fig .fd { grid-column:2; margin-top:6px; font-size:15px; }
  .ctxsec .cxg { grid-template-columns:1fr; gap:28px; }
  .arch { font-size:13px; }
}
/* the launch video's dialog (the same pattern as workspace-help's picture lightbox) */
/* the close button sits in the dialog's own top padding, so it stays inside the box even when the dialog fills the window */
/* the overview's eight feature tiles fill four columns with no hole: the tiles keep their reading order (data governance
   last) and dense lets the single tools tile take the row the wide Auto Mode tile leaves, over the two tall tiles */
#features .bento { grid-auto-flow:row dense; }
/* two columns: the last tall tile spans the row, like the project tile before it */
@media (min-width:1024px) and (max-width:1199px) {
  #features .bento > .tile.tall:last-child { grid-column:span 2; grid-row:auto; }
  #features .bento > .tile.tall:last-child .tart { flex:none; height:440px; }
}
/* the three agents writing in one doc: on desktops, where the caption lies over the picture, the doc starts higher so its
   last line and the cursor parked on it clear the caption */
@media (min-width:1200px) { #features [data-feature-id="people-and-agents"] .a-cur2 .dc { top:1.2rem; } }
/* the product parts' names and lines as text in the page (landing.js reads them to draw the tabs): kept out of sight and
   out of the accessibility tree, where the live line under the tabs already speaks them */
.product .says { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* section titles at the site's size: the design system's --type-h2-desktop (34 px, 700, line-height 1.35), as the sections on
   every other page. The FAQ keeps the design system's FAQ size; the end's line is the page's sign-off, not a section title */
@media (min-width:1024px) {
  .product.scrolls .ph2, .spirit .lead h2, .gal-p .gal h2 { font-size:34px; font-weight:700; line-height:1.35; letter-spacing:0; }
}
/* why ANIMA: every width shows the three values the same way, the figure above its words, and the words at the site's sizes
   (the design system's Pillars: label 13/500, title 20/700/1.35, body 15/1.7, the lead's line 16 → 18/1.7). Phones stack the
   three; tablets and desktops set them side by side. #why only: the company-context section shares the .spirit styles */
/* a line break only phones take (the why title breaks after its first clause there) */
@media (min-width:768px) { br.m { display:none; } }
/* the title and its line centred, as the site's centred section heads (the design system's HoverList: 12 px gap, 16 → 15 px at 1.6, 640 px wide) */
#why .lead, #why .lead h2 { text-align:center; }
#why .lead { margin-left:auto; margin-right:auto; }
#why .lead p { max-width:640px; margin:12px auto 0; font:400 16px/1.6 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:0; }
#why .fig .lbl { font:500 13px/1.4 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:0; text-transform:none; color:#1F59E0; }
#why .fig .lbl + h3 { margin-top:14px; }
#why .fig h3 { font:700 20px/1.35 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:0; text-wrap:pretty; }
#why .fig .fd { margin-top:12px; font-size:15px; line-height:1.7; text-wrap:pretty; }
/* the three as cards on the section's sand-50: sand-100 at 70% with a sand-200 hairline (the drawings' plates take the blend, #FCF5E8), the figure centred over its words. Static, so no hover */
#why .figs, #why .figs.cmp { gap:20px; }
#why .fig, #why .fig:first-child { padding:28px 28px 32px; background:rgba(253,244,228,.7); border:1px solid var(--sand-200, #F5E8D0); border-radius:20px; }
#why .fig .art { --hairline-plate:#FCF5E8; align-self:center; width:85%; max-width:none; margin:0 auto 20px; }
/* each drawing sits off-centre in its 400×320 frame (measured by the drawn shapes, moon and sun included): nudge it back to the middle */
#why .art[data-fig="away"] svg { transform:translate(11.5%, 4.4%); }
#why .art[data-fig="context"] svg { transform:translateY(-5.8%); }
#why .art[data-fig="sheet"] svg { transform:translateY(5.9%); }
@media (max-width:1023px) {
  /* phones and tablets set the title and its line flush left, as the site's other stacked sections */
  #why .lead, #why .lead h2 { text-align:left; }
  #why .lead p { margin-left:0; margin-right:0; font-size:15px; }
  #why .figs, #why .figs.cmp { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin-top:32px; }
  #why .fig, #why .fig:first-child { display:flex; flex-direction:column; padding:24px 20px 28px; }
  #why .fig .art { width:85%; max-width:none; margin:0 auto 16px; }
  #why .fig .fd { margin-top:12px; font-size:15px; }
  #why { padding-bottom:88px; }
}
@media (max-width:767px) {
  #why .figs, #why .figs.cmp { grid-template-columns:1fr; gap:16px; }
}

/* one content width for every wide section on desktops: the product tour, why, the features gallery and company context all
   sit in min(1280 px, the window less 64 px a side), and the section dial on the right sits in the middle of the margin that
   leaves (half the margin from the edge, less half the dial's 2.75 rem width), never further in than 40 px. FAQ and the closing keep their narrow text column */
@media (min-width:1024px) {
  .product .pfit, .spirit .wrap, .gal-p .gal { width:min(1280px, 100% - 128px); }
  /* centred in the margin up to 1440 px wide (an 80 px margin, the dot 40 px in); wider, it stays locked 40 px from the edge */
  body .ctr { right:min(calc((100vw - min(1280px, 100vw - 128px)) / 4 - 1.375rem), calc(40px - 1.375rem)); }
  /* the section name sits 8 px off the dot's ring (the lit dot is 10 px with a 3 px ring) */
  body .ctr button span { right:calc(50% + 20px); }
}

/* the end's words, Nami and the laptop's live screen each hold a compositing layer from the start: the words fading in one
   by one (landing.js) would otherwise be lifted onto new layers mid-reveal, and every such change repaints the laptop's
   screen (an iframe under a 3D transform), which shows as a blink */
@media (min-width:1024px) {
  .end .txt > *, .end .foot, .end .buddy { will-change:opacity, transform; }
  /* the laptop's screen slides in from below the fold, where the browser stops painting the live app; its first frame back
     shows what is under it, so under it is a still of the same screen (screen-still.jpg, taken from assets/screen/index.html) */
  .end .fscr { will-change:transform; background:#EEF2F8 url(screen-still.jpg) 0 0 / 100% 100% no-repeat; }
}


/* desktop: the centred frames (why, company context) centre their content in the screen below the site's 72 px nav, not
   in the whole screen, which left them sitting high */
@media (min-width:1024px) {
  .panel.spirit { box-sizing:border-box; padding-top:72px; }
}

/* desktop: the end's shade rides with its shot as the FAQ and the end roll as one section (landing.js sets --roll) */
@media (min-width:1024px) { .end::after { transform:translateY(var(--roll, 0px)); } }

/* the launch film, on the design system's flowing-glass ring (flow 03, the still it names for
   centred content). The film sits in the design system's frosted glass frame (the Hero's: 10 px of white glass, a white
   hairline and a soft shadow) and runs as wide as the other frames' content. --z zooms the ground for the way in (landing.js).
   The poster is the only clickable thing, so it has a hover */
.filmsec { background:#EEF3F8 url(/ds/design-system/assets/images/flow/flow-03-topdown-ring-1x1.webp) center / calc(max(100vw, 100vh) * var(--z, 1)) no-repeat; }
.filmsec .vid { position:relative; width:100%; margin:0 auto; padding:10px; box-sizing:border-box; border-radius:22px;
  background:rgba(255,255,255,.32); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 32px 80px -32px rgba(34,45,51,.28); }
.filmsec .vid::before { content:""; display:block; aspect-ratio:16 / 9; }
.filmsec .player { position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:12px; object-fit:cover; background:#0B1430; display:block; }
/* the sound hint: a dark frosted pill at the film's upper left, clear of the player's own controls along the bottom; it goes
   once the sound is on */
.filmsec .snd { position:absolute; left:30px; top:30px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border:0; border-radius:999px;
  background:rgba(21,29,32,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  color:#fff; font:600 14px/1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; cursor:pointer; transition:background .2s; animation:snd-in .5s 1s both cubic-bezier(.2,.8,.2,1); }
.filmsec .snd[hidden] { display:none; }
.filmsec .snd:hover { background:rgba(21,29,32,.8); }
.filmsec .snd:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.filmsec .snd svg { width:20px; height:20px; fill:#fff; } .filmsec .snd .x { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
@keyframes snd-in { from { opacity:0; transform:translateY(-8px); } }
@media (max-width:1023px) {
  /* phones and tablets: the film runs edge to edge, with no glass frame, no corners and no shadow */
  .filmsec .vid { width:100vw; margin:24px 0 0 calc(50% - 50vw); padding:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .filmsec .player { inset:0; width:100%; height:100%; border-radius:0; }
  .filmsec .snd { left:20px; top:20px; height:36px; font-size:13px; }
}

/* desktop: the film's frame keeps a transform of its own (a hundredth of a pixel), as the product frame does: GSAP lifts a fixed
   frame with no transform out of the page to read its matrix on every slide, and taking a playing film out of the page
   stops it */
@media (min-width:1024px) { .filmsec { transform:translate(.01px, 0); } }

/* phones and tablets stack the frames: the film's ground carries the product's pale blue (where its wash ends, #E3ECF5) back
   to the sand that why starts on (#FAF7F0), so the second, third and fourth frames read as one ground */
/* …and the film's frame casts its shadow over the top of why instead of being cut off at the seam (the film frame sits above it) */
@media (max-width:1023px) { #film.panel { position:relative; z-index:3; background:linear-gradient(180deg, #E3ECF5 0%, #FAF7F0 70%); } }

/* the film's title shows on phones and tablets only (flush left, as the other stacked sections); desktops give the film the
   whole screen */
@media (min-width:1024px) { #film .lead { display:none; } }

/* company context sits between the features' dusk (the gallery ends on Current 900) and the FAQ's night sky, on Current 900:
   the design system's colour nearest that sky, so the three read as evening falling */
#context.panel { background:var(--current-900, #0D255E); }
#context .cxl { color:var(--anima-sky-300, #80D4FF); } /* the fallback link until the design system's text button replaces it */

/* phones and tablets stack the frames at fractional heights, so the row of pixels where two meet is only partly covered by
   either and the page's pale ground shows through as a hairline (plain on dark frames). Each frame tucks 1 px up under the
   one before it, so that row always has a frame behind it */
@media (max-width:1023px) { main > .panel ~ .panel { margin-top:-1px; } }

/* phones and tablets: Nami is back, as on desktops: centred over the title, the words under it. Its drawing fills its canvas
   from 13% to 94.5% of the height, so the drawn Nami starts 88 px below the FAQ (the stacked frames' top space) and the title
   follows 36 px under it (room for its float). --nh is the canvas height (808 × 690 artwork) */
@media (max-width:1023px) {
  #download { --nw:min(36vw, 200px); --nh:calc(var(--nw) * 690 / 808); }
  #download .buddy { display:block !important; width:var(--nw); left:50% !important; top:calc(88px - var(--nh) * .13) !important; }
  #download .txt { top:calc(88px + var(--nh) * .815 + 36px); }
}

/* ---------- company context: one task's walk up through the layers ----------
   Seven stops (the incoming message, then each layer from the bottom up). The stage holds while the trace under it scrolls:
   inside the frame on desktops (the frame scrolls itself, as the product tour does), with the page on phones. A light climbs
   the rail between the stops; the lit layer and the words beside it change at the nearest stop (landing.js runs it).
   Design-system colours only: Current 900 ground, Current 500 Workspace bar, Sky 300 / Sky 100 accents */
@media (min-width:1024px) {
  #context.panel { display:block; padding:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; transform:translate(.01px, 0); }
  #context.panel::-webkit-scrollbar { display:none; }
}
.ct-trace { position:relative; height:calc(100vh + 6 * 55vh); }
.ct-stage { position:sticky; top:0; height:100vh; display:flex; align-items:center; padding-top:72px; box-sizing:border-box; }
.ct-wrap { width:min(1280px, 100% - 128px); margin:0 auto; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:72px; align-items:center; color:#fff; }
.ct-h { margin:0; font:700 34px/1.35 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:0; color:#fff; }
.ct-lead { margin:16px 0 0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.8); max-width:30em; }
#context .cxl, #context .cxl-btn { display:inline-block; margin-top:20px; }
/* the steps share one grid cell, so the box is as tall as the longest step (no fixed height to leave a gap under a short one) */
.ct-steps { position:relative; margin-top:40px; display:grid; }
.ct-step { grid-area:1 / 1; opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.ct-step.on { opacity:1; transform:none; }
.ct-step .k { font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--anima-sky-300, #80D4FF); }
.ct-step h3 { margin:10px 0 0; font:700 24px/1.35 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; color:#fff; }
.ct-step p { margin:10px 0 0; font-size:16px; line-height:1.7; color:rgba(255,255,255,.8); max-width:28em; }
/* the progress bars are buttons: a 3 px bar in a taller hit area; a click walks the task to that layer */
.ct-prog { display:flex; margin:16px 0 0 -3px; }
.ct-prog button { padding:12px 3px; border:0; background:none; cursor:pointer; }
.ct-prog i { display:block; width:28px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); transition:background .3s, transform .2s; }
.ct-prog button:hover i { background:rgba(255,255,255,.45); transform:scaleY(1.6); }
.ct-prog button.on i { background:var(--anima-sky-300, #80D4FF); }
.ct-prog button:focus-visible { outline:2px solid var(--anima-sky-300, #80D4FF); outline-offset:-2px; border-radius:4px; }
.ct-stack { position:relative; padding-left:34px; }
.ct-rail { position:absolute; left:11px; width:2px; background:rgba(255,255,255,.12); border-radius:1px; }
.ct-rail i { position:absolute; left:0; bottom:0; width:2px; border-radius:1px; background:linear-gradient(var(--anima-sky-300, #80D4FF), rgba(128,212,255,.25)); }
.ct-dot { position:absolute; left:12px; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(128,212,255,.35), 0 0 22px 6px rgba(128,212,255,.55); }
.ct-row { position:relative; display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.05); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:background .35s, box-shadow .35s, opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); opacity:.5; cursor:pointer; }
.ct-row b { font-size:15px; font-weight:700; white-space:nowrap; }
.ct-row small { font-size:13px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ct-row .did { margin-left:auto; flex:none; font-size:12px; font-weight:600; color:var(--anima-sky-100, #C4EBFF); padding:4px 10px; border-radius:999px; background:rgba(128,212,255,.14);
  opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .45s; }
.ct-row.done { opacity:.9; }
.ct-row.done .did { opacity:.75; transform:none; }
.ct-row.on { opacity:1; background:rgba(128,212,255,.13); box-shadow:inset 0 0 0 1px var(--anima-sky-300, #80D4FF), 0 12px 32px -14px rgba(66,191,255,.6); transform:translateX(4px); }
.ct-row.on .did { opacity:1; transform:none; }
.ct-ws { background:var(--current-500, #1F59E0); box-shadow:none; opacity:.55; }
.ct-ws small { color:rgba(255,255,255,.85); }
.ct-ws.on { background:var(--current-500, #1F59E0); box-shadow:0 0 0 1px var(--anima-sky-300, #80D4FF), 0 16px 40px -14px rgba(31,89,224,.9); }
.ct-ok { margin-left:auto; flex:none; padding:7px 12px; border-radius:6px; background:#fff; color:var(--current-500, #1F59E0); font-size:13px; font-weight:700; opacity:0; transition:opacity .35s; }
.ct-ws.on .ct-ok { opacity:1; }
.ct-tray { margin-top:14px; padding:12px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); display:grid; gap:8px; }
.ct-tray > span { font-size:12px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.55); padding:2px 4px; }
.ct-src { margin-top:14px; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px dashed rgba(255,255,255,.22);
  font-size:13px; color:rgba(255,255,255,.75); cursor:pointer; transition:border-color .35s, background .35s; }
.ct-src.on { border-color:var(--anima-sky-300, #80D4FF); background:rgba(128,212,255,.08); color:#fff; }
.ct-src b { font-weight:700; color:#fff; }
.ct-stack [data-s]:not(.on):hover { opacity:.85; background:rgba(255,255,255,.09); }
.ct-stack .ct-ws:not(.on):hover { background:var(--current-500, #1F59E0); }
.ct-stack [data-s]:focus-visible { outline:2px solid var(--anima-sky-300, #80D4FF); outline-offset:2px; }
/* the build when the section first comes on: the message pops in, the tray fades up, the layers grow from the bottom up, the
   Workspace lands on top, the rail draws itself up and the light appears by the message. The stack is hidden until then */
.ct-stack.ct-pre { visibility:hidden; }
.ct-stack.ct-in .ct-src { animation:ct-pop .6s cubic-bezier(.2,.9,.3,1.35) both; }
.ct-stack.ct-in .ct-tray { animation:ct-fade .5s ease .35s backwards; }
.ct-stack.ct-in .ct-tray .ct-row { animation:ct-rise .5s cubic-bezier(.2,.8,.2,1) backwards; }
.ct-stack.ct-in .ct-tray .ct-row[data-s="1"] { animation-delay:.45s; } .ct-stack.ct-in .ct-tray .ct-row[data-s="2"] { animation-delay:.54s; }
.ct-stack.ct-in .ct-tray .ct-row[data-s="3"] { animation-delay:.63s; } .ct-stack.ct-in .ct-tray .ct-row[data-s="4"] { animation-delay:.72s; }
.ct-stack.ct-in .ct-tray .ct-row[data-s="5"] { animation-delay:.81s; }
.ct-stack.ct-in .ct-ws { animation:ct-rise .55s cubic-bezier(.2,.8,.2,1) 1s backwards; }
.ct-stack.ct-in .ct-rail { transform-origin:50% 100%; animation:ct-grow .6s cubic-bezier(.4,0,.2,1) 1.15s backwards; }
.ct-stack.ct-in .ct-dot { animation:ct-pop .45s cubic-bezier(.2,.9,.3,1.35) 1.55s backwards; }
@keyframes ct-pop { from { opacity:0; transform:translateY(22px) scale(.9); } }
@keyframes ct-fade { from { opacity:0; } }
@keyframes ct-rise { from { opacity:0; transform:translateY(14px); } }
@keyframes ct-grow { from { transform:scaleY(0); } }
/* phones and tablets: the same walk with the page's own scroll, full width, the title, then the stack, then the step's words */
@media (max-width:1023px) {
  #context.panel { padding-top:0; padding-bottom:0; }
  .ct-trace { height:calc(100svh + 6 * 60svh); }
  /* the block is centred in the screen below the nav (72 px), never scaled: on short screens it sheds what repeats (below),
     and should it still not fit it starts under the nav instead of running up behind it */
  .ct-stage { align-items:safe center; height:100svh; padding:72px 0 12px; }
  .ct-wrap { width:calc(100% - 32px); margin:0 16px; grid-template-columns:minmax(0, 1fr); gap:16px; }
  .ct-left { display:contents; }
  .ct-h { font-size:22px; order:0; } .ct-lead { display:none; }
  #context .cxl, #context .cxl-btn { order:3; margin-top:0; }
  .ct-steps { order:2; margin-top:4px; }
  .ct-prog { display:none; }
  .ct-step h3 { font-size:19px; margin-top:6px; } .ct-step p { font-size:15px; line-height:1.6; margin-top:6px; }
  /* the rail and its light run down the right-hand side below desktop sizes */
  .ct-stack { order:1; padding:0 28px 0 0; margin-top:8px; } /* 16 px grid gap + 8: the title sits 24 px over the stack, as the film's and the features' titles do */ .ct-rail { left:auto; right:8px; } .ct-dot { left:auto; right:2px; margin:-7px 0 0; }
  .ct-row.on { transform:translateX(-4px); }
  .ct-row { padding:9px 12px; gap:10px; } .ct-row b { font-size:14px; } .ct-row small { display:none; } .ct-row .did { font-size:11px; padding:3px 8px; }
  .ct-tray { padding:8px; gap:6px; margin-top:10px; } .ct-src { margin-top:10px; padding:9px 12px; font-size:12px; }
}
/* short phones keep every size and drop what repeats instead: the step's eyebrow (the lit layer already names it) and the
   title's break (one line at 22 px); on the shortest, the tray's own label too */
@media (max-width:1023px) and (max-height:760px) {
  #context .ct-h { font-size:22px; } .ct-h br.m { display:none; }
  .ct-step .k { display:none; } .ct-step h3 { margin-top:0; }
}
@media (max-width:1023px) and (max-height:640px) { .ct-tray > span { display:none; } }
@media (prefers-reduced-motion: reduce) { .ct-step, .ct-row, .ct-row .did { transition:none; } }