/* Swipelis home page, below-the-fold styles (fact strip down to the footer).
   The above-the-fold styles (header, hero, store rows, phone, sticky bar) are inline in index.html.
   Tokens (--ink, --soft, --line ...) are defined there on :root. Hand-written; no build step. */

/* ---- section basics ---- */
.sec{padding:60px 0}
.eyebrow{display:block;margin-bottom:12px;font:800 13px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--atext)}
.h2{font-size:clamp(31px,7.6vw,52px);line-height:1.06;font-weight:850;letter-spacing:-.025em}
.lead{margin-top:14px;font-size:18px;line-height:1.5;color:var(--soft);max-width:36rem;text-wrap:pretty}

/* ---- fact strip ---- */
.facts{padding:40px 0 8px}
.facts ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.facts li{padding:16px 6px 14px;text-align:center}
.facts b{display:block;font:900 44px/1 var(--round);letter-spacing:-.02em}
.facts span{display:block;margin-top:6px;font-size:14px;line-height:1.3;color:var(--soft)}

/* ---- how it works ---- */
.how{background:var(--band);margin-top:68px}
.how .eyebrow{color:var(--ttext)}
.how .lead{color:var(--ink)}
.steps{display:grid;gap:12px;margin-top:28px}
.shot{position:relative;aspect-ratio:6/5;border-radius:13px;overflow:hidden;background:#3a352c}
.shot img{width:100%;height:100%;object-fit:cover}
.shot picture{display:contents}
.swipe-mark{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;border:2px solid var(--ink);display:grid;place-items:center}
.swipe-mark .ic{width:24px;height:24px}
.step h3{display:flex;align-items:center;gap:12px;margin:18px 12px 0;font-size:26px;font-weight:850;letter-spacing:-.015em}
.step h3 i{font:900 15px/1 var(--round);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--tint);color:var(--ttext)}
.step p{margin:8px 12px 0;color:var(--soft);font-size:16.5px;line-height:1.5}

/* ---- features: bezel-less region crops of real app screens ---- */
.feats{display:grid;gap:40px;margin-top:32px}
.feat{display:grid;gap:16px;align-items:center}
.feat-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--ttext);margin-bottom:16px}
.feat h3{font-size:clamp(25px,6.4vw,36px);line-height:1.1;font-weight:850;letter-spacing:-.02em}
.feat p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--soft);max-width:28rem}
.panel{border-radius:28px;background:var(--tint)}
.panel.sand{background:var(--band)}
.panel.mintish{background:#E4F3EC}
.crop{position:relative;aspect-ratio:350/166;overflow:hidden;border:2px solid var(--line);border-radius:20px;background:#15130f}
.crop img{width:100%;height:100%;object-fit:cover}
.feats-cta{margin-top:44px}
/* Android while soon: the button is already "Android version coming soon"; no iPhone price under a non-action */
html.dev-android[data-play=soon] .feats-cta .trial{display:none}

/* ---- languages: 12 chips, the other 18 behind a native <details> on phones ---- */
.langs-all{margin-top:28px}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.langs li{padding:7px 13px;background:#fff;border:2px solid var(--line);border-radius:99px;font:650 14.5px/1.3 var(--sans)}
.langs-more .langs{margin-top:8px}
.langs-more summary{display:inline-flex;align-items:center;min-height:48px;margin-top:6px;color:var(--atext);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer;list-style:none}
.langs-more summary::-webkit-details-marker{display:none}
.langs-more[open] summary{display:none}
/* once open: one continuous chip cloud (where ::details-content is unsupported the second list starts a new row) */
@media (max-width:767px){
  .langs-all:has(.langs-more[open]){display:flex;flex-wrap:wrap;gap:8px}
  .langs-all:has(.langs-more[open]) .langs,.langs-more[open]{display:contents}
  .langs-more[open]::details-content{display:contents}
}

/* ---- honest block (ink band) ---- */
.honest{background:var(--ink);color:var(--cream)}
.honest .h2,.vow h3,.honest a{color:var(--cream)}
.honest .lead,.vow p,.maker{color:var(--on-ink)}
.vows{display:grid;gap:22px;margin-top:32px}
.vow{display:grid;grid-template-columns:30px 1fr;gap:2px 16px;align-items:start}
.vow .ic{width:30px;height:30px;color:var(--orange);grid-row:span 2}
.vow h3{margin-top:2px;font-size:21px;line-height:1.25;font-weight:800}
.vow p{margin-top:6px;font-size:16px;line-height:1.5}
.maker{margin-top:30px;font-size:15px}
.maker a{display:inline-flex;align-items:center;min-height:44px}

/* ---- pricing ---- */
.price-head{max-width:42rem}
.pricing .lead{color:var(--ink)}
.pricing .lead b{font-weight:700}
.timeline{margin-top:22px;padding:20px 18px}
.timeline ol{display:grid;gap:14px}
.timeline li{position:relative;padding-left:42px}
.timeline li::before{content:"";position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.timeline li:first-child::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 5px var(--tint)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:13px;top:34px;bottom:-16px;width:2px;background:var(--line)}
.timeline b{display:block;font:800 18px/1.3 var(--round)}
.timeline li>span{display:block;margin-top:2px;font-size:16px;line-height:1.45;color:var(--soft)}
.timeline b,.timeline li>span,.step p,.vow p,.feat p,.ans{text-wrap:pretty}
.vow h3,.faq summary{text-wrap:balance}
.fine p{text-wrap:pretty}
.plans{display:grid;gap:18px;margin-top:22px}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:26px 22px}
.plan-l{display:contents}
.plan.best{border-color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.plan h3,.includes h3{font-size:19px;font-weight:800}
.tag{position:absolute;top:-14px;left:18px;padding:5px 11px;border-radius:99px;background:var(--mint);color:var(--ink);font:800 13px/1.2 var(--sans)}
.amount{order:2;margin-top:12px;font:900 40px/1 var(--round);letter-spacing:-.025em}
.amount small{font:700 17px var(--sans);letter-spacing:0;color:var(--soft)}
.per{order:3;margin-top:8px;font-size:15.5px;color:var(--soft)}
.pill{order:4;margin-top:10px;padding:6px 12px;border-radius:99px;font:700 14px/1.2 var(--sans);background:var(--tint);color:var(--ttext)}
.pill.plain{background:#F3ECE0;color:var(--ink)}
.includes{padding:20px 20px}
.includes ul{margin-top:12px;display:grid;gap:8px}
.includes li{display:flex;gap:10px;font-size:16px;line-height:1.4}
.includes .ic{width:22px;height:22px;color:var(--mtext)}
.price-get{margin-top:30px}
.terms{margin-top:20px;max-width:46rem;font-size:15px;color:var(--faint)}
.terms p+p{margin-top:8px}

/* ---- FAQ ---- */
.faq-grid{display:grid;gap:28px}
.faq-side p{margin-top:14px;color:var(--soft)}
.faq details{border-bottom:2px solid var(--line)}
.faq details:first-child{border-top:2px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none;font:800 18px/1.3 var(--round)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(var(--ttext),var(--ttext)) center/14px 2.5px no-repeat,linear-gradient(var(--ttext),var(--ttext)) center/2.5px 14px no-repeat,var(--tint)}
.faq [open] summary::after{background-size:14px 2.5px,0 0}
.ans{padding:0 44px 22px 0;color:var(--soft);line-height:1.6}

/* ---- closing band (orange) ---- */
.final{background:var(--orange);text-align:center;padding:84px 0 88px}
.final .h2{color:#fff;font-weight:900;max-width:14ch;margin:0 auto}
.final .store-row{justify-content:center;margin-top:34px}
.final .store-alt,.final .store-note,.final .trial,.final .typed-get{color:var(--ink);font-weight:600}
.final .trial b{font-weight:800}
.final .qr-tile{margin:30px auto 0;text-align:left;border-color:#fff}
.final .typed-get{margin-top:12px}

/* ---- footer ---- */
.site-foot{padding:56px 0 40px;border-top:2px solid var(--line);font-size:15px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.foot-brand{grid-column:1/-1}
.foot-brand p{margin-top:10px;color:var(--soft)}
.site-foot h2{margin-bottom:6px;font:800 13px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.site-foot li>*{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:none}
.site-foot li a:hover{text-decoration:underline}
.site-foot li>span{color:var(--faint);font-style:italic;white-space:nowrap}
.fine{margin-top:36px;padding-top:24px;border-top:2px solid var(--line);color:var(--faint);font-size:13.5px}
.fine p+p{margin-top:6px}

/* ---- phones ---- */
@media (max-width:767px){
  .sec{padding:48px 0}
  .how{margin-top:48px}
  .facts li{padding:12px 6px 11px}
  .feats{gap:32px;margin-top:28px}
  .feats-cta{margin-top:32px}
  .feat{gap:14px}
  .vows{margin-top:28px}
  .maker{margin-top:24px}
  .timeline{padding:18px 16px}
  .timeline ol{gap:12px}
  .timeline li:not(:last-child)::after{bottom:-14px}
  .plans{gap:16px;margin-top:20px}
  .includes{padding:18px 16px}
  .includes ul{gap:6px;margin-top:10px}
  .price-get{margin-top:26px}
  .terms{margin-top:16px;font-size:14.5px}
  .faq-grid{gap:20px}
  .faq summary{min-height:50px;padding:10px 0}
  .final{padding:64px 0 68px}
  .site-foot{padding:40px 0 28px}
  .foot-grid{gap:16px 20px;grid-template-areas:"brand brand" "get legal" "sup legal"}
  .foot-brand{grid-area:brand}
  .f-get{grid-area:get}
  .f-legal{grid-area:legal}
  .f-sup{grid-area:sup}
  .lead{font-size:17px}
  .facts{padding-top:32px}
  .fine{margin-top:24px;padding-top:18px}
  .step{display:grid;grid-template-columns:118px 1fr;gap:4px 16px;align-items:center;padding:8px 14px 8px 8px}
  .step .shot{grid-row:span 2;aspect-ratio:1;width:118px}
  .step h3{margin:6px 0 0;align-self:end;font-size:22px;gap:10px}
  .step p{margin:0 0 6px;align-self:start;font-size:15.5px;line-height:1.45}
  .swipe-mark{right:6px;bottom:auto;top:34px;width:32px;height:32px}
  .swipe-mark .ic{width:18px;height:18px}
  .feat-ic{display:none}
  .panel{background:none}
  .plan{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:20px 16px 16px}
  .plan-l{display:block}
  .plan-l>*{display:block}
  .plan-l .pill{display:inline-block}
  .amount{margin:0;font-size:34px;text-align:right}
  .amount small{display:block;margin-top:4px}
  .per{margin-top:2px}
  .pill{margin-top:8px}
}

/* ---- tablet and up ---- */
@media (min-width:768px){
  .sec{padding:112px 0}
  .lead{font-size:20px}
  .facts ul{grid-template-columns:repeat(4,1fr);gap:14px}
  .facts li{padding:22px 10px 20px}
  .facts span{font-size:15px}
  .steps{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .step{padding:10px 10px 22px}
  .feats{gap:64px;margin-top:44px}
  .feat{grid-template-columns:1fr 1fr;gap:56px}
  .feat:nth-child(even) .feat-txt{order:2}
  .feat p{font-size:18px}
  .panel{display:grid;place-items:center;padding:52px 32px}
  .crop{width:min(480px,100%)}
  .langs{gap:10px}
  /* desktop: one continuous chip cloud (where ::details-content is unsupported the second list starts a new row) */
  .langs-all{display:flex;flex-wrap:wrap;gap:10px}
  .langs-all .langs,.langs-more[open]{display:contents}
  .langs li{padding:8px 15px;font-size:15px}
  .vows{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  .vow{display:block;padding:24px;border-radius:20px;background:#352E25;border:2px solid #413930}
  .vow h3{margin-top:14px}
  .timeline{margin-top:28px;padding:30px 32px}
  .timeline ol{grid-template-columns:repeat(3,1fr);gap:28px}
  .timeline li{padding:44px 0 0}
  .timeline li:not(:last-child)::after{left:36px;right:-20px;top:13px;bottom:auto;width:auto;height:2px}
  .plans{grid-template-columns:1fr 1fr 1.15fr;gap:16px}
  .includes{padding:24px 22px}
  .price-get{margin-top:34px}
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:64px}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .foot-brand{grid-column:auto}
}
@media (min-width:768px){.langs-more[open]::details-content{display:contents}}
@media (min-width:1024px){
  .feats{gap:80px}
  .final .h2{font-size:clamp(48px,5vw,68px)}
  .final-get{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:40px}
  .final .store-row{margin-top:0}
  .final .qr-tile{margin:0}
}