/* Generated by scripts/site/build_assets.js from assets/src/css/how.css. Do not edit; edit the source. */
/* How it works page — builds on base, v3, pages, info */
.adm-root .hw-hero { padding: 76px 0 30px; text-align: center; position: relative; overflow: hidden; }
.adm-root .hw-hero::before { content: ''; position: absolute; inset: -60px 0 auto; height: 520px; background: radial-gradient(520px 260px at 50% 20%, var(--glowB), transparent 70%); pointer-events: none; }
.adm-root .hw-hero .wrap { position: relative; } .adm-root .hw-hero h1 { font-size: 64px; margin: 14px auto 18px; max-width: 900px; } .adm-root .hw-hero .lead { margin: 0 auto; max-width: 660px; }
.adm-root .loop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 46px; flex-wrap: wrap; }
.adm-root .lp { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; padding: 18px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line2); animation: adm-lpg 8s infinite; }
.adm-root .lp i { width: 14px; height: 14px; border-radius: 50%; background: var(--line2); margin-bottom: 6px; animation: adm-lpd 8s infinite; }
.adm-root .lp b { font: 700 17px Sora; } .adm-root .lp small { color: var(--mut); font-size: 12.5px; }
.adm-root .l2, .adm-root .l2 i { animation-delay: 2s; } .adm-root .l3, .adm-root .l3 i { animation-delay: 4s; } .adm-root .l4, .adm-root .l4 i { animation-delay: 6s; }
@keyframes adm-lpg { 0%, 22%, 100% { border-color: var(--line2); transform: none; } 3%, 18% { border-color: var(--gold); transform: translateY(-4px); } }
@keyframes adm-lpd { 0%, 22%, 100% { background: var(--line2); } 3%, 18% { background: var(--gold); } }
html[data-adm-theme="light"] .adm-root .lp { animation-name: adm-lpgl; } html[data-adm-theme="light"] .adm-root .lp i { animation-name: adm-lpdl; }
@keyframes adm-lpgl { 0%, 22%, 100% { border-color: var(--line2); transform: none; } 3%, 18% { border-color: var(--blue1); transform: translateY(-4px); } }
@keyframes adm-lpdl { 0%, 22%, 100% { background: var(--line2); } 3%, 18% { background: var(--blue1); } }
.adm-root .ar1 { width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--mut) 0 4px, transparent 4px 8px); }

.adm-root .hwstep { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 50px 0; border-bottom: 1px solid var(--line); }
.adm-root .hwstep:last-child { border-bottom: 0; } .adm-root .hwstep.rev .hwt { order: 2; }
.adm-root .hwt em { font-style: normal; font: 700 13px 'Inter Tight'; letter-spacing: .1em; text-transform: uppercase; color: var(--hl); }
.adm-root .hwt h2 { font-size: 40px; line-height: 1.08; margin: 10px 0 14px; } .adm-root .hwt p { color: var(--mut); font-size: 17px; line-height: 1.7; } .adm-root .hwt p.small { font-size: 14px; margin-top: 12px; }
.adm-root .hwl { list-style: none; display: grid; gap: 8px; margin-top: 20px; }
.adm-root .hwl li { padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; font-style: italic; width: fit-content; }
.adm-root .note2b { margin-top: 20px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line2); font-size: 14.5px; color: var(--mut); } .adm-root .note2b b { display: block; color: var(--ink); margin-bottom: 2px; }
.adm-root .hwv { min-height: 300px; border-radius: 28px; background: var(--bg2); border: 1px solid var(--line); display: grid; place-items: center; padding: 30px; position: relative; overflow: hidden; }
.adm-root .hwv::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, var(--glowA), transparent); }
.adm-root .hwv > div { position: relative; }
/* v1: phone with a voice note */
.adm-root .ph { width: 270px; border-radius: 24px; background: var(--bg); border: 1px solid var(--line2); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.adm-root .phh { display: flex; align-items: center; gap: 8px; font-size: 13px; } .adm-root .phh span { width: 26px; height: 26px; border-radius: 8px; background: var(--blue); }
.adm-root .vn { justify-self: end; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: var(--blue); color: #fff; }
.adm-root .vn i { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.adm-root .wv2 { display: flex; gap: 2px; align-items: center; height: 20px; } .adm-root .wv2 s { width: 3px; border-radius: 2px; background: #fff; text-decoration: none; height: 40%; animation: adm-wvh 1.1s ease-in-out infinite; }
.adm-root .wv2 s:nth-child(3n) { animation-delay: -.4s; } .adm-root .wv2 s:nth-child(2n) { animation-delay: -.7s; } .adm-root .wv2 s:nth-child(5n) { animation-delay: -.2s; }
@keyframes adm-wvh { 50% { height: 100%; } } .adm-root .vn small { font-size: 11px; opacity: .85; }
.adm-root .tx { font-size: 12.5px; color: var(--mut); padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px dashed var(--line2); }
/* v2: plan */
.adm-root .plan { width: 300px; padding: 20px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.adm-root .plan > b { font: 700 15px Sora; } .adm-root .plan ol { list-style: none; display: grid; gap: 9px; margin: 14px 0; }
.adm-root .plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.adm-root .plan li::before { content: '✓'; width: 18px; height: 18px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #22C55E; color: #fff; }
.adm-root .plan li.q { color: var(--hl); font-weight: 600; } .adm-root .plan li.q::before { content: '?'; background: var(--gold); color: var(--black); }
.adm-root .ans { display: flex; justify-content: flex-end; } .adm-root .ans span { padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
/* v3: preview frame */
.adm-root .pvf { width: 280px; display: grid; gap: 12px; }
.adm-root .pvp { border-radius: 20px; overflow: hidden; background: #F7EFE6; color: #2A1A12; box-shadow: var(--shadow); padding-bottom: 14px; }
.adm-root .sh1 { height: 120px; background: repeating-linear-gradient(45deg, #7A2E3B 0 10px, #A0465A 10px 20px); position: relative; }
.adm-root .sh1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.3)); }
.adm-root .pvp b { display: block; font: 700 18px Georgia, serif; margin: 12px 14px 2px; } .adm-root .pvp small { display: block; margin: 0 14px; font-size: 12px; color: #6B5545; }
.adm-root .pvp span { display: inline-block; margin: 10px 14px 0; font-size: 11.5px; font-weight: 700; color: #fff; background: #2F6F6A; padding: 6px 10px; border-radius: 8px; }
.adm-root .pvc { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adm-root .pvc span { padding: 8px 12px; border-radius: 12px; font-size: 12.5px; background: var(--blue); color: #fff; font-weight: 600; }
.adm-root .pvc .ok2 { background: rgba(34,197,94,.15); color: #22C55E; animation: adm-pop .5s 1s var(--spring) both; }
/* v4: approve + history */
.adm-root .hist { width: 310px; padding: 18px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.adm-root .hb { display: flex; gap: 8px; margin-bottom: 14px; } .adm-root .hb span { padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; border: 1px solid var(--line2); }
.adm-root .hb .go { background: var(--gold); color: var(--black); border-color: var(--gold); animation: adm-tvp 2.4s ease-in-out infinite; }
.adm-root .hist ul { list-style: none; display: grid; gap: 4px; }
.adm-root .hist li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.adm-root .hist li i { width: 10px; height: 10px; border-radius: 50%; } .adm-root .hist .c1 { background: #22C55E; } .adm-root .hist .c2 { background: var(--blue2); } .adm-root .hist .c3 { background: var(--brown-l); }
.adm-root .hist em { font-style: normal; color: var(--mut); font-size: 12px; } .adm-root .hist u { text-decoration: none; font-size: 12px; font-weight: 700; color: var(--hl); }

.adm-root .behind .lay3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 26px; border: 1px solid var(--line2); overflow: hidden; }
.adm-root .lay3 > div { padding: 30px; background: var(--card); position: relative; } .adm-root .lay3 > div + div { border-left: 1px solid var(--line2); }
.adm-root .lay3 .ln { font: 800 44px Sora; color: transparent; -webkit-text-stroke: 1.5px var(--line2); display: block; margin-bottom: 14px; }
.adm-root .lay3 b { font: 700 19px Sora; display: block; margin-bottom: 8px; } .adm-root .lay3 p { color: var(--mut); font-size: 15px; line-height: 1.65; }
.adm-root .uniq { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); font-size: 15px; }
.adm-root .uniq svg { width: 28px; height: 28px; flex: none; color: var(--gold); } html[data-adm-theme="light"] .adm-root .uniq svg { color: #9A6A00; }

.adm-root .week { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.adm-root .week h2 { font-size: 42px; margin-bottom: 14px; }
.adm-root .wk { list-style: none; display: grid; gap: 0; position: relative; padding-left: 28px; }
.adm-root .wk::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold), var(--blue2)); }
.adm-root .wk li { position: relative; padding: 0 0 22px 18px; display: grid; grid-template-columns: 80px 1fr; gap: 2px 14px; }
.adm-root .wk li::before { content: ''; position: absolute; left: -27px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--gold); }
.adm-root .wk em { font-style: normal; font: 700 13px 'Inter Tight'; color: var(--hl); grid-row: span 2; padding-top: 2px; } .adm-root .wk b { font-size: 16.5px; } .adm-root .wk span { color: var(--mut); font-size: 14.5px; line-height: 1.55; }

.adm-root .ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.adm-root .ctl > div { padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.adm-root .ctl i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; margin-bottom: 16px; } .adm-root .ctl i svg { width: 21px; height: 21px; }
.adm-root .ctl b { font: 700 17px Sora; } .adm-root .ctl p { color: var(--mut); font-size: 14.5px; line-height: 1.6; margin-top: 6px; }

.adm-root .cta.cta-how { padding-top: 60px; }
.adm-root .chat3 { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; position: relative; z-index: 1; }
.adm-root .chat3 span { padding: 8px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; opacity: 0; animation: adm-pop .5s var(--spring) forwards; }
.adm-root .chat3 .m1 { background: var(--blue); color: #fff; align-self: center; transform: translateX(40px); animation-delay: .3s; }
.adm-root .chat3 .m2 { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); animation-delay: 1s; }
.adm-root .chat3 .m3 { background: var(--gold); color: var(--black); animation-delay: 1.7s; }

@media (max-width: 1000px) {
  .adm-root .hw-hero h1 { font-size: 42px; } .adm-root .hwstep, .adm-root .week { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; } .adm-root .hwstep.rev .hwt { order: 0; }
  .adm-root .hwt h2, .adm-root .week h2 { font-size: 30px; } .adm-root .behind .lay3 { grid-template-columns: 1fr; } .adm-root .lay3 > div + div { border-left: 0; border-top: 1px solid var(--line2); }
  .adm-root .ctl { grid-template-columns: 1fr 1fr; } .adm-root .ar1 { display: none; } .adm-root .lp { width: calc(50% - 6px); }
}
@media (max-width: 600px) { .adm-root .ctl { grid-template-columns: 1fr; } .adm-root .hwv { padding: 20px; min-height: 0; } .adm-root .wk li { grid-template-columns: 1fr; } .adm-root .wk em { grid-row: auto; } }