/* ---------------------------------------------------------------------------
   HER HOUSE, IN HER COLOURS.

   The mark is metallic on black with a violet tree and gold branches, lit by a
   warm haze. The site was none of those things -- it was a white page with
   blue links, which read as a template rather than as her. So the palette here
   is taken from the logo and nowhere else: black to stand in, chrome for text,
   violet for anything alive, gold for anything warm.

   It also has to be dark because SHE is light. She is drawn as points of
   light with no frame around her; on a white page that is invisible, and the
   moment the arrival sequence ended the screen used to flash from black to
   white, which was the ugliest second on the site.
   --------------------------------------------------------------------------- */
:root{
  --void:#07060b;          /* the black she stands in */
  --raised:#100e18;        /* anything lifted off it */
  --edge:#241f34;          /* hairlines */
  --chrome:#f7f6fb;        /* headings, the way the mark's metal reads */
  /* THE COPY WAS HIDING. It was set at #b9b3c9 -- technically legible on
     black, and genuinely hard to read on a phone in daylight with her light
     moving behind it. Body copy is the product here: she is a thing you
     read about before you ring her. So it is brighter, a size larger, and
     a shade heavier than a dark theme would usually take. */
  --text:#ddd9e8;          /* body copy */
  --dim:#a099b8;           /* asides */
  --violet:#9b73e8;        /* the tree */
  --violet-deep:#6c46b8;
  --gold:#e0ac68;          /* the branches */
  --gold-deep:#b07f3f;
  /* Written from the amplitude of her real voice while she speaks. */
  --speak:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--text);
  font:400 18.5px/1.72 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
.wrap{max-width:720px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
a{color:inherit}
img{max-width:100%}
::selection{background:rgba(155,115,232,.34)}

/* ------------------------------------------------------------------- HER
   Full-bleed and fixed behind the page: she floats, with nothing drawn around
   her. No border, no card, no photograph -- there is nothing to put a frame
   on. */
/* SOMETHING BEHIND HER. She used to stand in flat black, which is not space,
   it is absence -- and a figure in absence reads as a cut-out no matter how
   well it is drawn. #sky is a second canvas one layer further back, running
   at half her frame rate. If her render fails (it has a 5s bail and a .failed
   class) the sky survives, so the floor of this page is now a starfield
   rather than the black we started with. */
#sky{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;
  width:100%;height:100%}

#her{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease}
/* NOTHING BUT HER, UNTIL SHE IS THERE.
   The page is not merely covered during the arrival, it is not shown at all:
   no header, no headline, no scroll. You are inside a cluster of silver, it
   pulls back, and when she has formed the page arrives underneath her. The
   content is only hidden while the canvas is actually running, so a browser
   that cannot draw her still gets a site. */
body:not(.arrived) .wrap,
body:not(.arrived) .veil{opacity:0;pointer-events:none}
.wrap,.veil{transition:opacity 1.2s ease .25s}

/* SHE TALKS FIRST. THE PAGE WAITS ITS TURN.
   When she finished forming, a headline, a sub, a phone number, a nav and a
   scroll hint all arrived on top of her at once -- and the founder's note is
   that HER TALKING IS THE SELLING POINT AND THE SCREENSHOT, and none of that
   copy should be in it. So the moment she lands, the only thing on screen is
   her and the words she is actually saying. Everything else comes up when she
   has finished her line.

   Hidden with OPACITY, never display:none, so the layout underneath is already
   final -- the copy fades in exactly where it was always going to sit and
   nothing moves when it does. */
body.arrived:not(.told) .topnav,
body.arrived:not(.told) .hero h1,
body.arrived:not(.told) .hero .sub,
body.arrived:not(.told) .hero .call,
body.arrived:not(.told) .scrollhint,
body.arrived:not(.told) section,
body.arrived:not(.told) footer{opacity:0;pointer-events:none}
.topnav,.hero h1,.hero .sub,.hero .call,.scrollhint,section,footer{
  transition:opacity .95s ease}
body:not(.told){overflow:hidden}
#her.alive{opacity:1}
#her.failed{display:none}
#her canvas{display:block;width:100%;height:100%}
/* Once she has arrived she settles back so the words in front of her read. */
#her.landed{opacity:1}
/* Ambient on every page but the landing one, so she is felt rather than read
   through. */
#her[data-quiet]{opacity:.30}
#her[data-quiet].landed{opacity:.30}

/* The page content sits in her light. */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,6,11,0) 0%,rgba(7,6,11,.07) 38%,rgba(7,6,11,.42) 70%,rgba(7,6,11,.66) 86%,rgba(7,6,11,.76) 100%)}

/* ------------------------------------------------------------------- TYPE */
h1{font-size:clamp(32px,7.6vw,52px);line-height:1.06;letter-spacing:-.032em;
  font-weight:600;color:var(--chrome)}
h2{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#b6adcf;
  font-weight:700;margin-bottom:18px}
h3{font-size:17.5px;font-weight:600;color:var(--chrome)}
p{color:var(--text);font-weight:400}
p+p{margin-top:13px}
.lede{font-size:clamp(20.5px,4.8vw,25px);line-height:1.44;color:#fbfaff;
  letter-spacing:-.014em;font-weight:500}
section{padding:44px 0;border-top:1px solid var(--edge)}
strong,b{color:var(--chrome);font-weight:600}

/* ------------------------------------------------------------------ BRAND */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0 0;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:42px;height:42px;display:block;
  filter:drop-shadow(0 0 14px rgba(155,115,232,.34))}
.brand span{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--chrome)}
.topnav{display:flex;gap:3px;flex-wrap:wrap;font-size:15px;font-weight:500}
.topnav a{color:var(--dim);text-decoration:none;padding:7px 12px;border-radius:999px;
  border:1px solid transparent;transition:color .18s,background .18s,border-color .18s}
.topnav a:hover{color:var(--chrome);background:rgba(155,115,232,.09);border-color:rgba(155,115,232,.22)}
.topnav a[aria-current="page"]{color:var(--chrome);border-color:var(--edge);background:rgba(255,255,255,.03)}

/* -------------------------------------------------------------- HER VOICE */
.voicebar{display:flex;align-items:flex-start;gap:13px;margin-top:20px}
.voicebtn{flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.03);color:var(--dim);
  display:grid;place-items:center;transition:color .18s,border-color .18s,background .18s}
.voicebtn:hover{color:var(--chrome);border-color:rgba(155,115,232,.4)}
.voicebtn svg{width:18px;height:18px}
.voicebtn[data-state="on"]{color:var(--violet);border-color:rgba(155,115,232,.45)}
.voicebtn.talking{box-shadow:0 0 0 0 rgba(155,115,232,.4);animation:ring 1.5s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(155,115,232,.42)}50%{box-shadow:0 0 0 9px rgba(155,115,232,0)}}
.caption{flex:1;min-width:0;font-size:16.5px;line-height:1.56;color:#efecf8;
  min-height:1.6em;padding-top:8px}
.caption.quiet{color:var(--dim);font-style:italic}
.nudge{display:block;text-align:left;margin-top:7px;font:inherit;font-size:14.5px;font-weight:500;color:var(--violet);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------- CALLING HER */
.call{margin:30px 0 6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.call .spell{font-size:clamp(26px,6.4vw,34px);font-weight:600;letter-spacing:.01em;
  color:var(--chrome);
  text-shadow:0 0 26px rgba(155,115,232,.35)}
.call .num{font-size:16.5px;color:#b3abc9;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.dial{display:inline-flex;align-items:center;justify-content:center;gap:11px;margin-top:16px;
  text-decoration:none;padding:16px 26px;border-radius:999px;
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-deep) 58%,var(--gold-deep) 140%);
  color:#fff;font-size:17px;font-weight:600;letter-spacing:.005em;
  box-shadow:0 14px 36px -14px rgba(108,70,184,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s,box-shadow .18s,filter .18s}
.dial:hover,.dial:focus-visible{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 20px 44px -14px rgba(108,70,184,1),inset 0 1px 0 rgba(255,255,255,.3);outline:none}
.dial svg{width:19px;height:19px;flex:none}
.free{margin-top:14px;font-size:16.5px;color:var(--text)}
.free b{color:var(--chrome)}
.aside{margin-top:6px;font-size:14.5px;color:var(--dim)}

/* -------------------------------------------------------------- FURNITURE */
.stack{display:grid;gap:14px}
@media(min-width:660px){.stack{grid-template-columns:repeat(3,1fr)}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--edge);border-radius:15px;padding:19px}
.card .when{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);font-weight:700;margin-bottom:9px}
.card p{font-size:16px;line-height:1.6}
.two{display:grid;gap:14px}
@media(min-width:660px){.two{grid-template-columns:1fr 1fr}}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--edge);border-radius:15px;padding:20px}
.panel h3{margin-bottom:11px}
.panel ul{list-style:none;display:grid;gap:9px}
.panel li{position:relative;padding-left:20px;font-size:16px;line-height:1.56}
.panel li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--violet);opacity:.75}
.panel.isnt li::before{background:var(--dim);opacity:.55}
blockquote{margin:0;padding:17px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--edge);border-left:2px solid var(--violet);
  font-size:16.5px;line-height:1.6;color:var(--text)}
blockquote+blockquote{margin-top:12px}

.tier{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--edge);border-radius:16px;padding:21px;display:grid;gap:12px}
.tier+.tier{margin-top:14px}
.tier .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tier .nm{font-size:20px;font-weight:600;color:var(--chrome);letter-spacing:-.012em}
.tier .pr{font-size:20px;font-weight:600;color:var(--gold);white-space:nowrap}
.tier .pr small{font-weight:500;font-size:14px;color:var(--dim)}
.tier .unlock{font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--violet);font-weight:700}
/* The minute allowance under a business tier. Matches the .bh treatment on
   /pricing so the two pages read as one price list rather than two. */
.tier .allow{font-size:14.5px;color:var(--gold);font-weight:600;margin-top:-4px}
.tier ul{list-style:none;display:grid;gap:8px}
.tier li{position:relative;padding-left:20px;font-size:16px;line-height:1.56}
.tier li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--gold);opacity:.6}
.soon{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--dim);border:1px solid var(--edge);border-radius:999px;
  padding:6px 13px;background:rgba(255,255,255,.03)}

.cta{display:block;text-align:center;text-decoration:none;padding:16px;border-radius:13px;
  font-weight:600;color:var(--chrome);border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  transition:border-color .18s,background .18s}
.cta:hover{border-color:rgba(155,115,232,.45);background:rgba(155,115,232,.1)}
.cta.hot{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep) 70%,var(--gold-deep) 150%)}

.hard{border:1px solid var(--edge);border-radius:15px;padding:21px;
  background:linear-gradient(180deg,rgba(224,172,104,.07),rgba(255,255,255,.012))}

footer{border-top:1px solid var(--edge);padding:34px 0 64px;color:var(--dim);
  font-size:15px;line-height:1.7}
footer a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.foot-links{margin-top:13px;display:flex;gap:18px;flex-wrap:wrap}
.foot-social{margin-top:12px;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot-social a{display:inline-flex;align-items:center;gap:7px}
.foot-social svg{width:17px;height:17px;fill:currentColor;opacity:.9;flex:0 0 auto}
.note{margin-top:20px;padding:16px 18px;border:1px solid var(--edge);border-radius:13px;
  background:rgba(255,255,255,.025);color:var(--text);font-size:15px}

/* ------------------------------------------------------------- ASKING HER */
.ask{border:1px solid var(--edge);border-radius:17px;padding:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.ask .askhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ask .scope{font-size:14px;color:var(--dim)}
.asklog{margin-top:15px;display:grid;gap:12px;max-height:350px;overflow-y:auto}
.asklog:empty{display:none}
.askrow{display:grid;gap:4px}
.asktag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--dim)}
.askrow p{font-size:16.5px;line-height:1.6}
.askrow.you p{color:var(--chrome)}
.askrow.her .asktag{color:var(--violet)}
.askrow.her p{border:1px solid var(--edge);border-radius:12px;padding:12px 14px;
  background:rgba(255,255,255,.03)}
.askrow.her.urgent p{border-color:rgba(224,172,104,.45);background:rgba(224,172,104,.09);color:var(--chrome)}
.askform{margin-top:15px;display:flex;gap:9px;align-items:center}
.askform input{flex:1;min-width:0;font:inherit;font-size:16.5px;padding:13px 15px;
  border:1px solid var(--edge);border-radius:12px;background:rgba(0,0,0,.35);color:var(--chrome)}
.askform input::placeholder{color:var(--dim)}
.askform input:focus{outline:none;border-color:rgba(155,115,232,.55);background:rgba(0,0,0,.5)}
.askmic,.asksend{flex:none;height:46px;width:46px;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--edge);
  background:rgba(255,255,255,.04);color:var(--dim);
  transition:color .18s,border-color .18s,background .18s}
.askmic:hover,.asksend:hover{color:var(--chrome);border-color:rgba(155,115,232,.45)}
.asksend{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep))}
.askmic svg,.asksend svg{width:19px;height:19px}
.askmic.hot{color:var(--gold);border-color:rgba(224,172,104,.5);background:rgba(224,172,104,.12);
  animation:ring 1.4s ease-in-out infinite}
.askhint{margin-top:10px;font-size:14px;color:var(--dim)}
.askseeds{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.askseeds button{font:inherit;font-size:14.5px;padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.03);color:var(--text);
  transition:color .18s,border-color .18s,background .18s}
.askseeds button:hover{color:var(--chrome);border-color:rgba(155,115,232,.45);background:rgba(155,115,232,.1)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ------------------------------------------------------------ THE PAGE MOVES
   Nothing on this site arrives by appearing. Sections rise into place as they
   are reached, at slightly different rates, so scrolling reads as movement
   through a space rather than as a document being dragged upward. */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,.7,.24,1),transform .85s cubic-bezier(.16,.7,.24,1)}
.rise.here{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}
.rise.d2{transition-delay:.14s}
.rise.d3{transition-delay:.21s}

/* The hero holds the full height so she has a stage before any words start. */
.hero{min-height:88svh;min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:36px}
.hero h1{max-width:15ch}
.hero .sub{margin-top:16px;max-width:34ch;font-size:clamp(16.5px,4.2vw,19.5px);color:var(--text)}
/* EVERYONE ASKS. Her name is spelled QuinzI and said Quincy, and a visitor who
   cannot say it out loud is a visitor who will not say it to anyone else. */
.say{color:#a99fc9;font-style:italic;white-space:nowrap}
.scrollhint{margin-top:30px;display:flex;align-items:center;gap:9px;font-size:13.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.scrollhint i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--violet),transparent);
  animation:fall 2.4s ease-in-out infinite}
@keyframes fall{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* =========================================================== HOLOGRAM ===
   Scanlines, a slow vertical sweep, and a bloom that breathes with her real
   voice. It sits at z-index 1 -- above her, below .wrap -- so it falls across
   HER and never across the words, which stay crisp at z-index 2.

   Everything animated here is CSS, which means the reduced-motion rule at the
   foot of this file already switches it off. That was deliberate: the canvas
   layers had to gate themselves in JS because CSS cannot reach them.
   --------------------------------------------------------------------- */
.holo{position:fixed;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;
  /* --speak is written from the amplitude of her real voice, so the whole
     hologram lifts very slightly while she is talking. */
  opacity:calc(.5 + var(--speak,0) * .45);
  background:repeating-linear-gradient(180deg,
    rgba(186,166,255,.032) 0px, rgba(186,166,255,.032) 1px,
    transparent 1px, transparent 3px)}
.holo::after{content:"";position:absolute;left:0;right:0;height:24vh;
  background:linear-gradient(180deg,transparent,rgba(196,176,255,.06) 46%,transparent);
  animation:holo-sweep 8.5s linear infinite}
@keyframes holo-sweep{
  0%{transform:translateY(-26vh)}
  100%{transform:translateY(118vh)}}
/* A browser that cannot blend would show grey bars over her. Opt out. */
@supports not (mix-blend-mode:screen){.holo{display:none}}
#her.failed ~ .holo{display:none}

/* ============================================================== GLASS ===
   Six near-identical card recipes existed -- .card .panel .tier .ask .hard
   blockquote -- all of them a flat white wash on a grey hairline, which is
   what "somebody threw it together" actually looks like. They keep their
   geometry; this gives them an inner glow, a violet hairline, and a lit top
   edge, so they read as panels of glass lying over the starfield instead of
   as boxes drawn on top of it.
   --------------------------------------------------------------------- */
.card,.panel,.tier,.ask,.hard,.note,blockquote{
  position:relative;
  border-color:rgba(155,115,232,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 0 40px -22px rgba(155,115,232,.7),
    0 20px 46px -32px rgba(0,0,0,.95)}
/* The diagonal sheen. Pseudo-element so it cannot disturb the box model. */
.card::before,.panel::before,.tier::before,.ask::before,.hard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(152deg,rgba(178,143,240,.085),transparent 44%)}
.card>*,.panel>*,.tier>*,.ask>*,.hard>*{position:relative}

/* Real translucency only where there is room for it. backdrop-filter over a
   full-screen animated canvas is the most expensive thing on this page, and
   a mid-range phone feels it immediately. */
@media (min-width:900px){
  .card,.panel,.tier,.ask,.hard,blockquote{
    backdrop-filter:blur(13px) saturate(118%);
    -webkit-backdrop-filter:blur(13px) saturate(118%)}
}

/* Her mark and her number breathe with her too. */
.brand img{transition:filter .4s ease;
  filter:drop-shadow(0 0 14px rgba(155,115,232,calc(.34 + var(--speak,0) * .5)))}
.call .spell{text-shadow:0 0 26px rgba(155,115,232,calc(.35 + var(--speak,0) * .45))}

/* The primary action gets an aura rather than only a drop shadow. */
.dial{position:relative}
.dial::after{content:"";position:absolute;inset:-14px;border-radius:999px;z-index:-1;
  background:radial-gradient(closest-side,rgba(155,115,232,.34),transparent 72%);
  opacity:calc(.55 + var(--speak,0) * .45);transition:opacity .3s ease}

/* A hairline that belongs to the palette instead of to the browser. */
section{border-top-color:rgba(155,115,232,.14)}
footer{border-top-color:rgba(155,115,232,.14)}

/* =============================================================== PHONE ===
   MOST PEOPLE ARE ON A PHONE, AND ON A PHONE THIS WAS HARD TO READ.

   Not because the type was too dark against the page -- it isn't -- but
   because on a narrow screen SHE is directly behind the words. She is made of
   light, so every line of copy was being read against a moving field of it.
   On a wide screen she stands off to the side and the problem never appears,
   which is exactly why it survived: it is invisible on the machine the site
   was built on.

   Three things, in the order they matter:
     1. a real scrim under the words, not the gentle wash that was there;
     2. she sits back while you are reading, because reading is what you came
        to do -- she is still plainly there, just no longer competing;
     3. the type comes up in weight and brightness, and carries its own
        shadow, so a line survives crossing one of her bright edges.
   --------------------------------------------------------------------- */
@media (max-width:820px){
  /* 1. THE SCRIM. Nearly clear at the very top so the first thing you see is
        still her, then closing quickly to something copy can sit on. */
  .veil{background:
    linear-gradient(180deg,
      rgba(7,6,11,.06) 0%,
      rgba(7,6,11,.26) 18%,
      rgba(7,6,11,.58) 40%,
      rgba(7,6,11,.80) 62%,
      rgba(7,6,11,.90) 100%)}

  /* 2. SHE SITS BACK. */
  #her{opacity:.88}
  #her.landed{opacity:.88}
  #her[data-quiet],#her[data-quiet].landed{opacity:.22}

  /* Scanlines across body copy on a 400px screen are noise, not atmosphere. */
  .holo{display:none}

  /* 3. THE TYPE. */
  body{font-size:18px;line-height:1.7}
  h1{color:#fff;text-shadow:0 2px 26px rgba(7,6,11,.92),0 1px 4px rgba(7,6,11,.85)}
  .sub,.lede{color:#fbfaff;text-shadow:0 1px 16px rgba(7,6,11,.9)}
  .hero p,.hero .free,.hero .aside{text-shadow:0 1px 14px rgba(7,6,11,.9)}
  h3{color:#fff}
  .caption{color:#f1eefa;text-shadow:0 1px 14px rgba(7,6,11,.92)}
  .spell{text-shadow:0 2px 22px rgba(7,6,11,.92)}
  section{border-top-color:#2c2640}

  /* The hero is the one block with nothing behind it but her, so it gets its
     own pane rather than relying on the page scrim alone. */
  .hero{position:relative}
  .hero::before{content:"";position:absolute;inset:-20px -24px -28px;z-index:-1;
    border-radius:20px;
    background:radial-gradient(115% 76% at 36% 42%,rgba(7,6,11,.72),rgba(7,6,11,.26) 72%,transparent)}

  /* Glass panels need more floor under them once she is behind everything. */
  .card,.panel,.tier,.ask,.hard,.note,blockquote,.founders,.care{
    background-color:rgba(12,10,20,.72)}
}

/* A phone in a bright room is a different problem again: the whole page has
   to lift, not just the copy. */
@media (max-width:820px) and (prefers-contrast:more){
  body,p{color:#f3f1f9}
  .veil{background:linear-gradient(180deg,rgba(7,6,11,.35) 0%,rgba(7,6,11,.90) 30%,rgba(7,6,11,.96) 100%)}
  #her,#her.landed{opacity:.5}
}

/* ------------------------------------------------------------- THE BAR
   Five links and a wordmark do not fit across a phone, so the nav was
   wrapping back UNDER the logo and landing on top of it. The bar stacks
   instead: her name, then the links on their own line, scrolling sideways if
   a narrow phone still can't take them.

   The links also cross her on a wide screen, where she is bright -- so they
   carry their own shadow rather than relying on the page being dark. */
.topnav a{text-shadow:0 1px 10px rgba(7,6,11,.92),0 0 3px rgba(7,6,11,.8)}
.brand span{text-shadow:0 1px 10px rgba(7,6,11,.9)}
@media (max-width:700px){
  .topbar{flex-direction:column;align-items:stretch;gap:12px;padding-top:16px}
  .topnav{width:100%;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{flex:0 0 auto;font-size:14px;padding:8px 13px;white-space:nowrap}
  .brand img{width:36px;height:36px}
  .brand span{font-size:18px}
}

/* On a wide screen she stands to the right of the copy. The hero was still
   720px wide, so the last third of every line ran underneath her -- the
   greeting ended "Welcome to my sit" with her ribs over the rest of it. The
   hero alone is narrowed; every other section keeps the full measure. */
@media (min-width:1000px){
  .hero{max-width:500px}
}