/* VouchLot — apps.vouchlot.com. One stylesheet for every page. */
:root{
  --bg:#F3F1EC; --bg-2:#ECE8E0; --card:#FFFFFF; --ink:#161513; --ink-2:#2A2825; --muted:#5F5C57; --line:#E2DED6;
  --green:#1E7A4C; --green-ink:#155E3A; --green-soft:#E3F1E9; --amber:#9A5B13;
  --band:#161513; --band-ink:#F3F1EC; --band-muted:#B9B4AA; --band-line:#2E2C29;
  --f-ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --r:18px; --gutter:max(20px, env(safe-area-inset-left, 0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121210; --bg-2:#181816; --card:#1C1B19; --ink:#F1EFEA; --ink-2:#D9D5CD; --muted:#A8A49C; --line:#302E2A;
    --green:#47B07A; --green-ink:#7CCB9F; --green-soft:#1D3328; --amber:#E0A458;
    --band:#0B0B0A; --band-ink:#F1EFEA; --band-muted:#A8A49C; --band-line:#262522;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:17px; line-height:1.55; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding-left:var(--gutter); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.narrow{max-width:760px}

/* header */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.logo{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-stretch:80%; font-weight:800; font-size:24px; letter-spacing:.01em; text-decoration:none; color:var(--ink)}
.mark{width:30px; height:30px; border-radius:8px; background:#161513; box-shadow:0 0 0 1px var(--line); display:inline-flex; align-items:center; justify-content:center; flex:none}
.mark svg{width:20px; height:20px}
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .btn-sm{color:var(--ink); border:1.5px solid var(--line); padding:7px 14px; border-radius:999px}
.nav .btn-sm:hover{border-color:var(--ink)}
@media (max-width:560px){ .nav{gap:14px} .nav .hide-s{display:none} }

/* type */
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green)}
h1,h2,h3{font-family:var(--f-display); font-weight:800; margin:0; letter-spacing:-.005em; text-wrap:balance}
h1{font-stretch:76%; font-size:clamp(46px, 7.4vw, 88px); line-height:.94}
h2{font-stretch:78%; font-size:clamp(34px, 5.2vw, 56px); line-height:.98}
h3{font-stretch:82%; font-size:24px; line-height:1.1}
.lede{font-size:clamp(18px, 2.1vw, 21px); color:var(--muted); max-width:40ch; margin:0}
p{margin:0}
.muted{color:var(--muted)}

/* buttons */
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; text-decoration:none; border-radius:999px; padding:13px 22px; border:1.5px solid var(--ink); background:var(--ink); color:var(--bg)}
.btn:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn svg{width:18px; height:18px}
.status{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; padding:7px 14px 7px 12px; border-radius:999px; background:var(--green-soft); color:var(--green-ink); width:max-content}
.status i{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent)}

/* sections */
section{padding-block:clamp(56px, 8vw, 104px)}
.section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:36px; max-width:720px}
.rule{border-top:1px solid var(--line)}

/* hero */
.hero{padding-block:clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px)}
.hero-grid{display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:22px}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }

.goods{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:18px}
.goods-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.goods h3{font-size:22px}
.goods ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.goods li{padding:10px 0; border-top:1px solid var(--line); font-weight:600; font-size:15.5px; display:flex; gap:10px; align-items:center; min-width:0}
.goods li::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--green); flex:none}
.goods .goods-note{font-size:14px; color:var(--muted)}
@media (max-width:380px){ .goods ul{grid-template-columns:1fr} }

/* steps */
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; counter-reset:step}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0}
.step .n{font-family:var(--f-display); font-stretch:80%; font-weight:800; font-size:15px; color:var(--green); letter-spacing:.08em}
.step p{color:var(--muted)}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }
.steps.four{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:980px){ .steps.four{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .steps.four{grid-template-columns:1fr} }

/* two sides */
.sides{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.side{border-radius:22px; padding:30px; display:flex; flex-direction:column; gap:18px; min-width:0}
.side.light{background:var(--card); border:1px solid var(--line)}
.side.dark{background:var(--band); color:var(--band-ink); border:1px solid var(--band-line)}
.side.dark .muted{color:var(--band-muted)}
.side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.side li{padding:14px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:3px}
.side.dark li{border-top-color:var(--band-line)}
.side li b{font-weight:700}
.side li span{color:var(--muted); font-size:15.5px}
.side.dark li span{color:var(--band-muted)}
@media (max-width:820px){ .sides{grid-template-columns:1fr} }

/* dark band */
.band{background:var(--band); color:var(--band-ink)}
.band .muted,.band .lede{color:var(--band-muted)}
.band .eyebrow{color:#7CCB9F}
.band .btn{background:var(--band-ink); color:#161513; border-color:var(--band-ink)}
.band .btn.ghost{background:transparent; color:var(--band-ink); border-color:var(--band-line)}
.band .btn.ghost:hover{border-color:var(--band-ink)}
.app-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(28px, 5vw, 72px); align-items:center}
.app-copy{display:flex; flex-direction:column; gap:20px}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ticks li{display:flex; gap:12px; align-items:flex-start}
.ticks li::before{content:""; flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
@media (max-width:880px){ .app-grid{grid-template-columns:1fr} }

/* device frames, drawn in CSS */
.phones{display:flex; gap:clamp(12px, 2vw, 22px); justify-content:center; align-items:flex-end}
.phone{position:relative; width:min(268px, 44vw); flex:none; border-radius:42px; padding:9px; background:#0D0D0C; box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 1px #2B2A27, 0 30px 60px -20px rgba(0,0,0,.45), 0 10px 24px -12px rgba(0,0,0,.35)}
.phone::before{content:""; position:absolute; top:17px; left:50%; transform:translateX(-50%); width:31%; height:21px; border-radius:20px; background:#0D0D0C; z-index:2}
.phone img{border-radius:33px; width:100%; aspect-ratio:390/844; object-fit:cover; object-position:top; background:#F3F1EC}
.phone.lift{transform:translateY(-28px)}
.phone.sm{width:min(220px, 40vw)}
.phone.lg{width:min(300px, 72vw)}
@media (max-width:560px){ .phones .phone:nth-child(3){display:none} .phone{width:min(220px, 43vw)} }

.tablet{border-radius:28px; padding:12px; background:#0D0D0C; box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 1px #2B2A27, 0 40px 80px -30px rgba(0,0,0,.45)}
.tablet img{border-radius:17px; width:100%; aspect-ratio:1180/820; object-fit:cover; background:#F3F1EC}

.panel-shot{border-radius:26px; overflow:hidden; background:#0D0D0C; box-shadow:0 30px 60px -24px rgba(0,0,0,.4)}
.sheet-shot{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 30px 60px -28px rgba(0,0,0,.35)}

/* feature rows on the app page */
.feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 72px); align-items:center}
.feature + .feature{margin-top:clamp(56px, 8vw, 96px)}
.feature .copy{display:flex; flex-direction:column; gap:16px; max-width:46ch}
.feature.flip .copy{order:2}
.feature .media{display:flex; justify-content:center}
@media (max-width:880px){ .feature{grid-template-columns:1fr} .feature.flip .copy{order:0} }

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:14px; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line)}
.band .chips span{background:transparent; border-color:var(--band-line); color:var(--band-ink)}

.message{background:var(--card); border:1px solid var(--line); border-radius:18px 18px 18px 6px; padding:18px 20px; white-space:pre-line; font-size:15.5px; line-height:1.5; max-width:420px}

/* plans */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:880px}
.plan{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:16px; min-width:0}
.plan.pro{border:2px solid var(--green)}
.plan .price{font-family:var(--f-display); font-stretch:80%; font-weight:800; font-size:44px; line-height:1}
.plan .price small{font-family:var(--f-ui); font-size:16px; font-weight:600; color:var(--muted); margin-left:6px}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.plan li{padding:11px 0; border-top:1px solid var(--line); font-size:15.5px}
.plan .fine{font-size:13.5px; color:var(--muted)}
@media (max-width:760px){ .plans{grid-template-columns:1fr} }

/* facts (about) */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line)}
.facts div{padding:20px 20px 20px 0; display:flex; flex-direction:column; gap:4px; min-width:0}
.facts dt{font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:0; font-weight:600; overflow-wrap:anywhere}
@media (max-width:880px){ .facts{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .facts{grid-template-columns:1fr} .facts div{padding-right:0; border-bottom:1px solid var(--line)} }

/* callout */
.callout{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:clamp(26px, 4vw, 44px); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.callout .text{display:flex; flex-direction:column; gap:10px; max-width:52ch}

/* documents (privacy, terms, support) */
.doc{padding-block:clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px); display:flex; flex-direction:column; gap:14px}
.doc h1{font-size:clamp(42px, 7vw, 72px)}
.doc h2{font-size:clamp(24px, 3vw, 30px); font-stretch:82%; margin-top:22px}
.doc h3{font-size:19px; font-stretch:88%; margin-top:8px}
.doc p,.doc li{max-width:68ch}
.doc ul,.doc ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:7px}
.doc .meta{color:var(--muted); font-size:15px}
.doc a{color:var(--ink); text-underline-offset:3px}
.doc a.btn{color:var(--bg); text-decoration:none}
.doc a.btn.ghost{color:var(--ink)}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.toc a{font-size:14px; font-weight:600; text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line)}
.toc a:hover{border-color:var(--ink)}
.note{background:var(--bg-2); border-radius:14px; padding:16px 18px; font-size:15.5px}

details.qa{border-top:1px solid var(--line); padding:4px 0}
details.qa:last-of-type{border-bottom:1px solid var(--line)}
details.qa summary{cursor:pointer; list-style:none; padding:16px 36px 16px 0; font-weight:700; font-size:18px; position:relative}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:""; position:absolute; right:4px; top:22px; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s}
details.qa[open] summary::after{transform:rotate(-135deg); top:27px}
details.qa .a{padding:0 0 18px; display:flex; flex-direction:column; gap:10px; color:var(--ink-2)}

/* footer */
.foot{border-top:1px solid var(--line); background:var(--bg-2)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-block:44px 28px; font-size:14.5px; color:var(--muted)}
.foot-grid b{display:block; color:var(--ink); font-weight:700; margin-bottom:6px}
.foot-grid a{color:var(--ink); text-decoration:none}
.foot-grid a:hover{text-decoration:underline; text-underline-offset:3px}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.foot-copy{border-top:1px solid var(--line); padding-block:18px 32px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
@media (max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr} }

.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:8px; z-index:20}
.skip:focus{left:12px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }