/* The VectorXPro family pages (2026-09-27): the front door and each app's page.
   Same navy and layout as every Vector app; each app's colour is its ring
   colour (VECTOR_FAMILY_THEME.md). The page sets --accent for its app. */
:root {
  --ops: #35A7FF;  --actions: #38F8F6;  --engineer: #A78BFA;  --project: #FFD23F;
  --card: #0D1B2A; --raised: #122338; --border: #23374D;
}
body.fam-engineer { --accent: var(--engineer); }
body.fam-actions  { --accent: var(--actions); }
body.fam-project  { --accent: var(--project); }
body.fam-home     { --accent: #EAF0F7; }
body.fam-engineer a:not(.button), body.fam-actions a:not(.button), body.fam-project a:not(.button) { color: var(--accent); }
body[class^="fam-"] .button { color: #07111F; }
body[class^="fam-"] .button.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

.fam-hero { text-align: center; padding: 84px 0 56px;
  background: radial-gradient(ellipse at 50% 0%, #142a47 0%, var(--navy) 62%); border-top: 0; }
.fam-hero .wm { width: min(420px, 78vw); display: block; margin: 0 auto; }
.fam-hero .x { letter-spacing: .38em; font-size: 14px; font-weight: 600; margin: 16px 0 4px; color: var(--muted); }
.fam-hero .tagline { letter-spacing: .18em; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0;
  background: linear-gradient(90deg, var(--ops), var(--actions), var(--engineer), var(--project));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam-hero h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.2; margin: 40px auto 14px; max-width: 760px; }
.fam-hero .lead { color: var(--muted); font-size: 19px; max-width: 660px; margin: 0 auto; }

.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .apps { grid-template-columns: 1fr; } }
.app { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--ring); }
.app .icon { width: 72px; height: 72px; border-radius: 16px; display: block; }
.app .ring { width: 72px; height: 72px; border-radius: 16px; background: #07111F; display: grid; place-items: center; }
.app .ring span { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ring); box-shadow: 0 0 14px var(--ring); }
.app h3 { margin: 6px 0 0; font-size: 21px; }
.app .for { color: var(--ring); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.app p { color: var(--muted); margin: 0; font-size: 16px; }
.app p.what { flex: 1; }
.app .links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; font-size: 15px; font-weight: 600; }
.app .links a { color: var(--ring); }
.app .soon { color: var(--muted); font-size: 14px; }
.app.ops { --ring: var(--ops); } .app.actions { --ring: var(--actions); }
.app.engineer { --ring: var(--engineer); } .app.project { --ring: var(--project); }

.fam-product { text-align: center; padding: 76px 0 56px; border-top: 0;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 18%, var(--navy)) 0%, var(--navy) 62%); }
.fam-product .icon { width: 112px; height: 112px; border-radius: 24px; display: block; margin: 0 auto 22px;
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent); }
.fam-product .wm { width: min(360px, 72vw); display: block; margin: 0 auto; }
.fam-product .product { letter-spacing: .38em; font-size: 15px; font-weight: 600; margin: 16px 0 4px; }
.fam-product .tagline { color: var(--accent); letter-spacing: .18em; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0; }
.fam-product h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.2; margin: 36px auto 14px; max-width: 780px; }
.fam-product .lead { color: var(--muted); font-size: 19px; max-width: 660px; margin: 0 auto 28px; }
.fam-product .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.early { display: inline-block; font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.early span { color: var(--accent); font-weight: 700; margin-right: 6px; }
.card .num { color: var(--accent); }
.hl { color: var(--accent); }
@media (max-width: 600px) { .fam-hero, .fam-product { padding: 56px 0 40px; } }

/* ---- Sales pages (2026-09-27): Engineer and Actions reuse the Operations
   page's sections (home.css) in their own colour. ---- */
body.fam-engineer .hl { background: linear-gradient(90deg, #C4B5FD, var(--engineer)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-actions  .hl { background: linear-gradient(90deg, #A7FFFE, var(--actions)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-engineer.home .hero2 { background: radial-gradient(ellipse at 75% 20%, #2A1F5C 0%, rgba(7,17,31,0) 55%), radial-gradient(ellipse at 10% 0%, #1B1840 0%, var(--navy) 60%); }
body.fam-actions.home .hero2  { background: radial-gradient(ellipse at 75% 20%, #0E4A55 0%, rgba(7,17,31,0) 55%), radial-gradient(ellipse at 10% 0%, #0C3140 0%, var(--navy) 60%); }
body.fam-engineer .cta { background: radial-gradient(ellipse at 50% 100%, #2A1F5C 0%, var(--navy) 60%); }
body.fam-actions .cta  { background: radial-gradient(ellipse at 50% 100%, #0E4A55 0%, var(--navy) 60%); }
body.fam-engineer .pack, body.fam-actions .pack { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 16%, var(--navy)) 0%, var(--navy) 65%); }
.hero-copy .appicon { width: 76px; height: 76px; border-radius: 18px; display: block; margin: 0 0 18px;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.hero-copy .product { color: var(--text); }
.early.pill { display: inline-block; font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.early.pill span { color: var(--accent); font-weight: 700; margin-right: 6px; }

/* A worked example: the chain of handoffs (Engineer) */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.chain .step { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; position: relative; }
.chain .step b { display: block; color: var(--accent); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.chain .step h3 { margin: 0 0 6px; font-size: 17px; }
.chain .step p { margin: 0; color: var(--muted); font-size: 14px; }
.chain .step.late { border-color: #FF9F43; } .chain .step.late b { color: #FF9F43; }
.chain .step.inh  { border-color: #F6C453; } .chain .step.inh b  { color: #F6C453; }
@media (max-width: 900px) { .chain { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .chain { grid-template-columns: 1fr; } }

/* Things you might say (Actions) */
.says { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.say { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.say q { display: block; font-size: 17px; line-height: 1.5; color: var(--text); font-style: italic; quotes: "\201C" "\201D"; }
.say .becomes { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--border); color: var(--muted); font-size: 15px; }
.say .becomes b { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .says { grid-template-columns: 1fr; } }

/* Family home: the Vector idea */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pillar { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; border-top: 3px solid var(--t); }
.pillar h3 { margin: 0 0 8px; color: var(--t); font-size: 20px; }
.pillar p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 1000px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pillars { grid-template-columns: 1fr; } }
.quote-band { text-align: center; padding: 80px 0; }
.quote-band p.big { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.35; font-weight: 700; max-width: 820px; margin: 0 auto 14px; }
.quote-band p.fine { max-width: 640px; margin: 0 auto; }

/* ---- Vector Engineer's own pages (2026-09-27, W7b): support and privacy keep
   the sales page's violet light and never lead to another app's pages. ---- */
body.fam-engineer .fam-product { background:
  radial-gradient(ellipse at 50% 0%, #3A2B7A 0%, #1B1840 38%, var(--navy) 72%); }
body.fam-engineer .fam-product .product { background: linear-gradient(90deg, #C4B5FD, var(--engineer));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
body.fam-engineer .fam-product .tagline { margin-top: 6px; }
body.fam-engineer .triage a:hover { box-shadow: 0 0 24px rgba(167, 139, 250, .18); }
main.fam-doc { background: radial-gradient(ellipse 80% 340px at 50% -40px, #2A1F5C 0%, rgba(7, 17, 31, 0) 100%) no-repeat; }
.doc-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; }
.doc-brand .icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 28px rgba(167, 139, 250, .5); }
.doc-brand .wm { width: 150px; display: block; }
.doc-brand .product { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .42em;
  background: linear-gradient(90deg, #C4B5FD, var(--engineer)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-engineer .triage { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { body.fam-engineer .triage { grid-template-columns: 1fr; } }

/* The whole picture (2026-10-02): the four apps as one story, then the proof. */
.fam-hero .lead.strong { color: var(--text); font-weight: 600; margin-top: 18px; }
.vision { padding: 88px 0; background: #060E1A; }
.flow { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: f; }
.flow li { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--t); border-radius: 18px; padding: 22px; position: relative; }
.flow li b { display: block; color: var(--t); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.flow li strong { display: block; font-size: 20px; margin: 6px 0 10px; }
.flow li strong em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--t); border: 1px solid var(--t); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.flow li span { color: var(--muted); font-size: 15px; line-height: 1.5; display: block; }
.proofbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.proofbar div { border-left: 3px solid var(--ops); padding: 4px 0 4px 14px; }
.proofbar b { display: block; font-size: 16px; }
.proofbar span { color: var(--muted); font-size: 14px; }
.proofbar a { color: var(--ops); }
@media (max-width: 1000px) { .flow, .proofbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .flow, .proofbar { grid-template-columns: 1fr; } .vision { padding: 64px 0; } }

/* Vector Project (Craig, 2026-10-02: branded like the others even before it ships). */
body.fam-project .hl { background: linear-gradient(90deg, #FFE89A, var(--project)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-project main.home .fam-product { background: radial-gradient(ellipse 80% 420px at 50% 0, #3A2E08 0%, rgba(7, 17, 31, 0) 100%) no-repeat; }
body.fam-project main.fam-doc { background: radial-gradient(ellipse 80% 340px at 50% -40px, #3A2E08 0%, rgba(7, 17, 31, 0) 100%) no-repeat; }
body.fam-actions main.fam-doc { background: radial-gradient(ellipse 80% 340px at 50% -40px, #0E4A55 0%, rgba(7, 17, 31, 0) 100%) no-repeat; }
.doc-brand .icon { box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); }
.doc-brand .product { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
body.fam-engineer .doc-brand .product { background: linear-gradient(90deg, #C4B5FD, var(--engineer)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------------------
   The brand stage (Craig, 2026-10-02): all four Vector apps, front and centre
   on the front page, each in its own ring colour. On arrival they fly in from
   the depth of the screen one after another and land with a flash of their
   colour: boom, boom, boom, boom. People who ask their device for less motion
   get them already in place.
   --------------------------------------------------------------------------- */
.brand-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  max-width: 1040px; margin: 46px auto 8px; perspective: 1100px; }
.bcard { --ring: var(--ops); position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 26px 14px 22px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ring) 12%, #0B1A2E) 0%, #081324 100%);
  border: 1px solid color-mix(in srgb, var(--ring) 38%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bcard.ops { --ring: var(--ops); } .bcard.engineer { --ring: var(--engineer); }
.bcard.actions { --ring: var(--actions); } .bcard.project { --ring: var(--project); }
.bcard:hover { text-decoration: none; transform: translateY(-6px);
  border-color: var(--ring); box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 34px color-mix(in srgb, var(--ring) 35%, transparent); }
.bglow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--ring), 0 0 60px 6px color-mix(in srgb, var(--ring) 60%, transparent); }
.bicon { width: 86px; height: 86px; border-radius: 20px; display: block;
  box-shadow: 0 0 30px color-mix(in srgb, var(--ring) 45%, transparent); }
.bwm { width: 128px; display: block; margin-top: 4px; }
.bprod { font-size: 12px; font-weight: 700; letter-spacing: .32em; white-space: nowrap; }
.bprod .lk-ed { border-color: var(--ring); color: var(--ring); -webkit-text-fill-color: var(--ring); font-size: 9px; }
.bfor { color: var(--ring); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bstate { color: var(--muted); font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .bcard { opacity: 0; animation: bfly .9s cubic-bezier(.2, .8, .2, 1.15) forwards;
    animation-delay: calc(.35s + var(--i) * .28s); }
  .bglow { animation: bland 1s ease-out forwards; animation-delay: calc(1.05s + var(--i) * .28s); }
}
@keyframes bfly {
  0%   { opacity: 0; transform: translate3d(0, 60px, -700px) rotateX(24deg) scale(.55); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  82%  { transform: translate3d(0, -8px, 30px) rotateX(-3deg) scale(1.05); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes bland { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 900px) { .brand-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } }
@media (max-width: 420px) { .brand-stage { gap: 12px; } .bcard { padding: 20px 8px 16px; }
  .bicon { width: 64px; height: 64px; border-radius: 15px; } .bwm { width: 100px; }
  .bprod { font-size: 10px; letter-spacing: .22em; } .bfor { font-size: 9.5px; } }
/* The family tagline's gradient runs across the words themselves, so all four
   ring colours show, blue through to gold (Craig, 2026-10-02). As a full-width
   block the gradient spread past both ends and the gold fell off the edge. */
.fam-hero .tagline { display: inline-block; }

/* Engineer: the flow chart (M9 Launch kit, 2026-10-03). Scrolls sideways on a phone rather than shrinking its words. */
.flow-sec { padding: 72px 0; }
.flow-chart { margin: 28px auto 0; max-width: 1040px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card, #0C1828); border: 1px solid var(--border, #1E2D44); border-radius: 18px; padding: 22px; }
.flow-chart svg { display: block; width: 100%; min-width: 760px; height: auto; }
.flow-note { color: var(--muted); text-align: center; max-width: 62ch; margin: 18px auto 0; font-size: 16px; }