/* v2 fixes, 2026-10-05. Loaded last on every page.
   These sections were designed on a dark ground and later moved to a light
   one; the text colours never followed. Everything here puts dark ink on the
   light grounds, and uses a deeper blue for small labels so they pass 4.5:1. */
:root{ --ember-deep:#0B6FB8; }

/* small blue labels on light grounds */
.eyebrow, .eyebrow.on-dark,
.demo .eyebrow, .demo .eyebrow.on-dark,
.companion .eyebrow, .companion .eyebrow.on-dark,
#companion .eyebrow, #voice .eyebrow,
.close .eyebrow.on-dark, .close-cta .eyebrow.on-dark,
#thing .ds__side{ color:var(--ember-deep) !important; }

/* phone demo caption */
.beat{ color:var(--ink) !important; }
.beat em, .beat.said{ color:var(--ember-deep) !important; }

/* photo collage line */
#tuesdays .room5__line{ color:var(--ink) !important; }

/* companion section */
#companion h2 .lit{ color:var(--ember-deep) !important; }
#companion .cmp__p{ color:var(--ink-2) !important; }
#companion .cmp__p--lead{ color:var(--ink) !important; }
#companion .cmp__say{ color:var(--ink) !important; }
#companion .cmp__who{ color:var(--ink-3) !important; }
#companion .cmp__say--her{ background:#FFFFFF !important; border-color:rgba(0,27,61,.12) !important; }
#companion .cmp__say--it{ background:#E3F3FF !important; border-color:rgba(11,111,184,.30) !important; }
#companion .cmp__say--it .cmp__who,
#companion .cmp__day--gap span{ color:var(--ember-deep) !important; }

/* closing signup headline */
.close h2.display, .close-cta h2.display, #close-h{ color:var(--ink) !important; }
.close h2 .lit, .close-cta h2 .lit{ color:var(--ember-deep) !important; }

/* consent text links inside the form */
.check span i a{ color:inherit; text-decoration:underline; }

/* ------------------------------------------------------------------
   PHONE DEMO. A light-theme phone showing an ordinary SMS thread:
   green sent bubbles, grey received bubbles, contact centred at the top.
   Green means SMS. Never blue.
   ------------------------------------------------------------------ */
.demo .phone{
  width:292px !important; max-width:100% !important; box-sizing:border-box !important;
  padding:9px !important; border-radius:46px !important; margin-inline:auto;
  background:#0B0B0D !important; border:0 !important; transform:none !important;
  box-shadow:0 0 0 2.5px #C9CCD1, 0 0 0 3.5px #8E9299, 0 34px 60px -30px rgba(0,27,61,.55) !important;
}
.demo .phone::before, .demo .phone::after{ display:none !important; }
.demo .phone__screen{
  width:100% !important; height:548px !important; box-sizing:border-box !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:38px !important;
  background:#FFFFFF !important; box-shadow:none !important; overflow:hidden !important;
  display:flex !important; flex-direction:column !important; position:relative !important; transform:none !important;
}
.demo .phone__screen::before, .demo .phone__screen::after{ display:none !important; }

/* status bar */
.demo .ios-status{ flex:none !important; position:relative !important; height:auto !important;
  padding:13px 24px 4px !important; color:#000 !important; background:#FFFFFF !important; }
.demo .ios-status__time{ font-size:13.5px !important; font-weight:600 !important; padding-left:4px !important; color:#000 !important; }
.demo .ios-ic{ fill:#000 !important; }
.demo .ios-batt{ border-color:rgba(0,0,0,.45) !important; }
.demo .ios-batt::after{ background:rgba(0,0,0,.45) !important; }
.demo .ios-batt__fill{ background:#000 !important; }
.demo .ios-island{ top:10px !important; width:78px !important; height:23px !important; border-radius:14px !important; background:#0B0B0D !important; }

/* conversation header: back arrow left, contact centred */
.demo .phone__screen .to{
  position:relative !important; inset:auto !important; height:auto !important; min-height:0 !important;
  flex:none !important; box-sizing:border-box !important; transform:none !important; z-index:2 !important;
  display:flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important;
  padding:8px 14px 9px !important; margin:0 !important; overflow:visible !important;
  background:#FFFFFF !important; border:0 !important; border-bottom:1px solid rgba(0,0,0,.08) !important;
}
.demo .to__ft{ display:none !important; }
.demo .to__back{
  position:absolute !important; left:18px !important; top:22px !important; width:10px !important; height:10px !important; margin:0 !important;
  border:0 !important; border-left:2.4px solid #0A84FF !important; border-bottom:2.4px solid #0A84FF !important;
  transform:rotate(45deg) !important; background:none !important;
}
.demo .to__center{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; text-align:center; }
.demo .to__avatar{
  width:40px !important; height:40px !important; border-radius:50% !important;
  background:linear-gradient(180deg,#A9AEB8,#868B96) !important; color:#fff !important; font-size:18px !important; font-weight:600 !important;
}
.demo .phone__screen .to__name{ display:flex !important; align-items:center; gap:2px; font-size:12px !important; font-weight:500 !important; color:#000 !important; line-height:1.2 !important; }
.demo .to__chev{ display:inline !important; color:rgba(0,0,0,.3) !important; font-size:12px !important; }
.demo .phone__screen .to__num{ display:block !important; font-size:10px !important; color:#8A8A8E !important; line-height:1.1 !important; }

/* thread */
.demo .phone__screen .thread{ background:#FFFFFF !important; padding:8px 14px 16px !important; }
.demo .phone .thread__day{ color:#8A8A8E !important; font-size:10.5px !important; font-weight:400 !important; line-height:1.35 !important; margin:2px 0 8px !important; }
.demo .phone .thread__day b{ display:block; color:#8A8A8E !important; font-weight:500 !important; }
.demo .phone .bub{ font-size:14px !important; line-height:1.3 !important; padding:7px 12px !important; border-radius:18px !important; max-width:76% !important; }
.demo .phone .bub--you, .demo .phone .bub--you.thread__seed{ --bub:#34C759; background:#34C759 !important; color:#FFFFFF !important; }
.demo .phone .bub--her, .demo .phone .bub--her.thread__seed{ --bub:#E9E9EB; background:#E9E9EB !important; color:#000000 !important; }
.demo .phone .bub::after{ display:block !important; background:var(--bub) !important; }
/* a tail only on the last bubble of a run, the way a phone draws it */
.demo .phone .bub--you:has(+ .bub--you)::after,
.demo .phone .bub--her:has(+ .bub--her)::after{ display:none !important; }
.demo .phone .bub small, .demo .phone .bub--you small, .demo .phone .bub--her small{ color:#8A8A8E !important; font-size:10px !important; font-weight:500 !important; }
.demo .phone .thread__typing{ background:#E9E9EB !important; }
.demo .phone .thread__typing::before, .demo .phone .thread__typing::after{ display:none !important; }
.demo .phone .thread__typing i{ background:#8A8A8E !important; }

/* compose row */
.demo .phone__screen .compose{ background:#FFFFFF !important; border:0 !important; padding:6px 12px 22px !important; gap:8px !important; align-items:center !important; }
.demo .compose__plus{ display:flex !important; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:50%;
  background:#E9E9EB !important; color:#6B6B70 !important; font-size:20px; line-height:1; font-weight:400; }
.demo .phone__screen .compose input{ color:#000 !important; background:#FFFFFF !important; border:1px solid rgba(0,0,0,.18) !important; border-radius:999px !important; font-size:13.5px !important; padding:7px 13px !important; }
.demo .phone__screen .compose input::placeholder{ color:#B4B4B9 !important; }
.demo .phone__screen #demoSend{ background:#34C759 !important; }
.demo .ios-home{ background:#000 !important; width:104px !important; height:4.5px !important; bottom:7px !important; }
.beat__who{ color:var(--ink-3) !important; }

/* FEATURES PAGE: new device photos are square studio shots. Show them whole. */
#thing .ds__hero{ max-width:560px; margin-inline:auto; }
#thing .ds__hero img{ aspect-ratio:1/1 !important; object-fit:cover !important; object-position:center !important; }
#thing .ds__shot{ background:#d9d9d9 !important; }
#thing .ds__shot img{ aspect-ratio:1/1 !important; object-fit:cover !important; }

/* SEE IT HAPPEN: new device cut-out (round, tilted face). The old lit-band
   overlay was drawn for the square device, so it is off; the "playing" state
   is a warm glow around the device instead. */
.demo .room__band{ display:none !important; }
.demo .room__frame{ width:230px !important; height:232px !important; background:none !important; }
.demo .room__frame::before, .demo .room__frame::after{ display:none !important; }
.demo .room img{
  width:220px !important; height:auto !important; object-fit:contain !important;
  filter:drop-shadow(0 14px 18px rgba(0,27,61,.18)) !important;
  transition:filter .5s ease, opacity .5s ease !important; opacity:1 !important;
}
.demo .room.hold img{ filter:drop-shadow(0 14px 18px rgba(0,27,61,.18)) brightness(.93) !important; }
.demo .room.on img{ filter:drop-shadow(0 0 22px rgba(255,176,92,.85)) drop-shadow(0 14px 18px rgba(0,27,61,.16)) !important; }

/* WHY SECTION: new background photo (hand on the dial of the new device). */
#why::before{ background:url("../assets/why-knob-hand.jpg") 50% 52% / cover no-repeat !important; }
@media (max-width:760px){ #why::before{ background-position:38% 50% !important; } }

/* HOW IT WORKS, card 2: new photo. Keep the man's face and the speaker in frame. */
#how .fstep__pic--pair img{ object-position:50% 92% !important; }
@media (max-width:759px){ #how .fstep__pic--pair img{ aspect-ratio:4 / 3 !important; } }

/* HOW IT WORKS, card 3: new photo. Show it whole so her face and the speaker both stay in. */
#how .fstep__pic--him img{ object-position:50% 50% !important; }
@media (max-width:759px){ #how .fstep__pic--him img{ aspect-ratio:3 / 2 !important; } }

/* HOW IT WORKS, card 4: new photo. Keep his face and the phone in frame. */
#how .fstep__pic--reply img{ object-position:50% 30% !important; }
@media (max-width:759px){ #how .fstep__pic--reply img{ aspect-ratio:3 / 2 !important; } }

/* HOW IT WORKS, card 1: new photo. Keep her face and the phone in frame. */
#how .fstep__pic--send img{ object-position:50% 30% !important; }
@media (max-width:759px){ #how .fstep__pic--send img{ aspect-ratio:3 / 2 !important; } }
.demo .ios-island{ width:60px !important; height:20px !important; top:12px !important; }
.demo .phone__screen #demoSend{ flex:none !important; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; padding:0 !important; border-radius:50% !important; }
.demo .phone .bub{ box-shadow:none !important; }

/* COMPANION: the device marker above the conversation. Was a dark bar with a
   lit band (the old square device). Now the round face of the new device with
   a glowing ring around the button. Light blue, the colour the ring shows
   while the companion is listening or talking. */
#companion .cmp__device{
  width:104px !important; height:104px !important; border-radius:50% !important; margin-inline:auto !important;
  background:
    radial-gradient(circle at 50% 50%, #F4F2EE 0 31px, transparent 32px),
    radial-gradient(circle, rgba(0,27,61,.34) 1.1px, transparent 1.5px) 0 0 / 7px 7px,
    #F1EEE9 !important;
  box-shadow:inset 0 0 0 5px #F1EEE9, inset 0 0 0 6px rgba(0,27,61,.06),
             0 18px 30px -16px rgba(0,27,61,.45), 0 2px 6px rgba(0,27,61,.10) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#companion .cmp__band{
  left:50% !important; right:auto !important; top:50% !important; width:52px !important; height:52px !important;
  transform:translate(-50%,-50%) !important; border-radius:50% !important; filter:none !important;
  background:radial-gradient(circle, #B9BDC4 0 18px, #F4F2EE 19px 20px, #BFE6FF 21px 100%) !important;
  box-shadow:0 0 0 1px rgba(56,182,255,.35), 0 0 18px 5px rgba(56,182,255,.70) !important;
  animation:cmpRing 3.2s ease-in-out infinite !important;
}
@keyframes cmpRing{
  0%,100%{ box-shadow:0 0 0 1px rgba(56,182,255,.30), 0 0 10px 2px rgba(56,182,255,.40); }
  50%    { box-shadow:0 0 0 1px rgba(56,182,255,.45), 0 0 22px 7px rgba(56,182,255,.85); }
}
#companion .cmp__mark{
  position:absolute !important; left:0; right:0; bottom:13px !important; text-align:center;
  font-size:8px !important; letter-spacing:.02em !important; color:#3B3F8F !important; opacity:.9 !important;
  background:#F1EEE9; width:34px; margin-inline:auto; border-radius:3px; line-height:1.3;
}
@media (prefers-reduced-motion: reduce){ #companion .cmp__band{ animation:none !important; } }
#companion .cmp__mark{ display:none !important; }