/* Still Heart — website styles. Warm dawn / the dove. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/hanken-300.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/hanken-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/hanken-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/hanken-600.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/hanken-700.woff2) format("woff2")}

:root{
  --bg:#100B08; --panel:#1A1310; --panel2:#211711;
  --ink:#F4EADB; --muted:#C6AF92; --dim:#9C886C;
  --eyebrow:#D8B588; --gold:#F4B871; --ember:#E1743E;
  --line:rgba(233,210,180,0.14); --line2:rgba(233,210,180,0.22);
  --maxw:1140px; --pad:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* type */
.eyebrow{font-weight:500;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
h1,h2,h3{font-weight:300;line-height:1.08;letter-spacing:.004em;color:#FBF2E6}
h1{font-size:clamp(2.7rem,8vw,5rem)}
h2{font-size:clamp(2rem,5vw,3.1rem)}
h3{font-size:1.32rem;font-weight:500}
p.lead{font-size:clamp(1.12rem,2.4vw,1.4rem);color:var(--muted);font-weight:400}
.muted{color:var(--muted)}

/* nav */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(16,11,8,0.82),rgba(16,11,8,0.4));border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:34px;height:34px}
.brand .wm{font-weight:300;font-size:1.16rem;letter-spacing:.02em}
.nav a.store{font-weight:500;font-size:.9rem;color:var(--eyebrow);border:1px solid var(--line2);padding:9px 18px;border-radius:100px}
.nav a.store:hover{border-color:var(--gold);color:var(--gold)}

/* hero */
.hero{position:relative;text-align:center;padding:clamp(56px,10vw,110px) 0 clamp(60px,10vw,120px);
  background:
    radial-gradient(90% 62% at 50% -6%, rgba(244,184,113,0.24) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(70% 50% at 50% 26%, rgba(225,116,62,0.13) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#1E140E 0%,#150E0A 55%,#100B08 100%)}
.hero .mark{width:clamp(116px,26vw,176px);height:auto;margin:0 auto 30px;filter:drop-shadow(0 10px 50px rgba(244,176,110,0.35))}
.hero h1{margin:6px 0 0}
.hero p.lead{max-width:640px;margin:24px auto 0}
.hero .say{margin-top:14px;color:var(--dim);font-size:1rem;letter-spacing:.02em}
.cta{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px}
.badge{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(180deg,#FBEFE0,#EAD6BE);color:#2A1712;
  font-weight:600;font-size:1.02rem;padding:15px 30px;border-radius:100px;box-shadow:0 16px 40px rgba(0,0,0,0.4)}
.badge:hover{filter:brightness(1.03)}
.cta .soon{font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* sections */
section{padding:clamp(56px,9vw,104px) 0}
.sec-head{max-width:720px}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:18px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* what it is band */
.band{background:linear-gradient(180deg,#160F0B,#120C09);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* pillars */
.grid{display:grid;gap:18px}
.pillars{grid-template-columns:1fr}
@media(min-width:600px){.pillars{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.pillars{grid-template-columns:repeat(4,1fr)}}
.card{background:linear-gradient(180deg,rgba(255,240,222,0.045),rgba(255,240,222,0.015));
  border:1px solid var(--line);border-radius:22px;padding:26px 24px 28px}
.card .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 70% at 50% 40%,rgba(244,184,113,0.22),rgba(0,0,0,0) 72%);color:var(--gold);margin-bottom:16px}
.card h3{color:#FBF2E6;margin-bottom:8px}
.card p{color:var(--muted);font-size:.98rem}

/* differentiators */
.diffs{grid-template-columns:1fr}
@media(min-width:600px){.diffs{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.diffs{grid-template-columns:repeat(3,1fr)}}
.diff{padding:24px 2px 24px 0}
.diff .k{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.diff .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(244,184,113,0.12);flex:0 0 auto}
.diff h3{font-size:1.16rem}
.diff p{color:var(--muted);font-size:.98rem}

/* names of allah reverent strip */
.reverent{position:relative;text-align:center;
  background:radial-gradient(80% 90% at 50% 20%,rgba(244,184,113,0.14),rgba(0,0,0,0) 62%),linear-gradient(180deg,#140D0A,#0F0A07)}
.reverent .ar{font-size:clamp(3.4rem,12vw,6rem);color:#F8E9C9;font-weight:300;text-shadow:0 4px 60px rgba(245,192,120,0.3);line-height:1}
.reverent .tr{margin-top:18px;color:var(--gold);font-weight:500;letter-spacing:.02em;font-size:1.2rem}
.reverent .mn{margin-top:6px;color:var(--muted)}

/* cta band */
.ctaband{text-align:center;background:
  radial-gradient(80% 80% at 50% 0%,rgba(244,184,113,0.16),rgba(0,0,0,0) 60%),linear-gradient(180deg,#1A120D,#120C09)}

/* footer */
footer{border-top:1px solid var(--line);background:#0D0906;padding:52px 0 40px}
footer .top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
footer .brand img{width:30px;height:30px}
footer .tag{color:var(--dim);margin-top:14px;max-width:340px;font-size:.96rem}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer nav a{color:var(--muted);font-size:.96rem}
footer nav a:hover{color:var(--gold)}
footer .fine{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--dim);font-size:.86rem;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* legal pages */
.legal{max-width:800px;margin:0 auto;padding:clamp(40px,7vw,72px) var(--pad) 90px}
.legal .eyebrow{display:block}
.legal h1{font-size:clamp(2.1rem,6vw,3.2rem);margin:12px 0 6px}
.legal .updated{color:var(--dim);font-size:.92rem;margin-bottom:8px}
.legal h2{font-size:1.4rem;font-weight:500;color:#FBF2E6;margin:38px 0 12px}
.legal h3{font-size:1.08rem;font-weight:600;margin:22px 0 8px}
.legal p,.legal li{color:var(--muted);font-size:1rem;margin:10px 0}
.legal ul{padding-left:22px}.legal li{margin:7px 0}
.legal a{color:var(--gold)}
.legal .back{display:inline-flex;align-items:center;gap:8px;color:var(--eyebrow);font-weight:500;font-size:.9rem;margin-bottom:26px}
.legal .note{background:rgba(255,240,222,0.04);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:22px 0;color:var(--muted);font-size:.95rem}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* ─────────────────────────────────────────────────────────────
   App palette. The colours below are taken from the app itself
   (the mood cards on Home and the session cards in Library), so
   the site and the product read as one thing.
   ───────────────────────────────────────────────────────────── */
:root{
  --sage-1:#B7CDB0; --sage-2:#90AC89;
  --peri-1:#B3BEE6; --peri-2:#8E9CD8;
  --sand-1:#F0D6A8; --sand-2:#E0B87E;
  --terra-1:#EDB08A; --terra-2:#DC8F60;
  --plum-1:#8577A8; --plum-2:#67588A;
  --blush-1:#E7B6B1; --blush-2:#D2938E;
  --navy-1:#2F4B6D;  --navy-2:#1E3757;
  --ink-on-color:#241A12;
}

/* Hero: keep the warm dawn, then let the app's colours bloom faintly
   behind it so the page feels alive rather than flat brown. */
.hero{
  background:
    radial-gradient(52% 40% at 16% 6%, rgba(144,172,137,0.16) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(52% 40% at 86% 10%, rgba(142,156,216,0.15) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(90% 62% at 50% -6%, rgba(244,184,113,0.26) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(70% 50% at 50% 26%, rgba(225,116,62,0.13) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#1E140E 0%,#150E0A 55%,#100B08 100%);
}

/* The four ways in, as the app draws them: soft gradient tiles with
   dark ink, not dark cards with a gold icon. */
.pillars .card{
  border:0;
  color:var(--ink-on-color);
  box-shadow:0 20px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.pillars .card:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5)}
.pillars .card h3{color:#1E150E}
.pillars .card p{color:rgba(30,21,14,.76)}
.pillars .card .ic{
  background:rgba(255,255,255,.44);
  color:#3A2A1C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.pillars .card:nth-child(1){background:linear-gradient(162deg,var(--sage-1),var(--sage-2))}
.pillars .card:nth-child(2){background:linear-gradient(162deg,var(--peri-1),var(--peri-2))}
.pillars .card:nth-child(3){background:linear-gradient(162deg,var(--sand-1),var(--sand-2))}
.pillars .card:nth-child(4){background:linear-gradient(162deg,var(--terra-1),var(--terra-2))}

/* Differentiators: one colour per point, drawn from the same set. */
.diff:nth-child(1) .dot{background:var(--sage-2);box-shadow:0 0 0 6px rgba(144,172,137,.16)}
.diff:nth-child(2) .dot{background:var(--peri-2);box-shadow:0 0 0 6px rgba(142,156,216,.16)}
.diff:nth-child(3) .dot{background:var(--sand-2);box-shadow:0 0 0 6px rgba(224,184,126,.16)}
.diff:nth-child(4) .dot{background:var(--plum-1);box-shadow:0 0 0 6px rgba(133,119,168,.18)}
.diff:nth-child(5) .dot{background:var(--terra-2);box-shadow:0 0 0 6px rgba(220,143,96,.16)}
.diff:nth-child(6) .dot{background:var(--blush-2);box-shadow:0 0 0 6px rgba(210,147,142,.16)}

/* Name of Allah: a deeper, more reverent light. */
.reverent{
  background:
    radial-gradient(60% 70% at 50% 12%, rgba(244,184,113,0.17) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(70% 60% at 18% 90%, rgba(103,88,138,0.20) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(70% 60% at 84% 88%, rgba(47,75,109,0.20) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(180deg,#140D0A,#0F0A07);
}

/* Closing band: warm, with the same colours just under the surface. */
.ctaband{
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(244,184,113,0.18) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(50% 60% at 12% 100%, rgba(144,172,137,0.13) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(50% 60% at 88% 100%, rgba(142,156,216,0.13) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,#1A120D,#120C09);
}

/* The download pill, warmed to match the app's Unlock button. */
.badge{
  background:linear-gradient(180deg,#FBE3C0,#EFC489);
  box-shadow:0 16px 40px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.16) inset,
             0 6px 30px rgba(240,185,107,.28);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, filter .28s ease;
}
.badge:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(0,0,0,.5), 0 8px 38px rgba(240,185,107,.4)}

/* A hairline of dawn under the sticky nav. */
.nav{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(144,172,137,.34),rgba(244,184,113,.42),rgba(142,156,216,.34)) 1}

/* Legal pages: a touch of the same light so they belong to the app. */
.legal .back:hover{color:var(--gold)}
body:has(.legal){
  background:
    radial-gradient(46% 26% at 8% 0%, rgba(144,172,137,0.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(46% 26% at 92% 2%, rgba(142,156,216,0.10) 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  background-attachment:fixed;
}

/* Shadow pass. On a near-black page a black shadow just leaves a grey
   smudge, so each tile casts a faint halo in its own colour instead, and
   the download pill drops the black entirely and glows warm. */
.pillars .card{box-shadow:none}
.pillars .card:nth-child(1){box-shadow:0 22px 50px rgba(144,172,137,.17), 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.pillars .card:nth-child(2){box-shadow:0 22px 50px rgba(142,156,216,.17), 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.pillars .card:nth-child(3){box-shadow:0 22px 50px rgba(224,184,126,.17), 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.pillars .card:nth-child(4){box-shadow:0 22px 50px rgba(220,143,96,.17), 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.pillars .card:nth-child(1):hover{box-shadow:0 30px 66px rgba(144,172,137,.26), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55)}
.pillars .card:nth-child(2):hover{box-shadow:0 30px 66px rgba(142,156,216,.26), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55)}
.pillars .card:nth-child(3):hover{box-shadow:0 30px 66px rgba(224,184,126,.26), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55)}
.pillars .card:nth-child(4):hover{box-shadow:0 30px 66px rgba(220,143,96,.26), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55)}

/* Give the tiles room to breathe so they read as considered, not cramped. */
.pillars .card{padding:30px 26px 34px;min-height:236px;display:flex;flex-direction:column}
.pillars .card p{margin-top:auto;padding-top:8px}
.pillars .card .ic{width:46px;height:46px;border-radius:14px}

/* Sleek CTA — an outlined pill that echoes the app's own thin circular
   buttons, instead of a glossy gradient. */
.badge{
  background:transparent;
  color:#F2E6D4;
  border:1px solid rgba(238,228,214,0.32);
  box-shadow:none;
  font-weight:500;
  letter-spacing:.02em;
  transition:border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.badge:hover{
  transform:translateY(-1px);
  color:#FBEFDD;
  border-color:rgba(244,184,113,0.75);
  background:rgba(244,184,113,0.07);
  box-shadow:0 0 34px rgba(244,184,113,0.14);
}

/* Sleep reads as night. The app already does this on its Steadfast journey
   card: deep navy with light type, while the pastel cards keep dark ink. */
.pillars .card:nth-child(2){background:linear-gradient(162deg,#33456F,#1E2E52)}
.pillars .card:nth-child(2) h3{color:#F1F5FB}
.pillars .card:nth-child(2) p{color:rgba(236,243,252,.80)}
.pillars .card:nth-child(2) .ic{background:rgba(255,255,255,.14);color:#EAF1FA;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.pillars .card:nth-child(2){box-shadow:0 22px 50px rgba(51,69,111,.34), 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16)}
.pillars .card:nth-child(2):hover{box-shadow:0 30px 66px rgba(51,69,111,.46), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.2)}
.diff:nth-child(2) .dot{background:#5A6E9E;box-shadow:0 0 0 6px rgba(90,110,158,.20)}

/* The line under the calligraphy: present, but quieter than the name. */
.reverent .rev-note{margin:22px auto 0;max-width:440px;color:var(--dim);font-size:.95rem}

/* Four points now, so they sit two-up rather than stranding one on a row. */
@media(min-width:940px){.diffs{grid-template-columns:repeat(2,1fr);gap:10px 56px}}

/* ─────────────────────────────────────────────────────────────
   Atmospheric gradients, sampled from the app's player screen
   (#4A3729 at the top through #9D593A at the foot). The app lets
   one slow warm gradient carry a whole screen; the site now does
   the same at two points instead of leaning on photography.
   ───────────────────────────────────────────────────────────── */

/* Hero: type sits in the dark end, the warmth rises underneath it. */
.hero{
  background:
    radial-gradient(58% 40% at 50% -4%, rgba(247,196,128,0.30) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(46% 34% at 12% 12%, rgba(144,172,137,0.10) 0%, rgba(0,0,0,0) 66%),
    radial-gradient(46% 34% at 88% 14%, rgba(142,156,216,0.10) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg,
      #221913 0%, #2A1E17 16%, #35251C 34%,
      #452B21 54%, #5B3427 72%, #7A4530 88%, #8C4F35 100%);
}
/* Carry the warmth into the next band so the seam disappears. */
.band:first-of-type,
.hero + section{
  background:linear-gradient(180deg,#8C4F35 0%, #5C3627 16%, #2C1F18 46%, #150E0A 100%);
  border-top:0;
}

/* The quiet beat before the close: one line, nothing else. */
.stillness{
  position:relative;text-align:center;
  padding:clamp(96px,17vw,190px) 0;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(247,196,128,0.15) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(180deg,#120C09 0%, #2A1C15 26%, #4A2C21 52%, #2A1C15 78%, #120C09 100%);
}
.still-line{
  font-weight:300;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(2.5rem,8.4vw,5.2rem);color:#FBF2E6;
  max-width:14ch;margin:0 auto;
  text-shadow:0 8px 60px rgba(0,0,0,.5);
}
.still-line em{font-style:italic;color:#F0BD82}

/* The hero now warms to terracotta behind the lower type, so the two dim
   lines that sit there are lifted to stay legible against it (measured:
   #9C886C was 2.7:1 on #6B3C2B, these are ~6:1). */
.hero .say{color:#E3CDB4}
.hero .cta .soon{color:#EBD8C0}

/* ─────────────────────────────────────────────────────────────
   Editorial pass. The app took its cues from Open, so the site
   moves to the same register: near-black ground, muted stone
   gradients rather than bright pastels, and headlines set in
   caps with wide tracking. Our own type, colour and words, so
   it shares the language without borrowing anything of theirs.
   ───────────────────────────────────────────────────────────── */
:root{
  --stone-1:#6F6A63; --stone-2:#413C36;
  --slate-1:#636972; --slate-2:#383D45;
  --sand-1:#77695A;  --sand-2:#473E34;
  --clay-1:#75625A;  --clay-2:#453833;
}

/* Headlines in caps, tightly led, the way an editorial page sets them. */
h2{
  text-transform:uppercase;
  letter-spacing:.045em;
  line-height:1.02;
  font-weight:400;
  font-size:clamp(1.7rem,4.1vw,2.9rem);
}
.sec-head h2{max-width:18ch}
.ctaband h2,.band .sec-head.center h2{margin-left:auto;margin-right:auto}

/* Tiles: one family of muted stone, so the row reads as a single
   material instead of four separate colours. */
.pillars .card{
  color:#F2EDE6;
  border:1px solid rgba(236,226,212,.10);
  padding:26px 24px 30px;
  min-height:270px;
}
.pillars .card h3{
  color:#F7F2EA;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.02rem;font-weight:500;margin-bottom:10px;
}
.pillars .card p{color:rgba(244,236,225,.72);font-size:.95rem}
.pillars .card .tile-k{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,236,225,.5);margin-bottom:10px;
}
.pillars .card .ic{
  background:rgba(255,255,255,.09);color:#F0E7DA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);margin-bottom:18px;
}
.pillars .card:nth-child(1){background:linear-gradient(168deg,var(--stone-1),var(--stone-2))}
.pillars .card:nth-child(2){background:linear-gradient(168deg,var(--slate-1),var(--slate-2))}
.pillars .card:nth-child(3){background:linear-gradient(168deg,var(--sand-1),var(--sand-2))}
.pillars .card:nth-child(4){background:linear-gradient(168deg,var(--clay-1),var(--clay-2))}
.pillars .card:nth-child(2) h3,.pillars .card:nth-child(2) p{color:inherit}
.pillars .card:nth-child(2) h3{color:#F7F2EA}
.pillars .card:nth-child(2) p{color:rgba(244,236,225,.72)}
/* one restrained shadow for all four, no coloured halos */
.pillars .card,
.pillars .card:nth-child(1),.pillars .card:nth-child(2),
.pillars .card:nth-child(3),.pillars .card:nth-child(4){
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
.pillars .card:hover,
.pillars .card:nth-child(1):hover,.pillars .card:nth-child(2):hover,
.pillars .card:nth-child(3):hover,.pillars .card:nth-child(4):hover{
  transform:translateY(-4px);
  box-shadow:0 34px 74px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Dots return to a single quiet gold; the colour now lives in the tiles. */
.diff .dot,
.diff:nth-child(1) .dot,.diff:nth-child(2) .dot,
.diff:nth-child(3) .dot,.diff:nth-child(4) .dot{
  background:var(--gold);box-shadow:0 0 0 6px rgba(244,184,113,.10)
}
.diff h3{text-transform:uppercase;letter-spacing:.05em;font-size:1rem;font-weight:500}

/* Ground everything a shade closer to black. */
:root{--bg:#080605}
.band{background:linear-gradient(180deg,#0C0908,#080605);border-color:rgba(233,210,180,.09)}
footer{background:#050403}

/* The tile labels are small caps, so they need real contrast: at 50% they
   measured 2.3:1 against the light end of the gradients, now about 3.9:1. */
.pillars .card .tile-k{color:rgba(246,239,230,.88)}

/* Section seams: a warm hairline was catching the eye between bands. */
.band{border-top-color:rgba(233,210,180,.055);border-bottom-color:rgba(233,210,180,.055)}

/* ─────────────────────────────────────────────────────────────
   Tiles back to the app's own colours, sampled straight from the
   screens: CALM, Steadfast, "hopeful" and MORNING. Dark ink on the
   light three and light ink on the navy, exactly as the app sets
   them. The editorial frame around them stays.
   ───────────────────────────────────────────────────────────── */
.pillars .card:nth-child(1){background:linear-gradient(168deg,#B8C1AF,#97AC90)}  /* calm, sage    */
.pillars .card:nth-child(2){background:linear-gradient(168deg,#2D3954,#2A3550)}  /* steadfast     */
.pillars .card:nth-child(3){background:linear-gradient(168deg,#DFAD86,#F1C38A)}  /* hopeful, amber*/
.pillars .card:nth-child(4){background:linear-gradient(168deg,#DDA987,#E79058)}  /* morning       */

/* Ink: the app puts dark type on its light cards and light type on the navy. */
.pillars .card:nth-child(1) h3,
.pillars .card:nth-child(3) h3,
.pillars .card:nth-child(4) h3{color:#211A13}
.pillars .card:nth-child(1) p,
.pillars .card:nth-child(3) p,
.pillars .card:nth-child(4) p{color:rgba(33,26,19,.80)}
.pillars .card:nth-child(1) .tile-k,
.pillars .card:nth-child(3) .tile-k,
.pillars .card:nth-child(4) .tile-k{color:rgba(33,26,19,.66)}
.pillars .card:nth-child(1) .ic,
.pillars .card:nth-child(3) .ic,
.pillars .card:nth-child(4) .ic{
  background:rgba(255,255,255,.40);color:#2A2118;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.pillars .card:nth-child(2) h3{color:#F4F6FB}
.pillars .card:nth-child(2) p{color:rgba(238,243,251,.80)}
.pillars .card:nth-child(2) .tile-k{color:rgba(238,243,251,.72)}
.pillars .card:nth-child(2) .ic{
  background:rgba(255,255,255,.13);color:#EAF0FA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
.pillars .card{border-color:rgba(0,0,0,.10)}
.pillars .card:nth-child(2){border-color:rgba(255,255,255,.10)}
/* Small caps need 4.5:1; at 66% the labels sat at 3.6 on the warmest tile. */
.pillars .card:nth-child(1) .tile-k,
.pillars .card:nth-child(3) .tile-k,
.pillars .card:nth-child(4) .tile-k{color:rgba(33,26,19,.84)}

/* ─────────────────────────────────────────────────────────────
   Inside the app. The site never showed the product, which for an
   app landing page is the strongest thing it has. Screens sit in
   plain rounded frames, the middle one lifted, so the phones read
   as objects on the page rather than pasted-in pictures.
   ───────────────────────────────────────────────────────────── */
.inside{background:linear-gradient(180deg,#080605 0%, #0E0A08 40%, #080605 100%)}
.screens{
  margin-top:44px;display:grid;gap:26px;
  grid-template-columns:1fr;justify-items:center;
}
@media(min-width:760px){.screens{grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}}
.screen{margin:0;max-width:290px;width:100%}
.screen picture{display:block}
.screen img{
  width:100%;height:auto;display:block;
  border-radius:30px;
  border:1px solid rgba(238,228,214,.14);
  background:#0B0908;
  box-shadow:0 34px 70px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.06);
}
/* lift the middle pair so the four-across row has a gentle centre */
@media(min-width:760px){.screen:nth-child(2),.screen:nth-child(3){transform:translateY(-22px)}}
.screen figcaption{
  margin-top:16px;text-align:center;
  font-size:.86rem;letter-spacing:.02em;color:var(--muted);
}
@media(min-width:760px){.screen:nth-child(2) figcaption{margin-top:16px}}