/* apponur.com — shared styles */
:root{
  --navy:#16284A;
  --blue:#2F5B9A;
  --blue-soft:#E6EEF9;
  --red:#D62F3A;
  --red-soft:#FCE9EA;
  --paper:#F6F8FB;
  --card:#FFFFFF;
  --ink:#16284A;
  --muted:#4F5D78;
  --line:#D9E0EB;
  --accent:var(--blue);
  --count:var(--blue);
  --shadow:0 24px 48px -28px rgba(22,40,74,.45);
  --stripe-white:#E4E9F1;
  --gold:#A9781F;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1729; --card:#16233D; --ink:#EEF2F8; --muted:#A8B4CB; --line:#283A5B;
    --blue-soft:#1A2D4D; --red-soft:#3A1E27; --accent:#8DB4EA; --count:#8DB4EA;
    --shadow:0 24px 48px -28px rgba(0,0,0,.8); --stripe-white:#fff; --gold:#D9A84A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1729; --card:#16233D; --ink:#EEF2F8; --muted:#A8B4CB; --line:#283A5B;
  --blue-soft:#1A2D4D; --red-soft:#3A1E27; --accent:#8DB4EA; --count:#8DB4EA;
  --shadow:0 24px 48px -28px rgba(0,0,0,.8); --stripe-white:#fff; --gold:#D9A84A; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 "Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:16px}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 12px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
/* Brand lockup: keyhole mark, name, a gold rule with a star, and the tagline.
   Sizes are in em so the footer can shrink the whole lockup with one font-size. */
.brand{display:inline-flex;align-items:center;gap:.6em;font-size:23px;text-decoration:none;color:var(--ink)}
.brand-mark{display:block;height:2.15em;width:auto;flex:none}
.brand-text{display:inline-flex;flex-direction:column;align-items:flex-start}
.brand-name{font:700 1em/1 "Playfair Display",Georgia,serif;letter-spacing:.18em;text-transform:uppercase;margin-right:-.18em}
.brand-orn{align-self:stretch;display:flex;align-items:center;gap:.26em;margin:.2em 0 .19em}
.brand-orn i{flex:1;height:1px;background:var(--gold)}
.brand-orn b{width:.3em;height:.3em;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.brand-tag{font:700 .32em/1 "Libre Franklin",sans-serif;text-transform:uppercase;letter-spacing:var(--tag-ls);margin-right:calc(-1 * var(--tag-ls));color:var(--muted);white-space:nowrap}
/* tracking that makes each tagline exactly as wide as the name */
.brand-tag{--tag-ls:.0994em}html[lang="es"] .brand-tag{--tag-ls:.183em}
.top nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.top nav a{text-decoration:none}
.top nav a.navlink:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.top nav a.navlink[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px}
.lang a,.lang button{font:600 13px "Libre Franklin",sans-serif;border:0;background:none;color:var(--muted);padding:5px 11px;border-radius:999px;cursor:pointer;text-decoration:none;line-height:1.4}
.lang [aria-current="true"],.lang [aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:700px){.top nav .navlink{display:none}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:40px 0 80px}
.hero h1{font-weight:900;font-size:clamp(38px,6vw,66px);line-height:1.03;letter-spacing:-.035em;margin:0 0 22px;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lede{font-size:19px;color:var(--muted);max-width:36ch;margin:0 0 30px}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;border-radius:12px;padding:11px 18px 11px 14px;min-width:178px;transition:transform .15s}
.store svg{width:24px;height:24px;flex:none;fill:currentColor}
.store small{display:block;font-size:11px;line-height:1.2;opacity:.8}
.store b{display:block;font-size:17px;line-height:1.2;font-weight:600}
.store:hover{transform:translateY(-2px)}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks li{position:relative}
.ticks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--blue-soft)}
/* the check is a mask so it takes the theme's accent colour (readable in dark mode too) */
.ticks li::after{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:44px;padding:20px 0 64px}}

/* ---------- try-it demo: the app's own test and result screens ---------- */
/* Every size is in the app's dp (calc(n * var(--dp))): the screen counts as 412dp wide, as the app's layouts
   are drawn for, so the proportions match the app at any width. Colors are the app's light theme
   (res/values/colors_design.xml); the app itself runs in light mode only. */
.demo{justify-self:end;width:100%;max-width:368px}
@media (max-width:860px){.demo{justify-self:center}}
.phone{position:relative;width:368px;height:760px;padding:11px;border-radius:58px;background:linear-gradient(145deg,#2B3550,#0B1220 45%,#05080F);box-shadow:0 0 0 1.5px #3A4566 inset,0 0 0 1px rgba(255,255,255,.06),0 40px 70px -30px rgba(10,19,40,.55),0 18px 30px -18px rgba(10,19,40,.4)}
.phone::before{content:"";position:absolute;top:22px;left:50%;width:100px;height:29px;margin-left:-50px;border-radius:20px;background:#000;z-index:5}
.screen{position:relative;height:100%;border-radius:47px;overflow:hidden;background:#FFFFFF;container-type:inline-size;display:flex;flex-direction:column}
.status{flex:none;display:flex;justify-content:space-between;align-items:center;height:48px;padding:14px 30px 0;font:600 15px/1 -apple-system,"SF Pro Text","Montserrat",sans-serif;color:#111111}
.status .bat{width:25px;height:12px;border:1.5px solid #111;border-radius:4px;position:relative;opacity:.9}
.status .bat::before{content:"";position:absolute;inset:1.5px;right:4px;background:#111;border-radius:1.5px}
.status .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#111;border-radius:0 1px 1px 0}
.demo-cap{margin:18px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.demo-cap b{color:var(--ink)}

.app-ui{--dp:calc(100cqw / 412);--bottom:calc(26 * var(--dp));--bg:#FFFFFF;--text:#111111;--gray:#AAAAAA;--light:#F5F4F4;--blue:#0061FE;--green2:#A2CB76;--green3:#86B953;--red:#F55364;--red2:#E22401;--yellow:#F9B76D;--explanation:#808080;
  position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg);color:var(--text);font:500 calc(14 * var(--dp))/1.3 "Montserrat",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-align:left}
:where(.app-ui *){box-sizing:border-box}
:where(.app-ui button){font:inherit;color:inherit;margin:0;border:0;background:none;padding:0;cursor:pointer}
.app-ui button:focus-visible,.app-ui a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.app-ui svg{display:block;flex:none}
.app-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);will-change:transform}
/* every tappable thing shrinks a little while pressed, then springs back (animator/app_press) */
.press{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.press:active:not(:disabled){transform:scale(.97);transition:transform .12s cubic-bezier(.4,0,.2,1)}

/* toolbar (view_tts_toolbar / the result toolbar) */
.a-bar{flex:none;display:flex;align-items:center;min-height:calc(50 * var(--dp));padding:calc(16 * var(--dp)) calc(20 * var(--dp)) calc(12 * var(--dp))}
.a-circle{width:calc(48 * var(--dp));height:calc(48 * var(--dp));border-radius:50%;background:var(--light);display:grid;place-items:center;color:var(--gray)}
.a-circle svg{width:calc(28 * var(--dp));height:calc(28 * var(--dp));fill:currentColor}
.a-circle.speak{margin-left:calc(8 * var(--dp))}
.a-circle.speak.on{color:var(--blue)}
.a-circle.speak svg{width:calc(22 * var(--dp));height:calc(22 * var(--dp))}
.a-titles{flex:1;min-width:0;margin-left:calc(8 * var(--dp));text-align:right}
.a-title{font:700 calc(24 * var(--dp))/1.15 "Montserrat",sans-serif;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-sub{margin-top:calc(5 * var(--dp));font-size:calc(13 * var(--dp));color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-left{text-align:left;margin-right:calc(8 * var(--dp))}

/* score header (bg_test_header) and the review number */
.a-head{flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(30 * var(--dp));margin:calc(4 * var(--dp)) calc(20 * var(--dp)) 0;padding:0 calc(12 * var(--dp));border-radius:calc(12 * var(--dp));background:var(--light);font:700 calc(12 * var(--dp))/1 "Montserrat",sans-serif}
.a-head .c{display:flex;align-items:center;gap:calc(6 * var(--dp));color:var(--green2)}
.a-head .w{display:flex;align-items:center;gap:calc(6 * var(--dp));color:var(--red)}
.a-head svg{width:calc(18 * var(--dp));height:calc(18 * var(--dp))}
.a-head .pos{position:absolute;left:50%;transform:translateX(-50%);color:var(--gray);white-space:nowrap}
.a-revnum{flex:none;margin:calc(4 * var(--dp)) calc(20 * var(--dp)) 0;font:600 calc(13 * var(--dp))/1.3 "Montserrat",sans-serif}
.a-revnum b{font:700 calc(20 * var(--dp))/1 "Montserrat",sans-serif}

/* the question and its options (fragment_question / item_test_option) */
.a-view{position:relative;flex:1;min-height:0;margin-top:calc(8 * var(--dp));overflow:hidden}
.a-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(8 * var(--dp)) calc(20 * var(--dp)) calc(16 * var(--dp));background:var(--bg);scrollbar-width:none}
.a-scroll::-webkit-scrollbar{display:none}
.a-q{margin:0;font:600 calc(16 * var(--dp))/1.3 "Montserrat",sans-serif}
.a-opt{margin-top:calc(8 * var(--dp))}
.a-opt:first-of-type{margin-top:calc(16 * var(--dp))}
.a-btn{display:flex;align-items:center;width:100%;min-height:calc(56 * var(--dp));padding:calc(12 * var(--dp)) calc(16 * var(--dp));border-radius:calc(16 * var(--dp));background:var(--bg);box-shadow:inset 0 0 0 calc(1.5 * var(--dp)) var(--light);text-align:left}
.a-btn .ic{width:calc(26 * var(--dp));height:calc(26 * var(--dp));border-radius:50%;box-shadow:inset 0 0 0 calc(2 * var(--dp)) var(--light);flex:none}
.a-btn .tx{flex:1;margin-left:calc(12 * var(--dp));font:500 calc(14 * var(--dp))/1.3 "Montserrat",sans-serif;line-height:calc(1.3em + calc(2 * var(--dp)))}
.a-btn.right{background:var(--green2);box-shadow:none}
.a-btn.wrong{background:var(--red);box-shadow:none}
.a-btn.right .tx,.a-btn.wrong .tx{color:#fff;font-weight:600}
.a-btn.right .ic,.a-btn.wrong .ic{box-shadow:none}
.a-btn.revealed{background:var(--green2);box-shadow:none}
.a-btn.revealed .tx{color:#fff;font-weight:600}
.a-btn.revealed .ic{box-shadow:inset 0 0 0 calc(2 * var(--dp)) rgba(255,255,255,.55)}
.a-btn[aria-disabled="true"]{cursor:default}
/* the explanation under the right answer opens like the app's AutoTransition (300 ms) */
.a-exp{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.a-exp.open{grid-template-rows:1fr;opacity:1}
.a-exp>div{min-height:0;overflow:hidden}
.a-exp p{margin:calc(8 * var(--dp)) 0 0;padding:calc(12 * var(--dp)) calc(16 * var(--dp));border-radius:calc(16 * var(--dp));background:rgba(162,203,118,.08);font:500 calc(12 * var(--dp))/1.3 "Montserrat",sans-serif;line-height:calc(1.3em + calc(2 * var(--dp)));color:var(--explanation)}

/* progress capsule and the bottom buttons */
.a-prog{flex:none;height:calc(6 * var(--dp));margin:calc(4 * var(--dp)) calc(20 * var(--dp)) calc(8 * var(--dp));border-radius:calc(3 * var(--dp));background:var(--light);overflow:hidden}
.a-prog i{display:block;height:100%;width:0;border-radius:calc(3 * var(--dp));background:var(--blue);transition:width .3s cubic-bezier(.4,0,.2,1)}
.a-nav{flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 calc(20 * var(--dp)) var(--bottom)}
.a-nav .nb{width:30%;height:calc(44 * var(--dp));border-radius:calc(16 * var(--dp));background:var(--light);display:grid;place-items:center;color:var(--gray)}
.a-nav .nb svg{width:calc(24 * var(--dp));height:calc(24 * var(--dp));fill:currentColor}
.a-nav .fav{width:calc(44 * var(--dp));height:calc(44 * var(--dp));display:grid;place-items:center;color:var(--yellow)}
.a-nav .fav svg{width:calc(24 * var(--dp));height:calc(24 * var(--dp));fill:currentColor}
.a-nav .fav.pop svg{animation:favPop .45s}
@keyframes favPop{0%{transform:scale(1)}22%{transform:scale(1.35)}60%{transform:scale(.95)}100%{transform:scale(1)}}
.a-nav .fav.out svg{animation:favOut .45s}
@keyframes favOut{0%{transform:scale(1)}22%{transform:scale(.8)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* result (fragment_result) */
.r-try{display:flex;align-items:center;gap:calc(8 * var(--dp));height:calc(48 * var(--dp));padding:0 calc(16 * var(--dp));border-radius:calc(16 * var(--dp));background:var(--light);font:600 calc(14 * var(--dp))/1 "Montserrat",sans-serif;white-space:nowrap}
.r-try svg{width:calc(14 * var(--dp));height:calc(14 * var(--dp));fill:currentColor}
.r-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(8 * var(--dp)) calc(20 * var(--dp)) calc(20 * var(--dp));scrollbar-width:none}
.r-scroll::-webkit-scrollbar{display:none}
.r-card{background:var(--light);border-radius:calc(24 * var(--dp));padding:calc(20 * var(--dp)) calc(20 * var(--dp)) calc(24 * var(--dp));display:flex;flex-direction:column;align-items:center}
.r-ring{position:relative;width:calc(236 * var(--dp));height:calc(236 * var(--dp));margin:calc(-12 * var(--dp)) 0 calc(-24 * var(--dp))}
.r-ring svg{position:absolute;inset:0;width:100%;height:100%}
.r-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.r-score{display:flex;align-items:baseline}
.r-score b{font:800 calc(44 * var(--dp))/1 "Montserrat",sans-serif;font-variant-numeric:tabular-nums}
.r-score span{margin-left:calc(2 * var(--dp));font:700 calc(20 * var(--dp))/1 "Montserrat",sans-serif;color:var(--gray)}
.r-center small{margin-top:calc(4 * var(--dp));font:600 calc(12 * var(--dp))/1 "Montserrat",sans-serif;color:var(--gray)}
.r-head{margin:calc(20 * var(--dp)) 0 0;font:700 calc(20 * var(--dp))/1.25 "Montserrat",sans-serif;text-align:center}
.r-msg{margin:calc(8 * var(--dp)) calc(8 * var(--dp)) 0;font:500 calc(13 * var(--dp))/1.3 "Montserrat",sans-serif;line-height:calc(1.3em + calc(3 * var(--dp)));color:var(--gray);text-align:center}
.r-review{display:flex;align-items:center;width:100%;height:calc(52 * var(--dp));margin-top:calc(20 * var(--dp));padding:0 calc(16 * var(--dp));border-radius:calc(16 * var(--dp));background:#FFFFFF;font:700 calc(14 * var(--dp))/1 "Montserrat",sans-serif;text-align:left}
.r-review span{flex:1}
.r-review svg{width:calc(20 * var(--dp));height:calc(20 * var(--dp));fill:var(--gray)}
.r-tiles{display:flex;gap:calc(12 * var(--dp));margin-top:calc(12 * var(--dp))}
.r-tile{flex:1;background:var(--light);border-radius:calc(20 * var(--dp));padding:calc(16 * var(--dp)) 0;display:flex;flex-direction:column;align-items:center}
.r-tile .i{width:calc(28 * var(--dp));height:calc(28 * var(--dp));border-radius:50%;display:grid;place-items:center}
.r-tile .i svg{width:calc(14 * var(--dp));height:calc(14 * var(--dp));fill:currentColor}
.r-tile b{margin-top:calc(8 * var(--dp));font:700 calc(20 * var(--dp))/1 "Montserrat",sans-serif;font-variant-numeric:tabular-nums}
.r-tile small{margin-top:calc(8 * var(--dp));font:600 calc(11 * var(--dp))/1 "Montserrat",sans-serif;color:var(--gray)}
/* results by topic (item_result_topic, TopicBarView); opens with setExpanded: 300 ms in, 250 ms out */
.r-topics{margin-top:calc(12 * var(--dp));background:var(--light);border-radius:calc(20 * var(--dp));overflow:hidden}
.r-topics .hd{display:flex;align-items:center;width:100%;padding:calc(16 * var(--dp));text-align:left}
.r-topics .i{width:calc(36 * var(--dp));height:calc(36 * var(--dp));border-radius:50%;background:rgba(0,97,254,.12);color:var(--blue);display:grid;place-items:center;flex:none}
.r-topics .i svg{width:calc(18 * var(--dp));height:calc(18 * var(--dp));fill:currentColor}
.r-topics .tt{flex:1;min-width:0;margin:0 calc(8 * var(--dp)) 0 calc(12 * var(--dp))}
.r-topics .tt b{display:block;font:700 calc(14 * var(--dp))/1.2 "Montserrat",sans-serif}
.r-topics .tt small{display:block;margin-top:calc(2 * var(--dp));font:500 calc(11 * var(--dp))/1.3 "Montserrat",sans-serif;color:var(--gray)}
.r-topics .chev{width:calc(20 * var(--dp));height:calc(20 * var(--dp));fill:var(--gray);transition:transform .3s}
.r-topics.open .chev{transform:rotate(180deg)}
.r-rows{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}
.r-topics.open .r-rows{grid-template-rows:1fr;opacity:1;transition-duration:.3s}
.r-rows>div{min-height:0;overflow:hidden;padding:0 calc(16 * var(--dp))}
.r-row:last-child{margin-bottom:calc(4 * var(--dp))}
.r-row hr{margin:0;border:0;height:1px;background:rgba(170,170,170,.15)}
.r-row .ln{display:flex;align-items:center;margin-top:calc(12 * var(--dp))}
.r-row .nm{flex:1;margin-right:calc(8 * var(--dp));font:600 calc(12 * var(--dp))/1.3 "Montserrat",sans-serif}
.r-row .ok{width:calc(14 * var(--dp));height:calc(14 * var(--dp));margin-right:calc(8 * var(--dp));fill:var(--green3)}
.r-row .sc{font:700 calc(12 * var(--dp))/1 "Montserrat",sans-serif}
.r-row .bar{position:relative;height:calc(8 * var(--dp));margin:calc(8 * var(--dp)) 0 calc(12 * var(--dp));border-radius:calc(4 * var(--dp));background:#FFFFFF;overflow:hidden}
.r-row .bar i{position:absolute;top:0;bottom:0;left:0}
.r-cta{margin-top:calc(12 * var(--dp));background:var(--light);border-radius:calc(20 * var(--dp));padding:calc(16 * var(--dp))}
.r-cta .t{display:flex;align-items:center}
.r-cta .i{width:calc(40 * var(--dp));height:calc(40 * var(--dp));flex:none}
.r-cta .i img{display:block;width:100%;height:100%;border-radius:22%}
.r-cta .t div{margin-left:calc(12 * var(--dp))}
.r-cta b{display:block;font:700 calc(14 * var(--dp))/1.2 "Montserrat",sans-serif}
.r-cta small{display:block;margin-top:calc(2 * var(--dp));font:500 calc(11 * var(--dp))/1.3 "Montserrat",sans-serif;color:var(--gray)}
.r-stores{display:flex;gap:calc(8 * var(--dp));margin-top:calc(16 * var(--dp))}
.r-store{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--dp));height:calc(48 * var(--dp));border-radius:calc(16 * var(--dp));background:#FFFFFF;color:var(--text);text-decoration:none;font:700 calc(14 * var(--dp))/1 "Montserrat",sans-serif}
.r-store svg{width:calc(18 * var(--dp));height:calc(18 * var(--dp));fill:currentColor}
.r-store small{display:block;font:500 calc(9 * var(--dp))/1 "Montserrat",sans-serif;color:var(--gray);margin-bottom:calc(2 * var(--dp))}
.r-next{flex:none;display:flex;align-items:center;justify-content:center;height:calc(56 * var(--dp));margin:calc(8 * var(--dp)) calc(20 * var(--dp)) var(--bottom);border-radius:calc(16 * var(--dp));background:var(--blue);color:#fff;font:600 calc(16 * var(--dp))/1 "Montserrat",sans-serif}
.r-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

@media (max-width:600px){
  .demo{max-width:440px}
  .phone{width:100%;height:auto;padding:0;border-radius:28px;background:none;box-shadow:0 24px 48px -28px rgba(22,40,74,.45)}
  .phone::before,.status{display:none}
  .app-ui{--bottom:calc(16 * var(--dp))}
  .screen{height:auto;aspect-ratio:412/800;border-radius:28px;border:1.5px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.press,.a-prog i,.a-exp{transition:none}.a-nav .fav.pop svg,.a-nav .fav.out svg{animation:none}}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid var(--line);border-radius:20px;background:var(--card);margin:0 0 8px}
.stats div{padding:24px 26px}
.stats div + div{border-left:1.5px solid var(--line)}
.stats b{display:block;font-weight:900;font-size:clamp(32px,4vw,44px);line-height:1;letter-spacing:-.04em;color:var(--count)}
.stats span{display:block;margin-top:8px;font-size:15px;color:var(--muted);line-height:1.35}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0}.stats div:nth-child(n+3){border-top:1.5px solid var(--line)}.stats div{padding:20px}}

/* ---------- sections ---------- */
section.block{padding:84px 0;border-top:1.5px solid var(--line)}
section.block.first{border-top:0}
section.block h2{font-weight:800;font-size:clamp(30px,4vw,42px);letter-spacing:-.03em;line-height:1.1;margin:0 0 14px;text-wrap:balance}
section.block .intro{color:var(--muted);max-width:60ch;margin:0 0 40px}
@media (max-width:600px){section.block{padding:60px 0}}

/* test version chooser */
.versions{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card)}
.version{padding:32px}
.version + .version{border-left:1.5px solid var(--line)}
.version .when{font-size:15px;color:var(--muted);margin:0 0 6px}
.version h3{font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0 0 18px}
.version .count{font-weight:900;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--count)}
.version .count small{font-size:17px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:8px}
.version ul{margin:22px 0 0;padding:0;list-style:none;font-size:15px}
.version li{padding:9px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.version li span{color:var(--muted)}
.version li b{font-weight:700;text-align:right}
.versions-note{margin:18px 0 0;color:var(--muted);font-size:15px}
@media (max-width:700px){.versions{grid-template-columns:1fr}.version + .version{border-left:0;border-top:1.5px solid var(--line)}.version{padding:26px 22px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px;counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:800;font-size:15px;margin-bottom:16px}
.steps h3{font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--muted);font-size:15px}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.more:hover{color:var(--red)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.features li{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:24px}
.features .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.features .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.features h3{font-size:19px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.features p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:860px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features{grid-template-columns:1fr}.features li{padding:20px}}

/* apps */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.appcard{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:18px}
.app{display:flex;align-items:center;gap:16px}
.app img{width:72px;height:72px;border-radius:17px;border:1px solid var(--line);flex:none}
.app b{display:block;font-size:19px;letter-spacing:-.01em;line-height:1.25}
.app span{font-size:14px;color:var(--muted)}
.appcard p{margin:0;color:var(--muted);font-size:15px}
.appcard .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.dl{font-weight:600;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;white-space:nowrap}
.dl svg{width:18px;height:18px;fill:currentColor}
.dl:hover{border-color:var(--ink)}
@media (max-width:760px){.apps{grid-template-columns:1fr}.appcard{padding:22px}}

/* faq */
.faq{max-width:780px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq details:first-child{border-top:1.5px solid var(--line)}
.faq summary,.doc summary{cursor:pointer;font-weight:700;font-size:18px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker,.doc summary::-webkit-details-marker{display:none}
.faq summary::after,.doc summary::after{content:"+";font-weight:400;font-size:26px;line-height:1;color:var(--muted);flex:none;transition:transform .2s}
.faq details[open] summary::after,.doc details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:68ch}

/* support band */
.support{display:flex;justify-content:space-between;align-items:center;gap:24px 32px;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:36px}
.support h2{margin-bottom:8px!important}
.support .intro{margin:0!important}
.support .mail,.contact-box .mail{font-weight:800;font-size:clamp(20px,3vw,28px);letter-spacing:-.02em;text-decoration:none;border-bottom:3px solid var(--red);overflow-wrap:anywhere}
.support .mail:hover{color:var(--red)}
@media (max-width:600px){.support{padding:26px 22px}}

/* footer */
footer{border-top:1.5px solid var(--line);padding:44px 0 52px;font-size:14px;color:var(--muted)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer .brand{font-size:17px}

footer .about{margin:12px 0 0;max-width:34ch}
footer h4{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:6px 0}
footer a{text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
footer .legal{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
footer .legal p{max-width:74ch;margin:0}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}footer .cols > div:first-child{grid-column:1/-1}}

/* language suggestion */
.langhint{display:none;background:var(--blue-soft);border-radius:12px;padding:10px 16px;font-size:15px}
.langhint.show{display:flex;justify-content:space-between;gap:12px;align-items:center}
.langhint a{font-weight:700}
.langhint button{border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:0 4px}

/* ---------- guide / inner pages ---------- */
.crumbs{font-size:14px;color:var(--muted);margin:0 0 18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding:32px 0 96px}
.doc aside{position:sticky;top:24px;align-self:start;font-size:15px}
.doc aside p{margin:0 0 10px;color:var(--muted);font-size:14px}
.doc aside ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.doc aside li a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted)}
.doc aside li a:hover{color:var(--ink);border-color:var(--red)}
.doc article{max-width:70ch;min-width:0}
.doc h1{font-weight:900;font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.doc .updated{color:var(--muted);margin:0 0 36px;font-size:15px}
.doc .lead{font-size:19px;color:var(--muted);margin:0 0 36px}
.doc .summary{background:var(--blue-soft);border-radius:16px;padding:22px 26px;margin:0 0 44px}
.doc .summary h2{font-size:18px;margin:0 0 8px;letter-spacing:-.01em}
.doc .summary ul{margin:0;padding-left:20px}
.doc .summary li{margin:4px 0}
.doc article section{scroll-margin-top:24px}
.doc article h2{font-weight:800;font-size:26px;letter-spacing:-.02em;margin:48px 0 10px}
.doc article h3{font-weight:700;font-size:19px;margin:28px 0 6px}
.doc article ul,.doc article ol{padding-left:22px}
.doc article li{margin:6px 0}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0 6px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1.5px solid var(--line)}
.doc thead th{color:var(--muted);font-weight:600;font-size:14px}
.doc a{text-underline-offset:3px}
.doc details{border-bottom:1.5px solid var(--line);padding:0}
.doc details > *:not(summary){margin-top:0}
.callout{border-left:4px solid var(--red);background:var(--red-soft);border-radius:0 14px 14px 0;padding:16px 20px;margin:24px 0}
.callout p{margin:0}
.cta{background:var(--navy);color:#fff;border-radius:22px;padding:30px;margin:52px 0 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.doc .cta h2{margin:0;color:#fff;font-size:24px}
.cta p{margin:6px 0 0;opacity:.8}
.cta .stores .store{background:#fff;color:var(--navy)}
.contact-box{border:1.5px solid var(--line);background:var(--card);border-radius:20px;padding:28px 30px;margin:0 0 40px}
.contact-box p{margin:0 0 6px;color:var(--muted)}
[data-lang-block]{display:none}
html[lang="en"] [data-lang-block="en"],html[lang="es"] [data-lang-block="es"]{display:block}
@media (max-width:860px){.doc{grid-template-columns:1fr;gap:28px;padding-top:16px}.doc aside{position:static}}
@media (max-width:600px){.doc table,.doc thead,.doc tbody,.doc tr,.doc td,.doc th{display:block}.doc thead{display:none}.doc td{border:0;padding:4px 0}.doc tr{border-bottom:1.5px solid var(--line);padding:10px 0}.doc td:first-child{font-weight:700}.contact-box{padding:22px}}

/* 404 */
.notfound{padding:80px 0 120px;max-width:560px}
.notfound h1{font-weight:900;font-size:clamp(40px,6vw,64px);letter-spacing:-.035em;line-height:1.05;margin:0 0 16px}
.notfound p{color:var(--muted);margin:0 0 28px}
html.is-android .stores .store.ios{order:2}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){.guide aside{display:none}}