/* ==========================================================================
   RAPTIX secretary launch preview — companion pages
   (/colleagues/, /how-it-works/, /pricing/, /about/, and
   their /ar/ mirrors). PREVIEW ONLY, not linked from the live apex.

   This file adds ONLY what site-assets/home.css does not already define.
   home.css already ships the shared chrome these pages reuse verbatim:
   :root tokens, reset, .nav/.brand/.nav-links/.lang/.nav-toggle, .btn/.btn-
   primary/.btn-ghost/.tlink, .sec/.wrap/.h2/.lede, .chip (blue-gray = the
   "Planned" color already), .desk/.desk-head/.desk-name/.desk-body, the whole
   .tell/.tell-form/.trap/.cf/.privacy/.send-row/.err/.tell-done "tell us" form
   (see assets/companions.js for the multi-row JS that drives several of these
   forms on one page; site-assets/home.js only ever wired a single #cr-form).
   Do not duplicate any of the above here — that file is the live apex's own
   stylesheet, load it, do not fork it.
   ========================================================================== */

/* home.css sections sit under a full-bleed fixed-position .hero; these pages
   have no hero, so the fixed .nav needs the page's own top offset instead. */
.page-main{padding-top:65px}

.eyebrow{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}
html[dir="rtl"] .eyebrow{font-family:var(--body);letter-spacing:normal;text-transform:none;font-weight:600}

.page-hero{padding:clamp(56px,9vh,108px) var(--gut) clamp(36px,5.5vh,56px)}
.page-h1{
  margin-top:.5em;font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:-.03em;
  max-width:20ch;text-wrap:balance;
}
.page-lede{margin-top:1.2em;max-width:62ch;color:var(--text-secondary);
  font-size:clamp(16px,1.1vw,19px);line-height:1.7;text-wrap:pretty}

/* status chips: .chip's default (blue-gray) already reads "Planned" */
.chip--ok{border-color:rgba(127,185,138,.42);color:var(--ok)}
.chip--ok::before{background:var(--ok)}
.chip--accent{border-color:var(--accent-muted);color:var(--accent)}
.chip--accent::before{background:var(--accent)}

/* the roster: a stack of .desk blocks (home.css), first one opens the list */
.roster .desk:first-child{
  margin-top:clamp(28px,4vh,40px);border-top:1px solid var(--panel-line);
}

/* numbered step list ("the first sixty seconds") */
.steps{margin-top:clamp(20px,3vh,32px);border-top:1px solid var(--panel-line)}
.steps li{
  display:flex;gap:16px;align-items:baseline;padding-block:16px;
  border-bottom:1px solid var(--panel-line);
}
.steps .num{flex:none;font-family:var(--mono);font-size:13px;color:var(--text-dim)}
html[dir="rtl"] .steps .num{direction:ltr;unicode-bidi:isolate}
.steps .txt{color:var(--text-secondary);font-size:clamp(15px,1.05vw,17px);line-height:1.65;max-width:64ch}

/* plain limits list */
.limits{margin-top:clamp(20px,3vh,32px);border-top:1px solid var(--panel-line)}
.limits li{
  padding-block:16px;border-bottom:1px solid var(--panel-line);
  color:var(--text-secondary);font-size:clamp(15px,1.05vw,17px);line-height:1.65;max-width:66ch;
}

/* automatic / yours split */
.split{
  margin-top:clamp(20px,3vh,32px);display:grid;gap:28px;
  border-top:1px solid var(--panel-line);padding-top:clamp(20px,3vh,32px);
}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.split p{color:var(--text-secondary);font-size:clamp(15px,1.05vw,17px);line-height:1.7;max-width:60ch}
.split .yours{
  border-inline-start:1px solid var(--accent-muted);padding-inline-start:24px;
  color:var(--text-primary);
}
@media (max-width:899px){
  .split .yours{
    border-inline-start:0;padding-inline-start:0;
    border-top:1px solid var(--accent-muted);padding-top:24px;
  }
}

/* four orders */
.orders{margin-top:clamp(20px,3vh,32px);border-top:1px solid var(--panel-line)}
.orders li{padding-block:18px;border-bottom:1px solid var(--panel-line)}
.orders .ord-name{font-family:var(--display);font-weight:600;font-size:16px;color:var(--text-primary)}
.orders .ord-body{margin-top:.5em;color:var(--text-secondary);font-size:14.5px;line-height:1.65;max-width:62ch}

/* pricing cards */
.plans{margin-top:clamp(24px,3.6vh,40px);display:grid;gap:18px}
@media (min-width:820px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{border:1px solid var(--panel-line);border-radius:12px;padding:clamp(22px,2.6vw,30px);background:var(--panel)}
.plan--pro{border-color:var(--accent-muted)}
.plan-name{font-family:var(--display);font-weight:600;font-size:19px}
.plan-price{margin-top:.6em;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.8vw,38px);color:var(--text-primary)}
.plan-price .unit{font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--text-secondary)}
.plan-annual{margin-top:.4em;color:var(--text-dim);font-size:13px;line-height:1.55}
.plan-desc{margin-top:1.1em;color:var(--text-secondary);font-size:14.5px;line-height:1.65}

.support-note{
  margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--panel-line);
  padding-top:clamp(20px,3vh,28px);
}
.support-note h3{font-family:var(--display);font-weight:600;font-size:17px;color:var(--text-primary)}
.support-note p{margin-top:.7em;color:var(--text-dim);font-size:13.5px;line-height:1.65;max-width:66ch}

/* the closing gold band, same shape as home's lower-third CTA but as a plain
   section since these pages have no film to sit above */
.cta-band{border-top:1px solid var(--panel-line);background:var(--accent);color:#1A1407;
  padding:clamp(44px,6.4vh,72px) var(--gut)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px}
.cta-band h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3.4vw,3rem);
  line-height:1.06;letter-spacing:-.025em;max-width:36ch}
.cta-band .btn-primary{background:#17130A;color:#fff}
.cta-band .btn-primary:hover{background:#000}

.where{margin-top:clamp(20px,3vh,32px);border-top:1px solid var(--panel-line);
  padding-top:clamp(20px,3vh,28px)}
.where p{color:var(--text-secondary);font-size:clamp(15px,1.05vw,17px);line-height:1.75;max-width:70ch}

@media (max-width:640px){
  .page-hero{padding-inline:var(--gut)}
}

/* ==========================================================================
   Designed product surfaces (added 2026-09-16)

   The companion pages were text with an empty right half. These rules add
   the small compositions that fill it: an email thread, an incoming mail
   with its one task, an invoice list, a reminder returning. They are HTML
   and CSS only — no screenshots, no drawings — built from the same parts as
   the home page's .thread-card / .frag panels (site-assets/secretary/
   page.css): #14161C panels, 1px #2A2E37 hairlines, Plex Mono for times and
   addresses, gold on the single primary action and nowhere else.

   Everything below is mirrored for RTL with logical properties, wraps
   instead of overflowing at 390px, and shows its finished state with no
   JavaScript: the entrance only exists once companions.js has armed it.
   ========================================================================== */

:root{
  --cvis-line:#2A2E37;      /* the hairline the home compositions use */
  --cvis-panel:#14161C;
  --cvis-panel-deep:#0F1116;
}

/* --- the two-column desk (colleagues) ------------------------------------ */

.desk-col{min-width:0}
.desk-art{margin-top:clamp(24px,3.4vh,32px);min-width:0}

@media (min-width:900px){
  .desk--split{
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1fr) clamp(300px,32vw,400px);
    column-gap:clamp(28px,3.6vw,56px);
  }
  /* no justify-self here: a grid item that is not stretched shrinks to its
     content, and the three cards then came out three different widths. */
  .desk--split .desk-art{margin-top:6px}
}

/* --- the card shell ------------------------------------------------------ */

.cvis{
  width:100%;max-width:400px;
  background:var(--cvis-panel);border:1px solid var(--cvis-line);
  border-radius:12px;overflow:hidden;
}
.cvis--wip{opacity:.72}

.cvis-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cvis-panel-deep);border-bottom:1px solid var(--cvis-line);
  padding:11px 16px;
}
.cvis-label{font-size:12.5px;font-weight:600;color:var(--text-primary);min-width:0}
.cvis-addr{
  flex:none;max-width:60%;font-family:var(--mono);font-size:11px;color:var(--text-secondary);
  border:1px solid var(--cvis-line);border-radius:999px;padding:3px 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cvis-wip{
  flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);white-space:nowrap;
}
html[dir="rtl"] .cvis-wip{
  font-family:var(--body);letter-spacing:normal;text-transform:none;font-size:12px;
}

/* --- one message row ----------------------------------------------------- */

.crow{padding:14px 16px;border-bottom:1px solid var(--cvis-line)}
.cvis-seq>.crow:last-child,.cvis>.crow:last-child{border-bottom:0}
.crow--final{background:rgba(216,169,78,.06)}
.crow-line1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.crow-who{font-size:12.5px;font-weight:500;color:var(--text-secondary);min-width:0}
.crow-arrow{color:var(--text-dim);padding-inline:3px}
.crow-time{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--text-dim)}
html[dir="rtl"] .crow-time{direction:ltr;unicode-bidi:isolate}
.crow-text{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-primary);text-wrap:pretty}

/* --- the buttons a task carries (shown, never clickable) ----------------- */

.cbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cbtn{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:12.5px;line-height:1;padding:8px 12px;border-radius:4px;
  border:1px solid transparent;
}
.cbtn--go{background:var(--accent);color:#1A1407;font-weight:600}
.cbtn--ghost{border-color:var(--line-strong);color:var(--text-primary)}

/* --- the support desk's one task ----------------------------------------- */

.ctask{padding:14px 16px;background:var(--cvis-panel-deep);border-top:1px solid var(--cvis-line)}
.ctask-title{margin:0;font-size:12.5px;font-weight:600;color:var(--text-primary)}

/* --- the accounts desk's invoice list ------------------------------------ */

.cinv{margin:0}
.cinv-row{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--cvis-line);
}
.cinv-row:last-child{border-bottom:0}
.cdot{flex:none;width:7px;height:7px;border-radius:50%}
.cdot--paid{background:var(--ok)}
.cdot--promised{background:var(--accent)}
.cdot--disputed{background:#B4646A}
.cinv-text{font-size:13.5px;line-height:1.5;color:var(--text-secondary);min-width:0}

/* --- the two-minute reminder (how it works) ------------------------------ */

.rem{margin-top:clamp(22px,3.4vh,34px);max-width:560px}
.rem-step{
  position:relative;display:grid;align-items:start;
  grid-template-columns:44px minmax(0,1fr);column-gap:14px;
}
.rem-step+.rem-step{margin-top:14px}
.rem-step:not(:last-child)::before{
  content:"";position:absolute;inset-inline-start:22px;top:32px;bottom:-14px;
  width:1px;background:var(--cvis-line);
}
.rem-time{
  font-family:var(--mono);font-size:11.5px;color:var(--text-dim);
  padding-top:16px;text-align:center;
}
html[dir="rtl"] .rem-time{direction:ltr;unicode-bidi:isolate}
.rem-bubble{
  min-width:0;background:var(--cvis-panel);border:1px solid var(--cvis-line);
  border-radius:12px;padding:14px 16px;
}
.rem-bubble--you{background:var(--cvis-panel-deep)}
.rem-who{font-size:12.5px;font-weight:500;color:var(--text-secondary)}
.rem-text{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--text-primary);text-wrap:pretty}

/* --- where we work (about) ----------------------------------------------- */

.places{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.3em}
.place{
  border:1px solid var(--panel-line);border-radius:999px;
  padding:6px 13px;font-size:13px;line-height:1.45;color:var(--text-secondary);
}

/* --- the entrance, once --------------------------------------------------
   companions.js adds .cvis-armed and then .cvis-in the first time 35% of a
   sequence is visible, and unobserves it, so it never replays. It arms
   nothing when the reader asked for reduced motion, when there is no
   IntersectionObserver, or when there is no JavaScript at all: in every one
   of those cases the rules above already show the finished composition. */
.cvis-seq.cvis-armed>*{
  opacity:0;transform:translateY(8px);
  transition:opacity .42s cubic-bezier(.25,1,.5,1),transform .42s cubic-bezier(.25,1,.5,1);
}
.cvis-seq.cvis-armed>:nth-child(1){transition-delay:0s}
.cvis-seq.cvis-armed>:nth-child(2){transition-delay:.3s}
.cvis-seq.cvis-armed>:nth-child(3){transition-delay:.6s}
.cvis-seq.cvis-armed>:nth-child(4){transition-delay:.9s}
.cvis-seq.cvis-in>*{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cvis-seq.cvis-armed>*{opacity:1;transform:none}
}

@media (max-width:640px){
  .cvis-addr{max-width:100%}
  .crow-text{font-size:14px}
  .rem-step{grid-template-columns:40px minmax(0,1fr);column-gap:10px}
  .rem-step:not(:last-child)::before{inset-inline-start:20px}
}