/* Home only (index.html). The six-beat story, the Focus reading view, the Lock
Screen, the trust strip and the closing. Tokens and atoms come from site.css.
Nothing here hides content: the page is complete at rest. */
/* ---------- shared bits reused from the earlier voice demo ---------- */
.voice-bars{display:flex;align-items:center;gap:3px;height:30px;flex-shrink:0;color:var(--sage)}
.voice-bars i{display:block;width:3px;background:currentColor;border-radius:99px;height:var(--h,12px);animation:voice-pulse 1.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes voice-pulse{to{transform:scaleY(.38);opacity:.6}}
.context-facts{display:flex;flex-wrap:wrap;gap:8px}
.context-facts>span{font:400 13px/1.4 var(--sans);color:var(--ink-2);padding:8px 11px;border:1px solid var(--line-2);border-radius:999px}
.context-facts strong{color:var(--ink);font-weight:500}
.voice-demo__workers{display:flex;flex-direction:column;gap:8px}
.voice-worker{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--ground)}
.voice-worker .dot{background:var(--sage)}
.voice-worker strong{display:block;font:500 14px/1.3 var(--sans);color:var(--ink)}
.voice-worker small{display:block;font:400 12px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.voice-worker>span:last-child{font:400 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
/* ---------- THE STORY ---------- */
.story{scroll-margin-top:72px;padding-block:64px 40px}
.story__head{max-width:720px;margin-bottom:28px}
.story__head h2{margin-top:12px}
.story__foot{font:400 12px/1.5 var(--sans);color:var(--muted);margin-top:18px}
.beats{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;counter-reset:none}
.beat{display:flex;flex-direction:column;gap:20px;min-width:0;padding:22px 20px;
background:var(--surface);border:1px solid var(--hair);border-radius:14px}
.beat__copy{min-width:0}
.beat__n{font:500 11px/1.3 var(--mono);letter-spacing:.08em;color:var(--sage)}
.beat__copy h3{font:400 28px/1.15 var(--serif);margin-top:8px}
.beat__copy>p:not([class]){font-size:16px;line-height:1.55;margin-top:8px;max-width:46ch}
.beat__art{min-width:0;margin-top:auto}
.beat__said{font:400 19px/1.45 var(--sans);color:var(--ink);margin-top:14px}
.beat .return{margin-top:0;background:var(--ground)}
.beat .option__name{white-space:normal;overflow:visible}
/* the exchange beside the Focus phone */
/* phone and tablet-portrait: the exchange sits directly under the (cropped) phone,
so the word that strikes the row and the row itself share one screen */
.said{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px;align-self:center;order:3}
.said__you{align-self:flex-end;max-width:92%;padding:10px 14px;background:var(--surface-2);border-radius:14px;
font:400 15px/1.45 var(--sans);color:rgba(250,242,224,.82)}
.said__donna{font:400 19px/1.45 var(--serif);color:var(--ink)}
.said__donna .eyebrow{font-size:10.5px;margin-bottom:6px}
/* ---------- FOCUS — the app's section-by-section reading view ----------
Geometry from the iPhone app: 20pt inset + a 26pt gutter, the rail at 9.5pt
inside it; dots 8pt (been filled, ahead a 1.5pt ring), HERE 12pt sage with a
2pt sage rail through its section; ink ladder here 1 / been .71 / ahead .46. */
.beat--focus .beat__art{display:flex;justify-content:center;margin-top:0}
.focus-phone{--phone-scale:.76}
@media (max-width:359px){.hero .phone{--phone-scale:.7}.focus-phone{--phone-scale:.6}}
.fx{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.fx__head{flex:0 0 auto;padding:16px 20px 14px}
.fx__col{position:relative;flex:1 1 auto;min-height:0;padding:0 24px 0 46px;overflow:hidden}
.fx__col::before{content:"";position:absolute;left:29px;top:44px;bottom:0;width:1px;background:var(--hair)}
.fx__col::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
background:linear-gradient(180deg,rgba(10,9,7,0),var(--ground))}
.fx__meta{font:400 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fx__meta b{font-weight:400;color:var(--sage)}
.fx__sec{position:relative;padding-top:24px}
.fx__meta+.fx__sec{padding-top:14px}
.fx__sec::before{content:"";position:absolute;left:-20.5px;top:32px;width:8px;height:8px;border-radius:50%;
box-shadow:0 0 0 4px var(--ground)}
.fx__meta+.fx__sec::before{top:22px}
.fx__sec--been::before{background:#6b675f}
.fx__sec--ahead::before{background:var(--ground);border:1.5px solid rgba(250,242,224,.18)}
.fx__sec--here::before{left:-22.5px;top:30px;width:12px;height:12px;background:var(--sage);
animation:breathe 3.4s ease-in-out infinite}
.fx__sec--here::after{content:"";position:absolute;left:-17.5px;top:24px;bottom:-12px;width:2px;background:var(--sage);z-index:-1}
.fx__col{isolation:isolate}
.fx__sec--been>*{opacity:.71}
.fx__sec--ahead>*{opacity:.46}
.fx__sec--been>.fx__here,.fx__sec--ahead>.fx__here{opacity:0}
.fx__title{font:400 24px/1.25 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.fx__h{font:400 19px/23px var(--serif);letter-spacing:-.005em;color:var(--ink)}
.fx__p{font:400 16px/25px var(--sans);color:rgba(250,242,224,.82);margin-top:12px}
.fx__here{font:400 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sage);margin-top:9px}
.fx__table{margin-top:14px}
.fx__th,.fx__tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;column-gap:10px}
.fx__th{font:500 10.5px/15px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(250,242,224,.38);padding-bottom:7px}
.fx__tr{font:400 14px/20px var(--sans);color:rgba(250,242,224,.82);padding:8px 0;border-top:1px solid var(--hair)}
.fx__tr--cut{color:rgba(250,242,224,.38);text-decoration:line-through}
.fx__edit{font:400 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sage);
border-top:1px solid var(--hair);padding-top:10px}
.focus-shot{display:block;width:100%;max-width:340px;height:auto;border-radius:44px;border:1px solid var(--hair-2)}
/* ---------- TRUST STRIP + CLOSING ---------- */
.trust{padding-block:8px 0}
.trust__links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:10px}
.closing{padding-block:40px 24px}
.closing .pill{white-space:nowrap}
@media (max-width:359px){.closing .cta{padding-inline:18px}}
/* ---------- HERO, by width ----------
under 700: one column, the phone centred under the copy.
700-900: two columns with a smaller phone. 901+: site.css's row. */
@media (max-width:699px){.hero .phone{align-self:center}}
@media (min-width:700px) and (max-width:900px){
.hero-inner{flex-direction:row;align-items:center;gap:32px;padding-block:52px 60px}
.hero-copy{flex:1 1 0;min-width:0}
.hero-copy .display{font-size:clamp(50px,7.2vw,64px)}
.hero-copy .lead{font-size:18px}
.hero-cta{flex-wrap:wrap;gap:6px 14px}
.hero .phone{--phone-scale:.62}
}
@media (min-width:901px) and (max-width:1199px){
.hero-copy{flex:1 1 0;min-width:0}
.hero-copy .display{font-size:clamp(70px,8.2vw,98px)}
}
/* the Focus phone below 761: cropped under "The rooms", no composer */
@media (max-width:760px){
.focus-phone{height:calc(var(--fx-crop,690px) * var(--phone-scale));border-bottom:0;border-radius:44px 44px 0 0;
-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.focus-phone .phone__inner{height:var(--fx-crop,690px)}
.focus-phone .phone__composer,.focus-phone .phone__safe{display:none}
}
@media (min-width:481px){
.beat{padding:26px 26px}
}
@media (min-width:761px){
.beats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.beat--wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:center}
.beat--focus{padding-block:28px;grid-template-rows:1fr 1fr}
.beat--focus .beat__copy{grid-area:1 / 1;align-self:end}
.beat--focus .said{grid-area:2 / 1;align-self:start;justify-self:start;order:0}
.beat--focus .beat__art{grid-area:1 / 2 / 3 / 3}
.focus-phone{--phone-scale:.68}
.beat--wide .beat__art{margin-top:0}
}
@media (min-width:901px){
.story{padding-block:64px 32px}
.story__head{margin-bottom:36px}
.beat{padding:26px 32px}
.beat--wide{padding-inline:48px}
.beat__copy h3{font-size:32px}
.beat--wide .beat__copy>p:not([class]){font-size:18px}
.trust{padding-block:8px 0}
.closing{padding-block:36px 16px}
}
@media (prefers-reduced-motion:reduce){.voice-bars i{animation:none}}