/* The secretary home, v3. Everything below the film.
   Scoped to .secretary-v2 except the one nav rule noted below. */

/* The film's own captions are large and light, and the fixed bar was
   translucent, so headings ghosted through the wordmark at every width.
   On this page the bar is opaque from the first pixel. */
.nav,.nav.solid{background:#07080B}

.secretary-v2{--v2-gold:#D7B765;--v2-line:#30333A;--v2-secondary:#ADB2BE;--v2-body:#D2D6DE;background:#0B0C10;color:#F2F0EA}
.v2-wrap{width:min(1240px,calc(100% - 2 * var(--gut)));margin-inline:auto}
.secretary-v2 h2,.secretary-v2 h3{font-family:var(--display);font-weight:600;line-height:1.2;letter-spacing:-.035em;text-wrap:balance;margin:0}
.secretary-v2 h2{font-size:clamp(32px,4.6vw,64px)}
.secretary-v2 p{margin:0;line-height:1.7;text-wrap:pretty}
.secretary-v2 a{text-underline-offset:5px}
.secretary-v2 button{font-family:inherit}
.secretary-v2 button:focus-visible,.secretary-v2 a:focus-visible{outline:2px solid currentColor;outline-offset:5px}

.v2-cta{display:inline-flex;gap:38px;justify-content:space-between;align-items:center;background:var(--v2-gold);color:#1A1407;font-weight:600;font-size:15px;line-height:1;min-height:50px;padding:17px 24px;border-radius:4px;text-decoration:none;transition:background .2s ease,transform .2s ease}
.v2-cta span{font-size:21px;font-weight:400}
.v2-cta:hover{background:#e6c87c;transform:translateY(-2px)}

/* --- 1. The invitation, straight out of the film ----------------------- */
#case.invitation{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,4.6vw,72px);align-items:center;
  padding-block:88px 64px;scroll-margin-top:80px;
}
.invitation-text{min-width:0}
.invitation h2{font-size:clamp(36px,5vw,68px)}
.invitation h2 span{color:var(--v2-gold)}
.secretary-v2 .invitation-lead{margin-top:26px;font-size:18px;color:var(--v2-body);max-width:48ch}
.invitation-acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.secretary-v2 .invitation-note{font-size:14px;color:var(--v2-secondary);max-width:42ch}
.secretary-v2 .stats{
  margin-top:36px;padding-top:26px;border-top:1px solid var(--v2-line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.stat-num{
  display:flex;align-items:baseline;flex-wrap:wrap;column-gap:7px;
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(30px,3vw,42px);line-height:1.05;color:var(--v2-gold);
}
.stat-unit{font-family:var(--body);font-weight:400;font-size:15px;color:var(--v2-body)}
.secretary-v2 .stat-label{margin-top:8px;font-size:13.5px;color:var(--v2-secondary);max-width:20ch;line-height:1.5}
.secretary-v2 .stats-note{margin-top:22px;font-size:13.5px;color:var(--v2-secondary);max-width:60ch}

/* --- 1b. The thread mockup: a real-looking product screenshot ---------- */
.thread-card{
  min-width:0;width:100%;max-width:560px;
  background:#14161C;border:1px solid #2A2E37;border-radius:8px;
  overflow:hidden;
}
.thread-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#0F1116;border-bottom:1px solid #2A2E37;padding:14px 18px;
}
.thread-card__subject{display:flex;align-items:baseline;gap:8px;min-width:0}
.thread-card__subject-text{
  font-weight:600;font-size:15px;color:#F2F0EA;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thread-card__count{font-size:13px;color:var(--v2-secondary);flex:none}
.thread-card__addr{
  flex:none;font-family:var(--mono);font-size:12px;color:var(--v2-secondary);
  padding:4px 10px;border:1px solid #2A2E37;border-radius:999px;
}
.thread-card__body{display:flex;flex-direction:column}
.thread-card__body>*{opacity:1;transform:none}
.msg{display:flex;gap:14px;padding:18px;border-bottom:1px solid #2A2E37}
.thread-card__body>.msg:last-child{border-bottom:0}
.msg--final{background:rgba(215,183,101,.06)}
.msg-avatar{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;line-height:1;
}
.msg-avatar--you{background:#2A2E37;color:#F2F0EA}
.msg-avatar--secretary{background:var(--v2-gold);color:#1A1407}
.msg-body{min-width:0;flex:1 1 auto}
.msg-line1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.msg-name{font-weight:600;font-size:14.5px;color:#F2F0EA}
.msg-time{font-family:var(--mono);font-size:12px;color:var(--v2-secondary)}
.msg-text{margin-top:4px;font-size:16px;line-height:1.6;color:#F2F0EA}
.msg-gap{display:flex;align-items:center;gap:14px;padding:8px 18px}
.msg-gap__line{flex:none;width:34px;display:flex;justify-content:center}
.msg-gap__line::before{content:"";display:block;width:0;height:22px;border-inline-start:1px dashed #3A3E48}
.msg-gap__text{font-size:13px;color:var(--v2-secondary)}
.msg-choices{display:flex;flex-wrap:nowrap;gap:8px;margin-top:12px}
.msg-choice{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:13.5px;padding:8px 14px;border-radius:4px;
}
.msg-choice--go{background:var(--v2-gold);color:#1A1407;font-weight:600}
.msg-choice--stop{background:transparent;border:1px solid #3A3E48;color:#F2F0EA}
.msg-file{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  border:1px solid #2A2E37;border-radius:4px;padding:6px 10px;
}
.msg-file__icon{flex:none;color:var(--v2-secondary)}
.msg-file__name{font-family:var(--mono);font-size:12.5px;color:#F2F0EA}
.msg-file__check{flex:none;color:var(--v2-gold)}
.thread-card__foot{padding:10px 18px;border-top:1px solid #2A2E37;font-size:12px;color:var(--v2-secondary)}

/* Entrance, once: JS arms the card off-screen-only, then the observer in
   page.js adds .thread-in the moment 40% of it is visible. No JS, no
   IntersectionObserver, or prefers-reduced-motion (media query at the foot
   of this file) all leave .thread-armed unset, so the rules above already
   show every row in place. */
.thread-armed .thread-card__body>*{
  opacity:0;transform:translateY(10px);
  transition:opacity .42s cubic-bezier(.25,1,.5,1),transform .42s cubic-bezier(.25,1,.5,1);
}
.thread-armed .thread-card__body>:nth-child(1){transition-delay:0s}
.thread-armed .thread-card__body>:nth-child(2){transition-delay:.35s}
.thread-armed .thread-card__body>:nth-child(3){transition-delay:.7s}
.thread-armed .thread-card__body>:nth-child(4){transition-delay:1.05s}
.thread-in .thread-card__body>*{opacity:1;transform:translateY(0)}

/* --- 2. How it works: the three-step diagram --------------------------- */
.howto{padding-block:100px 80px}
.howto>h2{font-size:clamp(29px,3.8vw,48px);margin-bottom:40px}

/* A cream paper panel: the only place on this page that reverses to ink on
   light. The step icons are black-ink line art, drawn for this background. */
.dia{background:#F2F0EA;color:#17181E;border-radius:6px;padding:clamp(24px,4vw,56px)}
.dia-row{position:relative;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:20px}
.dia-col{min-width:0;text-align:center}
.dia-fig{display:block;height:clamp(140px,16vw,200px);width:auto;margin-inline:auto}
.dia-step{margin-top:18px;font-weight:600;font-size:clamp(18px,1.6vw,22px)}
.dia-num{color:#7F621D}
.dia-sheet{margin-top:12px;padding:14px 16px;background:#fff;border:1px solid rgba(23,24,30,.18);border-radius:4px;font-size:16px;line-height:1.6;text-align:start}
.dia-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;row-gap:8px;text-align:start}
.dia-list li{display:flex;align-items:center;gap:10px}
.dia-icon{height:22px;width:auto;flex:none}
.dia-list span{font-size:15.5px}
.dia-caption{margin-top:8px;font-size:14px;color:#5A5C66}

/* The two step arrows. Drawn pointing toward increasing x; RTL flips them so
   the head always points the way the page reads. */
.dia-arrow{align-self:start;margin-top:90px;width:120px}
.dia-arrow svg{display:block;width:100%;height:auto}
.dia-draw{stroke-dasharray:1;stroke-dashoffset:0}
.dia-head{opacity:1;transform-origin:center}
[dir="rtl"] .dia-arrow svg{transform:scaleX(-1)}

/* The envelope that appears to travel from column to column. Hidden until
   the diagram animates; centered on its own inset-inline-start mark by a
   negative logical margin, so RTL mirrors it for free. */
.dia-travel{position:absolute;top:104px;inset-inline-start:12%;margin-inline-start:-13px;width:26px;height:auto;opacity:0;pointer-events:none}

.dia-return{margin-top:28px}
/* The curve keeps its own aspect ratio (preserveAspectRatio stays "meet", per
   design: a stretched curve would flatten). Capping the track to that same
   ratio means the check mark, anchored to the track's own edge, always lands
   where the curve actually ends instead of floating past it. */
.dia-return__track{position:relative;height:58px;width:min(100%,600px);margin-inline:auto}
.dia-return__track svg{display:block;width:100%;height:58px}
[dir="rtl"] .dia-return__track svg{transform:scaleX(-1)}
.dia-check{position:absolute;top:0;inset-inline-end:0;height:30px;width:auto;opacity:1}
.dia-check--inline{display:none}
.dia-result{margin-top:8px;text-align:center;font-size:16.5px}
.dia-result b{font-weight:600}

/* Entrance, once. Off by default (and with no JS or reduced motion the rules
   above already show the finished, fully-drawn diagram); the observer in
   page.js adds .dia-in once the panel is a third visible. The timeline runs
   a single time and holds its last frame (iteration-count:1, fill-
   mode:forwards) rather than looping every 8s, so the diagram reads as an
   explainer that finishes, not an ambient loop. */
.dia-in .dia-draw--1{animation:dia-draw-1 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-head--1{animation:dia-head-1 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-draw--2{animation:dia-draw-2 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-head--2{animation:dia-head-2 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-draw--3{animation:dia-draw-3 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-head--3{animation:dia-head-3 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-travel{animation:dia-travel-move 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}
.dia-in .dia-return__track .dia-check{animation:dia-check-in 8s ease-out;animation-iteration-count:1;animation-fill-mode:forwards}

@keyframes dia-draw-1{0%{stroke-dashoffset:1}15%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes dia-head-1{0%,15%{opacity:0}17.5%,100%{opacity:1}}
@keyframes dia-draw-2{0%,20%{stroke-dashoffset:1}35%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes dia-head-2{0%,35%{opacity:0}37.5%,100%{opacity:1}}
@keyframes dia-draw-3{0%,52.5%{stroke-dashoffset:1}70%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes dia-head-3{0%,70%{opacity:0}72.5%,100%{opacity:1}}
@keyframes dia-check-in{0%,67.5%{opacity:0;transform:scale(.7)}72.5%,100%{opacity:1;transform:scale(1)}}
@keyframes dia-travel-move{
 0%{opacity:0;inset-inline-start:12%}
 2.5%{opacity:1;inset-inline-start:12%}
 17.5%{opacity:1;inset-inline-start:50%}
 20%{opacity:1;inset-inline-start:50%}
 37.5%,100%{opacity:1;inset-inline-start:88%}
}

/* --- 3. Two more things, side by side ----------------------------------- */
.uses{padding-block:112px 96px}
.uses>h2{font-size:clamp(29px,3.8vw,48px);margin-bottom:48px}
/* Two blocks, side by side on desktop, each its own copy-above-panel column
   (single column, stacked, on phones - see the 760px query below). */
.uses-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,72px)}
.use{display:flex;flex-direction:column;gap:28px}
.use-copy h3{font-size:clamp(25px,3.1vw,38px)}
.secretary-v2 .use-copy p{margin-top:20px;font-size:17px;color:var(--v2-secondary);max-width:44ch}

/* A designed composition, never a screenshot: a dark stage with a faint
   grid, holding one mail-like fragment card set in the page's own type.
   Brand-guide §6 v3. */
.panel{
  position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:8px;
  background-color:#14161C;border:1px solid #2A2E37;
  background-image:
    linear-gradient(rgba(242,240,234,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,240,234,.045) 1px,transparent 1px);
  background-size:32px 32px;
  padding:clamp(18px,3vw,36px);
  display:grid;place-items:center;
}
.frag{width:min(100%,420px);background:#0F1116;border:1px solid #2A2E37;border-radius:6px;padding:18px 20px}
.frag-head{display:flex;align-items:center;justify-content:space-between;column-gap:12px;row-gap:4px;flex-wrap:wrap}
.frag-kicker{font-size:13px;font-weight:600;color:var(--v2-gold)}
.frag-time{font-family:var(--mono);font-size:12px;color:var(--v2-secondary)}
.frag-subject{margin-top:10px;font-weight:600;font-size:16px;line-height:1.4;color:#F2F0EA}
.frag-subject--lg{font-size:18px}
.frag-rows{margin-top:14px}
.frag-row{display:flex;gap:10px;align-items:baseline;padding-block:4px}
.frag-row__label{flex:none;width:4.5em;font-size:12.5px;color:var(--v2-secondary)}
.frag-row__value{font-size:14.5px;color:#F2F0EA}
.frag-note{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--v2-secondary)}
.frag-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* Reminder: a pill-shaped day badge whose two words occupy the same grid
   cell so it crosses over instead of resizing the pill. */
.frag-badge{position:relative;display:inline-grid;padding:5px 12px;border-radius:999px;background:rgba(215,183,101,.14);border:1px solid rgba(215,183,101,.35)}
.frag-badge__before,.frag-badge__after{grid-area:1/1;font-size:12.5px;font-weight:500;white-space:nowrap}
.frag-badge__before{opacity:0;color:var(--v2-secondary)}
.frag-badge__after{opacity:1;color:var(--v2-gold)}

/* Summary: results as a label beside a muted placeholder bar, never an
   invented figure. */
.frag-results{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.frag-result{display:grid;grid-template-columns:1fr minmax(64px,120px);align-items:center;column-gap:16px}
.frag-result__label{font-size:14px;color:#F2F0EA}
.frag-bar{--bar-w:60%;display:block;height:8px;border-radius:8px;background:#2A2E37;width:var(--bar-w)}
.frag-seal{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--v2-secondary)}
.frag-seal__check{flex:none;color:var(--v2-gold)}

/* Entrance, once per panel: the observer in page.js adds .panel-in the
   moment a panel is a third visible. No JS, no IntersectionObserver, or
   prefers-reduced-motion (media query at the foot of this file) all leave
   the rules above in their finished state: rows and pills visible, the
   badge already reading its final word, bars already at width. */
.panel-in .frag-row{animation:frag-row-in .4s ease-out backwards}
.panel-in .frag-row:nth-child(1){animation-delay:0s}
.panel-in .frag-row:nth-child(2){animation-delay:.12s}
.panel-in .frag-row:nth-child(3){animation-delay:.24s}
.panel-in .frag-choices .msg-choice{animation:frag-pill-in .3s cubic-bezier(.34,1.56,.64,1) backwards}
.panel-in .frag-choices .msg-choice:nth-child(1){animation-delay:.42s}
.panel-in .frag-choices .msg-choice:nth-child(2){animation-delay:.48s}
.panel-in .frag-choices .msg-choice:nth-child(3){animation-delay:.54s}
.panel-in .frag-choices .msg-choice:nth-child(4){animation-delay:.6s}
.panel-in .frag-badge__before{animation:frag-badge-before 1s ease backwards}
.panel-in .frag-badge__after{animation:frag-badge-after 1s ease backwards}
.panel-in .frag-bar{animation:frag-bar-in .5s ease-out backwards}
.panel-in .frag-result:nth-child(1) .frag-bar{animation-delay:0s}
.panel-in .frag-result:nth-child(2) .frag-bar{animation-delay:.18s}
.panel-in .frag-result:nth-child(3) .frag-bar{animation-delay:.36s}

@keyframes frag-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes frag-pill-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes frag-badge-before{0%{opacity:1}55%{opacity:1}100%{opacity:0}}
@keyframes frag-badge-after{0%{opacity:0}55%{opacity:0}100%{opacity:1}}
@keyframes frag-bar-in{from{width:0}to{width:var(--bar-w)}}

/* The frag card is fixed content in a variable box: keep it comfortably
   inside the panel's aspect-ratio at the two-column tablet width and on
   phones, where there is the least headroom. */
@media(max-width:900px){
 .panel{padding:16px}
 .frag{padding:14px 16px}
 .frag-subject{font-size:14.5px}
 .frag-subject--lg{font-size:16px}
 .frag-rows{margin-top:8px}
 .frag-row{padding-block:2px}
 .frag-note{margin-top:10px}
 .frag-choices{margin-top:10px;gap:6px}
 .frag-choices .msg-choice{padding:6px 11px;font-size:12.5px}
 .frag-results{margin-top:10px;gap:8px}
}
/* The two-column zone above the single-column breakpoint gives each panel
   its narrowest column of all: a taller-than-4:3 stage keeps the fixed
   amount of fragment text (worst case: the four-pill task card) inside it
   without clipping. */
@media(min-width:761px) and (max-width:900px){
 .panel{aspect-ratio:3/4}
}

/* --- 4. What makes it different, four short rows ----------------------- */
.diff{padding-block:96px 88px}
.diff>h2{font-size:clamp(29px,3.8vw,48px);margin-bottom:40px}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.diff-item{display:flex;gap:24px;align-items:flex-start}
.diff-fig{flex:none;width:112px;height:112px;padding:12px;border-radius:6px;background:#F2F0EA}
.diff-fig img{display:block;width:100%;height:100%;object-fit:contain}
.diff-copy{min-width:0}
.diff-copy h3{font-size:clamp(20px,2vw,26px)}
.secretary-v2 .diff-copy p{margin-top:8px;font-size:16px;color:var(--v2-secondary)}

/* --- 4b. The platform underneath: five capabilities, five designed
   visuals. One lead block (workflow canvas) plus a 2x2 grid of medium
   visuals, each in a different composition so the row reads varied
   rather than four repeats of one card. Brand guide §6/§7 v3. */
.platform{padding-block:100px 96px}
.platform-head{max-width:640px;margin-bottom:clamp(40px,4.8vw,56px)}
.platform-head>h2{font-size:clamp(30px,3.8vw,46px)}
.secretary-v2 .platform-lead{margin-top:20px;font-size:17px;color:var(--v2-body);max-width:46ch}
.v2-cta--ghost{background:transparent;color:var(--v2-gold);border:1px solid var(--v2-gold)}
.v2-cta--ghost:hover{background:var(--v2-gold);color:#1A1407}
.platform>.v2-cta--ghost{margin-top:48px}

.pillar{min-width:0;display:flex;flex-direction:column}
.pillar>h3{margin-top:20px;font-size:20px}
.secretary-v2 .pillar>p{margin-top:8px;font-size:15.5px;color:var(--v2-secondary);max-width:42ch}

/* The lead pillar: copy at 40%, its visual at 60%, centred against each
   other rather than pinned to the top (the copy is usually the shorter
   of the two blocks). */
.pillar--lead{display:grid;grid-template-columns:40% 1fr;gap:clamp(28px,3.6vw,56px);align-items:center;margin-bottom:clamp(40px,4.8vw,64px)}
.pillar--lead .pillar-copy{min-width:0}
.pillar--lead .pillar-copy h3{font-size:clamp(22px,2.4vw,28px)}
.secretary-v2 .pillar--lead .pillar-copy p{margin-top:14px;font-size:16.5px;color:var(--v2-secondary);max-width:40ch}
.pillar--lead .pillar-visual{min-width:0}

/* Pillars 2-5: visual on top, copy under it, four different compositions
   in one 2x2 grid. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.8vw,32px)}

/* Every visual's stage: reused from the site's own "designed composition"
   vocabulary (a dark ground with a faint grid, or the cream paper sheet),
   never a screenshot. .pillars visuals share one fixed proportion so the
   row reads as one family; the lead visual keeps its own intrinsic height
   because a single row of nodes does not fit a 3:2 box gracefully. */
.pillar-visual{position:relative;border-radius:8px;overflow:hidden;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.pillars .pillar-visual{aspect-ratio:3/2}
.stage-dark{background-color:#14161C;border:1px solid #2A2E37;background-image:linear-gradient(rgba(242,240,234,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,234,.045) 1px,transparent 1px);background-size:32px 32px}
.stage-dotted{background-image:radial-gradient(rgba(242,240,234,.09) 1px,transparent 1px);background-size:24px 24px}
.stage-paper{background-color:#F2F0EA;color:#17181E;border:1px solid rgba(23,24,30,.12)}

/* 1. Workflow canvas: one clean horizontal row of five nodes, a straight
   connector that turns gold node by node, the diamond "condition" node
   kept at a uniform 76px slot so the line never kinks through it. */
.viz-flow{padding:28px 24px}
.flow-track{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.flow-track::-webkit-scrollbar{display:none}
.flow-row{display:flex;align-items:flex-start;min-width:max-content;padding-inline:2px}
.flow-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.flow-node{position:relative;width:76px;height:76px;border-radius:8px;background:#0F1116;border:1px solid #2A2E37;display:flex;align-items:center;justify-content:center;color:var(--v2-secondary);box-sizing:border-box}
.flow-icon{width:26px;height:26px}
.flow-node--diamond{background:none;border-color:transparent}
.flow-node__inner{display:block;width:64px;height:64px;margin:6px;border-radius:8px;background:#0F1116;border:1px solid #2A2E37;transform:rotate(45deg);box-sizing:border-box}
.flow-label{font-size:13.5px;color:var(--v2-secondary);white-space:nowrap}
.flow-seg{flex:1 1 32px;min-width:20px;height:2px;background:#3A3E48;align-self:flex-start;margin-top:37px}
.flow-check{position:absolute;top:-6px;inset-inline-end:-6px;width:17px;height:17px;border-radius:50%;background:var(--v2-gold);color:#1A1407;display:flex;align-items:center;justify-content:center}
.flow-check svg{width:9px;height:9px}
.flow-caption{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--v2-secondary);text-align:center}
/* Swipe cue: the row scrolls horizontally on phones only, so the hint that
   more steps sit off-screen only needs to exist below that width. */
.flow-swipe-cue{display:none}
/* Ships lit (the static, no-JS, reduced-motion state): every node and
   segment already gold, the check badge already visible. The diamond's
   own 76px slot stays transparent (set above) so only its rotated inner
   square ever paints gold; :not() keeps this rule from undoing that. */
.flow-node:not(.flow-node--diamond),.flow-node--diamond .flow-node__inner{border-color:var(--v2-gold);background:var(--v2-gold);color:#1A1407}
.flow-seg{background:var(--v2-gold)}
.flow-check{opacity:1;transform:scale(1)}
/* .in replays the lighting sequence from an unlit start, backwards fill
   mode snapping each piece to its 0% frame the instant the class lands. */
.viz-flow.in .flow-item:nth-child(1) .flow-node{animation:flow-node-in .35s ease-out backwards}
.viz-flow.in .flow-item:nth-child(3) .flow-node{animation:flow-node-in .35s ease-out .18s backwards}
.viz-flow.in .flow-item:nth-child(5) .flow-node--diamond .flow-node__inner{animation:flow-node-in .35s ease-out .36s backwards}
.viz-flow.in .flow-item:nth-child(7) .flow-node{animation:flow-node-in .35s ease-out .54s backwards}
.viz-flow.in .flow-item:nth-child(9) .flow-node{animation:flow-node-in .35s ease-out .72s backwards}
.viz-flow.in .flow-row>.flow-seg:nth-child(2){animation:flow-seg-in .3s ease-out .09s backwards}
.viz-flow.in .flow-row>.flow-seg:nth-child(4){animation:flow-seg-in .3s ease-out .27s backwards}
.viz-flow.in .flow-row>.flow-seg:nth-child(6){animation:flow-seg-in .3s ease-out .45s backwards}
.viz-flow.in .flow-row>.flow-seg:nth-child(8){animation:flow-seg-in .3s ease-out .63s backwards}
.viz-flow.in .flow-check{animation:frag-pill-in .3s cubic-bezier(.34,1.56,.64,1) .92s backwards}
@keyframes flow-node-in{0%{border-color:#2A2E37;background:#0F1116;color:var(--v2-secondary)}100%{border-color:var(--v2-gold);background:var(--v2-gold);color:#1A1407}}
@keyframes flow-seg-in{0%{background:#3A3E48}100%{background:var(--v2-gold)}}

/* 2. AI inside the procedure: a document sheet whose facts carry a gold
   underline and a tiny label, beside a card asking for one human call. */
.viz-ai{flex-direction:row;align-items:center;gap:16px}
.ai-sheet{flex:1 1 auto;min-width:0;max-width:190px;background:#F2F0EA;border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:7px;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.ai-bar{display:block;height:5px;border-radius:3px;background:#C7C4BB}
.ai-row{display:flex;align-items:center;gap:7px}
.ai-row .ai-bar{flex:1 1 auto}
.ai-bar--tag{border-block-end:2px solid var(--v2-gold);border-radius:3px 3px 0 0;background:#DAD6C9}
.ai-tag{flex:none;font-size:10px;font-weight:600;color:#926925;background:rgba(215,183,101,.18);border-radius:3px;padding:1px 6px;white-space:nowrap}
.ai-card{flex:1 1 auto;min-width:0;background:#0F1116;border:1px solid #2A2E37;border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ai-card__title{font-size:13px;line-height:1.4;color:#F2F0EA}
.ai-card__pills{display:flex;flex-wrap:wrap;gap:7px}
.viz-ai.in .ai-row:nth-child(2) .ai-bar--tag{animation:ai-tag-in .35s ease-out backwards}
.viz-ai.in .ai-row:nth-child(2) .ai-tag{animation:frag-row-in .3s ease-out .15s backwards}
.viz-ai.in .ai-row:nth-child(4) .ai-bar--tag{animation:ai-tag-in .35s ease-out .22s backwards}
.viz-ai.in .ai-row:nth-child(4) .ai-tag{animation:frag-row-in .3s ease-out .37s backwards}
.viz-ai.in .ai-row:nth-child(6) .ai-bar--tag{animation:ai-tag-in .35s ease-out .44s backwards}
.viz-ai.in .ai-row:nth-child(6) .ai-tag{animation:frag-row-in .3s ease-out .59s backwards}
.viz-ai.in .ai-card{animation:frag-row-in .4s ease-out .78s backwards}
@keyframes ai-tag-in{0%{border-block-end-color:transparent;background:#C7C4BB}100%{border-block-end-color:var(--v2-gold);background:#DAD6C9}}

/* 3. Memory per case: one vertical timeline, the current step pulsing
   gold once. */
.mem-title{font-weight:600;font-size:14.5px;color:#17181E}
.mem-timeline{position:relative;list-style:none;margin:12px 0 0;padding:0}
.mem-timeline::before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:2px;background:rgba(23,24,30,.15)}
.mem-step{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding-inline-start:22px;padding-block:5px}
.mem-dot{position:absolute;inset-inline-start:0;top:9px;width:12px;height:12px;border-radius:50%;background:#F2F0EA;border:2px solid #8A8677;box-sizing:border-box}
.mem-dot--gold{border-color:var(--v2-gold);background:var(--v2-gold)}
.mem-label{font-size:13.5px;font-weight:600;color:#17181E}
.mem-time{font-family:var(--mono);font-size:11.5px;color:#5A5C66}
.mem-foot{margin-top:10px;font-size:12.5px;color:#5A5C66}
.viz-memory.in .mem-step{animation:frag-row-in .4s ease-out backwards}
.viz-memory.in .mem-step:nth-child(1){animation-delay:0s}
.viz-memory.in .mem-step:nth-child(2){animation-delay:.12s}
.viz-memory.in .mem-step:nth-child(3){animation-delay:.24s}
.viz-memory.in .mem-step:nth-child(4){animation-delay:.36s}
.viz-memory.in .mem-dot--gold{animation:mem-pulse 1s ease-out .55s}
@keyframes mem-pulse{0%{box-shadow:0 0 0 0 rgba(215,183,101,.55)}70%{box-shadow:0 0 0 9px rgba(215,183,101,0)}100%{box-shadow:0 0 0 0 rgba(215,183,101,0)}}

/* 4. Documents and knowledge: a short file list, a fake search field that
   answers with a citation, never a bare number. */
.docs-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.docs-row{display:flex;align-items:center;gap:9px;background:#0F1116;border:1px solid #2A2E37;border-radius:6px;padding:6px 10px}
.docs-icon{flex:none;width:14px;height:14px;color:var(--v2-secondary)}
.docs-name{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:12px;color:#F2F0EA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-ver{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--v2-secondary);background:#14161C;border:1px solid #2A2E37;border-radius:999px;padding:1px 7px}
.docs-search{margin-top:8px;background:#14161C;border:1px solid #2A2E37;border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.docs-search__q{font-size:12.5px;line-height:1.4;color:var(--v2-body)}
.docs-search__cite{align-self:flex-start;font-family:var(--mono);font-size:11px;color:#1A1407;background:var(--v2-gold);border-radius:4px;padding:2px 8px}
.docs-chips{display:flex;gap:7px;margin-top:8px}
.docs-chip{font-size:11px;color:var(--v2-secondary);border:1px solid #2A2E37;border-radius:999px;padding:2px 9px}
.viz-docs.in .docs-row{animation:frag-row-in .35s ease-out backwards}
.viz-docs.in .docs-row:nth-child(1){animation-delay:0s}
.viz-docs.in .docs-row:nth-child(2){animation-delay:.12s}
.viz-docs.in .docs-row:nth-child(3){animation-delay:.24s}
.viz-docs.in .docs-search__cite{animation:frag-pill-in .3s cubic-bezier(.34,1.56,.64,1) .5s backwards}

/* 5. Control from one place: a beautified replica of the real RAPTIX
   Process Status execution view (owner reference), restyled in the
   identity: dark stage, gold for completed instead of green. Promoted to
   its own full-width block under the 2x2 (owner's call): the header,
   the process/status/started strip, the six-step row and the agent's
   route-decision side card all need more room than a 3:2 tile gives. */
.pillar--control{margin-top:clamp(40px,4.8vw,56px)}
.pillar--control .pillar-copy{max-width:640px;margin-bottom:24px}
.pillar--control .pillar-copy h3{font-size:clamp(22px,2.4vw,28px)}
.secretary-v2 .pillar--control .pillar-copy p{margin-top:10px;font-size:16px;color:var(--v2-secondary);max-width:56ch}
.viz-control{padding:22px 26px;display:block}

.ps-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-block-end:1px solid #2A2E37}
.ps-header__left{display:flex;gap:12px;align-items:flex-start;min-width:0}
.ps-header__icon{width:30px;height:30px;flex:none;color:var(--v2-gold)}
.secretary-v2 .ps-header__title{font-size:15px;font-weight:600;color:#F2F0EA}
.secretary-v2 .ps-header__sub{margin-top:3px;font-size:12.5px;color:#B8BDC9}
.secretary-v2 .ps-header__time{margin-top:5px;font-family:var(--mono);font-size:11px;color:#B8BDC9}
.ps-header__pct{flex:none;text-align:end}
.ps-pct-row{display:flex;align-items:baseline;justify-content:flex-end;gap:2px}
.ps-pct{font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,38px);color:var(--v2-gold);line-height:1}
.ps-pct__sign{font-family:var(--display);font-weight:600;font-size:18px;color:var(--v2-gold)}
.secretary-v2 .ps-pct__label{margin-top:4px;font-size:11.5px;color:#B8BDC9}

.ps-strip{display:flex;padding-block:14px;border-block-end:1px solid #2A2E37}
.ps-strip__item{flex:1;min-width:0;padding-inline:18px;border-inline-start:1px solid #2A2E37}
.ps-strip__item:first-child{border-inline-start:0;padding-inline-start:0}
.secretary-v2 .ps-strip__label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#B8BDC9}
.secretary-v2 .ps-strip__value{display:block;margin-top:5px;font-size:12.5px;color:#F2F0EA}
.ps-pill{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:999px}
.ps-pill--gold{background:var(--v2-gold);color:#1A1407}

.ps-body{display:flex;gap:28px;padding-top:20px}
.ps-steps-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.ps-steps{flex:none;min-width:0;display:flex;align-items:flex-start;gap:4px;overflow-x:auto}
.secretary-v2 .ps-steps-caption{font-size:11.5px;color:#B8BDC9}
.ps-step{flex:none;width:106px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}
.ps-step__circle{
  position:relative;width:38px;height:38px;border-radius:50%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  border:2px solid #3A3E48;color:#B8BDC9;
}
.ps-step--done .ps-step__circle{border-color:var(--v2-gold);color:var(--v2-gold)}
.ps-step--current .ps-step__circle{background:var(--v2-gold);border-color:var(--v2-gold);color:#1A1407}
.secretary-v2 .ps-step__label{font-size:11.5px;color:#F2F0EA;line-height:1.3}
.ps-step__pill{font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px;color:#B8BDC9;border:1px solid #3A3E48}
.ps-step--done .ps-step__pill{color:var(--v2-gold);border-color:rgba(215,183,101,.4)}
.ps-step--current .ps-step__pill{background:var(--v2-gold);color:#1A1407;border-color:var(--v2-gold)}
.ps-arrow{flex:none;margin-top:16px;width:16px;height:16px;color:#3A3E48}
[dir="rtl"] .ps-arrow{transform:scaleX(-1)}

.ps-side{
  flex:none;width:220px;box-sizing:border-box;
  background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.25);border-radius:8px;
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;
}
.ps-side__title{display:flex;align-items:center;gap:6px}
.ps-side__title svg{width:14px;height:14px;color:var(--v2-gold);flex:none;fill:currentColor}
.secretary-v2 .ps-side__title span{font-size:12.5px;font-weight:600;color:#F2F0EA}
.secretary-v2 .ps-side__label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#B8BDC9}
.ps-side__pill{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.35);border-radius:6px;padding:8px 10px}
.secretary-v2 .ps-side__pill span:first-child{font-size:11.5px;color:#F2F0EA;line-height:1.4}
.ps-side__chip{flex:none;font-size:9.5px;font-weight:600;color:#C9BBFF;background:rgba(124,92,255,.28);border-radius:999px;padding:2px 7px}
.secretary-v2 .ps-side__note{font-size:11px;color:#B8BDC9;line-height:1.5}

/* Entrance, once: the percentage counts up (page.js), the step rings and
   the side card fade in, the current step pulses once. Static final
   state without JS or reduced motion (see the .in rules below apply
   only on top of what is already legible: rings already gold, side card
   already visible, percentage already at its final number in the
   markup's own text node). */
.viz-control.in .ps-step{animation:frag-row-in .35s ease-out backwards}
.viz-control.in .ps-step:nth-child(1){animation-delay:0s}
.viz-control.in .ps-step:nth-child(3){animation-delay:.1s}
.viz-control.in .ps-step:nth-child(5){animation-delay:.2s}
.viz-control.in .ps-step:nth-child(7){animation-delay:.3s}
.viz-control.in .ps-step:nth-child(9){animation-delay:.4s}
.viz-control.in .ps-step:nth-child(11){animation-delay:.5s}
.viz-control.in .ps-step--current .ps-step__circle{animation:ps-pulse 1s ease-out .8s}
.viz-control.in .ps-side{animation:frag-row-in .4s ease-out .6s backwards}
@keyframes ps-pulse{0%{box-shadow:0 0 0 0 rgba(215,183,101,.55)}70%{box-shadow:0 0 0 10px rgba(215,183,101,0)}100%{box-shadow:0 0 0 0 rgba(215,183,101,0)}}

/* --- 4c. The cinematic statement: a founder-quote card stack beside the
   owner portrait (Zapier customer-story pattern, in the dark identity).
   The card stack always sits at the physical left in both languages, the
   portrait always at the physical right: `order` (not DOM order, not
   `direction`) is flipped for RTL so the Arabic copy keeps its own
   correct text direction. ----- */
.statement{background:#0B0C10;border-block:1px solid #2A2E37}
.statement-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:28px;align-items:center;padding-block:96px;
}
.statement-cards{order:1;min-width:0}
.statement-media{order:2;min-width:0}
.statement-media img{
  display:block;width:100%;height:auto;aspect-ratio:1122/1402;
  object-fit:contain;border-radius:6px;
}
html[dir="rtl"] .statement-grid{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
html[dir="rtl"] .statement-cards{order:2}
html[dir="rtl"] .statement-media{order:1}

/* Three sections sharing one bordered block: dividers between them, radius
   only on the outer corners (the enclosing box's own overflow:hidden). */
.statement-cards{background:#0F1116;border:1px solid #2A2E37;border-radius:6px;overflow:hidden}
.stmt-card{display:block;border-block-end:1px solid #2A2E37}
.stmt-card:last-child{border-block-end:0}

.stmt-quote{padding:36px}
.stmt-mark{display:block;height:18px;width:auto;opacity:.9}
.stmt-quote-glyph{display:block;width:30px;height:auto;margin-top:16px;color:var(--v2-gold);fill:currentColor}
.secretary-v2 .stmt-quote-text{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.45;color:#F2F0EA}
.secretary-v2 .stmt-quote-attr{margin-top:16px;font-size:14px;color:var(--v2-secondary)}

.stmt-numbers{padding:28px 36px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stmt-num__value{
  display:flex;align-items:baseline;flex-wrap:wrap;column-gap:7px;
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(34px,3.4vw,46px);line-height:1.05;color:var(--v2-gold);
}
.stmt-num__unit{font-family:var(--body);font-weight:400;font-size:15px;color:var(--v2-body)}
.secretary-v2 .stmt-num__label{margin-top:8px;font-size:13px;color:var(--v2-secondary);line-height:1.5}

.stmt-link{padding:18px 36px;display:flex;align-items:center;gap:14px;text-decoration:none;color:#F2F0EA}
.stmt-link__icon{flex:none;width:34px;height:34px;color:var(--v2-secondary)}
.stmt-link span{font-size:15px}
.stmt-link:hover span{text-decoration:underline;text-underline-offset:4px}
[dir="rtl"] .stmt-link__icon{transform:scaleX(-1)}

/* Entrance, once: the three sections fade and rise in sequence the first
   time the stack is a third visible, via the same shared observer as the
   platform visuals. No JS, no IntersectionObserver, or prefers-reduced-
   motion all leave the base rules above already in their finished state. */
.statement-cards.in .stmt-card{animation:stmt-card-in .45s ease-out backwards}
.statement-cards.in .stmt-card:nth-child(1){animation-delay:0s}
.statement-cards.in .stmt-card:nth-child(2){animation-delay:.15s}
.statement-cards.in .stmt-card:nth-child(3){animation-delay:.3s}
@keyframes stmt-card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* --- 5. The gold section ---------------------------------------------- */
.word-yours{background:var(--v2-gold);color:#1A1407;padding-block:88px}
.word-layout{display:flex;gap:80px;justify-content:space-between;align-items:center}
.word-layout>div:first-child{min-width:0}
.secretary-v2 .word-lead{font-size:18px;margin-bottom:20px}
.word-layout h2{font-size:clamp(40px,5.5vw,76px)}
.word-rules{flex:0 1 460px;min-width:0}
.secretary-v2 .word-rules p{font-size:19px;padding-block:21px;border-bottom:1px solid #9d8240}
.secretary-v2 .word-rules p:first-child{padding-top:0}
.secretary-v2 .word-rules p:last-child{border-bottom:0;padding-bottom:0}

/* --- 6. Start ----------------------------------------------------------- */
#start.begin{padding-block:110px 78px}
.begin-heading{display:flex;justify-content:space-between;align-items:end;gap:80px;padding-bottom:48px}
.begin-heading h2{font-size:clamp(34px,4.8vw,64px)}
.begin-heading__text{min-width:0}
.secretary-v2 .begin-heading__text>p{max-width:30ch;font-size:18px;color:var(--v2-secondary)}
/* The presenting figure stands in front of a builder-canvas backdrop: a
   cleaned-up HTML/CSS replica of the real RAPTIX workflow canvas for the
   secretary flow (nine node cards, three rows, dashed branch edges with
   labelled pills), so the section reads as product, not a bare portrait.
   The figure covers only the near third; the far two thirds stay legible.
   The figure's own artwork carries its empty half (person-presenting.webp
   has the raised hand and the open space on the image's own left; person-
   crossed.webp fills evenly), so each figure is anchored to the stage edge
   that puts that empty half, or a clean unclaimed strip, on the side the
   graph occupies. That anchor is physical, not logical: EN is always ltr,
   AR is always rtl, so `left`/`right` here never need to change per page,
   only the explicit [dir="rtl"] block does. */
.begin-stage{position:relative;flex:none;width:720px;height:460px;overflow:hidden}
.begin-canvas{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  width:720px;height:460px;overflow:hidden;box-sizing:border-box;
  background:#0F1116;border:1px solid #2A2E37;border-radius:10px;
  background-image:radial-gradient(rgba(242,240,234,.08) 1px,transparent 1px);background-size:22px 22px;
}
.begin-person{position:absolute;z-index:2;bottom:0;left:0;height:100%;width:auto}
html[dir="rtl"] .begin-person{left:auto;right:0}
/* The cards under the figure fade into the panel instead of being cut mid-word. */
.begin-stage::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:46%;pointer-events:none;
  background:linear-gradient(to right,rgba(15,17,22,.92) 30%,rgba(15,17,22,0) 100%)}
html[dir="rtl"] .begin-stage::after{left:auto;right:0;background:linear-gradient(to left,rgba(15,17,22,.92) 30%,rgba(15,17,22,0) 100%)}
@media(max-width:760px){.begin-stage::after{width:58%}}

/* The graph: nine cards positioned with logical (inset-inline-*) pixel
   offsets computed for the LTR/EN reading order, so RTL mirrors the whole
   layout for free (a card's own text and icons stay upright either way;
   only its physical slot moves). The edges are the one part that cannot
   use logical properties (SVG paths are always physical x/y), so the
   whole edges layer is mirrored as a block via `scaleX(-1)`, same
   technique as `.dia-arrow` elsewhere on this page. */
.bg-graph{position:absolute;inset:0}
.bg-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html[dir="rtl"] .bg-edges{transform:scaleX(-1)}
.bg-edge{fill:none;stroke:#3A3E48;stroke-width:1.4;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.bg-edge--orange{stroke:#F4A227}
.bg-edge--blue{stroke:#3B82F6}
.bg-edge--violet{stroke:#7C5CFF}
.bg-edge--red{stroke:#EF4444}
.bg-edge--green{stroke:#22C55E}
.bg-arrowhead{fill:#3A3E48}
.bg-port{fill:#E5B33C}

.bg-card{
  position:absolute;width:176px;height:84px;box-sizing:border-box;
  background:#14161C;border:1px solid #2A2E37;border-radius:10px;padding:10px 12px;
}
.bg-card__gear{position:absolute;inset-block-start:6px;inset-inline-end:8px;font-size:10px;line-height:1;color:var(--v2-secondary)}
.bg-card__icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff}
.bg-card__icon svg{width:14px;height:14px}
.bg-card--ai .bg-card__icon{background:rgba(124,92,255,.9)}
.bg-card--mail .bg-card__icon{background:rgba(92,107,242,.9)}
.bg-card--wait .bg-card__icon{background:rgba(244,162,39,.9)}
.secretary-v2 .bg-card__title{
  margin-top:8px;font-size:12px;font-weight:600;color:#F2F0EA;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.secretary-v2 .bg-card__desc{
  margin-top:3px;font-size:11px;color:#B8BDC9;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bg-pill{
  position:absolute;font-size:10.5px;font-weight:600;color:#fff;
  padding:2px 9px;border-radius:999px;white-space:nowrap;
}
.bg-pill--blue{background:#3B82F6}
.bg-pill--violet{background:#7C5CFF}
.bg-pill--red{background:#EF4444}
.bg-pill--green{background:#22C55E}
.bg-pill--orange{background:#F4A227;color:#1A1407}

/* The person always sits at the logical inline-start side of the stage
   (physical left in EN, physical right in AR), so the float card's own
   safe corner - clear of the row-1 node, the fan pills and every card
   column - is always the inline-end corner, one rule for both languages. */
.begin-float{
  position:absolute;z-index:3;inset-block-start:10px;inset-inline-end:14px;max-width:160px;
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 13px;background:#0F1116;border:1px solid #2A2E37;border-radius:6px;
}
.begin-float__check{flex:none;margin-top:2px;color:var(--v2-gold)}
.secretary-v2 .begin-float p{margin:0;line-height:1.4}
.secretary-v2 .begin-float__text{font-size:13px;color:#F2F0EA}
.secretary-v2 .begin-float__time{margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--v2-secondary)}

/* Ships fully in place (see the thread-card note above): only once page.js
   confirms motion is allowed and the stage has scrolled into view does it
   run the entry once: cards fade in row by row, edges draw, pills pop. */
.begin-stage.begin-armed .bg-card{opacity:0;transform:translateY(8px)}
.begin-stage.begin-armed .bg-edge{stroke-dashoffset:24}
.begin-stage.begin-armed .bg-pill{opacity:0;transform:scale(.7)}
.begin-stage.begin-armed .begin-float{opacity:0;transform:translateY(10px)}
.begin-stage.begin-in .bg-card[data-row="1"]{animation:bg-card-in .4s ease-out .1s forwards}
.begin-stage.begin-in .bg-card[data-row="2"]{animation:bg-card-in .4s ease-out .35s forwards}
.begin-stage.begin-in .bg-card[data-row="3"]{animation:bg-card-in .4s ease-out .6s forwards}
.begin-stage.begin-in .bg-edge{animation:bg-edge-in .5s ease-out .25s forwards}
.begin-stage.begin-in .bg-pill{animation:bg-pill-in .3s cubic-bezier(.34,1.56,.64,1) .55s forwards}
.begin-stage.begin-in .begin-float{animation:begin-float-in .5s ease-out .85s forwards}
@keyframes bg-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bg-edge-in{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes bg-pill-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes begin-float-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.begin-actions{display:flex;align-items:center;gap:28px;padding-top:28px;border-top:1px solid var(--v2-line)}
.secretary-v2 .begin-actions p{font-size:14px;color:var(--v2-secondary)}

/* --- 7. The engine line ------------------------------------------------ */
/* .secretary-v2 p{margin:0} outranks .v2-wrap{margin-inline:auto}, so this
   paragraph has to claim the grid back by name. */
.secretary-v2 .v2-engine{margin-inline:auto;font-size:13px;color:var(--v2-secondary);padding-bottom:40px}

html[lang="ar"] .secretary-v2 h2,html[lang="ar"] .secretary-v2 h3{letter-spacing:0;line-height:1.45}

@media(max-width:900px){
 #case.invitation{gap:36px}
 .dia-row{gap:14px}
 .diff-grid{gap:22px}
 .use{gap:28px}
 .word-layout{gap:40px}.word-rules{flex-basis:360px}
 .begin-heading{gap:36px}
 /* The builder-canvas backdrop scales down as one block rather than
    reflowing (its coordinates are fixed px, matching the real canvas):
    the stage shrinks to the scaled footprint and clips it, the canvas
    keeps its native 720x460 box and is scaled down from its own
    logical-start corner. */
 .begin-stage{width:540px;height:345px}
 .begin-canvas{transform:scale(.75);transform-origin:0 0}
 html[dir="rtl"] .begin-canvas{transform-origin:100% 0}

 /* The platform's grid pillars keep two columns until the 760px stack
    below; a narrower box at this width is still comfortable for a 3:2
    visual and two lines of copy. The AI visual's sheet gives back width
    to its card so the two decision pills still sit on one row. */
 .pillars{grid-template-columns:1fr 1fr;gap:24px}
 .viz-ai{gap:12px}
 .ai-sheet{max-width:120px;padding:10px 12px}
 .ai-card{padding:10px 12px}

 /* Tablet: still two columns, the image column just narrower. */
 .statement-grid{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
 html[dir="rtl"] .statement-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
}
@media(max-width:760px){
 #case.invitation{grid-template-columns:1fr;padding-block:52px 36px;gap:30px}
 .invitation h2{font-size:clamp(33px,8vw,46px)}
 .secretary-v2 .invitation-lead{margin-top:20px;font-size:16.5px}
 .invitation-acts{margin-top:26px;gap:18px}
 .secretary-v2 .stats{margin-top:28px;padding-top:22px;gap:14px}
 .stat-num{font-size:26px;column-gap:5px}
 .secretary-v2 .stat-label{font-size:12.5px;max-width:18ch}
 .thread-card{max-width:none}
 /* No room for the address chip beside the subject at this width: it drops
    to a second line under the subject instead of disappearing, so the
    secretary's own address stays visible on phones. */
 .thread-card__head{flex-wrap:wrap;row-gap:6px}
 .thread-card__subject{flex:1 1 100%}
 .thread-card__addr{font-size:11px}
 .msg{padding:16px}

 .howto{padding-block:64px 52px}.howto>h2{margin-bottom:28px}
 .dia{padding:28px 20px}
 .dia-row{display:flex;flex-direction:column;align-items:center;gap:28px}
 .dia-col{width:100%}
 .dia-fig{height:110px}
 .dia-travel{display:none}
 .dia-arrow{width:56px;margin-top:0;align-self:center}
 .dia-arrow svg{width:100%;height:56px;transform:rotate(90deg)}
 [dir="rtl"] .dia-arrow svg{transform:scaleX(-1) rotate(90deg)}
 .dia-return{margin-top:4px}
 .dia-return__track{display:none}
 .dia-check--inline{display:inline-block;position:static;height:20px;width:auto;vertical-align:-4px;margin-inline-end:8px}
 .dia-result{text-align:center}

 .diff{padding-block:60px 52px}
 .diff>h2{margin-bottom:28px}
 .diff-grid{grid-template-columns:1fr;gap:32px}
 .diff-fig{width:88px;height:88px}

 /* The platform section: copy above its visual for the lead pillar, one
    column for the 2x2 grid. */
 .platform{padding-block:64px 56px}
 .pillar--lead{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
 .pillars{grid-template-columns:1fr;gap:28px}
 .platform>.v2-cta--ghost{margin-top:8px}
 /* The workflow row scrolls horizontally at this width: a visible thin
    scrollbar plus a text-and-arrow cue under it, instead of a hidden
    scrollbar and no sign that more steps sit off-screen. */
 .flow-swipe-cue{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12px;color:var(--v2-secondary)}
 .flow-track{scrollbar-width:thin}
 .flow-track::-webkit-scrollbar{display:block;height:4px}
 .flow-track::-webkit-scrollbar-track{background:transparent}
 .flow-track::-webkit-scrollbar-thumb{background:var(--v2-line);border-radius:4px}
 /* Nav tap targets: the ghost "Start free" button and the language toggle
    keep their own widths but grow to a 44px-tall hit area. */
 .nav .btn-sm,.nav .lang{min-height:44px}
 /* The process-status visual: the three-column strip stacks (a status
    pill this long has no honest way to share a row at this width), and
    the steps row gives its width back from the now full-width side card. */
 .viz-control{padding:18px 20px}
 .ps-strip{flex-direction:column;gap:12px;padding-block:12px}
 .ps-strip__item{border-inline-start:0;padding-inline-start:0}
 .ps-strip__item:not(:first-child){padding-top:10px;border-top:1px solid #2A2E37}
 .ps-body{flex-direction:column;gap:18px}
 .ps-side{width:100%}

 .uses{padding-block:68px 60px}.uses>h2{margin-bottom:28px}
 .uses-grid{grid-template-columns:1fr;gap:36px}
 .panel{aspect-ratio:1/1}
 .use-copy h3{font-size:27px}
 .secretary-v2 .use-copy p{margin-top:14px;font-size:16px;max-width:46ch}
 .word-yours{padding-block:55px}.word-layout{display:block}.word-layout h2{font-size:44px}
 .word-rules{margin-top:36px}.secretary-v2 .word-rules p{font-size:17px;padding-block:18px}
 #start.begin{padding-block:64px 48px}.begin-heading{display:block;margin-bottom:34px}
 .secretary-v2 .begin-heading__text>p{margin-top:18px;max-width:37ch;font-size:16px}
 /* The canvas keeps its native 720x460 box and is scaled down as one
    texture rather than reflowed (its coordinates are fixed px, matching
    the real builder canvas); the stage clips to the scaled footprint. */
 .begin-stage{display:block;width:100%;height:340px;margin:20px auto 0}
 .begin-canvas{transform:scale(.58);transform-origin:0 0}
 html[dir="rtl"] .begin-canvas{transform-origin:100% 0}
 .begin-person{height:250px}
 .begin-float{max-width:150px}
 .begin-actions{align-items:start;flex-direction:column;gap:18px}
 .secretary-v2 .v2-engine{font-size:12px}

 /* Phone: one column, the whole image first, the card stack under it,
    same order regardless of language. */
 .statement-grid{grid-template-columns:1fr;gap:28px;padding-block:56px}
 .statement-media{order:1}
 .statement-cards{order:2}
 html[dir="rtl"] .statement-grid{grid-template-columns:1fr}
 html[dir="rtl"] .statement-media{order:1}
 html[dir="rtl"] .statement-cards{order:2}
 .stmt-quote{padding:26px}
 .stmt-numbers{padding:22px 26px}
 .stmt-link{padding:16px 26px}
}
/* Below this, three equal columns of the numbers row no longer have room
   for a two- or three-word unit beside the digit: fall back to two rows,
   the third stat spanning the full width. */
@media(max-width:420px){
 .secretary-v2 .stats{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:20px}
 .stat:nth-child(3){grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){.secretary-v2 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The film's closing line sits under the yellow RAPTIX note, centred, instead of
   over it (owner, 2026-09-16). Desktop/landscape only; the phone rule in home.css
   already parks the band lower. */
@media (min-width:721px) and (orientation:landscape){
  html.scrub-on .hero .band.settle{align-content:start;padding-top:50vh;padding-bottom:0}
}