/* /how-it-works/ | page styles, prefixed .how-* | logical properties only | no text under 13px */
.how-tabs{margin-block-end:var(--s-6);flex-wrap:wrap}
.how-tabs button{min-block-size:44px;padding-inline:20px}
.how-panel[hidden]{display:none}
.how-h2{margin-block-end:var(--s-4)}
.how-intro{margin:0 0 var(--s-4)}
.how-strip{list-style:none;margin:0;padding:0;counter-reset:how;display:grid;gap:10px}
.how-strip li{counter-increment:how;display:flex;gap:12px;align-items:center;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);color:var(--ink);font-weight:var(--fw-semibold);font-size:var(--fs-16);line-height:1.35}
.how-strip li::before{content:counter(how);flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:var(--fw-bold,700);font-size:var(--fs-15)}
.how-strip li[hidden]{display:none}
@media (min-width:900px){.how-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.how-strip li{flex-direction:column;align-items:flex-start;padding:16px;gap:10px}}
/* steps beside the pinned picture: one column on every width (the picture is added by stepper-sync) */
@media (min-width:900px){.how-strip.ahs-list{grid-template-columns:minmax(0,1fr);gap:10px}.how-strip.ahs-list li{flex-direction:row;align-items:center;padding:10px 14px;gap:12px}.ahs.is-live .how-strip.ahs-list{gap:0}.ahs.is-live .how-strip.ahs-list li{box-shadow:none;margin-block:6px}}
.how-strip .ahs-t{flex:1 1 auto;min-inline-size:0}
.how-strip .ahs-n{margin-inline-start:auto}
/* accordion mode (stepper-sync, mode accordion): four steps, one open at a time, beside the pinned Sample picture */
.how-acc{list-style:none;margin:0;padding:0;counter-reset:acc;display:grid;gap:10px}
.how-acc .ahs-step{counter-increment:acc;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.how-acc .ahs-btn{position:relative;font-size:var(--fs-16);line-height:1.35;border-radius:var(--r-md)}
.how-acc .ahs-btn::before{content:counter(acc);flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:var(--fw-bold,700);font-size:var(--fs-15)}
.ahs.is-live .how-acc .ahs-btn::after{content:"";margin-inline-start:auto;flex:none;inline-size:10px;block-size:10px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:rotate(45deg)}
.ahs.is-live .how-acc .ahs-btn[aria-expanded="true"]::after{transform:rotate(225deg)}
.how-acc .ahs-step.is-active{border-color:var(--primary)}
.how-acc .ahs-body{margin:0;font-size:var(--fs-15);line-height:1.5}
.ahs.is-live.ahs-acc .how-acc .ahs-step:not(.is-active){opacity:1}
.ahs.is-live.ahs-acc .how-acc .ahs-step{display:block;margin-block:0;border-block-end:1px solid var(--border)}
.how-acc .ahs-n{padding:0 14px 12px}
/* the pinned picture is a real recorded screen in a phone frame; the phone video sits under the steps on every width */
.ahs-phone{margin:0;display:grid;gap:var(--s-3);justify-items:center}
.ahs-shot{display:block;inline-size:min(100%,260px);block-size:auto;aspect-ratio:390/844;object-fit:cover;border:6px solid var(--ink);border-radius:32px;background:var(--card-2);box-shadow:var(--shadow-2,var(--shadow-1))}
.ahs-cap{display:flex;gap:8px;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:var(--fs-13)}
.how-phone{margin:var(--s-6) auto 0;display:grid;gap:var(--s-3);justify-items:center;max-inline-size:220px}
.how-phone-v{display:block;inline-size:100%;block-size:auto;aspect-ratio:360/780;object-fit:cover;border:6px solid var(--ink);border-radius:28px;background:var(--card-2);box-shadow:var(--shadow-1)}
.how-no{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.how-no li{display:flex;gap:10px;align-items:center;color:var(--ink-2)}
.how-no .icon{flex:none;color:var(--danger-ink)}
.faq details>div p{margin:0 0 var(--s-3)}
.feature h3[data-i18n^="refund"]{font-size:var(--fs-18);line-height:1.35;font-family:var(--font-sans);font-weight:var(--fw-semibold)}
@media (max-width:520px){.how-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-md)}.how-tabs button{inline-size:100%}}
/* flagged blocks stay hidden until site-flags.js un-hides them, even where a class sets display */
[data-flag][hidden],[data-flag-off][hidden]{display:none!important}