/* Fraunces, self-hosted, SIL OFL (see fonts/LICENSE-Fraunces.txt).
   Replaces ui-serif. `ui-serif` resolves to New York on Apple platforms, which is
   Apple's *UI* serif — a face engineered to be neutral and invisible at interface
   sizes. Setting it at clamp(78px,9.1vw,127px) meant displaying, at 127px, a
   typeface designed to have no opinion, and that was most of why this page read
   as a competent template. Fraunces has one: four axes, including WONK, which
   swaps in leaning, hand-cut letterforms, and opsz, so a 127px headline and a
   19px answer get genuinely different cuts rather than one cut scaled.
   Roman carries all four axes (121KB). Italic is the wght+WONK subset (46KB) —
   it appears only as emphasis and in the demo answers, where opsz buys little and
   the extra 100KB is not worth it. Unknown axes are ignored, so the settings
   below are safe on both files.
   font-display:swap, and the swap is invisible: .hero-content holds at opacity 0
   for the first 500ms, which is longer than this font takes to arrive. */
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-latin-full-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-latin-wonk-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
:root {
  color-scheme:dark;
  /* Elevation ladder. Each step is ~35% lighter than the last, so a card reads as
     sitting above its band and the band above the page. On dark UI this, not
     shadow, is what carries depth. */
  /* Hue and saturation are sampled from the app itself (indigo 258/45, amber 36/68).
     Lightness stays a step below the app's own background so the phone screenshots
     on this page still read as devices sitting on a surface, not holes in it. */
  --surface-0:#08060f;  /* recessed: hero well, closing, footer */
  --surface-1:#0f0a1a;  /* base page */
  --surface-2:#150e25;  /* raised band */
  --surface-3:#1d1434;  /* card */
  --surface-4:#281b46;  /* popped card */
  --bg:var(--surface-1);
  /* Warm headings, neutral body. The serif display keeps the candle warmth; running
     text takes the app's cleaner, brighter neutral so long copy stays legible. */
  --cream:#faf5ee;      /* warm: serif display only */
  --text:#e6e2ef;       /* neutral: body copy */
  --muted:#cdc6d6;      /* neutral: secondary */
  --faint:#9a92a8;      /* neutral: tertiary, labels on light */
  --gold-deep:#c07c1c; --gold:#cf8c28; --gold-light:#e8ab4a; --gold-glow:#f5d089;
  /* Borders in three tiers so a divider and a lit card edge read differently. */
  --line-faint:rgba(219,203,238,.07); --line:rgba(219,203,238,.14); --line-strong:rgba(219,203,238,.22);
  /* A light source above the page: lit top edge, then real shadow beneath. */
  --lift-1:inset 0 1px 0 rgba(255,238,210,.07),0 2px 6px rgba(0,0,0,.45),0 18px 38px -14px rgba(0,0,0,.7);
  --lift-2:inset 0 1px 0 rgba(255,238,210,.1),0 3px 8px rgba(0,0,0,.5),0 30px 58px -14px rgba(0,0,0,.8);
  /* Fraunces first, with the old chain behind it as the fallback if the webfont
     never arrives. The sans still resolves to SF Pro on Apple, matching the app's
     body face, with a proper chain behind it for everywhere else. */
  --serif:'Fraunces',ui-serif,'New York',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
/* Full-bleed layers inside centred containers reach past the page's own gutters,
   so the horizontal clip belongs here at the page level — on the section itself it
   would crop the bleed back to the container and defeat the point. `clip` rather
   than `hidden`: hidden makes a scroll container and would kill position:sticky. */
main{overflow-x:clip}
/* Grain. Perfectly smooth gradients are the tell of something rendered rather than
   made; a little noise over everything reads as printed matter instead. Fixed, so
   it does not travel with the scroll, and inert to the pointer. */
body:after{content:'';position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,p,figure{margin:0}/* Tracking history, since it keeps being the thing that needs retuning per face:
   Georgia needed -.055em to close up at display sizes; New York is tightly
   fitted already and went muddy under it, so it dropped to -.022em. Fraunces at
   opsz 144 is fitted tighter still — the optical-size axis is doing the closing
   up that negative tracking used to do by hand — so it holds at -.022em rather
   than needing more. Check this if the face ever changes again. */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:1.08;color:var(--cream)}h2{font-size:clamp(38px,4.5vw,64px)}
/* The two cuts. Display takes the largest optical size, softened corners and
   WONK on — the leaning, hand-carved letterforms that are the reason this face
   is here rather than any other.
   `wght` is deliberately NOT listed: naming an axis in font-variation-settings
   takes it away from font-weight, and .logo (700) and .couples-explanation h3
   (600) still need font-weight to work. Only the other three axes are ever set. */
h1,h2{font-variation-settings:'opsz' 144,'SOFT' 24,'WONK' 1}
/* Serif under ~36px takes a low optical size instead: x-height rises, spacing
   opens, letterforms widen. That is the whole point of an opsz axis, and it is
   the one thing a single scaled cut cannot do. WONK goes off down here — at text
   size the leaning forms stop reading as character and start reading as a wobble.
   This list is every serif element on the page that is not an h1/h2. If you add
   another, add it here too, or it will inherit the 144 display cut at 19px. */
.logo,.reflection-question,.avatar,.reflection-answer>p,#revealed-answer,
.streak-num,.couples-explanation h3,.mobile-download strong{
  font-variation-settings:'opsz' 26,'SOFT' 44,'WONK' 0}
/* Most display type here carries an authored <br>, so balance only does anything
   at the widths where those breaks are suppressed — which is exactly where a
   headline would otherwise orphan a word. `pretty` earns its place everywhere:
   it is the running copy, not the headings, that strands last words. */
h1,h2,h3,summary{text-wrap:balance}
p,li,figcaption,.section-description{text-wrap:pretty}
/* The other half of the tracking law: display tightens, running copy opens up.
   +.015em at body size is what stops a dark page's text looking clotted.
   The labels keep their .18em rather than taking the law's +.04em — that figure
   was measured on 14px sentence-case, and 10px uppercase needs more air, not
   less. Same principle, different size and case, so a different number. */
body,p,li,figcaption{letter-spacing:.015em}em{font-weight:inherit;color:inherit}a{color:inherit}img{display:block;max-width:100%;height:auto}button{font:inherit;color:inherit}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}svg{display:block}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(1160px,calc(100% - 96px));margin-inline:auto}/* Uneven vertical rhythm. Identical padding on every band is a metronome; these
   breathe differently so the page has a pace instead of a tick. */
.section-space{padding-block:120px}
.couples-section{padding-block:104px 128px}
.faq-section{padding-block:112px 96px}/* Gold has one job per screen, and eyebrows are not it. They are labels — they
   name the section and then get out of the way. Running them in gold meant the
   opener alone had gold on the headline, the eyebrow, the CTA, the badge rim, the
   tab rules and every link, and a reverent palette spent that freely stops
   reading as candlelight. Gold now marks two things only: the one brand moment in
   the headline, and anything you can act on. Everything else is a neutral. */
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--muted);line-height:1.6}.section-description{font-size:15px;line-height:1.85;color:var(--muted);max-width:420px;margin-top:26px}.section-description a{text-underline-offset:4px}.skip{position:fixed;top:-100px;left:20px;z-index:200;background:var(--gold-light);color:var(--bg);padding:12px 20px}.skip:focus{top:12px}:focus-visible{outline:2px solid var(--gold-light);outline-offset:5px}::selection{color:var(--bg);background:var(--gold-light)}[hidden]{display:none!important}
/* iPhone frame. Every measurement is a ratio of --w, taken from an iPhone 15/16 Pro
   (393x852pt screen, 2.165 body ratio), so one variable resizes the whole device. */
.device{
  --rail:calc(var(--w)*.011);--bez:calc(var(--w)*.019);--radius:calc(var(--w)*.157);--btn:#6e6579;
  position:relative;display:block;width:var(--w);flex-shrink:0;padding:var(--rail);border-radius:var(--radius);
  background:linear-gradient(180deg,#ffffff2e,transparent 9%,transparent 91%,#00000047),linear-gradient(90deg,#4b4555 0%,#b0a5bd 4%,#e4ddeb 8%,#6a6276 15%,#413b4a 34%,#413b4a 66%,#6a6276 85%,#e4ddeb 92%,#b0a5bd 96%,#4b4555 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.5),0 30px 60px -16px rgba(0,0,0,.85);
}
.device-screen{position:relative;display:block;overflow:hidden;border:var(--bez) solid #0a070e;border-radius:calc(var(--radius) - var(--rail));background:#000}
.device-screen img{width:100%;border-radius:0}
.device-screen:before,.device-screen:after{content:'';position:absolute;left:50%;z-index:2}
/* Dynamic Island */
.device-screen:before{top:calc(var(--w)*.026);width:calc(var(--w)*.299);height:calc(var(--w)*.088);margin-left:calc(var(--w)*-.1495);background:#000;border-radius:calc(var(--w)*.044)}
/* Home indicator */
.device-screen:after{bottom:calc(var(--w)*.020);width:calc(var(--w)*.333);height:calc(var(--w)*.0125);margin-left:calc(var(--w)*-.1665);background:#fffffff0;border-radius:calc(var(--w)*.0063)}
/* Status bar, vertically centred on the island the way iOS sets it. */
.device-status{position:absolute;z-index:3;top:calc(var(--w)*.070);transform:translateY(-50%);left:calc(var(--w)*.11);right:calc(var(--w)*.065);display:flex;align-items:center;justify-content:space-between;color:#fff;pointer-events:none}
.device-status b{font-family:var(--sans);font-weight:600;font-size:calc(var(--w)*.0406);line-height:1}
.status-icons{width:calc(var(--w)*.171);height:calc(var(--w)*.0285)}
.device:before,.device:after{content:'';position:absolute;background:var(--btn)}
/* Left rail: action button, volume up, volume down, cut from one strip. */
.device:before{left:calc(var(--w)*-.008);top:calc(var(--w)*.404);width:calc(var(--w)*.010);height:calc(var(--w)*.531);border-radius:calc(var(--w)*.005) 0 0 calc(var(--w)*.005);background:linear-gradient(180deg,var(--btn) 0 18.6%,transparent 18.6% 27.9%,var(--btn) 27.9% 59.9%,transparent 59.9% 68%,var(--btn) 68% 100%)}
/* Side button */
.device:after{right:calc(var(--w)*-.008);top:calc(var(--w)*.609);width:calc(var(--w)*.010);height:calc(var(--w)*.312);border-radius:0 calc(var(--w)*.005) calc(var(--w)*.005) 0}
/* Navigation */
/* Both spellings. Safari only dropped the prefix in 18; every iOS before that —
   which is a real share of an iPhone app's audience — needs -webkit- or the bar
   loses its blur and the page scrolls visibly through it. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(15,10,26,.93);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.header-inner{min-height:82px;display:flex;justify-content:space-between;align-items:center;gap:25px}.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--cream);text-decoration:none;white-space:nowrap}.logo img{width:34px;height:34px;border-radius:9px}/* The one CTA that follows you down the page, so it carries the offer rather than
   a label — but the offer sits beside the pill, not inside it. Stacked title over
   price is a card; at nav height it collapsed to 12.5px over 9.5px and read as a
   dense block rather than a button. One line in the pill, the terms next to it at
   a size you can actually read. The mobile sticky bar has always used this
   single-line form and has always looked better for it. */
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-offer{font-size:11.5px;font-weight:500;color:var(--faint);letter-spacing:.005em;white-space:nowrap}
.nav-download{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  /* Vertical, not diagonal: a 160deg sweep across a wide short pill drags the dark
     stop through the middle of the label and muddies it. */
  background:linear-gradient(180deg,#f3c179,var(--gold-light) 52%,#dc9c37);
  color:#1a1024;border:1px solid #f0bb68;border-radius:999px;padding:0 19px;
  text-decoration:none;white-space:nowrap;min-height:44px;
  font-size:13px;font-weight:650;letter-spacing:-.01em;
  /* One highlight and one contact shadow at rest. The gold glow is a hover state;
     worn permanently it was the thing making this read as plastic. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(8,6,15,.35);
  transition:transform .2s,box-shadow .2s,filter .2s}
.nav-apple{width:15px;height:17px;fill:currentColor;stroke:none;flex-shrink:0;opacity:.92}
.nav-download b{font-weight:650}
.nav-download .icon{width:16px;height:16px}
.nav-download:hover{transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px -6px rgba(232,171,74,.5)}
/* Guides hub closing CTA. The hub's only job beyond listing is to hand the
   reader the App Store, so it gets the same weight as the homepage closing. */
.guides-cta{margin-top:70px;padding-top:50px;border-top:1px solid var(--line);text-align:center}.guides-cta h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;max-width:640px;margin-inline:auto}.guides-cta>p{font-size:14px;color:var(--muted);line-height:1.85;margin:20px auto 26px;max-width:430px}.guides-cta .download-note{margin-top:14px}
/* Opening: the actual product is the visual identity. The hero states the promise
   and then, in the same section, demonstrates it — the four devotional screens the
   reader can step through are the hero image, so the page's first claim and its
   proof never get separated by a band edge. */
/* overflow:clip, not hidden. They clip identically, but `hidden` makes this a
   scroll container, which means any future scroll()/view() timeline inside the
   hero would attach to it, find nothing scrolls, and silently animate nothing. */
.hero{position:relative;isolation:isolate;overflow:clip;padding:40px 0 84px;background:var(--surface-0);border-bottom:1px solid var(--line)}
/* THE SHAFT. Everything in .hero-light is a soft broad ellipse fading out at
   70-76% — four of them, and not one hard edge among them. That is fog with no
   beam in it, and fog with no beam in it reads as a wash rather than as air,
   which is the whole reason this band looks bare.
   Three parts, all load-bearing:
     · a steep linear gradient with its stops close together, so the beam has an
       actual edge instead of being another gradient;
     · filter:blur, which turns that edge from a printed stripe into something
       volumetric;
     · a radial mask, so the beam exists only near its source and dies out before
       it reaches a border — unmasked it reads as a decal laid on the page.
   Off-axis at 101deg deliberately. The centred symmetrical version behind a hero
   headline is the most-copied dark-page move of the last two years; the one that
   still works is the one you notice second, not first.
   z-index:-1, not 1. Negative z-index descendants paint above this element's own
   background but below its in-flow content, so the beam lands on the light layer
   without ever covering the headline or the phone. At z-index:1 it would sit on
   top of .reading-layout, which is unpositioned and therefore paints lower. */
.hero:before{content:'';position:absolute;inset:-18% -10% auto -10%;height:118%;
  z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(101deg,
    transparent 36%,rgba(232,171,74,.10) 43%,rgba(245,208,137,.17) 47%,
    rgba(232,171,74,.07) 52%,transparent 58%);
  background:linear-gradient(101deg in oklab,
    transparent 36%,rgba(232,171,74,.10) 43%,rgba(245,208,137,.17) 47%,
    rgba(232,171,74,.07) 52%,transparent 58%);
  filter:blur(15px);
  -webkit-mask-image:radial-gradient(ellipse 66% 52% at 44% 10%,#000 8%,transparent 70%);
          mask-image:radial-gradient(ellipse 66% 52% at 44% 10%,#000 8%,transparent 70%)}
/* A second, coarser grain over the opener only, above the plume. The global
   layer on body:after is a 160px tile, and across this much open gradient the
   repeat is findable if you look for it; a second field at a very different
   frequency beats against the first and the tiling stops being perceptible. */
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:320px 320px}
/* The beam is sized for a wide band. At phone width 66% of the viewport is about
   250px, so a 15px blur is proportionally much softer and the mask sits over
   most of the column — it stops being a beam and goes back to being a wash.
   Narrower, tighter, further off-centre, and the plume eases off too: there is
   far less bare gradient to fill here and the texture crowds a single column. */
@media(max-width:700px){
  .hero:before{opacity:.5;filter:blur(10px);inset:-12% -14% auto -14%;
    -webkit-mask-image:radial-gradient(ellipse 92% 34% at 34% 8%,#000 6%,transparent 66%);
            mask-image:radial-gradient(ellipse 92% 34% at 34% 8%,#000 6%,transparent 66%)}
  .hero .smoke-veil{opacity:.15}
}
/* Midnight and candlelight, which is the app's own phrase for this. Four layers,
   painted top-down (first listed sits on top):
     1. counter-light — the cool purple the app puts in a top corner (#B8A9D4).
        One cold source against three warm ones is what stops the whole thing
        reading as a single even wash.
     2. candlelight   — amber from above the top edge, so only its lower half is
        visible. This is DFBackground.amberGlow from the app, whose centre is
        literally `.top`: #C9944A at 12% falling to 4%. It is on 22 screens in
        the product and was the one part of that look the site never had.
     3. floor light   — gold rising from below the fold. Lighting a dark scene
        only from the ceiling makes it a painted rectangle; the second source
        from underneath is what gives the phone's shadow something to sit in.
     4. body          — the violet mass the hero is actually made of. Last, so
        every light above lands on it.
   Colours are the app's; the ground stays the site's own, which is a step darker
   on purpose so the screenshots read as devices and not as holes. */
/* Declared twice on purpose. Interpolating these in oklab instead of sRGB is what
   stops the violet mass banding into contour rings — down here there are only a
   few 8-bit steps between #3a2a4e and #08060f, and a gradient this wide crosses
   all of them. An `in oklab` a browser does not understand invalidates the WHOLE
   declaration, not the one gradient, so the sRGB version has to sit above it and
   let the cascade choose. The extra midpoints are for the same reason: each one
   is free, and each one is a band that never forms. */
.hero-light{position:absolute;inset:0;z-index:-2;
/* Layer 0, added on top of the four below: a vignette. Without it every one of
   these sources fades to `transparent` and the band therefore ends at its own
   flat --surface-0 on all four sides, evenly — which is what makes a lit scene
   read as a rectangle of gradient. Darkening the corners is what tells the eye
   the light has a centre and falls off from it. Centred a third of the way down,
   where the headline sits, not at 50%. */
  background:
    radial-gradient(ellipse 78% 64% at 50% 34%,transparent 40%,rgba(8,6,15,.58) 100%),
    radial-gradient(circle 420px at 100% 0%,rgba(184,169,212,.07),transparent 72%),
    radial-gradient(ellipse 66% 44% at 50% -2%,rgba(201,148,74,.13) 0%,rgba(201,148,74,.045) 44%,transparent 76%),
    radial-gradient(ellipse 104% 44% at 50% 104%,rgba(224,180,80,.10),transparent 70%),
    radial-gradient(ellipse 80% 52% at 50% 28%,#3a2a4e 0%,#2f2340 32%,#241b32 54%,#160f21 78%,transparent 100%);
  background:
    radial-gradient(ellipse 78% 64% at 50% 34% in oklab,transparent 40%,rgba(8,6,15,.58) 100%),
    radial-gradient(circle 420px at 100% 0% in oklab,rgba(184,169,212,.07),transparent 72%),
    radial-gradient(ellipse 66% 44% at 50% -2% in oklab,rgba(201,148,74,.13) 0%,rgba(201,148,74,.045) 44%,transparent 76%),
    radial-gradient(ellipse 104% 44% at 50% 104% in oklab,rgba(224,180,80,.10),transparent 70%),
    radial-gradient(ellipse 80% 52% at 50% 28% in oklab,#3a2a4e 0%,#2f2340 32%,#241b32 54%,#160f21 78%,transparent 100%)}.hero-content{text-align:center;position:relative;z-index:3}.hero-content .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:9px}
/* Uneven columns, and the phone pushed left out of its track so it breaks the
   page's own gutter instead of sitting politely inside it. */
.reading-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:78px;align-items:center;margin-top:30px}/* Neutral now. These flank a label, and a label is not something you can act on. */
.gold-dash{width:22px;height:1px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--line-strong),var(--muted))}
.eyebrow .gold-dash:last-child{transform:scaleX(-1)}/* Sized for a sentence, not a two-word slogan. The old clamp topped out at 127px,
   which was set for "Faith over Distraction." and would run four lines here. */
/* -.022em, which is what the note above h1,h2 says this face wants. The hero was
   overriding back to -.05em — within a hair of the -.055em that note describes as
   muddy, and the one value a display line must not carry. */
/* line-height comes off the h1,h2 default at 1.08. The .96 override sat below
   every stance the calm references actually take — Dwell, Waking Up and Endel all
   pin 1.2, Glorify goes to 0.92 but only with a fine optical cut and three short
   stacked lines. At two long lines in a text-grade cut, .96 was crowding the
   descenders of line one into the caps of line two. */
.hero h1{font-size:clamp(78px,9.1vw,127px);letter-spacing:-.022em;margin:25px 0}.hero-description{font-size:15px;color:var(--text);line-height:1.8;margin-bottom:24px;max-width:540px;margin-inline:auto}.download-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;background:linear-gradient(110deg,#f0b445,#d38a1e);color:#1a1024;text-decoration:none;padding:15px 21px;border:1px solid #efb75c;border-radius:8px;box-shadow:0 3px 30px #cf8c2820;min-height:56px;font-size:13px;font-weight:650;transition:transform .2s,box-shadow .2s}.download-button:hover{transform:translateY(-2px);box-shadow:0 5px 35px #cf8c2845}.download-button .apple{width:22px;height:24px;fill:currentColor;stroke:none}.download-button>.icon:last-child{width:16px;height:16px;margin-left:15px}/* App Store badge. Apple's white variant, which is the one specified for dark
   backgrounds. Proportions are ratios of --h, matching the official 120x40 artwork. */
.store-badge{--h:54px;--badge-bg:#fff;--badge-fg:#000;display:inline-flex;align-items:center;gap:calc(var(--h)*.175);height:var(--h);padding:0 calc(var(--h)*.26) 0 calc(var(--h)*.24);background:var(--badge-bg);color:var(--badge-fg);border-radius:calc(var(--h)*.165);text-decoration:none;font-family:var(--sans);transition:transform .2s,box-shadow .2s}
.store-badge{box-shadow:0 2px 6px rgba(0,0,0,.45),0 18px 40px -14px rgba(0,0,0,.75),0 0 44px -10px rgba(232,171,74,.26)}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.5),0 24px 50px -14px rgba(0,0,0,.8),0 0 56px -8px rgba(232,171,74,.36)}
.badge-logo{width:calc(var(--h)*.43);height:calc(var(--h)*.5);fill:currentColor;stroke:none;flex-shrink:0;margin-top:calc(var(--h)*-.035)}
.store-badge small{display:block;font-size:calc(var(--h)*.202);line-height:1.08;letter-spacing:.005em}
.store-badge b{display:block;font-size:calc(var(--h)*.432);font-weight:500;line-height:1.12;letter-spacing:-.017em;margin-top:calc(var(--h)*.012)}
.download-note{font-size:10.5px;color:var(--muted);margin-top:13px}.download-note span{padding-inline:7px}
/* THE SIGNATURE. The app draws a warm circle of light on every screen: the book
   on the lock screen, the hands on the prayer screen, the streak ring on Together.
   This is that circle at page scale, holding the screen being read. */
/* The drawn ring. Stroke, not border — a border can only ever be a perfect
   ellipse. Each instance is rotated a little so repeats never line up. */
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;
  stroke:rgba(232,171,74,.34);stroke-width:.42;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Offset baselines. Centring two columns makes them start level, which is the
   most machine-like way to set a page. The headline sits high, the steps begin
   lower, and the eye has to travel instead of scanning a row. */
.reading-preview{position:relative;display:flex;align-items:center;flex-direction:column;isolation:isolate;margin-left:-74px}/* The circle again, holding the screen being read. */
.reading-aura{position:absolute;width:500px;height:500px;max-width:132%;aspect-ratio:1;top:40px;z-index:-1;
  background:radial-gradient(circle at 50% 46%,rgba(232,171,74,.12),rgba(90,50,123,.34) 52%,transparent 72%)}
/* A true circle here, not one of the drawn rings — a perfect 360 with no wobble. */
.reading-aura .ring{stroke-width:1.1px;stroke:rgba(232,171,74,.20)}
/* Sitting ON the page, not printed on it. The single flat `20px 25px 60px #0004`
   this replaces also clobbered .device's own two-layer shadow, which is why the
   hero phone read as pasted down while the ones in the guides did not.
   Four layers, each doing one job:
     1. contact — tight, dark, tucked right under the bottom edge. This is the
        layer that decides whether an object is touching a surface; without it no
        amount of soft shadow reads as weight.
     2. form    — the mid shadow that gives the body its mass.
     3. cast    — long and diffuse, offset right to match the light the hero's
        radial already puts up and to the left.
     4. bounce  — warm, no offset. Light coming back off the page. Gold, because
        every other lit thing here is.
   Plus a 1px warm catch on the top bezel, the same move --lift-1 makes on cards. */
.product-screen{--w:263px;
  box-shadow:
    /* A translucent white hairline just outside the frame. A dark device on a dark
       ground needs an edge more than it needs light — this is the one job the
       removed halo was actually doing, done with 1px instead of 90px of glow. */
    0 0 0 1px rgba(255,255,255,.11),
    0 2px 6px rgba(0,0,0,.6),
    0 18px 26px -14px rgba(0,0,0,.9),
    26px 44px 80px -24px rgba(0,0,0,.85),
    0 0 90px -24px rgba(232,171,74,.16),
    inset 0 1px 0 rgba(255,238,210,.16)}/* The screens are consecutive steps in one devotional, so they move like screens
   on a phone: the next one slides in from the side the sequence is heading. The
   outgoing screen travels a shorter distance so the new one appears to cover it
   rather than the pair sliding as a unit. */
.reading-next{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform;
  transform:translateX(100%);transition:transform .52s cubic-bezier(.4,.02,.12,1)}
.reading-next.from-left{transform:translateX(-100%)}
.reading-next.is-in{transform:translateX(0)}
#reading-image{will-change:transform;transition:transform .52s cubic-bezier(.4,.02,.12,1)}
.is-sliding #reading-image{transform:translateX(-26%)}
.is-sliding-back #reading-image{transform:translateX(26%)}
.preview-caption{transition:opacity .28s ease}
.preview-caption.is-fading{opacity:0}
.preview-caption{font-size:11px;color:var(--muted);letter-spacing:.025em;margin-top:23px}
/* The page catching light under the device. Hung off the caption because that is
   the element sitting directly beneath the phone — anchoring it to the device
   instead would mean re-deriving the frame's height from --w in a second place,
   and it would then need correcting at every breakpoint that resizes it. */
.preview-caption{position:relative}
.preview-caption:before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-40px;width:138%;height:96px;margin-left:-69%;
  background:radial-gradient(ellipse 48% 46% at 50% 50%,rgba(232,171,74,.14),rgba(124,85,170,.11) 44%,transparent 70%)}.reading-copy .eyebrow{margin-bottom:25px}.reading-copy h2{font-size:clamp(37px,3.9vw,55px);line-height:1.12}/* Two gold headlines in one section is one too many, and the h1 is the one that
   earns it. This one takes the older emphasis instead: roman to italic, the way a
   book marks a phrase. Costs no colour and reads at any size. */
.reading-copy h2 em{font-style:italic;color:var(--cream)}.reading-tabs{display:grid;margin:29px 0 20px}.reading-tabs button{display:flex;align-items:center;gap:20px;border:0;border-bottom:1px solid var(--line);background:none;font-size:13px;text-align:left;padding:16px 0;color:var(--faint);transition:color .2s,border-color .2s}.reading-tabs button>span:first-child{font-size:9px;letter-spacing:.04em;color:var(--faint)}.reading-tabs button>span:last-child{margin-left:auto;font-size:17px}.reading-tabs button.active{color:var(--gold-light);border-bottom-color:#e8ab4a70}.reading-tabs button:hover{color:var(--text)}.quiet-link{display:inline-flex;align-items:center;gap:20px;color:var(--gold-light);font-size:12px;font-weight:500;text-decoration:none;min-height:44px}.quiet-link:hover{color:var(--gold-glow);text-decoration:underline;text-underline-offset:4px}.quiet-link .icon{width:17px;height:17px}
/* Together: an answer reveal, not a shared phone lock. */
/* Re-composed. The heading and the steps run down the left; the card stage takes
   the right and bleeds off the edge of the page instead of sitting inside the
   container. display:contents lets the grid own the layout without moving markup.
   overflow-x:clip rather than hidden, so the bleed is contained but position:sticky
   inside still works — hidden would create a scroll container and kill the pin. */
/* grid-template-rows is load-bearing: the stage spans both rows, and without an
   explicit auto/1fr grid the browser splits its height evenly between them —
   which inflates row one to half the stage's height and strands the steps in the
   middle of a 600px void. auto sizes row one to the heading and nothing more. */
/* No overflow-x here: main clips the page horizontally, and clipping on the section
   itself would crop both the stage bleed and the smoke back to the container. */
.couples-section{display:grid;grid-template-columns:.94fr 1.06fr;grid-template-rows:auto 1fr;gap:0 74px;align-items:start}
.couples-layout{display:contents}
/* The heading takes the full width on its own row, so the two sticky columns below
   share one containing block and therefore one travel distance. When the steps sat
   in a shorter row than the stage they ran out of stick first and scrolled away
   while the card was still pinned. */
.couples-heading{grid-column:1/-1;grid-row:1;text-align:left;max-width:640px;margin:0 0 46px}
.couples-explanation{grid-column:1;grid-row:2}
/* Pull the stage out past the container's own margin so it runs off the page edge
   rather than stopping politely inside it. Clipped by the section's overflow-x. */
.demo-track{grid-column:2;grid-row:2;margin-right:calc(((min(1160px,100vw - 96px) - 100vw) / 2) - 22px)}/* A badge, not the page's usual hairline eyebrow. This is the one section
   describing something the reader may not have and does not need, so it has to
   say so before the headline does — and 10px of letterspaced text at the top of a
   dark band is the easiest thing on the page to scroll straight past. */
.couples-heading>.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  padding:8px 15px 8px 12px;font-size:10.5px;letter-spacing:.14em;color:var(--gold-light);
  background:rgba(232,171,74,.09);border:1px solid rgba(232,171,74,.34);border-radius:999px}
.couples-heading>.eyebrow .icon{width:14px;height:14px;stroke-width:1.9}.couples-heading h2{font-size:clamp(44px,4.9vw,70px);line-height:1.08}.couples-heading>p:last-child{color:var(--muted);font-size:15px;margin-top:23px;line-height:1.85}/* Its children are placed by the section grid, so this wrapper steps out of the
   box model entirely rather than forming a nested grid of its own. */
.couples-layout{display:contents}
/* The demo pins for roughly a screen of travel while the seal breaks. Scroll still
   drives it one to one — this holds the card in place, it never holds the reader.
   The track's extra height is the only thing that creates the travel. */
/* Enough travel for three phases: the seal breaking, then each of the two points
   after it. Too short and the steps flick past before they can be read. */
.demo-track{position:relative;min-height:188vh}
/* The offset has to answer to the screen, not a fixed number. A hard 104px meant
   the card hung off the bottom on any laptop-height viewport, so it pinned before
   it was fully visible and the sequence was already running while you were still
   scrolling to see the rest of it. This centres the card when there is room and
   tucks it up under the header when there is not, so pinning and being fully on
   screen happen at the same moment. */
.demo-track .reflection-demo{position:sticky;top:clamp(14px,calc(50vh - 345px),104px)}
/* Below about 700px of viewport height the card cannot fit however it is offset,
   so stop pinning entirely rather than pin something half off the screen. The
   script falls back to driving the reveal from the card's own travel instead. */
@media(max-height:699px){
  .demo-track{min-height:0}
  .demo-track .reflection-demo{position:static;top:auto}
  .couples-explanation{position:static;top:auto}
}
/* The copy pins alongside the card. If only the card holds, the short text column
   scrolls away and leaves it stranded in empty space for the rest of the travel. */
.couples-explanation{position:sticky;top:clamp(30px,calc(50vh - 328px),120px);padding-top:34px}.reflection-demo{padding:30px;background:linear-gradient(160deg,var(--surface-4),#180f2b);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--lift-2)}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.demo-heading .eyebrow{font-size:8px;letter-spacing:.13em}.demo-tag{font-size:8px;letter-spacing:.08em;padding:3px 7px;border:1px solid var(--line-strong);color:var(--muted);border-radius:3px}.reflection-question{font-family:var(--serif);font-size:26px;line-height:1.35;letter-spacing:-.02em;margin:25px 0}/* Two planes, not two boxes. While it is sealed the partner's card sits further
   back, tipped away and out of focus; the reveal brings it forward and levels it.
   The mechanic is the depth, so the geometry carries the meaning. */
.reflection-answer{background:linear-gradient(135deg,#362664,#2d1d4e);border:1px solid #9c80c64a;border-radius:14px;padding:18px;margin-top:14px;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.8)}
.reflection-answer:not(.partner-answer){position:relative;z-index:2;
  transform:perspective(1000px) translateZ(calc(14px * var(--reveal)));
  box-shadow:0 18px 40px -18px rgba(0,0,0,calc(.55 + .35 * var(--reveal)))}
.partner-answer{position:relative;z-index:1;margin-top:calc(14px + 10px * var(--reveal));transform-origin:50% 0;
  transform:perspective(1000px)
            translateZ(calc(-96px * (1 - var(--reveal))))
            rotateX(calc(7deg * (1 - var(--reveal))))
            translateY(calc(-16px * (1 - var(--reveal))));
  filter:blur(calc(2.6px * (1 - var(--reveal))));
  opacity:calc(.52 + .48 * var(--reveal))}.answer-label{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:.1em;color:var(--muted)}.avatar{display:grid;place-items:center;width:22px;height:22px;background:#693d8f60;border-radius:50%;color:var(--text);font-family:var(--serif);font-size:11px}.answer-label>span:last-child{font-size:7.5px;letter-spacing:.1em;margin-left:auto;color:var(--gold-light)}.reflection-answer>p{font-family:var(--serif);font-size:19px;line-height:1.6;margin-top:14px;color:var(--cream);min-height:60px}/* One variable drives the whole moment: 0 is sealed, 1 is read. Everything below
   is a function of it, so scroll position and the button end up in the same place. */
.reflection-demo{--reveal:0}
/* Both states share one grid cell, so the stack is always as tall as the taller of
   the two and neither can spill past the card. Absolute positioning sized the box
   from the sealed placeholder alone, which clipped any revealed answer that ran to
   three lines — and it is the revealed one that is allowed to be long. */
.seal-stack{display:grid}
.seal-stack>*{grid-area:1/1}
#sealed-answer{opacity:calc(1 - var(--reveal));transition:opacity .25s linear}
#revealed-answer{margin:0;opacity:var(--reveal);
  transform:translateY(calc(10px * (1 - var(--reveal))));transition:opacity .25s linear,transform .25s linear;
  font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--cream);padding-top:21px}
.sealed-lines{display:grid;gap:9px;margin-block:21px;
  filter:blur(calc(5px * (1 - var(--reveal))));
  opacity:calc(.6 * (1 - var(--reveal)));
  transform:scaleX(calc(1 - .04 * var(--reveal)));transform-origin:left}.sealed-lines span{height:8px;width:95%;background:#9d81bb;border-radius:6px}.sealed-lines span:nth-child(2){width:84%}.sealed-lines span:nth-child(3){width:60%}#sealed-answer>p{font-size:10px;color:var(--muted);text-align:center;margin-bottom:4px}/* The reward loop, shown. Both answered, so the shared streak moves — it counts
   up on the user's own click rather than sitting there as a finished number. */
/* Present from the start at zero rather than hidden. Hiding it left 107px of dead
   space inside the card while sealed, and un-hiding it mid-pin would have shifted
   the layout under a card that is supposed to be holding still. */
.demo-streak{display:flex;align-items:baseline;gap:11px;margin-top:12px;padding-top:13px;border-top:1px solid rgba(232,171,74,.18);
  opacity:.42;transition:opacity .55s ease}
.demo-streak.is-on{opacity:1}
.streak-num{font-family:var(--serif);font-size:32px;line-height:1;color:var(--gold-light);font-variant-numeric:tabular-nums}
.streak-label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.demo-note{font-size:9.5px;color:var(--muted);line-height:1.7;margin:13px auto 0;text-align:center;max-width:320px}.couples-explanation h3{font-family:var(--serif);font-size:35px;font-weight:600;letter-spacing:-.02em;line-height:1.18;color:var(--cream)}/* The three points are the three things happening in the card beside them, so they
   light up in step with it: sealed, then the streak, then your own pace. */
.couples-explanation ol{display:grid;gap:25px;list-style:none;padding:0;margin:30px 0}
.couples-explanation li{display:flex;gap:19px;position:relative;opacity:.34;
  transition:opacity .5s ease,transform .5s cubic-bezier(.32,.72,0,1);transform:translateX(-6px)}
.couples-explanation li.is-live{opacity:1;transform:none}
.couples-explanation li:before{content:'';position:absolute;left:-20px;top:7px;bottom:7px;width:1.5px;border-radius:2px;
  background:var(--gold-light);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.couples-explanation li.is-live:before{transform:scaleY(1)}
.couples-explanation li>span{font-size:10px;color:var(--gold);padding-top:4px}
/* The unwritten state should look unwritten, not like a short answer. */
#your-answer.is-blank{color:var(--faint);font-style:italic;opacity:.75}.couples-explanation strong{font-size:14px;font-weight:500}.couples-explanation li p{font-size:12px;color:var(--muted);line-height:1.85;margin-top:7px}
/* Full-width single column, rows sitting on the page rather than in a panel.
   Sizes follow Raycast / Framer / Vercel: big questions, tall rows, hairlines only. */
.faq-heading{text-align:center;max-width:620px;margin:0 auto 58px}
/* Smoke, kept faint. The earlier pass ran at .30 here and read as haze over the
   type; at .14 it only lifts the flat black behind the rows. Full-bleed to the
   viewport edges with a long vertical fade so it never ends on a visible line,
   and clipped horizontally so the 100vw layer cannot create a scrollbar.

   Two layers on purpose. The veil is the masked band: it belongs to its section
   and scrolls normally, so the haze only shows where the section is. The plume
   inside it carries the texture and gets translated back by exactly the scroll
   offset, which leaves it standing still in the viewport while the page moves
   through it. background-attachment:fixed did the same job in one line, but it
   forces a main-thread repaint of the whole band on every frame — that is what
   made it stutter. A transform on a promoted layer stays on the compositor. */
.smoke{position:relative}
.smoke-veil{position:absolute;top:-6%;left:50%;width:100vw;height:112%;margin-left:-50vw;
  z-index:-1;pointer-events:none;opacity:.14;
  /* Has to be a real clip, not clip-path. clip-path hides what you see but leaves
     the plume's translated box in the page's scrollable overflow, so scrolling
     near the end drags the document end past the footer and you fall into empty
     space. overflow:hidden clips the paint and the overflow both. */
  overflow:hidden;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 24%,#000 50%,rgba(0,0,0,.75) 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 24%,#000 50%,rgba(0,0,0,.75) 78%,transparent 100%)}
/* Taller than both the veil and the viewport, so neither the pinned state nor
   the no-JS resting state can ever expose a hard edge mid-section. */
.smoke-veil>span{position:absolute;left:0;top:-1vh;width:100%;height:calc(100% + 2vh);min-height:102vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1000'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0048 0.011' numOctaves='5' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.68 0 0 0 0 0.54 0 0 0 0 0.96 0 0 0 0.9 -0.36'/%3E%3C/filter%3E%3Crect width='1400' height='1000' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:cover;background-position:28% 62%;
  transform:translate3d(0,var(--smoke-y,0px),0);will-change:transform}
/* The hold itself is in home.js. A CSS scroll-driven animation would keep it off
   the main thread entirely, but view() measures the plume against its nearest
   clipping ancestor, and this veil has to clip — so the timeline sat frozen and
   the smoke rode along with the page. Clipping is the harder requirement, so the
   transform comes from script. It is still a transform on a promoted layer, which
   is the part that matters for smoothness. */
/* Couples and FAQ sit next to each other, so the FAQ takes a different crop of
   the same noise. Same effect, but the two bands don't read as one texture
   photocopied twice down the page. */
.faq-section .smoke-veil>span{background-position:74% 22%}
/* The opener gets the plume too. It is the emptiest band on the page and it was
   the one with nothing in the air — the veil existed and was spent on the two
   sections that needed it least. A third crop so it doesn't read as the same
   texture three times, and a little more of it, because there is more bare
   gradient here for it to do something to. */
.hero .smoke-veil{opacity:.19}
.hero .smoke-veil>span{background-position:14% 14%}
.faq-heading .eyebrow{margin-bottom:24px}
.faq-heading h2{font-size:clamp(42px,4.6vw,62px);line-height:1.08}.faq-list{max-width:860px;margin-inline:auto}
.faq-list details{border-top:1px solid var(--line-faint)}
.faq-list details:last-child{border-bottom:1px solid var(--line-faint)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:34px;list-style:none;cursor:pointer;padding-block:31px;min-height:100px;font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-.005em;color:var(--cream);transition:color .2s ease}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover,.faq-list details[open] summary{color:var(--gold-light)}
.faq-mark{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;color:var(--gold);transition:transform .4s cubic-bezier(.32,.72,0,1),color .2s ease}
.faq-mark .icon{width:19px;height:19px;stroke-width:1.9}
.faq-list summary:hover .faq-mark{color:var(--gold-light)}
.faq-list details[open] .faq-mark{transform:rotate(180deg);color:var(--gold-light)}
.faq-body{overflow:hidden}
.faq-body>p{font-size:15px;color:var(--muted);line-height:1.85;max-width:64ch;padding:0 58px 34px 0;margin:0}
.faq-foot{max-width:860px;margin:44px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
.faq-foot a{color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
/* Candle at night. The same circle as the hero, burned down: smaller, lower on the
   page, warmer and dimmer. The page opens in morning light and closes by candlelight. */
.download-section{text-align:center;padding-block:55px 110px;border-top:1px solid var(--line);background:radial-gradient(circle 420px at 50% 62%,rgba(232,171,74,.10),rgba(232,171,74,.03) 45%,transparent 72%),radial-gradient(ellipse at 50% 55%,#3a2360aa,transparent 70%),var(--surface-0)}.download-section h2{font-size:clamp(50px,6.1vw,84px);line-height:1.04;margin-top:25px}.download-section p:not(.eyebrow):not(.download-note){font-size:14px;color:var(--muted);line-height:1.85;margin-block:25px}.site-footer{border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;gap:35px;padding-block:35px}.footer-top>p{font-size:11px;color:var(--muted)}.footer-top nav{display:flex;gap:24px;margin-left:auto}.footer-top nav a{font-size:11px;text-decoration:none;padding-block:12px}.footer-top nav a:hover{color:var(--gold-light)}.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;padding-block:21px;color:var(--faint);font-size:10px}.mobile-download{display:none}
/* Current-product guides share the same design system. */
.article-main{padding-block:65px 85px}.breadcrumbs{font-size:11px;color:var(--muted);margin-bottom:33px;display:flex;gap:12px;flex-wrap:wrap}.breadcrumbs a{text-decoration:none}.article-heading{max-width:830px}.article-heading h1{font-size:clamp(39px,5.5vw,72px);margin:20px 0 25px}.article-heading>.section-description{max-width:650px;margin-bottom:20px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:90px;margin-top:45px}.article-body{font-size:16px;line-height:1.9;color:var(--text)}.article-body h2{color:var(--cream);font-size:34px;line-height:1.24;margin:44px 0 16px;letter-spacing:-.02em}.article-body p{margin-block:16px}.article-body a:not(.store-badge){color:var(--gold-light);text-underline-offset:4px}.article-body ul,.article-body ol{padding-left:23px}.article-body li{margin-block:10px}.article-body strong{color:var(--cream);font-weight:550}.article-note{padding:22px 25px;border-left:2px solid var(--gold);background:#25163b70;font-size:15px}.article-side{position:sticky;top:115px;align-self:start;border:1px solid var(--line-strong);border-radius:14px;padding:24px;background:var(--surface-3);box-shadow:var(--lift-1)}.article-side .device{--w:165px;margin:0 auto 23px}.article-side h2{font-size:29px}.article-side>p{font-size:12px;color:var(--muted);margin-block:15px}.article-side .download-button{font-size:11px;width:100%;padding:13px}.article-side .download-button>.icon:last-child{display:none}.article-meta{font-size:10px;color:var(--faint);margin-top:20px}.article-closing{margin-top:40px;border-top:1px solid var(--line);padding-top:30px}.article-closing>p{font-size:13px}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 45px;margin-top:40px}.guide-entry{padding:30px 0;border-top:1px solid var(--line);text-decoration:none;display:block}.guide-entry h2{font-size:29px;line-height:1.2;margin:13px 0}.guide-entry p{font-size:13px;color:var(--muted);max-width:440px;line-height:1.8}.guide-entry .quiet-link{margin-top:12px}.guide-entry:hover h2{color:var(--gold-light)}
@media(max-width:1050px){.container{width:calc(100% - 64px)}.reading-layout{gap:50px}.couples-section{gap:0 44px;grid-template-columns:1fr 1fr}.demo-track{margin-right:-26px}.faq-section{gap:45px}.article-layout{gap:45px}.footer-top{gap:25px}.footer-top nav{gap:18px}}
@media(max-width:800px){.container{width:calc(100% - 48px)}.header-inner{min-height:75px;gap:15px}.logo{font-size:23px;gap:8px}.logo img{width:30px;height:30px}.nav-download{font-size:12px;padding:0 16px;gap:8px}/* Below this the sticky bottom bar carries the same terms, so the header can drop them. */
.nav-offer{display:none}.hero{padding-top:38px;padding-bottom:72px}.hero h1{font-size:100px}.reading-layout{margin-top:26px}.section-space{padding-block:85px}/* No room to break the gutter at this width — the column is narrow enough that
   pushing it left only clips the caption against the hero's overflow. */
.reading-preview{margin-left:0;margin-top:22px}.couples-section{padding-block:80px 96px}.faq-section{padding-block:88px 74px}.reading-layout{gap:35px}.reading-copy h2{font-size:39px}/* The copy column is 296px here while the type is still 39px, so the authored
   break lands mid-phrase and orphans a word per line. Let it wrap on its own. */
.reading-copy h2 br{display:none}.reading-copy .eyebrow{font-size:8px}.section-description{font-size:13px}.product-screen{--w:222px}.reading-copy .reading-tabs{margin-top:20px}.reading-tabs button{font-size:12px;padding-block:14px}.couples-section{gap:0 34px;grid-template-columns:1fr 1fr}.demo-track{margin-right:-20px}.reflection-demo{padding:22px}.reflection-question{font-size:23px}.demo-heading{flex-wrap:wrap;gap:6px}.reflection-answer{padding:14px}.answer-label>span:last-child{font-size:5px}.reflection-answer>p{font-size:17px}.couples-explanation h3{font-size:31px}.couples-explanation li{gap:12px}.faq-heading{margin-bottom:44px}.faq-list summary{font-size:16px;padding-block:27px;min-height:88px;gap:24px}.faq-body>p{font-size:14px;padding-right:44px}.footer-top{flex-wrap:wrap;gap:20px}.footer-top>p{margin-left:auto}.footer-top nav{margin-left:0;width:100%}.article-layout{grid-template-columns:1fr;gap:40px}.article-side{position:static;max-width:420px}.article-side .device{display:none}}
@media(max-width:580px){html{scroll-padding-top:92px}.container{width:calc(100% - 40px)}.header-inner{min-height:72px}.logo{font-size:22px}.nav-download{min-height:40px;font-size:11.5px;padding:0 15px;gap:8px}.hero{padding-top:34px;padding-bottom:56px}.hero-content .eyebrow{font-size:7px;letter-spacing:.13em}.hero h1{font-size:min(16.4vw,74px);margin:22px 0 0}/* The authored break is set for a 540px line. At phone width it lands mid-sentence
   and strands the last word, so let the text wrap on its own here. */
.hero-description{font-size:13px;line-height:1.85;max-width:none;margin-top:20px}.hero-description br{display:none}.download-button{font-size:12px;min-height:53px;padding:13px 18px}.store-badge{--h:49px}.download-note{font-size:8px}.section-space{padding-block:65px}.eyebrow{font-size:8px}
.reading-layout{grid-template-columns:1fr;gap:37px;margin-top:34px}.reading-copy{order:0}.reading-preview{order:1;margin-left:0;margin-top:0}.couples-section{padding-block:58px 72px}
/* No pinning on a phone. A sticky card inside a single column just covers the
   text below it, and the extra track height is pure dead scrolling. */
.demo-track{min-height:0}.demo-track .reflection-demo{position:static;top:auto}.couples-explanation{position:static;top:auto;padding-top:0}.faq-section{padding-block:66px 56px}.reading-copy h2{font-size:40px}.reading-copy .section-description{font-size:13px}.reading-copy .eyebrow{margin-bottom:22px}.reading-tabs{grid-template-columns:1fr 1fr;gap:0 17px}.reading-tabs button{font-size:11px;gap:9px;min-height:54px}.reading-tabs button>span:first-child{font-size:8px}.reading-tabs button>span:last-child{font-size:14px}.reading-copy .quiet-link{font-size:11px}.product-screen{--w:234px}.preview-caption{font-size:10px}.couples-heading{margin-bottom:35px;text-align:left}.couples-heading>.eyebrow{justify-content:flex-start;margin-bottom:23px}.couples-heading h2{font-size:45px;line-height:1.05}.couples-heading>p:last-child{font-size:13px}.couples-heading>p:last-child br{display:none}.couples-section{grid-template-columns:1fr;gap:0}.couples-heading{grid-column:1;grid-row:1}.demo-track{grid-column:1;grid-row:2;margin-right:0}.couples-explanation{grid-column:1;grid-row:3;margin-top:38px}.reflection-demo{padding:23px}.demo-heading{flex-wrap:nowrap}.reflection-question{font-size:26px}.reflection-answer{padding:17px}.reflection-answer>p{font-size:19px}.answer-label>span:last-child{font-size:6px}.demo-note{font-size:8px}.couples-explanation h3{font-size:35px}.couples-explanation strong{font-size:14px}.couples-explanation li p{font-size:13px}.guides-cta{margin-top:50px;padding-top:38px}.guides-cta h2{font-size:32px}.guides-cta>p{font-size:13px}.faq-heading{text-align:left;margin-bottom:34px}.faq-heading h2{font-size:40px}.faq-list summary{font-size:15px;padding-block:22px;min-height:74px;gap:18px}.faq-mark{width:20px;height:20px}.faq-mark .icon{width:17px;height:17px}.faq-body>p{font-size:14px;padding-right:26px;padding-bottom:26px}.faq-foot{text-align:left;font-size:13px;margin-top:32px}.download-section{padding:30px 0 65px}.download-section h2{font-size:min(12.4vw,56px)}.download-section p:not(.eyebrow):not(.download-note){font-size:13px}.footer-top{padding-block:26px;gap:17px}.footer-top>p{font-size:9px}.footer-top nav{justify-content:space-between;gap:20px}.footer-top nav a{font-size:11px;min-height:44px;display:inline-flex;align-items:center}.footer-bottom{flex-direction:column;gap:7px;font-size:8px;padding-bottom:96px}.mobile-download:not([hidden]){position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(21,14,37,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid #9c80c640}.mobile-download>span{display:flex;flex-direction:column;gap:2px}.mobile-download strong{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--cream)}.mobile-download small{font-size:8px;color:var(--muted)}.article-main{padding-top:35px}.article-heading h1{font-size:42px}.article-layout{margin-top:30px}.article-body{font-size:15px}.article-body h2{font-size:31px}.article-note{padding:17px 20px;font-size:14px}.guide-grid{grid-template-columns:1fr;gap:0}.guide-entry h2{font-size:29px}}
@media(max-width:360px){.container{width:calc(100% - 32px)}.logo{font-size:20px;gap:7px}.logo img{width:26px;height:26px}.header-inner{gap:8px}.nav-download{font-size:11px;padding:0 13px;gap:7px}.store-badge{--h:45px}.reading-copy h2{font-size:35px}.couples-heading h2{font-size:41px}.reflection-demo{padding:18px}.reflection-question{font-size:24px}.answer-label{gap:6px;font-size:7px}.faq-heading h2{font-size:36px}.footer-top>p{width:100%;margin:0}}
/* Display emphasis is roman to italic, not colour — everywhere except one word.
   The argument for keeping colour off headlines still holds and still applies to
   every h2 on the page: gold on the headline AND the eyebrow AND the CTA AND the
   badge rim leaves nothing for gold to mean, so below it marks only what you can
   act on and the emphasis is carried by the letterforms instead.
   The exception is the hero's "Distraction." — the one brand moment the earlier
   note always allowed for, now taken. It is the app's own amber, and not by
   eye: sampling img/current/*.jpg for its dominant amber pixels returns
   #d08828-#e09828 across the Begin Reading button, the prayer glyph and the
   streak ring, which is --gold (#cf8c28) to within a couple of values. The ramp
   was already the app's; this just spends it in the one place it earns.
   A gradient rather than a flat fill, because at 127px a single value goes dead
   across the width of a long word — this lets the light run through it the way
   the app's own button does. */
h1 em,h2 em{font-style:italic;color:var(--cream)}
/* Guarded. A clipped background with no support renders the text invisible, and
   the fallback above — italic cream — is a perfectly good headline on its own. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero h1 em{
    background:linear-gradient(100deg,var(--gold-light),var(--gold-glow) 42%,var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    /* Insurance for older WebKit, where `color` alone does not always clear the
       fill under background-clip:text. Current engines do not need it — checked,
       the computed fill is already transparent without this line. */
    -webkit-text-fill-color:transparent;
  }
  /* The page's ::selection sets `color`, which a transparent text-fill wins
     against — so selecting this word would paint a gold highlight over invisible
     letters. Restore a real fill for the selected state only. */
  .hero h1 em::selection{-webkit-text-fill-color:var(--bg);color:var(--bg)}
}
/* One slow entrance, and then the page never animates itself again. Half a second
   of stillness, then a second to arrive — the only genuinely slow motion on any of
   the calm references, and it is a page entrance rather than a per-element reveal.
   `backwards` holds it at opacity 0 through the delay so nothing flashes first.
   Deliberate trade-off: this delays the largest contentful paint by up to 1.5s.
   Worth it here because the headline is the product's whole argument; it would not
   be worth it on a page whose job is a form. */
@media(prefers-reduced-motion:no-preference){
  .hero-content{animation:arrive 1s ease .5s backwards}
  @keyframes arrive{from{opacity:0}to{opacity:1}}
}
/* The rest of the page arrives the same way, one block at a time, as each reaches
   the viewport. Same 1s ease as the opener, with a short rise so it reads as
   settling rather than switching on.
   The hidden state is gated on `.js`, set by an inline script in the head before
   first paint — so a reader without scripting gets the page fully visible rather
   than a blank column, and there is no flash of content being hidden after load.
   The reduced-motion override is !important because the blanket rule below kills
   every transition; without it a reader who asks for less motion would be left
   looking at opacity:0 with nothing able to animate it back. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:801px){.hero{padding-top:42px}}