/* Personas site. Tokens are lib/theme.ts (lightColors and darkColors), fonts are
   the app's own (Spectral for the human layer, Hanken Grotesk for the rest,
   Spline Sans Mono for captions). The parent owns padding and gap.
   url() below resolves against this file, so /es/ pages share it unchanged. */

:root{
  --paper:#F4F5F3;--surface:#FBFBFA;--raised:#FFFFFF;--ink:#20211E;--ink2:#61655F;--ink3:#686D66;
  --line:#E4E5E1;--pine:#2E5A4E;--pineSoft:#E7EEEA;--honey:#DFA13A;--honeyInk:#9A6614;--rust:#B4483C;--onAccent:#FBFBFA;
  --screen:#F4F5F3;--bezel:#1B1D1B;
  --shadow:0 1px 2px rgba(32,33,30,.04),0 12px 32px -12px rgba(32,33,30,.14);
  --serif:"Spectral",Georgia,serif;--sans:"Hanken Grotesk",-apple-system,system-ui,sans-serif;--mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  --spring:cubic-bezier(.2,1.25,.35,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --header:64px;
  color-scheme:light dark;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121 24%,1.149 26.3%,1.159,1.163 29.5%,1.154 32%,1.129 34.9%,1.051 42.6%,1.017 46.5%,.991 50.3%,.977 53.9%,.975 57.6%,.997 72.7%,1.003 80%,1)}
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F1311;--surface:#141A17;--raised:#1B221E;--ink:#F1F3EE;--ink2:#A3A9A2;--ink3:#8D948D;
    --line:#29302C;--pine:#57A189;--pineSoft:#182A25;--honey:#E2AB52;--honeyInk:#E2AB52;--rust:#D4695B;--onAccent:#0F1311;--bezel:#2E3430;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--honey);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;display:inline-flex;align-items:center;gap:8px;background:var(--pine);color:var(--onAccent);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* One icon, one grid, one stroke. */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.i.sm{width:16px;height:16px}.i.lg{width:24px;height:24px}
.well{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--pineSoft);color:var(--pine);flex:none}
.well.honey{color:var(--honeyInk)}.well.rust{color:var(--rust)}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}

/* Header: sticky, condenses once the page moves. */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:55;pointer-events:none;background:var(--honey);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{transform:scaleX(0);animation:grow linear both;animation-timeline:scroll(root)}
  }
}
@keyframes grow{to{transform:scaleX(1)}}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.site-header .wrap{display:flex;align-items:center;gap:12px;height:76px;transition:height .24s var(--spring)}
.site-header.condensed{border-bottom-color:var(--line)}
.site-header.condensed .wrap{height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--pine);text-decoration:none;font:600 24px/1 var(--serif);letter-spacing:-.01em}
.brand .mark{width:26px;height:30px;background:currentColor;-webkit-mask:url(img/symbol.png) center/contain no-repeat;mask:url(img/symbol.png) center/contain no-repeat;transition:transform .24s var(--spring)}
.condensed .brand .mark{transform:scale(.86)}
.nav{display:none;margin-left:auto;gap:2px;align-items:center}
.nav a,.lang,.menu summary{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;color:var(--ink2);text-decoration:none;font-weight:500;font-size:15px;min-height:42px}
.nav a:hover,.lang:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current=page]{color:var(--pine)}
.lang{border:1px solid var(--line);color:var(--ink)}
.head-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.head-end .btn{display:none}
@media (min-width:600px){.head-end .btn{display:inline-flex}}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu .panel{position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 32px));background:var(--raised);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:8px;display:grid;gap:2px}
.menu .panel a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--ink);text-decoration:none;font-weight:500}
.menu .panel a:hover{background:var(--surface)}
.menu .panel a .i{color:var(--pine)}
@media (prefers-reduced-motion:no-preference){.menu[open] .panel{animation:pop .22s var(--spring)}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@media (min-width:1080px){.nav{display:flex}.menu{display:none}.head-end{margin-left:8px}}

/* Buttons. A real primary action is a solid fill; the quiet one is neutral. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 22px;border-radius:999px;font:600 16px/1.2 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .24s var(--spring),background-color .2s}
.btn.primary{background:var(--pine);color:var(--onAccent)}
.btn.quiet{background:var(--raised);color:var(--ink);border-color:var(--line)}
.btn.sm{min-height:42px;padding:8px 16px;font-size:15px}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,8.2vw,80px);line-height:1.04}
h2{font-size:clamp(32px,5vw,50px);line-height:1.1}
h3{font-size:21px;line-height:1.3}
p{margin:0}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--ink2);max-width:640px;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.kicker .well{width:36px;height:36px;border-radius:12px}

/* Sections */
section{padding:72px 0}
@media (min-width:900px){section{padding:112px 0}}
.stack{display:grid;gap:20px;align-content:start}
.stack.tight{gap:12px}
.stack.loose{gap:44px}
.split{display:grid;gap:44px;align-items:center}
.split>*{min-width:0}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:72px}.split.flip>:first-child{order:2}}
.alt{background:var(--surface);border-block:1px solid var(--line)}

/* Hero */
.hero{padding:36px 0 64px}
@media (min-width:900px){.hero{padding:64px 0 104px}}
.hero .note{display:flex;gap:10px;align-items:flex-start;color:var(--ink2);font-size:15px;max-width:520px}
.hero .note .i{color:var(--honeyInk);margin-top:2px}
.hero-visual{position:relative;display:flex;justify-content:center;isolation:isolate}
.hero-visual .phone{width:min(290px,74vw)}
.hero-visual .phone.back{position:absolute;left:50%;top:6%;width:min(240px,58vw);transform:translateX(-4%) rotate(5deg);z-index:-1;display:none}
@media (min-width:560px){.hero-visual{padding-right:140px}.hero-visual .phone.back{display:block}}

/* Phone frame */
.phone{position:relative;border-radius:46px;background:var(--bezel);padding:10px;box-shadow:0 40px 80px -30px rgba(20,30,25,.45)}
.phone .screen{position:relative;border-radius:37px;overflow:hidden;background:var(--screen);padding-top:30px}
.phone .screen::before{content:"";position:absolute;top:9px;left:50%;width:30%;height:20px;border-radius:12px;background:#0B0C0B;transform:translateX(-50%);z-index:2}
.phone img{width:100%;height:auto;aspect-ratio:390/844}
.phone.sm{border-radius:34px;padding:7px}.phone.sm .screen{border-radius:28px;padding-top:24px}.phone.sm .screen::before{top:7px;height:15px}

/* Cards */
.cards{display:grid;gap:14px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--raised);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:12px;align-content:start;transition:transform .24s var(--spring),box-shadow .24s var(--ease)}
.card p{color:var(--ink2);font-size:16px}
.card h3{display:flex;align-items:center;gap:12px}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}

/* Lists with icons */
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ilist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ilist li>.i{color:var(--pine);margin-top:3px}
.ilist b{color:var(--ink);font-weight:600}
.ilist li p{color:var(--ink2)}

/* The trust line */
.trust{display:grid;gap:12px}
.tier{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--raised);border:1px solid var(--line);border-radius:22px;padding:20px}
.tier .stack{gap:6px}
.tier h3{font-size:20px}
.tier p{color:var(--ink2);font-size:16px}
.tier .who{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* Studio formats, drawn */
.formats{display:flex;gap:16px;align-items:flex-end;justify-content:center;padding:28px 16px;background:var(--raised);border:1px solid var(--line);border-radius:26px}
.fmt{display:grid;gap:10px;justify-items:center;font:500 12px/1.3 var(--mono);color:var(--ink2);text-align:center}
.fmt .box{border:1.6px solid var(--ink3);border-radius:12px;display:grid;place-items:center;color:var(--pine)}
.fmt .box.v{width:84px;height:150px}.fmt .box.s{width:110px;height:110px}.fmt .box.h{width:150px;height:84px}
@media (max-width:480px){.fmt .box.v{width:60px;height:106px}.fmt .box.s{width:78px;height:78px}.fmt .box.h{width:98px;height:55px}.formats{gap:10px}}
.prompter{background:var(--bezel);color:#F1F3EE;border-radius:26px;padding:24px;display:grid;gap:14px}
.prompter .top{display:flex;align-items:center;gap:10px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#A3A9A2}
.prompter .lines{font:600 22px/1.4 var(--serif);color:#7F867F;display:grid;gap:6px}
.prompter .lines .now{color:#F1F3EE}

/* Verse card */
.verse{background:var(--raised);border:1px solid var(--line);border-radius:26px;padding:24px;display:grid;gap:16px;box-shadow:var(--shadow)}
.verse blockquote{margin:0;font:500 clamp(21px,2.6vw,27px)/1.45 var(--serif);color:var(--ink)}
.verse sup{font:600 13px var(--sans);color:var(--honeyInk);margin-right:6px}
.verse .ref{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.verse .noteline{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;border-radius:16px;background:var(--surface);color:var(--ink2);font-size:15px}
.verse .noteline .i{color:var(--pine)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:500 13px/1.2 var(--mono);color:var(--ink2)}
.chip .i{color:inherit}
.chip.on{background:var(--pine);border-color:var(--pine);color:var(--onAccent)}

/* Bank details, drawn */
.bank{background:var(--raised);border:1px solid var(--line);border-radius:26px;padding:6px;box-shadow:var(--shadow)}
.bank .top{display:flex;gap:12px;align-items:center;padding:14px 16px 12px;color:var(--ink2);font-size:15px}
.bank dl{margin:0;display:grid}
.bank .line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.bank dt{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.bank dd{margin:2px 0 0;font-weight:500;color:var(--ink)}
.bank .copy{display:inline-flex;align-items:center;gap:6px;color:var(--pine);font-size:14px;font-weight:600}
.bank .foot{padding:12px 16px 14px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.bank .foot .i{color:var(--pine);margin-top:2px}

/* Safety sheet, drawn */
.sheet{background:var(--raised);border:1px solid var(--line);border-radius:26px;padding:10px;display:grid;box-shadow:var(--shadow)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 8px}
.sheet .opt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px}
.sheet .opt b{display:block;font-weight:600}
.sheet .opt span{color:var(--ink2);font-size:14.5px}
.sheet .opt .i{color:var(--ink2)}
.sheet .opt.danger .i,.sheet .opt.danger b{color:var(--rust)}
.sheet .opt+.opt{border-top:1px solid var(--line)}

/* Language pair */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:500px;width:100%;margin:0 auto}
.pair figure{margin:0;display:grid;gap:12px;justify-items:center;min-width:0}
.pair .phone{width:100%}
.pair figcaption{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}

/* Showcase: a stacked tour everywhere, a sticky phone on wide screens with JS. */
.tour{display:grid;gap:56px}
.step{display:grid;gap:24px}
.step .phone{width:min(260px,70vw);justify-self:center}
.step-text{display:grid;gap:12px;max-width:460px}
.step-text h3{font-size:clamp(24px,3vw,30px);display:flex;align-items:center;gap:12px}
.step-text p{color:var(--ink2)}
.step-num{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.stage{display:none}
@media (min-width:1024px){
  html.tour-ready .tour-grid{display:grid;grid-template-columns:1fr 360px;gap:80px;align-items:start}
  html.tour-ready .tour{gap:0}
  html.tour-ready .step{min-height:76vh;align-content:center}
  html.tour-ready .step .phone{display:none}
  html.tour-ready .step-text h3{color:var(--ink2);transition:color .22s var(--ease)}
  html.tour-ready .step.active .step-text h3{color:var(--ink)}
  html.tour-ready .step-num{transition:color .22s var(--ease)}
  html.tour-ready .step.active .step-num{color:var(--pine)}
  html.tour-ready .stage{display:block;position:sticky;top:calc(var(--header) + 4vh);padding-top:2vh}
  html.tour-ready .stage .phone{width:330px;margin:0 auto}
  html.tour-ready .stage .screen{display:grid}
  html.tour-ready .stage .screen img{grid-area:1/1;opacity:0;transform:scale(.97);transition:opacity .45s var(--ease),transform .7s var(--spring)}
  html.tour-ready .stage .screen img.on{opacity:1;transform:none}
  html.tour-ready .stage .dots{display:flex;gap:6px;justify-content:center;margin-top:18px}
  html.tour-ready .stage .dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .4s var(--spring),background-color .2s}
  html.tour-ready .stage .dots i.on{width:22px;background:var(--pine)}
}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--raised);border:1px solid var(--line);border-radius:20px}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 20px;font:600 18px/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary>.i{color:var(--pine)}
.faq summary .chev{color:var(--ink3);transition:transform .24s var(--spring)}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .a{padding:0 20px 20px 54px;color:var(--ink2);display:grid;gap:10px}
@media (prefers-reduced-motion:no-preference){.faq details[open] .a{animation:pop .24s var(--spring)}}

/* Get the app */
.cta-block{background:var(--pine);color:var(--onAccent);border-radius:32px;padding:clamp(24px,5vw,64px);display:grid;gap:28px}
.cta-block h2{color:var(--onAccent)}
.cta-block .lead{color:color-mix(in srgb,var(--onAccent) 84%,transparent)}
.cta-block .kicker{color:var(--onAccent)}
.cta-block .kicker .well{background:color-mix(in srgb,var(--onAccent) 14%,transparent);color:var(--onAccent)}
.cta-block .btn.primary{background:var(--onAccent);color:var(--pine)}
.cta-block .btn.quiet{background:transparent;color:var(--onAccent);border-color:color-mix(in srgb,var(--onAccent) 45%,transparent)}
.cta-block :focus-visible{outline-color:var(--onAccent)}
.status{display:grid;gap:12px}
@media (min-width:800px){.status{grid-template-columns:repeat(3,1fr)}}
.status>div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:18px;border-radius:20px;background:color-mix(in srgb,var(--onAccent) 9%,transparent)}
.status b{display:block;margin-bottom:2px}
.status p{font-size:15px;color:color-mix(in srgb,var(--onAccent) 84%,transparent)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:48px 0 56px;color:var(--ink2);font-size:15px}
.site-footer .wrap{display:grid;gap:28px}
.foot-links{display:grid;gap:2px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.foot-links a{display:inline-flex;align-items:center;gap:10px;padding:9px 0;color:var(--ink);text-decoration:none}
.foot-links a:hover{color:var(--pine)}
.foot-links a .i{color:var(--pine)}
.fine{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--ink2);font-size:14px}
.fine span{display:inline-flex;align-items:center;gap:8px}

/* Legal pages */
.doc{padding:32px 0 80px}
.doc .wrap{max-width:820px;display:grid;gap:24px}
.doc .top{display:grid;gap:16px;padding-bottom:8px}
.doc h1{font-size:clamp(38px,6vw,58px)}
.doc .updated{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.doc .updated .i{color:var(--pine);margin-top:3px}
.doc article{display:grid;gap:14px;background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:24px}
.doc article h2{font-size:clamp(24px,3.4vw,30px);display:flex;align-items:center;gap:12px}
.doc article h2 .well{width:40px;height:40px;border-radius:12px}
.doc article p,.doc article li{color:var(--ink2)}
.doc article b{color:var(--ink);font-weight:600}
.doc ul,.doc ol{margin:0;padding-left:22px;display:grid;gap:8px}
.doc ul{list-style:none;padding-left:0}
.doc ul li{position:relative;padding-left:30px}
.doc ul li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:var(--pine);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center/contain no-repeat}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px}
.doc .toc a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--raised);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}
.doc .toc a .i{color:var(--pine)}
.doc .callout{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:20px;border-radius:22px;background:var(--pine);color:var(--onAccent)}
.doc .callout a{color:var(--onAccent);font-weight:600}

/* Scroll reveal. The resting state is VISIBLE. Only once site.js has an observer
   running and has marked what is already on screen (html.io) does anything below
   the fold start a few pixels down and faded, and it arrives on a spring. */
@media (prefers-reduced-motion:no-preference){
  html.io .reveal:not(.in){opacity:0;transform:translateY(18px)}
  html.io .reveal{transition:opacity .45s var(--ease),transform .55s var(--spring);transition-delay:calc(var(--d,0) * 60ms)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.site-header,.progress,.stage,.menu{display:none}}