/* Emivy Studio + OpVitae — one stylesheet.
   Tokens come from the app (ui-spec §11): ink and greys, one navy accent used only on things you can
   tap, no gradients or shadows as decoration, sentence case, 8-point spacing. */

@font-face{font-family:"Plex Serif";src:url(/assets/fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(/assets/fonts/ibm-plex-serif-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --paper:#F4F5F7;
  --surface:#FFFFFF;
  --ink:#1C1C1E;
  --ink-2:#4A4F59;
  --ink-3:#656A75;
  --hair:rgba(28,28,30,.14);
  --mark:#E4E7EC;
  --accent:#2152A6;       /* app accent, light */
  --accent-press:#1A4287;
  --button:#2152A6;
  --button-press:#1A4287;
  --on-accent:#FFFFFF;
  --band:#000000;         /* the app icon's black */
  --band-ink:#F2F2F7;
  --band-ink-2:#B9BDC5;
  --band-hair:rgba(255,255,255,.16);
  --band-link:#5B85D2;    /* app linkTint, dark */

  --serif:"Plex Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;
  --gap:clamp(72px,10vw,128px);       /* between groups: at least 4x the gap inside one */
  --gutter:clamp(16px,5vw,40px);
}
/* Dark: links take the app's dark link tint; filled buttons the darker #4374CC, where white
   labels reach 4.6:1 (ui-spec §11). */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#000000;--surface:#1C1C1E;--ink:#F2F2F7;--ink-2:#B9BDC5;--ink-3:#9097A3;
    --hair:rgba(255,255,255,.16);--mark:#2C2D31;
    --accent:#5B85D2;--accent-press:#6B91D7;
    --button:#4374CC;--button-press:#3A68BA;
    --band:#1C1C1E;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s3)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--s2);top:-80px;min-height:44px;display:inline-flex;align-items:center;background:var(--surface);color:var(--ink);padding:var(--s1) var(--s2);border-radius:8px;z-index:10}
.skip:focus{top:var(--s2)}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:680px}

h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,68px);line-height:1.06}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15}
h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25;margin:0}
p{margin:0}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-2);max-width:34em}
.small{font-size:14px;line-height:1.5;color:var(--ink-3)}
.stack>*+*{margin-top:var(--s2)}
.stack-lg>*+*{margin-top:var(--s3)}
.section{padding-bottom:var(--gap)}
.section-head{margin-bottom:var(--s6);max-width:20em}
.section-head+.lede{margin-top:calc(-1 * var(--s4));margin-bottom:var(--s6)}

/* header + footer */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.005em;min-height:44px}
.brand img{width:32px;height:32px}
.brand.studio{font-family:var(--serif);font-weight:500;font-size:19px}
.brand.studio span{font-family:var(--sans);font-weight:400;color:var(--ink-3);margin-left:.35em}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--ink);text-decoration:underline}
.nav a[aria-current="page"]{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);border-radius:12px;background:var(--button);color:var(--on-accent);font-weight:600;text-decoration:none;border:0}
.btn:hover{background:var(--button-press);text-decoration:none}
.btn.small-btn{min-height:44px;padding:0 var(--s2);font-size:16px}
.nav a.btn{color:var(--on-accent);white-space:nowrap}
.nav a.btn:hover{color:var(--on-accent);text-decoration:none}
.foot{border-top:1px solid var(--hair);padding-block:var(--s6);color:var(--ink-3);font-size:14px;line-height:1.6}
.foot .cols{display:grid;gap:var(--s4);grid-template-columns:1fr}
.foot a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.foot .fine{max-width:46em}
@media (min-width:760px){.foot .cols{grid-template-columns:1.2fr 1fr}}
@media (max-width:760px){.nav .hide-sm{display:none}}
@media (max-width:480px){.nav{gap:var(--s2)}.top{gap:var(--s2)}}

/* hero */
.hero{display:grid;gap:var(--s8);grid-template-columns:minmax(0,1fr);padding-top:clamp(40px,7vw,88px);padding-bottom:var(--gap);align-items:center}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(48px,6vw,96px)}}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4)}
.hero .actions a:not(.btn){min-height:44px;display:inline-flex;align-items:center}
.hero .note{margin-top:var(--s2)}
.hero .phone{justify-self:center}

/* a screenshot in a plain device outline: no shadow, no tilt */
.phone{margin:0;width:100%;max-width:300px}
.phone img{width:100%;height:auto;border-radius:clamp(28px,4vw,40px);border:1px solid var(--hair);background:var(--surface)}
.phone figcaption{margin-top:var(--s2);text-align:center}

/* the sticker becoming a record */
.trace{margin:0;max-width:440px}
.sticker,.record{background:var(--surface);border:1px solid var(--hair)}
.sticker{border-radius:6px;padding:var(--s3);font:400 14px/1.9 var(--mono);letter-spacing:.04em;color:var(--ink)}
.sticker p{margin:0;width:max-content;max-width:100%;background:linear-gradient(var(--mark),var(--mark)) no-repeat left center/100% 78%}
.sticker p+p{margin-top:2px}
.read{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);color:var(--ink-3);font-size:14px}
.read::before{content:"";width:1px;height:32px;background:var(--ink-3);opacity:.5}
.record{border-radius:16px;padding:var(--s1) var(--s3) var(--s3)}
.record .grp{margin:var(--s3) 0 var(--s1);font-size:14px;color:var(--ink-3)}
.record dl{margin:0}
.record .row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s2);padding:10px 0;border-top:1px solid var(--hair);font-size:16px}
.record .row:first-of-type{border-top:0}
.record dt{color:var(--ink-3)}
.record dd{margin:0;font-variant-numeric:tabular-nums}
.record .confirm{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);margin-top:var(--s3);border:1px solid var(--ink);border-radius:12px;font-weight:600;font-size:16px}
.trace figcaption{margin-top:var(--s2)}
/* It plays once it is on screen (the page's script adds .play); without the script it simply shows. */
@media (prefers-reduced-motion:no-preference){
  .trace.waiting .sticker p{background-size:0 78%}
  .trace.waiting .record .row,.trace.waiting .record .confirm{opacity:0}
  .trace.play .sticker p{animation:sweep .55s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(var(--i)*.32s + .2s)}
  .trace.play .record .row,.trace.play .record .confirm{animation:arrive .5s ease both;animation-delay:calc(var(--i)*.16s + 1.7s)}
  @keyframes sweep{from{background-size:0 78%}to{background-size:100% 78%}}
  @keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}
.how{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.how{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8)}}

.steps{display:grid;gap:var(--s4);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{border-top:1px solid var(--ink);padding-top:var(--s2);counter-increment:s}
.steps li::before{content:counter(s);display:block;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:var(--s1)}
.steps h3{margin-bottom:var(--s1)}
.steps p{color:var(--ink-2)}

/* feature rows: words beside the screen they describe, alternating sides on wide screens */
.feature{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);align-items:center;padding-block:var(--s8);border-top:1px solid var(--hair)}
.feature:last-child{border-bottom:1px solid var(--hair)}
.feature .phone{justify-self:center;max-width:280px}
.feature h3{font-size:clamp(26px,3vw,32px);font-weight:400;line-height:1.2;max-width:16em}
.feature .copy>*+*{margin-top:var(--s2)}
.feature .copy p{color:var(--ink-2);max-width:32em}
.feature .points{margin:var(--s3) 0 0;padding:0;list-style:none}
.feature .points li{padding-block:var(--s1);border-top:1px solid var(--hair);color:var(--ink-2)}
@media (min-width:860px){
  .feature{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s8)}
  .feature.flip .copy{order:2}
}

/* ledger rows: used for exports, FAQ, principles */
.ledger{margin:0;padding:0;list-style:none}
.ledger>div,.ledger>li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1) var(--s4);padding-block:var(--s3);border-top:1px solid var(--hair)}
.ledger>div:last-child,.ledger>li:last-child{border-bottom:1px solid var(--hair)}
.ledger dt,.ledger .term{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.3;margin:0}
.ledger dd,.ledger .desc{margin:0;color:var(--ink-2);max-width:36em}
.ledger dd+dd{margin-top:var(--s1)}
@media (min-width:760px){.ledger>div,.ledger>li{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

/* the dark band echoes the app icon */
.band{background:var(--band);color:var(--band-ink);padding-block:var(--gap);margin-bottom:var(--gap)}
.band h2{color:var(--band-ink)}
.band .lede,.band .desc,.band p{color:var(--band-ink-2)}
.band a{color:var(--band-link)}
.band .ledger>div,.band .ledger>li{border-color:var(--band-hair)}
.band .ledger>li:last-child{border-color:var(--band-hair)}
.band .term{color:var(--band-ink)}
.band .ledger>li{grid-template-columns:minmax(0,1fr)}
.split{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr)}
.split>div>*+*{margin-top:var(--s3)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8)}}

.maxims{margin:0;padding:0;list-style:none}
.maxims li{font-family:var(--serif);font-size:clamp(24px,3.4vw,36px);line-height:1.2;letter-spacing:-.01em;padding-block:var(--s3);border-top:1px solid var(--hair);text-wrap:balance}
.maxims li:last-child{border-bottom:1px solid var(--hair)}
.maxims span{color:var(--ink-3)}

/* how to start: three stages, one rule each */
.plan{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.plan li{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:var(--s3)}
.plan .when{font-size:14px;color:var(--ink-3)}
.plan h3{margin-block:var(--s1)}
.plan p{color:var(--ink-2)}
@media (min-width:820px){.plan{grid-template-columns:repeat(3,minmax(0,1fr))}}
.after{margin-top:var(--s4);max-width:44em;color:var(--ink-2)}

/* product row on the studio page */
.product{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s3);align-items:start;padding-block:var(--s3);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.product img{width:72px;height:72px}
.product h3{font-size:26px}
.product .desc{color:var(--ink-2);margin-top:4px}
.product .go{display:inline-block;margin-top:var(--s1);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.product:hover .go{text-decoration-thickness:2px}

.cta{display:grid;gap:var(--s3);justify-items:start;background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,5vw,56px)}
.legal h1{font-size:clamp(34px,5vw,52px)}
.legal h2{font-size:26px;margin-top:var(--s6);margin-bottom:var(--s2)}
.legal ul{padding-left:1.25em;margin:var(--s2) 0 0}
.legal li+li{margin-top:var(--s1)}
.legal p,.legal li{color:var(--ink-2);max-width:40em}
.legal p+p,.legal p+ul,.legal ul+p{margin-top:var(--s2)}
.notice{border:1px solid var(--hair);border-radius:12px;padding:var(--s2) var(--s3);background:var(--surface);color:var(--ink-2)}