/* Sacred Feed — sacredfeed.com, v2 (2026-10-02)
   Product-page layout: paper background, big serif headlines, real app recordings in phone frames.
   Rule of the layout: text never sits on top of a picture or a video. */

@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/InstrumentSerif-Medium.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:104%;ascent-override:92%;descent-override:23%;line-gap-override:0%}

:root{
  --paper:#F6F3EC;--surface:#FFFFFF;--sunken:#EDE8DE;--line:#E3DED2;
  --ink:#15140F;--ink2:#655F54;--ink3:#A49D8F;
  --accent:#C4795A;--accent-soft:#F3E3DA;--accent-text:#9A5639;
  --night:#15140F;--night-2:#211F19;--night-line:#36332B;--night-ink:#F3EFE4;--night-ink2:#A8A194;--night-accent:#E09A79;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Inter","Inter Fallback",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(96px,13vw,176px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.55;letter-spacing:-.011em;font-feature-settings:"cv11","ss01","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--night-ink)}
::selection{background:var(--accent-soft);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:500;letter-spacing:-.022em;line-height:.98;text-wrap:balance}
h1.display{font-size:clamp(56px,8.4vw,124px)}
.h2{font-size:clamp(44px,6.4vw,88px)}
.eyebrow{font-size:13px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:18px}
.dark .eyebrow{color:var(--night-accent)}
.body{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink2);max-width:34em;margin-top:24px;text-wrap:pretty}
.dark .body{color:var(--night-ink2)}
.lede{font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--ink2);max-width:31em;margin:28px auto 0;text-wrap:pretty}
.fine{font-size:14px;color:var(--ink2);margin-top:18px;text-wrap:balance}
.center-head{text-align:center}
.center-head .body{margin-left:auto;margin-right:auto}
.foot-note{font-size:15px;color:var(--ink2);text-align:center;margin-top:40px;text-wrap:pretty}
.foot-note a,.body a,.faq a,.sources a,.stat-label a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dark .foot-note{color:var(--night-ink2)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(246,243,236,.9);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.site-header.scrolled{border-bottom-color:var(--line)}
.bar{max-width:1200px;margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;font-size:16px;letter-spacing:-.015em;white-space:nowrap}
.logo img{width:28px;height:28px;border-radius:7px}
.nav{display:flex;gap:30px;font-size:14.5px}
.nav a{text-decoration:none;color:var(--ink2);transition:color .2s}
.nav a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.pill:hover{background:#2B2924}
.pill:active{transform:scale(.97)}
@media (max-width:820px){.nav{display:none}}

/* ---------- buttons ---------- */
.cta{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:36px}
.badge{display:inline-block;line-height:0;border-radius:10px}
.badge img{height:50px;width:auto}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;text-decoration:none;color:var(--ink)}
.text-link svg{width:26px;height:26px}
.text-link svg circle{fill:none;stroke:currentColor;stroke-width:1.5}
.text-link svg path{fill:currentColor}
.text-link:hover span,.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn:active{transform:scale(.97)}
.btn.light{background:var(--night-ink);color:var(--ink)}
.btn.light:hover{background:#fff}

/* ---------- phone frame ---------- */
/* Screen recordings are 1206×2622. Bezel is 3.2% of the width; corner radii are written as % of width / % of height. */
.phone{position:relative;padding:3.2%;border-radius:15.8% / 7.5%;background:linear-gradient(150deg,#3b3934 0%,#141412 46%,#060606 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 50px 90px -40px rgba(70,45,25,.42),0 18px 36px -18px rgba(70,45,25,.28)}
.phone>img,.phone>video{width:100%;height:auto;aspect-ratio:1206/2622;object-fit:cover;border-radius:13.5% / 6.2%;background:var(--paper)}
.dark .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 50px 100px -40px rgba(0,0,0,.7)}
.device{width:100%;max-width:360px;margin:0 auto}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px,6vw,80px);overflow:hidden}
.hero-copy{text-align:center;max-width:1000px;margin:0 auto;padding:0 var(--pad)}
.hero-stage{position:relative;margin-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(72px,9vw,120px)}
.hero-stage::before{content:"";position:absolute;left:50%;top:6%;width:min(1100px,140vw);aspect-ratio:1.4;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(232,196,170,.55),rgba(246,243,236,0));pointer-events:none}
.trio{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(20px,3.4vw,56px)}
.trio .device{flex:none;margin:0;will-change:transform}
.trio .center{width:clamp(240px,25vw,350px);max-width:none}
.trio .side{width:clamp(200px,20vw,280px);max-width:none;margin-top:clamp(40px,6vw,90px)}
@media (max-width:700px){
  .trio .center{width:62vw}
  .trio .side{width:50vw;margin-top:18vw}
  .trio{gap:5vw}
}

/* Soft background: misty olive hills along the bottom, plain paper behind the text. The image is tinted to the paper colour and fades into it at the top. */
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paper) no-repeat center bottom/max(100%,1100px) auto;background-image:url(/assets/img/hero/hills-1400.webp);background-image:image-set(url(/assets/img/hero/hills-1400.webp) 1x,url(/assets/img/hero/hills-2400.webp) 2x)}
.hero-bg ~ .hero-stage::before{opacity:.45}

/* hero entrance (CSS only; skipped for reduced motion) */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes phone-in{from{opacity:0;transform:translateY(90px) scale(.96)}to{opacity:1;transform:none}}
.js .rise{animation:rise 1s var(--ease) both}
.js .hero-copy .rise:nth-child(2){animation-delay:.08s}
.js .hero-copy .rise:nth-child(3){animation-delay:.16s}
.js .hero-copy .rise:nth-child(4){animation-delay:.24s}
.js .hero-copy .rise:nth-child(5){animation-delay:.32s}
.js .trio .phone{animation:phone-in 1.4s var(--ease) both}
.js .trio .center .phone{animation-delay:.25s}
.js .trio .side .phone{animation-delay:.45s}

/* ---------- dark statement ---------- */
.dark{background:var(--night);color:var(--night-ink)}
.why{padding:var(--sec) 0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);max-width:1040px;margin:0 auto}
.stat-num{font-family:var(--serif);font-weight:500;font-size:clamp(76px,11vw,168px);line-height:.95;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-label{font-size:clamp(17px,1.5vw,19px);color:var(--night-ink2);margin-top:20px;max-width:22em}
.stat-label sup{font-size:.7em;margin-left:2px}
.question{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.6vw,96px);line-height:1.02;letter-spacing:-.022em;text-align:center;max-width:14em;margin:clamp(96px,12vw,160px) auto 0;text-wrap:balance}
.question .w{transition:opacity .5s ease,color .5s ease}
.js .question[data-words] .w{opacity:.2}
.js .question[data-words] .w.on{opacity:1}
@media (max-width:700px){.stats{grid-template-columns:1fr;gap:56px}}

/* ---------- feature sections ---------- */
.feature{padding:var(--sec) 0}
.feature + .feature{padding-top:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(48px,7vw,112px)}
.split.reverse .split-media{order:2}
.split-media .device{max-width:340px}
.split-copy .body{max-width:28em}
.ticks{display:grid;gap:14px;margin-top:32px;font-size:17px}
.ticks li{position:relative;padding-left:34px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.4' fill='none' stroke='%239A5639' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:48px}
  .split-copy{order:1}
  .split-media,.split.reverse .split-media{order:2}
  .split-media .device{max-width:300px}
}

/* deep study explainer */
.study-stage{max-width:1520px;margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--pad)}
.study-video{width:100%;height:auto;aspect-ratio:16/9;background:var(--paper);
  /* the film is rendered on the same paper colour; feathered edges hide any colour-management difference */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.study-mobile{display:none}
@media (max-width:760px){
  .study-stage{display:none}
  .study-mobile{display:block;margin-top:48px}
  .study-mobile .device{max-width:290px}
}
/* one caption at a time, in a single grid cell, so nothing ever stacks visibly */
.steps{list-style:none;padding:0;margin:32px auto 0;display:grid;max-width:22em;text-align:center}
.steps li{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--ease)}
.steps li:first-child{opacity:1;transform:none}
.steps.live li{opacity:0;transform:translateY(8px)}
.steps.live li.on{opacity:1;transform:none}
.steps strong{display:block;font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.05;letter-spacing:-.018em}
.steps span{display:block;font-size:16px;color:var(--ink2);margin-top:8px}

/* rails: grid on desktop, swipeable row on phones */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:1200px;margin:clamp(48px,6vw,80px) auto 0;padding:0 var(--pad)}
.rail:focus-visible{outline-offset:8px}
.hour .device{max-width:280px}
.hour figcaption{text-align:center;margin-top:26px}
.hour .t{display:block;font-family:var(--serif);font-weight:500;font-size:36px;line-height:1;letter-spacing:-.02em}
.hour .l{display:block;font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-top:8px}
@media (max-width:900px){
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:none;scroll-snap-align:start}
  .hour{width:min(58vw,260px)}
}

/* keep and share cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(48px,6vw,72px)}
.card{background:var(--surface);border-radius:32px;padding:clamp(32px,4vw,52px) clamp(24px,4vw,52px);display:flex;flex-direction:column;align-items:center;text-align:center}
.card h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
.card p{color:var(--ink2);margin-top:12px;max-width:24em;text-wrap:pretty}
.card .device{max-width:280px;margin-top:40px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* translations */
.versions{margin-top:32px;border-top:1px solid var(--line);max-width:28em}
.versions div{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.versions dt{font-weight:700;font-size:14px;letter-spacing:.04em;width:52px;flex:none}
.versions dd{color:var(--ink2)}

/* film */
.film{padding:var(--sec) 0}
.film-frame{margin-top:clamp(36px,4vw,52px);max-width:1120px}
.film-video{width:100%;height:auto;aspect-ratio:16/9;border-radius:clamp(14px,2vw,24px);background:#000;box-shadow:0 60px 120px -50px rgba(0,0,0,.8);cursor:pointer}
.film-controls{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.film-meta{font-size:14px;color:var(--night-ink2)}

/* privacy */
.trio-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,72px)}
.mini{background:var(--surface);border-radius:28px;padding:36px 32px 40px}
.mini svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mini svg circle[r="1.6"]{fill:var(--ink)}
.mini h3{font-size:20px;font-weight:650;letter-spacing:-.018em;margin-top:28px}
.mini p{color:var(--ink2);margin-top:8px}
@media (max-width:860px){.trio-cards{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(17px,1.6vw,20px);font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%2315140F' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/28px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 48px 26px 0;color:var(--ink2);font-size:17px;line-height:1.6}

/* get */
.get{padding:var(--sec) 0;background:linear-gradient(180deg,var(--paper) 0%,#F1E6D8 100%)}
.get-icon{width:120px;height:120px;border-radius:27px;margin:0 auto 40px;box-shadow:0 30px 60px -24px rgba(70,45,25,.45)}
.get .cta{margin-top:40px}
.sources{padding-top:28px;padding-bottom:28px;font-size:13px;color:var(--ink2)}
.sources sup{margin-right:4px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:64px 0 40px;font-size:15px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:16px}
.foot ul{display:grid;gap:10px}
.foot a{text-decoration:none}
.foot ul a:hover{text-decoration:underline;text-underline-offset:3px}
.about{color:var(--ink2);margin-top:16px;max-width:22em}
.legal-line{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:13px;color:var(--ink2)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- scroll reveal ---------- */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- legal and help pages ---------- */
.page{padding:clamp(56px,8vw,96px) 0 clamp(96px,12vw,140px)}
.prose{max-width:760px;margin:0 auto}
.prose h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6vw,68px);line-height:1;letter-spacing:-.022em;margin-bottom:16px;text-wrap:balance}
.prose .meta{font-size:14px;color:var(--ink2);margin-bottom:40px;line-height:1.5}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.2vw,38px);line-height:1.08;letter-spacing:-.018em;margin:56px 0 14px;text-wrap:balance}
.prose h3{font-size:18px;font-weight:650;letter-spacing:-.015em;margin:30px 0 10px}
.prose p{margin:0 0 14px;line-height:1.65;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;display:grid;gap:8px;line-height:1.55}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink3)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{font-weight:650}
.prose .summary-box{background:var(--surface);border-radius:24px;padding:24px 28px;margin:0 0 32px}
.prose .summary-box ul{margin:0}
.prose .note{font-size:15px;color:var(--ink2);background:var(--sunken);border-radius:16px;padding:14px 18px;margin:0 0 18px}
.prose table,.prose .table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;margin:0 0 24px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.prose th{font-weight:650;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.prose details{border-top:1px solid var(--line)}
.prose details:last-of-type{border-bottom:1px solid var(--line)}
.prose summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";font-weight:400;color:var(--ink2);flex:none}
.prose details[open] summary::after{content:"–"}
.prose details>p,.prose details>ul,.prose details>ol{padding-bottom:16px;color:var(--ink2)}
.prose .btn{text-decoration:none;margin-top:12px}
.form{display:grid;gap:16px;max-width:36em;margin:8px 0 40px}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .js .question[data-words] .w{opacity:1}
}

@media print{
  .site-header,.site-footer,.skip{display:none}
  body{background:#fff;color:#000}
  .page{padding:0}
  .prose a::after{content:" (" attr(href) ")";font-size:90%;color:#555}
}

/* Email address drawn as an image (letter outlines, no text) so scrapers cannot read it.
   The image is sized in em and sits on the text baseline, like the words around it. */
a.email{text-decoration:none;white-space:nowrap}
a.email img{display:inline-block;width:auto;height:1.21em;vertical-align:-.2412em;border-bottom:1px solid rgba(21,20,15,.3);transition:border-color .2s}
a.email:hover img{border-bottom-color:var(--ink)}