/* The pages beyond the home page: one per industry and one per part of
   Backfyl (ADDED 2026-11-08, Dave: "we need more pages... for each speciality
   ... and also pages for the individual tiles"). Built by
   scripts/site_pages.py; the home page loads this file too, for its menus.

   The same world as the home page: the deep-space sky, Archivo, frost for
   whatever has to stand out, yellow only for the button to press. Each
   feature page wears its own tile's colours from the home page's ribbon
   (Apple's system colours), and each industry page its colours on the ring.
   Everything outside the menus is scoped to body.page, so the home page's
   own styles are untouched. */

:root{
  --night:#0A1538; --night-deep:#060D26; --night-muted:#B5BEDA; --night-line:rgba(242,244,248,.18);
  --enamel:#F2F4F8; --ink:#0B1430;
  --signal:#FFD43B;
  --frost:#B4C3FF; --frost-strong:#8EA5FF; --frost-soft:rgba(142,165,255,.16); --frost-line:rgba(142,165,255,.42);
  --app-card:#324CB4;
  --font:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-ui:cubic-bezier(.23,1,.32,1);
  --r-s:6px; --r-m:10px; --r-l:16px;
  --r-frame:clamp(20px,2.4vw,32px); --rim:clamp(5px,.7vw,10px);
  --pad:clamp(20px,6vw,96px); --max:1312px;
  --t-body:clamp(1.06rem,1.2vw,1.2rem); --t-small:.94rem; --t-cap:.84rem;
}

/* ---------- The menus (home page and every page) ---------- */
.menu{ position:relative; }
.menu > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:10px 0; white-space:nowrap;
  border-bottom:1.5px solid transparent; transition:border-color 200ms ease; font-weight:600; font-size:var(--t-small); }
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary svg{ width:14px; height:14px; transition:transform 200ms var(--ease-ui); }
.menu[open] > summary{ border-color:var(--frost); }
.menu[open] > summary svg{ transform:rotate(180deg); }
@media (hover:hover) and (pointer:fine){ .menu > summary:hover{ border-color:var(--frost); } }
.menu-panel{ position:absolute; top:calc(100% + 12px); left:50%; z-index:30; width:max-content; max-width:min(92vw,880px);
  transform-origin:top center; translate:-50% 0; padding:14px; border-radius:var(--r-l); color:var(--enamel);
  background:linear-gradient(180deg, rgba(30,46,120,.97), rgba(12,22,72,.98));
  box-shadow:inset 0 0 0 1px rgba(200,212,255,.24), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -30px rgba(1,3,20,.95), 0 0 70px -30px rgba(120,150,255,.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  transition:opacity 180ms var(--ease-ui), transform 220ms var(--ease-ui), filter 180ms ease; }
@starting-style{ .menu[open] .menu-panel{ opacity:0; transform:translateY(-6px) scale(.97); filter:blur(3px); } }
.menu-panel::before{ content:""; position:absolute; inset:-14px 0 auto; height:14px; } /* keeps the hover path open */
.menu-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 270px)); gap:4px; }
.menu-tiles.is-wide{ grid-template-columns:repeat(3, minmax(0, 260px)); }
details.menu .menu-tiles a, .menu-tiles a{ display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; border:0; border-radius:var(--r-m); text-decoration:none; color:inherit;
  white-space:normal; transition:background-color 160ms ease; }
.menu-tiles a:hover, .menu-tiles a:focus-visible{ background:rgba(180,195,255,.12); }
.menu-tiles a[aria-current="page"]{ background:rgba(180,195,255,.16); box-shadow:inset 0 0 0 1px rgba(180,195,255,.3); }
.mt-icon{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 58%), linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 18px -10px var(--c2); }
.mt-icon.is-light{ color:#201500; }
.mt-icon svg{ width:21px; height:21px; }
.menu-tiles b{ display:block; font-weight:700; font-size:.95rem; letter-spacing:-.005em; line-height:1.2; }
.menu-tiles small{ display:block; color:var(--night-muted); font-size:.82rem; line-height:1.3; margin-top:2px; }
.menu-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin:10px 4px 0; padding-top:12px; border-top:1px solid rgba(200,212,255,.16);
  font-size:.86rem; color:var(--night-muted); }
details.menu .menu-foot a{ color:var(--frost); font-weight:650; text-decoration:none; white-space:nowrap; padding:0; border:0; }
.menu-foot a:hover{ text-decoration:underline; }

/* On a narrow screen (the home page's bar) a menu opens the full width, under the bar. */
@media (max-width:860px){
  .nav-links .menu-panel{ position:fixed; left:12px; right:12px; top:auto; translate:none; width:auto; max-width:none; max-height:70vh; overflow-y:auto; overscroll-behavior:contain; }
  .nav-links .menu-tiles, .nav-links .menu-tiles.is-wide{ grid-template-columns:1fr; }
  .nav-links .menu-foot{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Everything else: the pages themselves ---------- */
body.page{ margin:0; font-family:var(--font); font-stretch:100%; font-weight:420; font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:var(--night-deep); color:var(--enamel); caret-color:var(--signal); }
.page *, .page *::before, .page *::after{ box-sizing:border-box; }
html:has(body.page){ scroll-behavior:smooth; scrollbar-color:#4C5FA8 var(--night-deep); -webkit-text-size-adjust:100%; }
.page ::selection{ background:var(--frost); color:var(--ink); }
.page a{ color:inherit; text-decoration-thickness:1.5px; text-underline-offset:.2em; }
.page p{ margin:0 0 14px; }
.page h1, .page h2, .page h3{ margin:0; text-wrap:balance; }
.page img{ max-width:100%; height:auto; display:block; }
.page figure{ margin:0; }
.page :is(a, button, summary):focus-visible{ outline:2px solid var(--frost); outline-offset:3px; border-radius:4px; }
.page .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page .skip{ position:absolute; left:16px; top:-60px; z-index:50; padding:10px 14px; border-radius:var(--r-m); background:var(--frost); color:var(--ink); font-weight:700; text-decoration:none; }
.page .skip:focus{ top:12px; }
.page .inner{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }

/* The sky: the home page's, painted still (no film here), with two layers of
   stars that drift and rise a little as the page moves. */
.page .sky{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(34% 30% at 50% 42%, rgba(64,104,224,.3), transparent 72%),
    radial-gradient(120% 95% at 50% 40%, #0B1D5C 0%, #071444 36%, #040B28 68%, #01030D 100%); }
.page .sky::before{ content:""; position:absolute; inset:-14%;
  background:
    radial-gradient(40% 32% at 18% 14%, rgba(48,92,235,.5), transparent 72%),
    radial-gradient(46% 36% at 84% 26%, rgba(20,128,200,.26), transparent 72%),
    radial-gradient(54% 40% at 64% 90%, rgba(62,58,200,.4), transparent 72%),
    radial-gradient(26% 20% at 90% 74%, rgba(168,88,210,.14), transparent 72%),
    radial-gradient(var(--glow-size, 30%) 24% at 50% 8%, var(--glow, rgba(120,150,255,.0)), transparent 72%); }
.page .sky::after{ content:""; position:absolute; inset:0; background:radial-gradient(92% 82% at 50% 42%, transparent 44%, rgba(1,2,10,.74) 100%); }
.page .stars{ position:absolute; inset:-20% -10%; opacity:.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 33% 72%, #DDE5FF 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 58% 34%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 76% 64%, #CFE0FF 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 88% 12%, #fff 50%, transparent 52%), radial-gradient(.9px .9px at 46% 88%, #E8EDFF 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 46%, #C9D6FF 50%, transparent 52%), radial-gradient(1.3px 1.3px at 67% 8%, #fff 50%, transparent 52%);
  background-size:420px 420px; }
.page .stars.far{ background-size:260px 260px; opacity:.45; }
@media (prefers-reduced-motion:no-preference){
  .page .sky::before{ animation:sky-drift 38s ease-in-out infinite alternate; }
  .page .stars{ animation:twinkle 6s ease-in-out infinite alternate; }
  .page .stars.far{ animation-duration:9s; animation-delay:1.5s; }
  @supports (animation-timeline: scroll()){
    .page .stars{ animation:rise-near linear both; animation-timeline:scroll(root); }
    .page .stars.far{ animation-name:rise-far; }
  }
}
@keyframes sky-drift{ to{ transform:translate3d(-4%,-3%,0) scale(1.1) rotate(3deg); } }
@keyframes twinkle{ from{ opacity:.55; } to{ opacity:.95; } }
@keyframes rise-near{ to{ translate:0 -9%; } }
@keyframes rise-far{ to{ translate:0 -3%; } }

/* ---------- Type ---------- */
.page .statement{ font-stretch:112%; font-weight:760; letter-spacing:-.032em; line-height:1.03; font-size:clamp(2.1rem, 4.2vw, 3.6rem); }
.page .display{ font-stretch:114%; font-weight:780; letter-spacing:-.038em; line-height:1; font-size:clamp(2.6rem, 5.6vw, 5rem); }
.page .line1, .page .line2{ display:block; }
.page .line2{ font-style:italic; font-weight:540; font-stretch:104%; letter-spacing:-.024em; color:var(--frost); }
.page .body-l{ font-size:var(--t-body); line-height:1.58; text-wrap:pretty; color:var(--night-muted); max-width:60ch; }
.page .body-l strong{ color:var(--enamel); font-weight:650; }
.page .nums{ font-variant-numeric:tabular-nums; }

/* ---------- Buttons (as on the home page) ---------- */
.page .btn{ font-weight:700; font-stretch:104%; font-size:1rem; line-height:1.1; border-radius:var(--r-m); border:1.5px solid transparent; padding:15px 22px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; color:inherit;
  transition:transform 160ms var(--ease-ui), background-color 160ms ease, border-color 160ms ease, box-shadow 220ms ease, filter 160ms ease; }
.page .btn:active{ transform:scale(.97); }
.page .btn-small{ padding:10px 15px; font-size:var(--t-small); }
.page .btn-ghost{ background:var(--frost-soft); border-color:var(--frost-line); color:var(--enamel); }
@property --rim-turn{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.page .btn-primary{ position:relative; isolation:isolate; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%),
    linear-gradient(100deg, #F0B90B 0%, #FFE27A 18%, var(--signal) 36%, #F3C01A 54%, #FFEB99 72%, var(--signal) 86%, #F0B90B 100%) 0 0 / 300% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1.5px 0 rgba(122,82,0,.22), 0 16px 34px -18px rgba(255,205,60,.6); }
.page .btn-primary::before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--rim-turn), rgba(255,255,255,0) 0 58%, rgba(255,255,255,.95) 74%, #FFF8DA 79%, rgba(255,255,255,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
@media (prefers-reduced-motion:no-preference){
  .page .btn-primary{ animation:gold-flow 11s linear infinite; }
  .page .btn-primary::before{ animation:rim-turn 5.5s linear infinite; }
}
@keyframes gold-flow{ to{ background-position:0 0, 150% 0; } }
@keyframes rim-turn{ to{ --rim-turn:360deg; } }
@media (hover:hover) and (pointer:fine){
  .page .btn-primary:hover{ filter:brightness(1.05) saturate(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1.5px 0 rgba(122,82,0,.22), 0 18px 40px -16px rgba(255,205,60,.85); }
  .page .btn-ghost:hover{ border-color:var(--frost); }
}
.page .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:650; text-decoration:none; padding:12px 2px;
  border-bottom:1.5px solid var(--frost-line); transition:border-color 200ms ease; }
.page .link-arrow svg{ width:16px; height:16px; transition:transform 240ms var(--ease-ui); }
@media (hover:hover) and (pointer:fine){ .page .link-arrow:hover{ border-color:var(--frost); } .page .link-arrow:hover svg{ transform:translateX(3px); } }

/* ---------- Header ---------- */
.page .site-head{ position:sticky; top:0; z-index:20; }
.page .site-head::before{ content:""; position:absolute; inset:0; background:rgba(6,11,38,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(200,212,255,.12); }
@supports (animation-timeline: scroll()){
  .page .site-head::before{ animation:head-lit linear both; animation-timeline:scroll(root); animation-range:10px 110px; }
  @keyframes head-lit{ from{ opacity:0; } }
}
.page .site-nav{ position:relative; display:flex; align-items:center; gap:clamp(16px,2.6vw,34px); height:72px; }
.page .wordmark{ display:inline-flex; align-items:center; gap:10px; font-stretch:122%; font-weight:820; font-size:1.5rem; letter-spacing:-.04em; text-decoration:none; }
.page .wordmark img{ height:32px; width:auto; }
.page .nav-main{ display:flex; align-items:center; gap:clamp(16px,2.6vw,34px); margin-left:auto; }
.page .nav-main > a{ font-weight:600; font-size:var(--t-small); text-decoration:none; padding:10px 0; border-bottom:1.5px solid transparent; transition:border-color 200ms ease; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .page .nav-main > a:hover{ border-color:var(--frost); } }
.page .drawer{ display:none; margin-left:auto; }
.page .drawer > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-m);
  border:1.5px solid var(--frost-line); background:var(--frost-soft); font-weight:700; font-size:var(--t-small); }
.page .drawer > summary::-webkit-details-marker{ display:none; }
.page .drawer > summary svg{ width:16px; height:16px; }
.page .drawer-panel{ position:absolute; left:0; right:0; top:100%; z-index:30; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain;
  padding:8px var(--pad) 28px; background:linear-gradient(180deg, #0E1A52, #060B26); isolation:isolate;
  box-shadow:0 1px 0 rgba(200,212,255,.14), 0 40px 60px -20px rgba(1,3,20,.9);
  transition:opacity 200ms var(--ease-ui), transform 240ms var(--ease-ui); }
@starting-style{ .page .drawer[open] .drawer-panel{ opacity:0; transform:translateY(-8px); } }
.page .drawer-panel .drawer-h{ font-stretch:80%; font-weight:700; font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--frost);
  margin:18px 0 6px; }
.page .drawer-panel .menu-tiles{ grid-template-columns:1fr; }
.page .drawer-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (max-width:860px){
  .page .nav-main{ display:none; }
  .page .drawer{ display:block; }
  .page .site-nav{ height:64px; }
  .page .site-nav > .btn{ display:none; }
}

/* ---------- Hero ---------- */
.page main{ display:block; }
.page .hero{ position:relative; padding-top:clamp(40px,8vh,96px); padding-bottom:0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.page .crumbs{ display:flex; justify-content:center; gap:8px; font-size:var(--t-small); color:var(--night-muted); margin:0 0 clamp(22px,4vh,40px); }
.page .crumbs a{ text-decoration:none; border-bottom:1px solid var(--frost-line); }
.page .crumbs a:hover{ border-color:var(--frost); }
/* The tile from the ribbon, opened up: the page's own colours. */
.page .tile{ --tw:clamp(150px,15vw,200px); position:relative; width:var(--tw); height:calc(var(--tw) * 1.16); display:flex; flex-direction:column; text-align:left;
  padding:calc(var(--tw) * .1); border-radius:calc(var(--tw) * .18); color:#fff; margin-bottom:clamp(28px,5vh,48px);
  background:radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.2), 0 34px 60px -26px var(--c2), 0 60px 120px -40px var(--c2), 0 50px 70px -50px rgba(0,0,0,.85);
  transform:perspective(900px) rotateX(8deg) rotateY(-10deg) rotateZ(-2deg); }
.page .tile.is-light{ color:#201500; }
.page .tile::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 66%) 130% 0 / 260% 100% no-repeat; }
.page .tile-icon{ width:calc(var(--tw) * .3); height:calc(var(--tw) * .3); display:grid; place-items:center; border-radius:calc(var(--tw) * .09);
  background:rgba(255,255,255,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.page .tile.is-light .tile-icon{ background:rgba(255,255,255,.42); }
.page .tile-icon svg{ width:58%; height:58%; }
.page .tile b{ margin-top:auto; font-stretch:106%; font-weight:760; font-size:calc(var(--tw) * .115); letter-spacing:-.015em; line-height:1.08; }
.page .tile small{ margin-top:5px; font-weight:560; font-size:calc(var(--tw) * .074); line-height:1.25; opacity:.9; }
/* An industry's mark: the ring's tile, flat and wide. */
.page .badge-ind{ display:inline-flex; align-items:center; gap:14px; padding:12px 22px 12px 12px; border-radius:22px; margin-bottom:clamp(26px,4.5vh,44px);
  background:linear-gradient(180deg, rgba(34,52,124,.96), rgba(13,23,68,.97)); text-align:left;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.2), 0 0 70px -16px var(--c1), 0 30px 50px -30px rgba(1,4,18,.95); }
.page .badge-ind .mt-icon{ width:54px; height:54px; border-radius:16px; }
.page .badge-ind .mt-icon svg{ width:29px; height:29px; }
.page .badge-ind b{ display:block; font-stretch:106%; font-weight:760; font-size:1.25rem; letter-spacing:-.02em; line-height:1.1; }
.page .badge-ind small{ display:block; color:var(--night-muted); font-size:.88rem; margin-top:3px; }
.page .hero h1{ max-width:18ch; }
.page .hero .body-l{ margin:clamp(18px,3vh,26px) auto 0; text-align:center; max-width:56ch; }
.page .plan-line{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px; margin-top:22px; font-size:var(--t-small); color:var(--night-muted); }
.page .plan-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-s); font-weight:650; color:var(--enamel);
  border:1.5px solid var(--frost-line); background:var(--frost-soft); }
.page .plan-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--frost); }
.page .plan-chip.is-both::before{ background:linear-gradient(90deg, var(--frost) 50%, #63E6BE 50%); }
.page .hero-acts{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; margin-top:clamp(24px,4vh,34px); }

/* ---------- The product, framed (the home page's one frame) ---------- */
.page .frame{ position:relative; border-radius:var(--r-frame); padding:var(--rim);
  background:linear-gradient(180deg, rgba(180,195,255,.2), rgba(142,165,255,.07));
  box-shadow:inset 0 0 0 1px rgba(200,212,255,.26), inset 0 1px 0 rgba(255,255,255,.14), 0 50px 100px -50px rgba(1,4,18,.95), 0 0 90px -30px rgba(120,150,255,.34); }
.page .frame > img{ width:100%; border-radius:calc(var(--r-frame) - var(--rim)); background:#2A42A6; }
.page .frame > video.clip{ display:block; width:100%; height:auto; border-radius:calc(var(--r-frame) - var(--rim)); background:#2A42A6; }
.page .stage{ position:relative; width:100%; margin-top:clamp(44px,7vh,80px); }
.page .stage::before{ content:""; position:absolute; left:10%; right:10%; top:8%; height:70%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, var(--c1, #4C6BFF), transparent); opacity:.28; filter:blur(60px); }
.page .stage.has-phone > .phone{ position:absolute; right:clamp(-10px,2vw,40px); bottom:clamp(-60px,-6vw,-20px); width:clamp(150px,19vw,250px); }
.page .stage.has-phone{ margin-bottom:clamp(30px,6vw,70px); }
/* A phone: the screenshot inside a dark bezel. */
.page .phone{ position:relative; padding:8px; border-radius:38px; background:linear-gradient(160deg, #2B3A7A, #0B1340 60%, #1B2766);
  box-shadow:inset 0 0 0 1.5px rgba(200,212,255,.3), inset 0 1px 0 rgba(255,255,255,.2), 0 40px 70px -30px rgba(1,3,20,.95), 0 0 60px -24px rgba(120,150,255,.5); }
.page .phone > img{ width:100%; border-radius:31px; background:#2A42A6; }
.page .phone > video.clip{ display:block; width:100%; height:auto; border-radius:31px; background:#2A42A6; }
/* The scene films (ADDED 2026-11-12): a calm, silent loop of the workplace a page is about. */
.page .scene{ position:relative; max-width:1080px; margin:0 auto; }
.page .scene .cap{ text-align:center; }
/* The clips (ADDED 2026-11-08): recordings of the app at work. Pause, for anyone who wants it still;
   site.js shows the button and keeps two phones in step. */
.page .clip-bar{ display:none; justify-content:center; margin-top:18px; }
.js .page .clip-bar{ display:flex; }
.page .clip-toggle{ display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:8px 15px 8px 12px; border:0; border-radius:999px; cursor:pointer;
  font:600 var(--t-cap)/1 var(--font); letter-spacing:.01em; color:var(--night-muted); background:rgba(142,165,255,.1);
  box-shadow:inset 0 0 0 1px rgba(180,195,255,.26); transition:color 160ms ease, background 160ms ease, transform 160ms var(--ease-ui); }
.page .clip-toggle svg{ width:12px; height:12px; }
.page .clip-toggle .i-play, .page .clip-toggle[aria-pressed="true"] .i-pause{ display:none; }
.page .clip-toggle[aria-pressed="true"] .i-play{ display:block; }
.page .clip-toggle:active{ transform:scale(.96); }
.page .clip-toggle:focus-visible{ outline:2px solid var(--frost); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ .page .clip-toggle:hover{ color:var(--enamel); background:rgba(142,165,255,.18); } }
.page .phones{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(16px,4vw,56px); }
.page .phones .phone-col{ flex:none; width:clamp(220px,26vw,300px); }
.page .phones .phone-col .phone{ width:100%; }
.page .phones .phone-col:nth-child(2){ margin-top:clamp(28px,6vw,80px); }
.page .phones figcaption, .page .cap{ margin-top:14px; text-align:center; font-size:var(--t-small); color:var(--night-muted); }
.page .phone-col{ display:flex; flex-direction:column; align-items:center; }
.page .phone-col .phone{ width:clamp(220px,24vw,290px); }
.page .panel-shot{ border-radius:var(--r-l); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(200,212,255,.26), 0 40px 80px -40px rgba(1,4,18,.95); }

/* ---------- Sections ---------- */
.page .sec{ padding-top:clamp(96px,16vh,190px); }
.page .sec-head{ max-width:64ch; }
.page .sec-head .body-l{ margin-top:clamp(16px,2.6vh,24px); }
.page .sec-head.center{ margin-inline:auto; text-align:center; }
.page .sec-head.center .body-l{ margin-inline:auto; }

/* How it works: the steps down one side, the picture held beside them. */
.page .flow{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(40px,6vw,96px); align-items:start; margin-top:clamp(40px,6vh,64px); }
.page .flow.flip{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.page .flow.flip .flow-art{ order:-1; }
.page .flow-art{ position:sticky; top:100px; display:flex; justify-content:center; }
.page .steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.page .steps li{ position:relative; padding:0 0 clamp(26px,4vh,40px) 64px; counter-increment:step; }
.page .steps li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-weight:780; font-stretch:110%; font-size:1.05rem; color:var(--tile-ink, #fff);
  background:radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 58%), linear-gradient(155deg, var(--c1, #4C6BFF), var(--c2, #3D5AFE));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -12px var(--c2, #3D5AFE); }
.page .steps li::after{ content:""; position:absolute; left:19px; top:46px; bottom:6px; width:1.5px; background:linear-gradient(var(--frost-line), transparent); }
.page .steps li:last-child::after{ display:none; }
.page .steps h3{ font-stretch:106%; font-weight:720; font-size:clamp(1.18rem,1.6vw,1.4rem); letter-spacing:-.016em; line-height:1.2; }
.page .steps p{ margin:8px 0 0; color:var(--night-muted); max-width:52ch; }

/* The detail: two columns of short entries on frost rules (not boxes). */
.page .facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(32px,5vw,72px); margin:clamp(36px,5vh,56px) 0 0; }
.page .facts > div{ padding:22px 0 24px; border-top:1px solid rgba(180,195,255,.2); }
.page .facts dt{ font-weight:700; font-size:1.08rem; letter-spacing:-.008em; }
.page .facts dd{ margin:6px 0 0; color:var(--night-muted); max-width:56ch; }
.page .facts .plan-note{ display:inline-block; margin-left:6px; font-stretch:80%; font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--frost); vertical-align:2px; }

/* Wide picture with copy over its top edge. */
.page .showcase{ margin-top:clamp(40px,6vh,64px); }
.page .showcase .cap{ text-align:left; max-width:72ch; }

/* The plan this part comes with. */
.page .plan-band{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px 40px; margin-top:clamp(40px,6vh,56px);
  padding:clamp(24px,3.4vw,40px); border-radius:var(--r-frame);
  background:linear-gradient(135deg, rgba(50,76,180,.62), rgba(20,34,100,.72));
  box-shadow:inset 0 0 0 1px rgba(200,212,255,.24), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -50px rgba(1,4,18,.95); }
.page .plan-band h2{ font-stretch:108%; font-weight:740; font-size:clamp(1.5rem,2.4vw,2.05rem); letter-spacing:-.024em; line-height:1.1; }
.page .plan-band p{ margin:10px 0 0; color:var(--night-muted); max-width:62ch; }
.page .plan-band .acts{ display:flex; flex-wrap:wrap; gap:12px; }
.page .plan-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); margin-top:clamp(36px,5vh,52px); }
.page .plan-pair > div{ padding:clamp(22px,2.8vw,34px); border-radius:var(--r-frame); background:linear-gradient(160deg, rgba(50,76,180,.55), rgba(16,28,88,.7));
  box-shadow:inset 0 0 0 1px rgba(200,212,255,.22), inset 0 1px 0 rgba(255,255,255,.1); }
.page .plan-pair h3{ font-stretch:106%; font-weight:740; font-size:1.35rem; letter-spacing:-.02em; }
.page .plan-pair .price{ margin:12px 0 0; font-size:1.02rem; color:var(--enamel); }
.page .plan-pair .price b{ font-stretch:110%; font-weight:780; font-size:1.7rem; letter-spacing:-.02em; }
.page .plan-pair p{ color:var(--night-muted); margin:10px 0 0; }
.page .plan-pair ul{ margin:14px 0 0; padding-left:1.1em; color:var(--night-muted); }
.page .plan-pair li{ margin-bottom:6px; }
.page .examples{ margin-top:18px; font-size:var(--t-small); color:var(--night-muted); }

/* In each industry: one line each, with the ring's icon. */
.page .sectors{ list-style:none; margin:clamp(32px,5vh,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,72px); }
.page .sectors li{ border-top:1px solid rgba(180,195,255,.2); }
.page .sectors a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:20px 0; text-decoration:none; }
.page .sectors b{ display:block; font-weight:700; font-size:1.06rem; }
.page .sectors span.t{ display:block; color:var(--night-muted); margin-top:3px; font-size:.98rem; }
.page .sectors .go{ width:18px; height:18px; color:var(--frost); transition:transform 220ms var(--ease-ui); }
@media (hover:hover) and (pointer:fine){ .page .sectors a:hover b{ text-decoration:underline; text-decoration-color:var(--frost); } .page .sectors a:hover .go{ transform:translateX(4px); } }

/* The parts that go with it: small tiles from the ribbon, each a link. */
.page .ribbon{ list-style:none; margin:clamp(30px,5vh,44px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px; }
.page .ribbon a{ --tw:128px; width:var(--tw); height:calc(var(--tw) * 1.16); display:flex; flex-direction:column; padding:13px; border-radius:22px; color:#fff; text-decoration:none;
  background:radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.2), 0 22px 36px -22px var(--c2);
  transition:transform 220ms var(--ease-ui), box-shadow 220ms ease; }
.page .ribbon a.is-light{ color:#201500; }
.page .ribbon .mt-icon{ width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.page .ribbon a.is-light .mt-icon{ background:rgba(255,255,255,.42); color:#201500; }
.page .ribbon b{ margin-top:auto; font-stretch:106%; font-weight:760; font-size:.98rem; line-height:1.08; letter-spacing:-.01em; }
.page .ribbon small{ margin-top:4px; font-weight:560; font-size:.74rem; line-height:1.25; opacity:.9; }
.page .ribbon a:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .page .ribbon a:hover{ transform:translateY(-4px) scale(1.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.3), 0 30px 46px -22px var(--c2); } }

/* Problems a sector has: a ruled list, the first words bold. */
.page .pains{ list-style:none; margin:clamp(32px,5vh,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,72px); }
.page .pains li{ padding:20px 0 22px; border-top:1px solid rgba(180,195,255,.2); color:var(--night-muted); }
.page .pains b{ display:block; color:var(--enamel); font-size:1.06rem; margin-bottom:4px; }

/* Questions. */
.page .faq{ margin-top:clamp(32px,5vh,48px); border-bottom:1px solid rgba(180,195,255,.2); max-width:880px; }
.page .faq details{ border-top:1px solid rgba(180,195,255,.2); }
.page .faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-weight:680; font-size:1.08rem; }
.page .faq summary::-webkit-details-marker{ display:none; }
.page .faq summary svg{ flex:none; width:20px; height:20px; color:var(--frost); transition:transform 220ms var(--ease-ui); }
.page .faq details[open] summary svg{ transform:rotate(45deg); }
.page .faq details p{ margin:0 0 22px; color:var(--night-muted); max-width:70ch; }

/* The close: one line, one button. */
.page .closing{ padding-top:clamp(110px,18vh,210px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.page .closing .body-l{ margin:18px auto 0; text-align:center; }
.page .closing .hero-acts{ margin-top:28px; }

/* ---------- Footer ---------- */
.page .site-foot{ margin-top:clamp(96px,15vh,170px); border-top:1px solid var(--night-line); padding:clamp(40px,6vh,64px) 0 calc(36px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(4,9,30,.0), rgba(4,9,30,.55)); }
.page .foot-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr); gap:32px clamp(24px,4vw,56px); }
.page .foot-brand p{ margin:14px 0 0; color:var(--night-muted); font-size:var(--t-small); max-width:30ch; }
.page .foot-brand a.mail{ color:var(--frost); font-weight:650; text-decoration:none; font-size:var(--t-small); }
.page .foot-h{ font-stretch:80%; font-weight:700; font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--frost); margin:0 0 12px; }
.page .foot-list{ list-style:none; margin:0; padding:0; font-size:var(--t-small); }
.page .foot-list.two{ columns:2; column-gap:24px; }
.page .foot-list li{ padding:5px 0; break-inside:avoid; }
.page .foot-list a{ text-decoration:none; color:var(--night-muted); transition:color 160ms ease; }
.page .foot-list a:hover{ color:var(--enamel); text-decoration:underline; text-decoration-color:var(--frost); }
.page .foot-list a[aria-current="page"]{ color:var(--enamel); }
.page .foot-base{ margin-top:clamp(36px,5vh,52px); padding-top:20px; border-top:1px solid rgba(200,212,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.84rem; color:var(--night-muted); }

/* ---------- Arrival: the camera only flies forward ----------
   What's next comes from a little ahead as it scrolls in, once. The page is
   whole without this script; reduced motion keeps only the fade. */
.js .page [data-rise]{ opacity:0; transform:translate3d(0,26px,0) scale(.975); filter:blur(6px);
  transition:opacity 900ms var(--ease-out), transform 1100ms var(--ease-out), filter 900ms ease; transition-delay:var(--d, 0ms); }
.js .page [data-rise].is-in{ opacity:1; transform:none; filter:none; }
.js .page .tile[data-rise]{ transform:perspective(900px) rotateX(24deg) rotateY(-22deg) rotateZ(-6deg) translate3d(0,40px,-60px) scale(.88); }
.js .page .tile[data-rise].is-in{ transform:perspective(900px) rotateX(8deg) rotateY(-10deg) rotateZ(-2deg); }
.js .page .tile.is-in::after{ animation:sheen 1800ms var(--ease-out) 700ms both; }
@keyframes sheen{ 0%{ background-position:130% 0; opacity:0; } 30%{ opacity:1; } 100%{ background-position:-40% 0; opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .js .page [data-rise], .js .page .tile[data-rise]{ transform:none; filter:none; transition:opacity 400ms ease; }
  .page .tile{ transform:none; }
}

/* ---------- Touch screens (ADDED 2026-11-08) ----------
   Small links get a bigger area to tap, drawn by nothing. */
@media (pointer:coarse){
  .page .crumbs a, .page .foot-brand a.mail{ position:relative; }
  .page .crumbs a::after, .page .foot-brand a.mail::after{ content:""; position:absolute; inset:-11px -8px; }
  .page .clip-toggle{ min-height:42px; }
}

/* ---------- Short wide screens (ADDED 2026-11-08) ----------
   13 to 15 inch laptops and iPads held sideways: a tighter top, so the picture or clip
   starts in the first screen instead of below it. */
@media (min-width:900px) and (max-height:940px){
  .page .hero{ padding-top:clamp(24px,4.5vh,52px); }
  .page .crumbs{ margin-bottom:clamp(12px,2.4vh,22px); }
  .page .tile{ --tw:clamp(112px,16vh,170px); margin-bottom:clamp(18px,3vh,30px); }
  .page .badge-ind{ margin-bottom:clamp(16px,2.8vh,28px); }
  .page .hero .display{ font-size:clamp(2.6rem, min(5.6vw, 8.4vh), 5rem); }
  .page .hero .body-l{ margin-top:clamp(12px,2vh,20px); max-width:68ch; }
  .page .hero-acts{ margin-top:clamp(16px,2.8vh,26px); }
  .page .hero .stage{ margin-top:clamp(26px,4vh,48px); }
}

/* ---------- Narrow screens ---------- */
@media (max-width:980px){
  .page .flow, .page .flow.flip{ grid-template-columns:1fr; }
  .page .flow.flip .flow-art{ order:0; }
  .page .flow-art{ position:relative; top:0; }
  .page .foot-grid{ grid-template-columns:1fr 1fr; }
  .page .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  :root{ --pad:16px; }
  .page .facts, .page .sectors, .page .pains, .page .plan-pair{ grid-template-columns:1fr; }
  .page .plan-band{ grid-template-columns:1fr; }
  .page .stage.has-phone > .phone{ position:relative; right:auto; bottom:auto; width:min(64%,250px); margin:-18% auto 0; }
  .page .stage.has-phone{ margin-bottom:0; }
  /* Phones one above the other (CHANGED 2026-11-12, studio I-1): side by side each was 163px
     wide at 390 and its screen couldn't be read; at about 300px a recording shows at its own
     size. A pair of clips still plays as one (site.js). */
  .page .phones{ flex-direction:column; align-items:center; gap:32px; }
  .page .phones .phone-col{ width:min(78vw,300px); max-width:none; }
  .page .phones .phone{ padding:5px; border-radius:26px; }
  .page .phones .phone > img{ border-radius:22px; }
  .page .phones .phone-col:nth-child(2){ margin-top:0; }
  .page .phones figcaption{ font-size:.82rem; }
  /* A computer recording with a phone version (ADDED 2026-11-12, studio): at 390 the whole
     roster grid was 348px wide and couldn't be read, so phones play a 4:5 recording that
     follows the action up close. Until it loads, the poster shows its top-left, where it starts. */
  .page .frame > video.clip[data-narrow]{ aspect-ratio:4 / 5; object-fit:cover; object-position:left top; }
  .page .steps li{ padding-left:56px; }
  /* CHANGED 2026-11-08 (Dave: check every screen size): three to a row, sized from the
     page's own width, so a 320px phone doesn't scroll sideways. */
  .page .ribbon{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .page .ribbon a{ width:auto; height:auto; aspect-ratio:1 / 1.16; padding:10px; border-radius:18px; container-type:inline-size; }
  /* The name fits its tile: "Noticeboard" and "Certificates" are long for a third of a phone. */
  .page .ribbon b{ font-size:clamp(.72rem, 14.5cqw, .98rem); hyphens:auto; overflow-wrap:break-word; }
  .page .ribbon .mt-icon{ width:30px; height:30px; border-radius:9px; }
  .page .ribbon .mt-icon svg{ width:17px; height:17px; }
  .page .ribbon small{ display:none; }
  .page .foot-grid{ grid-template-columns:1fr; }
  .page .foot-list.two{ columns:2; }
  .page .badge-ind{ padding:10px 18px 10px 10px; }
}
/* The smallest phones (320 to 380px): two tiles to a row. */
@media (max-width:380px){
  .page .ribbon{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- A reading page (security) ---------- */
.page .prose-hero{ padding-bottom:0; }
.page .prose{ max-width:760px; margin:0 auto; }
.page .prose h1{ font-stretch:112%; font-weight:770; font-size:clamp(2.3rem,4.6vw,3.6rem); letter-spacing:-.034em; line-height:1.04; margin:0 0 18px; }
.page .prose h2{ font-stretch:108%; font-weight:730; font-size:clamp(1.4rem,2.2vw,1.75rem); letter-spacing:-.02em; line-height:1.15; margin:clamp(44px,7vh,64px) 0 12px; }
.page .prose p, .page .prose li, .page .prose dd{ color:var(--night-muted); }
.page .prose p.lede{ font-size:var(--t-body); }
.page .prose strong, .page .prose dt{ color:var(--enamel); }
.page .prose a:not(.btn){ color:var(--frost); }
.page .prose ul, .page .prose ol{ padding-left:1.2em; margin:0 0 14px; }
.page .prose li{ margin-bottom:10px; }
.page .prose dt{ font-weight:700; margin-top:16px; }
.page .prose dd{ margin:4px 0 0; }
.page .prose .btn{ margin-top:6px; }

/* Guides: comparison pages and free roster templates (ADDED 2026-11-08). */
.page .guide-hero{ padding-bottom:0; }
.page .guide-text{ margin-top:clamp(20px,3vh,28px); display:grid; gap:14px; }
.page .table-wrap{ margin-top:clamp(36px,5vh,56px); overflow-x:auto; border-radius:var(--r-l);
  background:linear-gradient(180deg, rgba(30,46,120,.55), rgba(12,22,72,.55)); box-shadow:inset 0 0 0 1px rgba(200,212,255,.2); }
.page .table-wrap:focus-visible{ outline:2px solid var(--frost); outline-offset:3px; }
.page table.grid{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--t-small); font-variant-numeric:tabular-nums; }
.page table.grid caption{ caption-side:top; text-align:left; padding:18px 20px 4px; color:var(--night-muted); font-size:var(--t-cap); }
.page table.grid th, .page table.grid td{ padding:14px 20px; text-align:left; vertical-align:top; border-top:1px solid rgba(180,195,255,.16); }
.page table.grid thead th{ border-top:0; font-stretch:80%; font-weight:700; font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--frost); }
.page table.grid tbody th{ font-weight:650; color:var(--enamel); }
.page table.grid td{ color:var(--night-muted); }
.page table.grid a{ color:var(--frost); }
.page table.grid.tight{ min-width:100%; width:max-content; }
.page table.grid.tight th, .page table.grid.tight td{ white-space:nowrap; padding-inline:16px; }
.page .sources{ list-style:none; margin:clamp(28px,4vh,40px) 0 0; padding:0; display:grid; gap:10px; font-size:var(--t-small); }
.page .sources a{ color:var(--frost); }
.page .sources span{ color:var(--night-muted); margin-left:6px; }
.page .foot-h2{ margin-top:28px; }
@media print{ .page .table-wrap{ background:none; box-shadow:none; overflow:visible; } .page table.grid{ min-width:0; } }