/* Gistmo site v2. Feature page template (brief 2.1), shared by all 8 feature pages.
   Owned by P2. P3 reads it and puts page-only extras in features-extra.css.
   Page order: hero (.fhero) > statement (.fstate) > how it works (#how, .fgrid) >
   second group (.fsplit or a .story) > FAQ (.ffaq) > more features (.fmore) > CTA band (.fcta). */

/* ---------- 1. Hero ---------- */
.fhero{overflow-x:clip}
.fhero .head{max-width:860px}
.fhero h1{max-width:15ch;margin-inline:auto}
.fhero .lead{max-width:48ch}
.fhero__media{position:relative;width:var(--w-content);margin:var(--s-10) auto 0}
.fhero__media.wash::before{inset:-8% -10% -14%;border-radius:0;background:radial-gradient(closest-side,var(--fc,var(--accent)),transparent);opacity:.14}
@media (max-width:734px){.fhero__media.wash::before{inset:-6% -12% -10%}}
.fhero .photo-card{max-width:1040px;margin-inline:auto}
.fhero .photo-card__img{--ar:16/9}
@media (max-width:734px){
  .fhero__media{margin-top:var(--s-9)}
  .fhero .photo-card{padding:16px}
  .fhero .photo-card__img{--ar:var(--ar-m,4/5)}
  .fhero .photo-card__img img{object-position:var(--op-m,var(--op,50% 30%))}
}
/* The phone that leans over the right edge of the hero photo (desktop and tablet). */
.fhero__phone{position:absolute;z-index:3;right:clamp(16px,5%,64px);bottom:-48px;--phone-w:clamp(210px,23vw,250px)}
@media (max-width:833px){.fhero__phone{display:none}}
.fhero .bubble{max-width:min(250px,60%)}

/* Row of three phones; a sideways snap row at 833px and below. */
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,3.4vw,48px);list-style:none;margin:0;padding:0 0 24px}
.phones>li{flex:none;display:flex;flex-direction:column;align-items:center}
.phones .phone{--phone-w:clamp(220px,22vw,272px)}
.phones>li:nth-child(2) .phone{--phone-w:clamp(240px,25vw,304px)}
.phones .cap{margin-top:24px;font-size:var(--t-small);font-weight:500;color:var(--text-2);text-align:center}
.phones:focus-visible{outline-offset:-2px}
@media (max-width:833px){
  .phones{justify-content:flex-start;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter) 48px;scroll-padding-inline:var(--gutter)}
  .phones::-webkit-scrollbar{display:none}
  .phones>li{scroll-snap-align:center}
  .phones .phone,.phones>li:nth-child(2) .phone{--phone-w:236px}
}

/* ---------- 3. Statement ---------- */
.fstate{padding-block:calc(var(--sec) * .9)}

/* ---------- 4. How it works ---------- */
.fgrid{margin-top:var(--s-9)}
.fgrid .feature-card{min-height:240px}
.fgrid .feature-card p{max-width:40ch}
@media (max-width:734px){.fgrid .feature-card{min-height:0}}

/* ---------- 5. Second group: split ---------- */
.fsplit .head h2{max-width:14ch}
.fsplit .head .sub{max-width:28ch}
.fsplit__media{display:flex;justify-content:center;position:relative}
.fsplit__media .phone{--phone-w:min(300px,78vw)}
.fsplit__media .vid{width:min(380px,100%);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt)}
.fsplit__media .vid video{width:100%;height:auto;aspect-ratio:var(--var,432/820);object-fit:cover}
.fsplit__media .bubble{max-width:220px}
.flist{list-style:none;margin:var(--s-7) 0 0;padding:0;max-width:46ch}
.flist li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--hair)}
.flist li:last-child{border-bottom:1px solid var(--hair)}
.flist--grid{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
.flist--grid li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--hair)}
@media (max-width:734px){.flist--grid{grid-template-columns:minmax(0,1fr)}.flist--grid li:nth-last-child(2):nth-child(odd){border-bottom:0}}
.flist .ico{width:22px;height:22px;margin-top:2px;color:var(--accent-ink)}
.flist b{display:block;font-weight:600;color:var(--text)}
.flist span{display:block;color:var(--text-2)}
.fsplit .ctas{margin-top:var(--s-7)}
/* A sticky story (at most one per page) can stand in for the split. */
.fstory{margin-top:var(--s-9)}
.story__static .phone{--phone-w:220px;aspect-ratio:9/12;margin-inline:0}
/* Black bezels need a visible edge on a black page. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{box-shadow:var(--shadow-phone),0 0 0 1.5px rgba(255,255,255,.22)}}
:root[data-theme="dark"] .phone{box-shadow:var(--shadow-phone),0 0 0 1.5px rgba(255,255,255,.22)}

/* ---------- 6. FAQ ---------- */
.ffaq .faq{margin-top:var(--s-7)}
.ffaq .more{margin-top:var(--s-4)}

/* ---------- 7. More features ---------- */
.fmore .grid{margin-top:var(--s-7)}
.fmore .link-card:hover b{color:var(--accent-ink)}
.fmore .link-card .tag{margin-left:4px}

/* ---------- 8. CTA band ---------- */
.fcta h2{max-width:16ch;margin-inline:auto}

/* ---------- App screen mockups (HTML inside .phone__screen, always aria-hidden) ---------- */
.mk-bar{display:flex;align-items:center;gap:10px;padding:6px 12px 10px;border-bottom:1px solid var(--hair);font-weight:600;font-size:15px;line-height:1.25}
.mk-bar>.ico{width:20px;height:20px;color:var(--accent-ink)}
.mk-bar small{display:block;font-weight:400;font-size:14px;color:var(--text-2)}
.mk-bar__end{margin-left:auto;display:flex;gap:14px;color:var(--accent-ink)}
.mk-bar__end .ico{width:20px;height:20px}
.mk-bar .av{width:32px;height:32px}
.mk-title{padding:4px 16px 8px;font-size:24px;font-weight:700;letter-spacing:-.02em}
.mk-pin{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.3;background:var(--bg)}
.mk-pin .ico{width:16px;height:16px;color:var(--accent-ink)}
.mk-pin span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr__body .msg{position:relative}
.msg .who,.mk-poll .who{display:block;font-size:14px;font-weight:700;color:var(--accent-ink)}
.msg .tick{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.msg--out time{text-align:right}
.mk-re{position:absolute;right:8px;bottom:-14px;display:flex;gap:2px;padding:2px 6px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 2px var(--bg-alt)}
.msg--out .mk-re{right:auto;left:8px}
.mk-re img{width:16px;height:16px}
.msg.has-re{margin-bottom:12px}
.mk-quote{display:block;margin:-2px -4px 6px;padding:4px 8px;border-left:3px solid currentColor;border-radius:6px;background:rgba(127,127,127,.14);font-size:14px}
.mk-gif{align-self:flex-start;position:relative;display:grid;place-items:center;width:150px;height:96px;flex:none;border-radius:16px;background:linear-gradient(135deg,#F9B233,#E8505B);color:#fff;font-size:28px;font-weight:700;letter-spacing:-.02em}
.mk-gif em{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:14px;font-weight:700;background:rgba(0,0,0,.35);border-radius:6px;padding:0 6px}
.mk-link{align-self:flex-end;width:80%;flex:none;border-radius:16px;overflow:hidden;background:var(--bg);font-size:14px;line-height:1.3}
.mk-link__top{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.mk-link__top .ico{width:14px;height:14px}
.mk-link__body{padding:8px 10px;font-weight:600}
.mk-link__body small{display:block;font-weight:400;color:var(--text-2);font-size:14px}
.mk-voice{display:flex;align-items:center;gap:8px}
.mk-voice .play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:currentColor;flex:none}
.mk-voice .play .ico{width:12px;height:12px;color:var(--bubble-out)}
.msg--in .mk-voice .play .ico{color:var(--bubble-in)}
.mk-voice .wave{display:flex;align-items:center;gap:2px;height:22px}
.mk-voice .wave i{display:block;width:3px;border-radius:2px;background:currentColor;opacity:.75}
.mk-notice{align-self:center;padding:4px 10px;border-radius:10px;background:var(--bg);color:var(--text-2);font-size:14px;line-height:1.3;text-align:center;max-width:92%}
.mk-notice .ico{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.mk-input{display:flex;align-items:center;gap:10px;margin:8px 12px 16px}
.mk-input .ico{width:22px;height:22px;color:var(--accent-ink);flex:none}
.mk-input span{flex:1;height:36px;display:flex;align-items:center;padding:0 14px;border-radius:18px;background:var(--bg-alt);color:var(--text-2);font-size:14px}
/* Poll */
.mk-poll{width:84%;flex:none;align-self:flex-start;padding:10px 12px 12px;border-radius:18px;border-bottom-left-radius:6px;background:var(--bubble-in);font-size:14px;line-height:1.3}
.mk-poll b{display:block;font-size:15px;margin-bottom:4px}
.mk-poll__opt{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.mk-poll__opt img{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.mk-poll__bar{height:6px;margin-top:4px;border-radius:3px;background:var(--hair);overflow:hidden}
.mk-poll__bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--accent)}
.mk-poll small{display:block;margin-top:8px;color:var(--text-2)}
/* Lists (calls, chats) */
.mk-list{list-style:none;margin:0;padding:0 12px}
.mk-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.3}
.mk-row b{display:block;font-weight:600}
.mk-row small{display:block;font-size:14px;color:var(--text-2)}
.mk-row .miss{color:var(--danger)}
.mk-row>.ico{margin-left:auto;width:20px;height:20px;color:var(--accent-ink)}
.mk-tabs{display:flex;gap:8px;padding:0 16px 10px}
.mk-tabs span{padding:4px 12px;border-radius:14px;background:var(--bg-alt);font-size:14px;font-weight:600;color:var(--text-2)}
.mk-tabs span:first-child{background:var(--pill);color:var(--pill-ink)}
/* Full-bleed dark screens: calls, Status, Snaps */
.mk-dark{position:absolute;inset:0;display:flex;flex-direction:column;background:#0B0B0D;color:#F5F5F7}
.mk-dark>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 30%)}
.mk-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),transparent 26%,transparent 66%,rgba(0,0,0,.6));pointer-events:none}
.mk-dark>*:not(img){position:relative;z-index:2}
.mk-top{padding:52px 16px 0;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;line-height:1.25}
.mk-top small{display:block;font-size:14px;font-weight:400;opacity:.85}
.mk-bars{display:flex;gap:4px;padding:46px 12px 0}
.mk-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.mk-bars i.done{background:#fff}
.mk-bars+.mk-top{padding-top:12px}
.mk-ctrls{margin-top:auto;display:flex;justify-content:center;gap:12px;padding:0 10px 28px}
.mk-ctrls span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2)}
.mk-ctrls .ico{width:22px;height:22px}
.mk-ctrls .end{background:#E5484D}
.mk-self{position:absolute!important;right:12px;top:104px;width:70px;height:96px;border-radius:14px;background:linear-gradient(160deg,#3A4A6B,#1D2433);border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:14px;font-weight:700}
.mk-float{position:absolute!important;width:30px;height:30px}
.mk-float img{width:100%;height:100%}
.mk-ring{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding-top:40px}
.mk-ring .av{width:96px;height:96px;font-size:32px;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 0 22px rgba(255,255,255,.04)}
.mk-ring b{margin-top:22px;font-size:24px;letter-spacing:-.02em}
.mk-ring small{font-size:14px;opacity:.8}
.mk-answer{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding:0 24px 30px;text-align:center;font-size:14px}
.mk-answer span{display:flex;flex-direction:column;align-items:center;gap:6px}
.mk-answer i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16)}
.mk-answer .sm i{width:40px;height:40px}
.mk-answer .no i{background:#E5484D}
.mk-answer .yes i{background:#30A46C}
.mk-answer .ico{width:24px;height:24px}
.mk-answer .sm .ico{width:18px;height:18px}
.mk-reply{margin-top:auto;display:flex;align-items:center;gap:10px;padding:0 12px 24px}
.mk-reply span{flex:1;height:38px;display:flex;align-items:center;padding:0 14px;border-radius:19px;border:1.5px solid rgba(255,255,255,.6);font-size:14px}
.mk-reply img{width:26px;height:26px}
.mk-textstatus{flex:1;display:grid;place-items:center;padding:20px 22px;text-align:center;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.mk-tools{position:absolute!important;right:10px;top:96px;display:flex;flex-direction:column;gap:12px}
.mk-tools span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.4)}
.mk-tools .ico{width:18px;height:18px}
.mk-sticker{position:absolute!important;left:16px;top:56%;padding:6px 12px;border-radius:12px;background:#fff;color:#1D1D1F;font-size:16px;font-weight:700;transform:rotate(-6deg)}
.mk-draw{position:absolute!important;left:8%;top:22%;width:56%;height:auto;color:#2BC4D6}
.mk-send{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 26px;font-size:14px;font-weight:600}
.mk-send .chip-t{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:14px;background:rgba(0,0,0,.45)}
.mk-send .chip-t .ico{width:16px;height:16px}
.mk-send .go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:18px;background:#2BC4D6;color:#00262B}
.mk-send .go .ico{width:16px;height:16px}

/* Floating emoji in the call mockup drift up gently; off for reduced motion and captures. */
@media (prefers-reduced-motion:no-preference){
  .mk-float{animation:mk-rise 5s var(--ease) infinite}
  .mk-float+.mk-float{animation-delay:1.7s}
  .mk-float+.mk-float+.mk-float{animation-delay:3.4s}
}
@keyframes mk-rise{0%{opacity:0;transform:translateY(24px) scale(.7)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-90px)}}
html.wd .mk-float{animation:none}