/* ═══════════════════════════════════════════════════════════════
   Night to morning: the look of every page, and its motion.

   The site's story is a night the business sleeps through. So the
   first screen is night, How it works turns to dawn as the 3D stack
   opens (a sun rises behind it), the rest of the page is morning
   paper, and the footer is dusk into night again. Orange is the
   sunrise: buttons, the one underlined phrase, the hour of an
   enquiry. Nothing else is orange.

   Loaded after each page's own styles (index.html inline, the
   industry pages' industry.css) and overriding them; motion.js sets
   the classes this file animates. A reader who asked for less motion
   gets the colours and none of the movement (the block at the end).
   Chosen 6 Nov 2026 from three previews; docs/plans/marketing-site.md.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --night: #101B2C; --night-2: #18263B; --night-line: #26364F;
  --moon: #F3EDE2; --moon-2: #B7C3D4;
  --sun: #F08A4B; --sun-2: #F6A06B; --sun-ink: #1A0F08;
  --accent: #F08A4B; --accent-2: #F6A06B;
  --accent-text: #A9461A;  /* small sunrise type on paper: 5.1:1 */
  --accent-fill: #F08A4B;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* a sky's worth of stars as one background, reused wherever it is night */
  --stars:
    radial-gradient(1.6px 1.6px at 6% 12%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1px 1px at 17% 64%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 28% 28%, #B7C3D4 50%, transparent 55%),
    radial-gradient(1px 1px at 38% 82%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 47% 9%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1px 1px at 56% 48%, #B7C3D4 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 66% 72%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1px 1px at 74% 22%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 83% 58%, #B7C3D4 50%, transparent 55%),
    radial-gradient(1px 1px at 92% 34%, #F3EDE2 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 97% 88%, #F3EDE2 50%, transparent 55%);
}
html { background: var(--night) }

/* ── type: Bebas for the first screen only, headings in normal case elsewhere ── */
h2, h3 { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.08 }
.sec-head h2, .honest h2, .math h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); max-width: 22ch }
.sec-head h2 em, .honest h2 em, .rig-end .t em, .math h2 b {
  color: inherit; font-style: normal; font-weight: inherit;
  text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: .12em; text-underline-offset: .16em }
.prod h3 { font-size: 24px } .trade h3 { font-size: 1.9rem } .deal h3, .d h3, .day h3 { font-size: 1.35rem }
.lbl { letter-spacing: .12em }
.prod .k, .trade li .n, .trade-more { color: var(--ink-2) }
.mark i { color: var(--sun) }
.prog { background: var(--sun) }

/* ── buttons: rounded and readable; sunrise only on the main one ── */
.btn { border-radius: 999px; font-family: "Instrument Sans", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 13px 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s }
.btn:hover { transform: translateY(-2px) } .btn:active { transform: translateY(0) }
.btn-go { background: var(--sun); color: var(--sun-ink) }
.btn-go:hover { background: var(--sun-2); color: var(--sun-ink); box-shadow: 0 12px 28px rgba(240,138,75,.35) }
.nav .nav-links .nav-cta { border-radius: 999px; font-family: "Instrument Sans", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--night); color: var(--moon) }
.nav .nav-links .nav-cta:hover { background: var(--sun); color: var(--sun-ink) }

/* ── the menu bar: night-coloured over the night (motion.js sets .night) ── */
.nav, .nav .mark, .nav .nav-links a, .menu-btn::before, .menu-btn::after { transition: background-color .45s, color .45s, box-shadow .45s }
/* solid, not transparent: the industry pages' bar sits above their first screen
   rather than over it; on the homepage it is the hero's own colour anyway */
.nav.night { background: rgba(16,27,44,.92); box-shadow: none }
.nav.night.mini, .nav.night.open { box-shadow: 0 1px 0 var(--night-line) }
.nav.night .mark { color: var(--moon) }
.nav.night .nav-links a { color: var(--moon-2) }
.nav.night .nav-links a:hover { color: var(--moon) }
.nav.night .nav-links .nav-cta { background: var(--sun); color: var(--sun-ink) }
.nav.night .langs a.on { color: var(--sun) !important; border-bottom-color: var(--sun) }
.nav.night .menu-btn::before, .nav.night .menu-btn::after { background: var(--moon) }
.nav.night + .menu, .nav.night .menu { background: var(--night) }

/* ── night: the first screen ── */
.hero { background: var(--night); color: var(--moon); border-bottom: 0; position: relative; isolation: isolate; overflow: hidden }
.hero > .shell { position: relative; z-index: 1 }
.hero .kicker { color: var(--moon-2) } .hero .kicker::before { background: var(--sun) }
.hero h1 { color: var(--moon) } .hero h1 em { color: var(--sun) }
.hero-sub, .hero .trust, .hero .lede { color: var(--moon-2) }
.hero .btn-out { border-color: #4A5D78; color: var(--moon) } .hero .btn-out:hover { background: var(--moon); color: var(--night) }
.hero-shot { position: relative }
.hero-shot img { border-color: #24344D; box-shadow: 0 30px 60px rgba(0,0,0,.35) }
.hero-shot figcaption { color: #8C9BB2 }
.hero .chat { box-shadow: 0 30px 60px rgba(0,0,0,.35); border-color: transparent; border-radius: 16px; overflow: hidden }
/* the assistant's replies in night navy: industry.css filled them with the accent and white type, 2.4:1 on sunrise */
.us .bubble { background: var(--night); color: var(--moon) }
.chat-head b { color: var(--accent-text) }
.after { border-top: 0 }

/* stars wherever it is night: two layers that twinkle out of step */
.hero::before, .hero::after, .story::before, .honest::before, .math::before, .foot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--stars); background-size: 100% 620px; background-repeat: repeat }
.hero::after { background-position: 41% 290px; background-size: 100% 540px; opacity: .55 }
.honest, .math { position: relative; isolation: isolate }
.honest > .shell, .math > .shell { position: relative; z-index: 1 }

/* ── night into dawn: How it works and its 3D stage (homepage) ── */
.story { position: relative; isolation: isolate; color: var(--moon); border-bottom: 0;
  background: linear-gradient(to bottom, var(--night) 0%, var(--night) 60%, #262B49 72%, #7E4F63 82%, #E39A73 91%, var(--paper) 100%) }
.story::before { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 70%) }
.story > .shell, .story .rig { position: relative; z-index: 1 }
.story .lbl { color: var(--moon-2) } .story .sec-head h2 { color: var(--moon) }
.story .steps { border-color: var(--night-line) }
.story .steps li { background: var(--night-2); border-color: var(--night-line); color: var(--moon) }
.story .steps p:not(.k) { color: var(--moon-2) }
.ann-body { background: rgba(16,27,44,.84); padding: 10px 12px; border-radius: 10px }
.ann-k, .ann-cap .ann-k { color: var(--sun) } .ann-t, .ann-cap .ann-t { color: var(--moon) } .ann-p, .ann-cap .ann-p { color: var(--moon-2) }
.ann-line { background: var(--moon-2) } .ann-dot { background: var(--sun) }
.hint { color: var(--moon-2) }
.rig-end .t { color: var(--ink) }
#stage { z-index: 1 }
/* the sun rises behind the stack as it opens: motion.js sets --sunp from 0 to 1 */
.sun { position: absolute; left: 50%; bottom: -34vh; width: min(78vw, 760px); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,170,.95) 0%, rgba(246,160,107,.6) 30%, rgba(240,138,75,.22) 52%, rgba(240,138,75,0) 70%);
  opacity: var(--sunp, 0); transform: translate(-50%, calc((1 - var(--sunp, 0)) * 34vh)) }

/* ── morning: the night returns only where it means something ── */
.honest, .math { background: var(--night) } .deal li .n { color: var(--sun) }
.trade.b { background: var(--night); border-color: var(--night) } .trade.b .trade-more { color: var(--sun) }
.tier.hot { background: var(--night); color: var(--moon) } .tier.hot .tier-p { color: var(--moon) }
table.cmp thead th.us { background: var(--night) }
table.cmp td.us { background: #EEF1F6; box-shadow: inset 1px 0 0 var(--night), inset -1px 0 0 var(--night) }
.steps li:last-child { background: var(--night) } .steps li:last-child .k { color: var(--sun) }
.math .btn-out { border-color: #4A5D78; color: var(--moon) }

/* cards with air between them, so each can lift on its own */
.prod, .tiers, .dgrid { border: 0; background: transparent; gap: 14px }
.prod article, .tier, .d { border: 1px solid var(--line) !important; border-radius: 14px; margin: 0 }
.trade { border-radius: 14px }
.prod article, .tier, .d, .trade, .day, .tour-frame, .shot a {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease) }
.prod article:hover, .tier:hover, .d:hover, .trade:hover, .day:hover {
  transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16,27,44,.10) }
.tour-frame, .shot a { border-radius: 14px }

/* ── dusk into night: the footer ── */
.foot { background: var(--night); color: var(--moon-2); border-top: 0; position: relative; isolation: isolate }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(239,234,225,0), #E9B38F 45%, #5A4160 80%, var(--night)) }
.foot > .shell { position: relative; z-index: 1 }
.foot p, .foot-cta p { color: var(--moon-2) } .foot a { color: var(--sun) }
.foot .mark, .foot-cta h3 { color: var(--moon) }
.foot .btn-out { border-color: #4A5D78; color: var(--moon) }
.foot .btn-go, .foot .btn-go:hover { color: var(--sun-ink) }  /* the page's own .foot .btn-go set white: 2.4:1 on sunrise */

/* ═══ motion (all of it skipped under prefers-reduced-motion) ═══ */
@media (prefers-reduced-motion: no-preference) {
  /* the first screen arrives in order */
  .hero .kicker, .hero h1, .hero-sub, .hero .lede, .hero .cta-row, .hero .trust { animation: rise .9s var(--ease) both }
  .hero h1 { animation-delay: .08s } .hero-sub, .hero .lede { animation-delay: .2s }
  .hero .cta-row { animation-delay: .32s } .hero .trust { animation-delay: .44s }
  .hero-shot, .hero .chat { animation: rise 1.1s .3s var(--ease) both }
  .hero-shot img { animation: float 8s 1.4s ease-in-out infinite }
  .hero::before, .story::before, .honest::before, .math::before, .foot::after { animation: twinkle 5.5s ease-in-out infinite }
  .hero::after { animation: twinkle 7.5s 1.8s ease-in-out infinite }

  /* an industry page's conversation plays out */
  .chat .msg { animation: msg-in .55s var(--ease) both }
  .chat .msg:nth-child(1) { animation-delay: .7s } .chat .msg:nth-child(2) { animation-delay: 1.7s }
  .chat .msg:nth-child(3) { animation-delay: 2.7s } .chat .msg:nth-child(4) { animation-delay: 3.6s }
  .chat .msg:nth-child(5) { animation-delay: 4.5s } .chat .msg:nth-child(6) { animation-delay: 5.4s }
  .chat-foot .tag { animation: rise .5s var(--ease) both; animation-delay: 5.2s }
  .chat-foot .tag:nth-child(2) { animation-delay: 5.35s } .chat-foot .tag:nth-child(3) { animation-delay: 5.5s }
  .chat-foot .tag:nth-child(4) { animation-delay: 5.65s } .chat-foot .tag:nth-child(5) { animation-delay: 5.8s }

  /* blocks rise as they scroll in (motion.js adds .rv, then .in; --i staggers siblings) */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms) }
  .rv.in { opacity: 1; transform: none }

  /* a tour screen fades in when its tab is chosen; a recalculated sum pops */
  .tour-pane:not([hidden]) { animation: fade .45s var(--ease) both }
  .pop { animation: pop .45s var(--ease); transform-origin: left center }
}

/* the night's enquiries arriving beside the phone (homepage; motion.js) */
.pings { position: absolute; left: -64px; top: 14%; width: 236px; display: grid; gap: 10px; z-index: 2; pointer-events: none }
.ping { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline;
  padding: 10px 14px; border-radius: 14px; background: rgba(24,38,59,.94); border: 1px solid var(--night-line);
  color: var(--moon); font-size: 13px; line-height: 1.35; box-shadow: 0 14px 30px rgba(0,0,0,.35); animation: ping-in .6s var(--ease) both }
.ping b { font-family: "Fragment Mono", monospace; font-weight: 400; font-size: 12px; color: var(--sun) }
.ping span { font-weight: 600 }
.ping i { grid-column: 2; font-style: normal; color: var(--moon-2); font-size: 12.5px }
.ping.out { animation: ping-out .45s ease both }
/* on a phone the notifications get a strip of their own above the phone, so they never cover the
   conversation in it (the picture is there to be read); no strip where there is no motion to fill it */
@media (max-width: 900px) { .pings { left: 0; right: 0; top: 0; width: auto; justify-items: center } }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .hero-shot { padding-top: 132px } }

@keyframes rise { from { opacity: .01; transform: translateY(22px) } }
@keyframes float { 50% { transform: translateY(-8px) } }
@keyframes twinkle { 0%, 100% { opacity: .35 } 50% { opacity: .95 } }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.98) } }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { 40% { transform: scale(1.06) } }
@keyframes ping-in { from { opacity: 0; transform: translateX(-18px) scale(.96) } }
@keyframes ping-out { to { opacity: 0; transform: translateY(-10px) } }

@media (prefers-reduced-motion: reduce) {
  .sun { display: none }
  .ping, .ping.out { animation: none }
  .nav, .nav .mark, .nav .nav-links a, .btn, .prod article, .tier, .d, .trade, .day { transition: none }
}