/* Pages and components added with the Nov 2026 kit, on top of site.css (the previous design).
   site.css owns the base, header, footer, buttons, sections and the homepage; this file adds the inner
   pages, plan cards, the early-access form, FAQ, Ask Snappy and the HTML phone screens. */
:root{--purple:#7C3AED;--purple-d:#5B21B6;--plum:#140B2E;--plum-2:#1D1142;--plum-3:#0E0824;--white:#FFFBF8;--neutral:#F4F1FA;--muted:#6B6385;--line-2:#DCCBFA;--hh:68px}
video{max-width:100%;height:auto;display:block}
.muted{color:var(--muted)}
.kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.label{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(201,179,255,.4);background:rgba(168,85,247,.12);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#DCCBFF}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--purple)}
.link .i{width:16px;height:16px;transition:transform .2s}
.link:hover .i{transform:translateX(3px)}
.btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.18)}
.btn-light{background:#fff;color:var(--purple-d)}
.btn-light:hover{transform:translateY(-1px)}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.cta-row.center{justify-content:center}
.fv-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 78% 30%,rgba(168,85,247,.32),transparent 62%),radial-gradient(700px 480px at 6% 92%,rgba(113,55,216,.42),transparent 62%)}
.film-v{width:100%;height:100%;object-fit:cover}
.film-cap{position:absolute;left:50%;bottom:66px;transform:translate(-50%,6px);max-width:88%;width:max-content;padding:8px 16px;border-radius:12px;background:rgba(14,9,22,.74);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:clamp(.95rem,.75rem + .7vw,1.3rem);line-height:1.3;text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.film-cap.on{opacity:1;transform:translate(-50%,0)}
.film-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.film-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.film-btn:hover{background:rgba(255,255,255,.28)}
.film-btn .i{width:18px;height:18px}
.film-btn[aria-pressed="false"]{opacity:.55}
.film-bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}
.film-bar i{display:block;height:100%;width:0;background:#fff;border-radius:4px}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:14px 24px;border:0;border-radius:999px;background:#fff;color:var(--purple-d);font-weight:700;cursor:pointer;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.film-play[hidden],.film-btn[hidden]{display:none}
.film-play .i{width:20px;height:20px;fill:currentColor}
.sec.tight{padding-top:8px}
.lav{background:linear-gradient(180deg,#F7F2FF,#F2EAFE)}
.warm{background:var(--white)}
.night{background:var(--plum);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.lede-sm{font-size:1.15rem;color:var(--muted);margin:12px 0 24px}
.phone{--pw:300px;width:var(--pw);aspect-ratio:9/19.5;padding:calc(var(--pw)*.033);border-radius:calc(var(--pw)*.15);background:#120E19;box-shadow:inset 0 0 0 2px #2D2539,0 0 0 1px rgba(0,0,0,.35),0 36px 70px -30px rgba(46,16,101,.6);position:relative;flex:none}
.phone::before{content:"";position:absolute;z-index:4;top:calc(var(--pw)*.058);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--pw)*.08);border-radius:40px;background:#000}
.phone-scr{position:relative;height:100%;border-radius:calc(var(--pw)*.117);overflow:hidden;background:#FBF9FE;color:var(--ink);display:flex;flex-direction:column;font-size:calc(var(--pw)*.042);line-height:1.35;letter-spacing:0}
.phone-scr.stacked{display:block}
.phone.sm{--pw:250px}
.phone.dark .phone-scr{background:#110C1A;color:#fff}
.phone-scr .i{width:1.25em;height:1.25em}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;animation:scrIn .45s ease both}
.scr[hidden]{display:none}
.phone-scr img{display:block}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:1.15em 2em .5em;font-size:.84em;font-weight:600;flex:none}
.ph-status span{display:flex;gap:.25em}
.ph-status i{width:.42em;height:.42em;border-radius:50%;background:currentColor;opacity:.75}
.ph-status.dk{color:#fff}
.ph-head{display:flex;align-items:center;gap:.7em;padding:.5em 1.1em .8em;border-bottom:1px solid #EEE8F6;background:#fff;flex:none}
.ph-av{width:2.6em;height:2.6em;border-radius:50%;object-fit:cover;flex:none}
.ph-av.s{width:1.9em;height:1.9em}
.ph-head b{display:block;font-size:1.05em}
.ph-head span{display:block;font-size:.78em;color:#7C728A}
.ph-appbar{display:flex;align-items:center;gap:.45em;padding:.45em 1em .75em;border-bottom:1px solid #EEE8F6;background:#fff;font-size:1.04em;flex:none}
.ph-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.65em;padding:.85em 1.05em 1.1em;overflow:hidden}
.ph-chat{background:#F6F2FC}
.ph-b{max-width:86%;padding:.6em .85em;border-radius:1.15em;font-size:.95em;margin:0}
.ph-b.s{align-self:flex-start;background:#fff;border:1px solid #ECE4F7;border-bottom-left-radius:.3em}
.ph-b.u{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:.3em}
.ph-card{padding:.75em .9em;border-radius:1em;background:#fff;border:1px solid #E3D6F7}
.ph-card b{display:block;font-size:1.04em}
.ph-card>span{font-size:.8em;color:#7C728A}
.ph-card ul{list-style:none;margin:.45em 0 0;padding:0;display:grid;gap:.25em}
.ph-card li{display:flex;align-items:center;gap:.4em;font-size:.86em}
.ph-card .i{width:1.05em;height:1.05em;color:#16A34A;stroke-width:2.4}
.ph-chips{display:flex;flex-wrap:wrap;gap:.35em}
.ph-chips span{padding:.32em .7em;border-radius:999px;background:#fff;border:1px solid #DCCBFA;color:#5B2BB5;font-size:.8em;font-weight:600}
.ph-input{display:flex;align-items:center;justify-content:space-between;margin:.2em .9em 1.25em;padding:.65em 1em;border-radius:999px;background:#fff;border:1px solid #E3D6F7;color:#9A90A8;font-size:.9em;flex:none}
.ph-input .i{color:#7137D8}
.ph-cover{position:relative;height:33%;flex:none;margin-top:-2.6em}
.ph-cover img{width:100%;height:100%;object-fit:cover}
.ph-tag{position:absolute;left:.85em;bottom:.8em;display:flex;align-items:center;gap:.3em;padding:.3em .65em;border-radius:999px;background:rgba(10,6,16,.6);color:#fff;font-size:.76em;font-weight:600}
.ph-tag .i{width:1em;height:1em}
.ph-title{margin:0;font-size:1.35em;font-family:var(--head);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.ph-sub{margin:-.45em 0 0;font-size:.84em;color:#7C728A}
.ph-sub.strong{margin:0;font-size:1.06em;font-weight:700;color:var(--ink)}
.ph-rows{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.ph-rows li{display:flex;align-items:center;gap:.65em;padding:.5em .65em;border-radius:.85em;background:#fff;border:1px solid #EEE7F7}
.ph-rows .i{width:2em;height:2em;padding:.42em;border-radius:.6em;background:#F2EAFE;color:#7137D8}
.ph-rows b{display:block;font-size:.9em}
.ph-rows span{font-size:.78em;color:#7C728A}
.ph-btns{display:flex;gap:.5em;margin:auto 0 0}
.ph-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;padding:.75em;border-radius:999px;background:var(--grad);color:#fff;font-weight:600;font-size:.92em}
.ph-btn.ghost{flex:0 0 auto;padding:.75em 1.15em;background:#fff;color:#5B2BB5;border:1px solid #DCCBFA}
.ph-btn .i{width:1.1em;height:1.1em}
.ph-people{display:flex}
.ph-in{width:2.25em;height:2.25em;flex:none;display:grid;place-items:center;border-radius:50%;background:hsl(var(--h) 52% 50%);color:#fff;font-weight:700;font-size:.86em;border:2px solid #fff}
.ph-people .ph-in+.ph-in{margin-left:-.55em}
.ph-qr{display:flex;align-items:center;gap:.85em;padding:.75em;border-radius:1em;background:#fff;border:1px solid #EEE7F7}
.ph-code{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5px;width:5.2em;height:5.2em;padding:.35em;flex:none;border-radius:.55em;background:#fff;border:1px solid #E3D6F7}
.ph-code i.on{background:#211A2B;border-radius:1px}
.ph-qr b{display:block}
.ph-qr span{display:block;font-size:.8em;color:#7C728A}
.ph-qr .ph-mini{display:inline-flex;align-items:center;gap:.3em;margin-top:.35em;color:#5B2BB5;font-weight:600}
.ph-mini .i{width:1em;height:1em}
.ph-lbl{margin:.15em 0 0;font-size:.74em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7C728A}
.ph-check{list-style:none;margin:0;padding:0;display:grid;gap:.3em}
.ph-check li{display:flex;align-items:center;gap:.6em;padding:.25em .1em}
.ph-check li>span{flex:1}
.ph-check b{display:block;font-size:.9em}
.ph-check li>span{font-size:.78em;color:#7C728A}
.ph-check li>.ph-in{flex:none;font-size:.86em;color:#fff}
.ph-check li>i,.ph-approve li>i{width:1.45em;height:1.45em;flex:none;display:grid;place-items:center;border-radius:.45em;border:1.5px solid #CFC2E6}
.ph-check li>i.on,.ph-approve li>i.on{background:#7137D8;border-color:#7137D8;color:#fff}
.ph-check li>i .i,.ph-approve li>i .i{width:1em;height:1em;stroke-width:2.6}
.ph-note{display:flex;align-items:center;gap:.5em;margin:0;padding:.55em .7em;border-radius:.85em;background:#F2EAFE;color:#4C1D95;font-size:.8em}
.ph-note .i{width:1.25em;height:1.25em}
.ph-call,.ph-cam{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#0E0A14;color:#fff}
.ph-calltop{display:flex;justify-content:space-between;padding:.15em 1.2em .6em;margin:0;font-size:.86em}
.ph-calltop span{color:#BDB3CC}
.ph-main{position:relative;flex:1;min-height:0;margin:0 .7em;border-radius:1.1em;overflow:hidden}
.ph-main img{width:100%;height:100%;object-fit:cover}
.ph-name{position:absolute;left:.5em;bottom:.45em;padding:.12em .5em;border-radius:.45em;background:rgba(0,0,0,.55);font-size:.74em}
.ph-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin:.45em .7em 0}
.ph-tiles>div{position:relative;aspect-ratio:3/4;border-radius:.7em;overflow:hidden;background:#2A2236}
.ph-tiles img{width:100%;height:100%;object-fit:cover}
.ph-tiles .off{display:grid;place-items:center}
.ph-tiles .ph-name{left:.3em;bottom:.3em;font-size:.6em}
.ph-toast{position:absolute;left:.85em;right:.85em;top:4.3em;display:flex;align-items:center;gap:.55em;margin:0;padding:.55em .7em;border-radius:.95em;background:rgba(255,255,255,.95);color:var(--ink);font-size:.8em;box-shadow:0 .7em 1.8em rgba(0,0,0,.4);animation:toastIn .6s .5s both}
.ph-toast>span{flex:1}
.ph-toast b{display:block}
.ph-toast>.i{width:1.6em;height:1.6em;padding:.3em;border-radius:50%;background:#16A34A;color:#fff;stroke-width:2.6}
.ph-ctrl{display:flex;justify-content:center;gap:.85em;padding:.85em 0 1.3em}
.ph-ctrl>i{width:2.8em;height:2.8em;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.13)}
.ph-ctrl .end{background:#E5484D}
.ph-ctrl .ph-snap{background:linear-gradient(135deg,#7137D8,#A855F7)}
.ph-cam{background:#000}
.ph-tabs{flex:none;margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:.5em .4em 1.6em;background:#fff;border-top:1px solid #EEE7F8}
.ph-tabs span{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.68em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8A80A3}
.ph-tabs .i{width:1.65em;height:1.65em}
.ph-tabs .on{color:#5B21B6}
.ph-tabs em{position:absolute;top:-.35em;left:calc(50% + .5em);padding:0 .35em;border-radius:999px;background:#FEF3C7;color:#8A4B00;font-size:.75em;font-style:normal;letter-spacing:0;text-transform:none}
.ph-tabs.dk{background:#140E1F;border-top-color:#2A2238}
.ph-tabs.dk span{color:#9C93B5}
.ph-tabs.dk .on{color:#D8B4FE}
.ph-cam .ph-status{position:absolute;top:0;left:0;right:0;z-index:2}
.ph-vf{position:relative;flex:1;min-height:0}
.ph-vf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf-c{position:absolute;width:1.8em;height:1.8em;border:2px solid rgba(255,255,255,.92)}
.vf-c.tl{top:20%;left:9%;border-right:0;border-bottom:0;border-radius:.4em 0 0 0}
.vf-c.tr{top:20%;right:9%;border-left:0;border-bottom:0;border-radius:0 .4em 0 0}
.vf-c.bl{bottom:16%;left:9%;border-right:0;border-top:0;border-radius:0 0 0 .4em}
.vf-c.br{bottom:16%;right:9%;border-left:0;border-top:0;border-radius:0 0 .4em 0}
.ph-live{position:absolute;top:3.3em;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.45em;margin:0;padding:.3em .35em .3em .7em;border-radius:999px;background:rgba(0,0,0,.6);font-size:.76em;white-space:nowrap}
.ph-live i{width:.55em;height:.55em;border-radius:50%;background:#EF4444;animation:blink 1.4s infinite}
.ph-live span{padding:.12em .55em;border-radius:999px;background:rgba(255,255,255,.2)}
.ph-moment{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.35em;margin:0;padding:.38em .75em;border-radius:999px;background:rgba(113,55,216,.92);font-weight:600;font-size:.82em;white-space:nowrap;animation:phPulse 2.4s ease-in-out infinite}
.ph-moment .i{width:1.1em;height:1.1em}
.ph-hint{position:absolute;left:.85em;right:.85em;bottom:.8em;margin:0;padding:.4em;border-radius:.6em;background:rgba(0,0,0,.5);text-align:center;font-size:.78em}
.ph-shots{display:flex;align-items:center;justify-content:space-between;padding:.85em 1.1em .7em;flex:none}
.ph-strip{display:flex;align-items:center;gap:.3em}
.ph-strip img{width:2.4em;height:2.4em;border-radius:.45em;object-fit:cover;border:1.5px solid rgba(255,255,255,.65)}
.ph-strip b{margin-left:.3em;font-size:.8em}
.ph-shutter{width:3.5em;height:3.5em;border-radius:50%;border:.25em solid #fff;background:radial-gradient(circle,#fff 54%,transparent 57%)}
.ph-perm{display:flex;align-items:center;justify-content:center;gap:.4em;margin:0;padding:0 1em 1.3em;font-size:.72em;color:#CFC6DC;flex:none}
.ph-perm .i{width:1.1em;height:1.1em}
.ph-collage{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.3em;height:36%;flex:none;border-radius:1em;overflow:hidden}
.ph-collage img{width:100%;height:100%;object-fit:cover}
.ph-collage .big{grid-row:1/3}
.ph-outs{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
.ph-outs span{display:flex;flex-direction:column;padding:.5em .65em;border-radius:.85em;background:#fff;border:1px solid #EEE7F7;font-size:.76em;color:#7C728A}
.ph-outs .i{width:1.45em;height:1.45em;margin-bottom:.15em;color:#7137D8}
.ph-outs b{font-size:1.12em;color:var(--ink)}
.ph-capt{margin:0;padding:.55em .75em;border-radius:.85em;background:#fff;border:1px dashed #D5C6EE;font-size:.82em}
.ph-capt b{display:block;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:#7C728A}
.ph-approve{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.ph-approve li{display:flex;align-items:center;gap:.6em;padding:.4em;border-radius:.9em;background:#fff;border:1px solid #EEE7F7}
.ph-approve img{width:3em;height:3em;border-radius:.6em;object-fit:cover}
.ph-approve li>span{flex:1;font-size:.78em;color:#7C728A}
.ph-approve b{display:block;font-size:1.15em;color:var(--ink)}
.ph-dest{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.ph-dest span{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.6em .25em;border-radius:.85em;background:#fff;border:1px solid #EEE7F7;font-size:.7em;font-weight:600;text-align:center;line-height:1.2}
.ph-dest .i{width:1.6em;height:1.6em;color:#7137D8}
.fx-head{display:flex;justify-content:space-between;align-items:center;padding:.3em 1.05em .7em}
.fx-head b{font-size:1.45em}
.fx-btn{display:inline-flex;align-items:center;gap:.3em;padding:.4em .8em;border-radius:999px;background:linear-gradient(135deg,#7137D8,#A855F7);font-size:.78em;font-weight:600;color:#fff}
.fx-btn .i{width:1em;height:1em}
.fx-room{position:relative;overflow:hidden;border-radius:1em;margin:0 1em}
.fx-room>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-room>div{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:.65em;background:linear-gradient(transparent 30%,rgba(0,0,0,.78))}
.fx-room.big{height:9.6em}
.fx-room b{font-size:.98em}
.fx-room span{font-size:.74em;color:#DCD3E8}
.fx-rooms{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.5em 1em 0}
.fx-rooms .fx-room{margin:0;height:6.6em}
.fx-chip{align-self:flex-start;margin-bottom:.3em;padding:.18em .55em;border-radius:999px;background:#A855F7;color:#fff!important;font-size:.68em!important;font-weight:700}
.fx-chip.ghost{background:rgba(255,255,255,.14)}
.fx-lbl{margin:.95em 1em .45em;font-size:.7em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#B6AAC8}
.fx-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em;margin:0 1em}
.fx-mem img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.5em}
.fx-mem.grid{grid-template-columns:repeat(3,1fr)}
.fx-stage{position:relative;height:13.5em;margin:.2em .8em 0;border-radius:1em;overflow:hidden;flex:none}
.fx-stage>img{width:100%;height:100%;object-fit:cover}
.fx-live{position:absolute;top:.6em;left:.6em;display:flex;align-items:center;gap:.35em;padding:.18em .55em;border-radius:.4em;background:#E5484D;font-size:.7em;font-weight:800;letter-spacing:.07em}
.fx-live i{width:.45em;height:.45em;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.fx-stage-t{position:absolute;left:0;right:0;bottom:0;padding:.7em;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.fx-stage-t b{display:block}
.fx-stage-t span{font-size:.74em;color:#DCD3E8}
.fx-making{display:flex;align-items:center;gap:.6em;margin:.6em .8em 0;padding:.5em .65em;border-radius:.9em;background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.38);font-size:.78em}
.fx-making b{display:block}
.fx-disc{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin:0 .8em}
.fx-disc figure{margin:0;display:block}
.fx-disc img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.6em}
.fx-disc figcaption{margin-top:.25em;font-size:.66em;color:#DCD3E8;line-height:1.25}
.fx-prof{display:flex;align-items:center;gap:.7em;padding:.4em 1em .7em}
.fx-prof .ph-in{width:3.2em;height:3.2em;font-size:1.15em;border:0}
.fx-prof>div{flex:1}
.fx-prof b{display:block;font-size:1.1em}
.fx-prof div span{font-size:.76em;color:#B6AAC8}
.fx-tabs{display:flex;gap:.3em;margin:.1em 1em .4em;padding:.25em;border-radius:999px;background:rgba(255,255,255,.08)}
.fx-tabs span{flex:1;padding:.38em;border-radius:999px;text-align:center;font-size:.76em;color:#B6AAC8}
.fx-tabs .on{background:#fff;color:var(--ink);font-weight:600}
.fx-opp{display:flex;flex-direction:column;gap:.15em;margin:.8em 1em 0;padding:.8em;border-radius:1em;background:linear-gradient(135deg,rgba(113,55,216,.5),rgba(168,85,247,.2));border:1px solid rgba(201,179,255,.32)}
.fx-opp>span:last-child{font-size:.76em;color:#DCD3E8}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,460px));justify-content:center;gap:24px}
.plans.one{grid-template-columns:minmax(0,460px)}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px;border-radius:30px;background:#fff;border:1.5px solid var(--line-2);box-shadow:var(--shadow)}
.plan-pro{background:radial-gradient(520px 320px at 100% 0,rgba(168,85,247,.5),transparent 62%),linear-gradient(160deg,#3B1C7A,#211832 70%);border-color:transparent;color:#fff}
.plan-k{display:flex;align-items:center;gap:12px;font-size:1.2rem;font-weight:700}
.plan-k .i{width:40px;height:40px;padding:9px;border-radius:13px;background:var(--lav);color:var(--purple)}
.plan-pro .plan-k .i{background:rgba(255,255,255,.13);color:#fff}
.plan-for{color:var(--muted)}
.plan-pro .plan-for{color:rgba(255,255,255,.75)}
.plan-cam{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;font-weight:500;margin-top:10px}
.plan-cam .i{flex:none;width:18px;height:18px;margin-top:2px;color:var(--violet,#7c3aed)}
.plan-pro .plan-cam{color:#fff}
.plan-pro .plan-cam .i{color:#d8b4fe}
.pprice{display:flex;flex-direction:column;gap:2px;margin:4px 0 6px}
.pprice s{font-size:1.05rem;color:var(--muted);text-decoration-thickness:2px}
.price-now{font-size:1.1rem;color:var(--muted)}
.price-now b{font-size:clamp(2.8rem,2rem + 2vw,3.4rem);letter-spacing:-.04em;line-height:1.05;color:var(--purple)}
.price-who{font-weight:600;color:var(--ink)}
.plan .price{flex-wrap:wrap;row-gap:2px} /* Photographers plan: struck price, FREE and "for early-access professionals" wrap on a 320 px phone instead of pushing the page sideways */
.plan-pro .pprice s,.plan-pro .price-now{color:rgba(255,255,255,.7)}
.plan-pro .price-now b{color:#fff}
.plan-pro .price-who{color:#E9D5FF}
.plan .btn{margin-top:auto}
.plan-pro .ticks .i{color:#C4B5FD}
.ticks s{color:var(--muted)}
.page-hero{padding:clamp(56px,7vw,100px) 0 clamp(44px,5vw,72px)}
.page-hero.light{background:linear-gradient(180deg,#F7F2FF,var(--white))}
.page-hero.night{position:relative;overflow:hidden;isolation:isolate;background:var(--plum);color:#fff}
.page-hero.center{text-align:center}
.page-hero h1{margin:14px 0 18px;max-width:17ch}
.page-hero.center h1{margin-left:auto;margin-right:auto}
.page-hero .lede{max-width:46ch;font-size:1.2rem;color:var(--muted)}
.page-hero.center .lede{margin:0 auto}
.page-hero.night .lede{color:rgba(255,255,255,.8)}
.page-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero-photo .hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:30px;box-shadow:var(--shadow)}
.hero-photo.tall .hero-img{aspect-ratio:4/5;max-height:560px}
.collage{position:relative;height:500px}
.collage img{position:absolute;object-fit:cover;border-radius:24px;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(46,16,101,.5)}
.collage .c1{left:0;top:0;width:58%;height:80%}
.collage .c2{right:0;top:6%;width:45%;height:46%}
.collage .c3{right:5%;bottom:0;width:54%;height:42%}
.pill-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pill-nav.center{justify-content:center}
.pill-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.94rem;transition:border-color .2s}
.pill-nav a:hover{border-color:var(--purple)}
.pill-nav .i{color:var(--purple)}
.flow-line{list-style:none;margin:0;padding:22px;border-radius:26px;background:#fff;border:1px solid var(--line);counter-reset:f;display:grid;gap:2px;box-shadow:var(--shadow)}
.flow-line li{counter-increment:f;display:flex;align-items:center;gap:12px;padding:8px;font-weight:600}
.flow-line li::before{content:counter(f);width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--lav);color:var(--purple);font-size:.85rem}
.story-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center;max-width:none;margin-bottom:56px}
.story-head h2{margin:10px 0 14px}
.story-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px;box-shadow:var(--shadow)}
.srows{display:grid;gap:22px}
.srow{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:center;padding:36px 48px;border-radius:34px;background:#FAF7FE;border:1px solid #EFE8F8}
.srow:nth-child(even){grid-template-columns:minmax(0,1fr) 320px;background:#fff}
.srow:nth-child(even) .srow-ph{order:2}
.srow-ph{display:flex;justify-content:center}
.srow .phone{--pw:280px}
.srow-n{font-size:.85rem;font-weight:700;letter-spacing:.12em;color:var(--purple)}
.srow h3{display:flex;align-items:center;gap:14px;margin:8px 0 14px;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem)}
.srow h3 .i{width:46px;height:46px;padding:11px;border-radius:14px;background:#fff;color:var(--purple);box-shadow:0 10px 24px -14px rgba(76,29,149,.5)}
.srow-line{font-size:1.2rem;max-width:36ch}
.srow-x{margin-top:10px;color:var(--muted);max-width:42ch}
.mini-flow{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:44px}
.mini-flow>figure{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}
.mini-flow>figure>figcaption{display:flex;align-items:center;gap:10px;font-weight:600}
.mini-flow .n{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--purple);color:#fff;font-size:.82rem}
.band{position:relative;isolation:isolate;overflow:hidden;min-height:540px;display:flex;align-items:center;color:#fff}
.band-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,17,36,.9),rgba(23,17,36,.62) 48%,rgba(23,17,36,.12))}
.band-in{padding-top:80px;padding-bottom:80px}
.band h2{max-width:15ch}
.band-in>p{max-width:40ch;margin:16px 0 30px;font-size:1.15rem;color:rgba(255,255,255,.84)}
.band-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.band-list li{display:flex;gap:10px;font-size:1.1rem}
.band-list .i{color:#C4B5FD;margin-top:4px}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;grid-auto-flow:dense;gap:16px}
.mosaic figure{position:relative;margin:0;overflow:hidden;border-radius:24px;background:#EDE6F7}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic .m-tall{grid-row:span 2}
.mosaic .m-wide{grid-column:span 2}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 18px 16px;background:linear-gradient(transparent,rgba(14,9,22,.85));color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.4}
.mosaic figcaption b{display:block;font-size:1.12rem;color:#fff}
.feel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.feel-photo{position:relative}
.feel-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:30px;box-shadow:var(--shadow)}
.feel-tag{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.94);font-weight:600;font-size:.92rem;color:var(--purple-d)}
.outcomes{list-style:none;margin:28px 0 32px;padding:0;display:grid;gap:22px}
.outcomes li{display:flex;gap:16px}
.o-n{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);font-weight:700;color:var(--purple)}
.outcomes h3{margin:2px 0 4px}
.outcomes p{color:var(--muted)}
.two-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:48px;border-top:1px solid var(--line)}
.benefits li{padding:28px 0;border-bottom:1px solid var(--line)}
.benefits .i{width:46px;height:46px;padding:11px;margin-bottom:14px;border-radius:14px;background:var(--lav);color:var(--purple)}
.benefits h3{margin-bottom:6px}
.benefits p{color:var(--muted)}
.benefits.compact{grid-template-columns:1fr 1fr;column-gap:32px;border-top:0}
.benefits.compact li{border-bottom:0;padding:16px 0}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.timeline>div{padding:30px;border-radius:26px;background:#fff;border:1px solid var(--line)}
.tl-k{display:inline-block;margin-bottom:16px;padding:5px 12px;border-radius:999px;background:var(--purple);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.timeline h3{margin-bottom:8px}
.timeline p{color:var(--muted)}
.wchips{list-style:none;margin:0 auto;padding:0;max-width:940px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.wchips li{padding:12px 20px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;box-shadow:0 8px 22px -16px rgba(76,29,149,.5)}
.pro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.pro-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:30px;box-shadow:var(--shadow)}
.strip{display:grid;grid-template-columns:repeat(4,1fr)}
.strip figure{position:relative;margin:0;aspect-ratio:1/1.08;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover}
.strip figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(14,9,22,.7))}
.strip figcaption{position:absolute;z-index:1;left:20px;bottom:16px;color:#fff;font-weight:700;font-size:1.15rem}
.howsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.howsteps li{padding:30px;border-radius:26px;background:#fff;border:1px solid var(--line)}
.howsteps li>span{width:42px;height:42px;display:grid;place-items:center;margin-bottom:16px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700}
.howsteps h3{margin-bottom:8px}
.howsteps p{color:var(--muted)}
.cta-in{max-width:760px;margin:0 auto;text-align:center}
.cta-in>p{margin:14px 0 0;font-size:1.15rem;color:var(--muted)}
.fv-note{display:inline-block;margin-top:24px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-size:.95rem}
.fx-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:72px;align-items:center;width:100%;max-width:960px;margin:0 auto}
.fx-row.flip{grid-template-columns:minmax(0,1fr) auto}
.fx-row.flip .phone{order:2}
.fx-row .phone{--pw:280px}
.fx-row>div>h2{margin:16px 0 12px}
.fx-row>div>p:not(.label){max-width:44ch;font-size:1.15rem;color:rgba(255,255,255,.76)}
.faq-search{display:flex;align-items:center;gap:10px;max-width:560px;height:58px;margin:30px auto 0;padding:0 20px;border-radius:999px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);color:var(--muted)}
.faq-search:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(113,55,216,.14)}
.faq-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--ink)}
.faq-wrap{max-width:820px}
.faq-group{margin-bottom:44px;scroll-margin-top:96px}
.faq-group>h2,.faq-group>h3{margin-bottom:8px;font-size:1.35rem}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;list-style:none;cursor:pointer;font-weight:600;font-size:1.05rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{color:var(--purple);transition:transform .25s}
.faq-item[open] .faq-ic{transform:rotate(45deg)}
.faq-a{padding:0 4px 22px;color:var(--ink-2)}
.faq-a p{max-width:64ch;margin-bottom:10px}
.faq-none{padding:20px;border-radius:16px;background:var(--lav);text-align:center}
.two-col .faq-group{margin:8px 0 24px}
.jd{width:min(660px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:30px;background:#fff;color:var(--ink);box-shadow:0 40px 100px -20px rgba(23,17,36,.6);overflow:auto}
.jd::backdrop{background:rgba(23,17,36,.62);backdrop-filter:blur(4px)}
.jd[open]{animation:pop .22s ease}
.jd-in{position:relative;padding:34px}
.jd-x{position:absolute;top:16px;right:16px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--neutral);cursor:pointer}
.jd h2{margin:8px 0 6px;font-size:1.65rem}
.jd-sub{margin-bottom:22px;color:var(--muted)}
.jf-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px;padding:0;border:0}
.jf-seg legend{margin-bottom:10px;padding:0;font-weight:600}
.jseg{position:relative}
.jseg input{position:absolute;opacity:0;pointer-events:none}
.jseg>span{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px;border-radius:18px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.jseg>span:hover{border-color:var(--line-2)}
.jseg .i{width:24px;height:24px;margin-bottom:6px;color:var(--purple)}
.jseg b{font-size:.98rem;line-height:1.25}
.jseg small{font-size:.8rem;line-height:1.35;color:var(--muted)}
.jseg input:checked+span{border-color:var(--purple);background:var(--lav-2);box-shadow:0 0 0 3px rgba(113,55,216,.14)}
.jseg input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.jf-offer{margin:0 0 16px;padding:11px 14px;border-radius:14px;background:var(--lav);color:#4C1D95;font-weight:600;font-size:.95rem}
.jf-offer s{font-weight:500;opacity:.65}
.jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600}
.fld[hidden],.jf-cats[hidden]{display:none}
.fld em,.jf-cats em,.chk em{font-style:normal;font-weight:400;color:var(--muted)}
.fld input,.fld select{width:100%;height:50px;padding:0 14px;border-radius:14px;border:1.5px solid #DED6EA;background:#fff;font:inherit;font-size:1rem;font-weight:400;color:var(--ink)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(113,55,216,.14)}
.fld.bad input,.fld.bad select{border-color:#DC2626}
.fld .fmsg{font-size:.82rem;font-weight:500;color:#B91C1C}
.jf-cats{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;border:0}
.jf-cats legend{margin-bottom:8px;padding:0;font-size:.9rem;font-weight:600}
.jf-cats label{position:relative}
.jf-cats input{position:absolute;opacity:0}
.jf-cats span{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid #DED6EA;font-size:.9rem;cursor:pointer}
.jf-cats input:checked+span{background:var(--purple);border-color:var(--purple);color:#fff}
.jf-cats input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.chk{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:.92rem;color:var(--ink-2)}
.chk input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--purple)}
.chk a{color:var(--purple);text-decoration:underline}
.chk.bad span{color:#B91C1C}
.jf-err{margin-top:14px;padding:12px 14px;border-radius:14px;background:#FEF2F2;color:#B91C1C;font-size:.92rem}
.jf [type=submit]{margin-top:20px}
.jf-fine{margin-top:12px;font-size:.8rem;text-align:center;color:var(--muted)}
.jf-done{padding:20px 8px;text-align:center}
.jf-done:focus{outline:none}
.jf-done img{margin:0 auto;border-radius:50%}
.jf-done h3{margin:14px 0 8px;font-size:1.55rem}
.jf-done p{color:var(--muted)}
.jf-done-links{margin-top:20px}
.jf-noscript{margin-top:12px;color:#B91C1C}
.join-page{background:linear-gradient(180deg,#F7F2FF,var(--white))}
.join-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.join-side h1{margin:12px 0 4px;font-size:clamp(2rem,1.4rem + 2vw,3rem)}
.join-side .ticks{margin-bottom:28px}
.join-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px}
.join-card{padding:34px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.legal-page h1{margin:10px 0 6px}
.legal-page h2{margin:34px 0 10px;font-size:1.3rem}
.legal-page p,.legal-page li{max-width:68ch;color:var(--ink-2)}
.legal-page ul{padding-left:1.2em;display:grid;gap:6px}
.legal-page a{color:var(--purple);text-decoration:underline}
.credits{font-size:.92rem}
.nf img{margin:0 auto 20px;width:220px;height:auto}
.nf h1{margin-bottom:8px}
.ask-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;padding:6px 20px 6px 6px;border:0;border-radius:999px;background:var(--plum);color:#fff;font-weight:600;box-shadow:0 18px 44px -14px rgba(23,17,36,.7),0 0 0 1px rgba(255,255,255,.08);cursor:pointer;transition:transform .2s}
.ask-fab:hover{transform:translateY(-2px)}
.ask-fab img{width:44px;height:44px;border-radius:50%}
.ask-fab[hidden]{display:none}
.ask-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(390px,calc(100vw - 32px));height:min(620px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 40px 100px -20px rgba(23,17,36,.6),0 0 0 1px var(--line);transform-origin:bottom right;animation:pop .22s ease}
.ask-panel[hidden]{display:none}
.ask-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--plum);color:#fff}
.ask-head img{width:42px;height:42px;border-radius:50%}
.ask-head b{display:block}
.ask-head span{font-size:.8rem;color:rgba(255,255,255,.66)}
.ask-x{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.ask-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px;background:#FAF7FE;overscroll-behavior:contain}
.ask-msg{max-width:88%;padding:10px 14px;border-radius:18px;font-size:.95rem;line-height:1.45;animation:msgIn .25s ease both}
.ask-msg.bot{align-self:flex-start;background:#fff;border:1px solid #EEE7F7;border-bottom-left-radius:6px}
.ask-msg.me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:6px}
.ask-actions{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.ask-chip{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--purple-d);font-size:.88rem;font-weight:600;cursor:pointer;text-align:left}
.ask-chip:hover{border-color:var(--purple)}
.ask-chip.cta{background:var(--purple);border-color:var(--purple);color:#fff}
.ask-form{display:flex;gap:8px;padding:12px 12px 8px;border-top:1px solid var(--line)}
.ask-form input{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:999px;border:1.5px solid #DED6EA;font:inherit;font-size:1rem}
.ask-form input:focus{outline:none;border-color:var(--purple)}
.ask-send{width:46px;height:46px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--purple);color:#fff;cursor:pointer}
.ask-note{padding:0 14px 10px;font-size:.72rem;text-align:center;color:var(--muted)}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}
@keyframes phPulse{50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:920px){
  .page-hero-in,.story-head,.feel,.two-col,.pro-grid,.join-in{grid-template-columns:1fr;gap:36px}
  .srow,.srow:nth-child(even){grid-template-columns:1fr;gap:28px;padding:28px 20px;text-align:center}
  .srow:nth-child(even) .srow-ph{order:0}
  .srow h3{justify-content:center}
  .srow-line,.srow-x{margin-left:auto;margin-right:auto}
  .mini-flow{display:flex;justify-content:flex-start;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 4px 12px;margin:0 -4px}
  .mini-flow>figure{flex:none;scroll-snap-align:center}
  .fx-row,.fx-row.flip{grid-template-columns:1fr;gap:36px;justify-items:center;text-align:center}
  .fx-row.flip .phone{order:0}
  .fx-row>div>p:not(.label){margin:0 auto}
  .timeline,.howsteps{grid-template-columns:1fr}
  .collage{height:420px}
  .benefits.compact{grid-template-columns:1fr}
  .story-head .story-photo{max-height:340px}
}
@media (max-width:760px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:12px}
  .mosaic figcaption{padding:40px 12px 12px;font-size:.82rem}
  .strip{grid-template-columns:1fr 1fr}
  .jf-seg{grid-template-columns:1fr}
  .jseg>span{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:center;padding:12px 14px}
  .jseg .i{grid-row:1/3;margin:0}
  .jf-grid{grid-template-columns:1fr}
  .jd{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:26px 26px 0 0}
  .jd-in{padding:28px 20px 24px}
  .join-card{padding:24px 18px}
  .ask-fab{right:16px;bottom:16px;padding:5px}
  .ask-fab span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ask-panel{left:0;right:0;bottom:0;width:100%;height:86dvh;border-radius:26px 26px 0 0}
  .band{min-height:460px}
  .band::after{background:linear-gradient(0deg,rgba(23,17,36,.92),rgba(23,17,36,.55) 60%,rgba(23,17,36,.25))}
  .band{align-items:flex-end}
}
@media (max-width:520px){
  .film-cap{bottom:58px}
  .film-ui{padding:10px 12px;gap:8px}
  .film-btn{width:36px;height:36px}
  .plan{padding:26px 22px}
  .collage{height:360px}
  .srow .phone,.fx-row .phone{--pw:260px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* ===================================================== integration with the previous design (site.css) */
/* header: v2's dark bar, solid on inner pages, with the For You menu */
body:not(.home) .top{background:rgba(20,11,46,.97);box-shadow:0 1px 0 var(--line-d)}
body:not(.home) main{padding-top:68px}
.nav a[aria-current]:not(.btn){opacity:1;text-decoration:underline;text-decoration-color:var(--pink-l);text-decoration-thickness:2px;text-underline-offset:6px}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--on-d);font:500 15px var(--body);opacity:.88;cursor:pointer}
.dd-btn:hover,.dd.open .dd-btn,.dd-btn[data-current]{opacity:1}
.dd-btn .i{width:16px;height:16px;transition:transform .2s}
.dd.open .dd-btn .i{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 18px);left:-16px;z-index:60;display:none;min-width:290px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 26px 60px -18px rgba(10,5,32,.6)}
.dd.open .dd-menu{display:block;animation:pop .18s ease}
.nav .dd-menu a{display:block;padding:12px 14px;border-radius:12px;color:var(--ink);opacity:1;text-decoration:none}
.nav .dd-menu a:hover,.nav .dd-menu a[aria-current]{background:var(--lav);text-decoration:none}
.dd-menu b{display:block;font-weight:600}
.dd-menu span{font-size:13.5px;color:var(--ink-2)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* hero: the narrated film inside the v2 composition, context cards under it */
.hv.hv-film{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:18px 0 0;align-items:start}
.hv-film>.film{grid-column:1/-1;position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0B0711;box-shadow:0 44px 90px -32px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
.hv-film>*:not(.hv-photo):not(.hv-mascot){position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin-top:6px}
.hv-film .hv-room,.hv-film .hv-call,.hv-film .hv-out{min-height:104px}
.hv-film .hv-call .hv-tiles{grid-template-columns:repeat(4,1fr)}
.hv-film .hv-out{align-self:stretch;padding-right:58px}
.hv-film .hv-mascot{position:absolute;right:-26px;bottom:-34px;width:104px}
.film-v{width:100%;height:100%;object-fit:cover;display:block}
.film-unmute{position:absolute;left:14px;top:14px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 15px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:#3B1F80;font:700 14px var(--body);cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);animation:pop .3s ease}
.film-unmute[hidden]{display:none}
.film-unmute .i{width:18px;height:18px}
.price-note s{opacity:.7}
.price-note b{color:#fff}

/* simulator heading on the dark band */
.sim-sec .sub-h{margin-top:10px;font:600 clamp(18px,1.8vw,22px)/1.3 var(--head);color:#fff!important}

/* home: professionals, pricing, FAQ */
.biz-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pro-card .pprice s{color:var(--ink-2)}
.pro-card .price-now b{color:var(--violet)}
.pro-card .ticks{margin:8px 0 18px}
.pro-card .btn-block{margin:6px 0}
.plans-col{display:grid;gap:18px}
.plans-col .plan{padding:26px}
.price-in .form-card .form-title{font-size:28px;margin-bottom:6px}
.price-in .form-card .form-sub{color:var(--ink-2);margin-bottom:18px}
.occ-more{margin-top:30px;text-align:center}
.faq-more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

/* inner pages in the v2 type scale */
.page-hero h1,.join-side h1,.legal-page h1,.nf h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05}
.band h2,.feel h2,.two-col h2,.cta-in h2,.fx-row h2,.story-head h2{font-size:clamp(28px,3.4vw,44px)}
.faq-group>h2{font-size:24px}
.benefits h3,.outcomes h3,.timeline h3,.howsteps h3,.plan-k{font-family:var(--head)}
.benefits h3,.outcomes h3,.timeline h3,.howsteps h3{font-size:20px}
.page-hero.light{background:linear-gradient(180deg,var(--lav),var(--blush))}
.page-hero .pill{margin-bottom:6px}
.legal-page h2{font-size:22px}

/* product demo page */
.demo-hero{padding-bottom:64px}
.demo-hero h1{max-width:20ch;margin-left:auto;margin-right:auto}
.demo-hero .lede{color:var(--on-d-2)}
.flow-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:860px;margin:28px auto 0;counter-reset:f}
.flow-pills li{counter-increment:f;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:14px;font-weight:600;color:#EDE7FB}
.flow-pills li::before{content:counter(f) ". ";color:var(--pink-l)}
.steps7{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps7 li{position:relative;padding:24px 20px 22px;border-radius:22px;background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.s7-n{position:absolute;right:18px;top:12px;font:700 38px/1 var(--head);color:#EEE6FF}
.steps7 .i{width:44px;height:44px;padding:11px;margin-bottom:14px;border-radius:14px;background:var(--lav-2);color:var(--violet)}
.steps7 h3{margin-bottom:6px;font-size:19px}
.steps7 p{font-size:15px;color:var(--ink-2)}
.steps7 .s7-x{margin-top:8px;font-size:13.5px;color:#857BA0}

/* footer columns on the v2 footer */
.foot-in{gap:28px 56px}
.foot .foot-col{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px}
.foot-col h2{margin-bottom:4px;font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.foot-brand p{max-width:30ch;margin:8px 0 14px}

@media (max-width:1020px){
  .dd-btn{width:100%;padding:13px 2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-d-2);pointer-events:none}
  .dd-btn .i{display:none}
  .dd-menu{position:static;display:block;min-width:0;padding:0 0 4px;background:none;box-shadow:none}
  .nav .dd-menu a{padding:11px 2px;border-radius:0;border-bottom:1px solid var(--line-d);color:var(--on-d)}
  .nav .dd-menu a:hover{background:none}
  .dd-menu b{font-weight:500;font-size:17px}
  .dd-menu span{display:none}
  .steps7{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .hv.hv-film{grid-template-columns:1fr 1fr}
  .hv-film .hv-call{display:none}
  .hv-film .hv-mascot{width:84px;right:-8px;bottom:-26px}
  .film-unmute{left:10px;top:10px;padding:7px 12px;font-size:13px}
}
@media (max-width:560px){
  .steps7{grid-template-columns:1fr}
  .hv-film .hv-out{display:none}
  .hv.hv-film{grid-template-columns:1fr}
}
/* links: v2's base keeps underlines; these components don't want them */
.pill-nav a,.link,.mini-card,.foot a,.dd-menu a,.mosaic a,.ask-panel a,.faq-a .link,.btn{text-decoration:none}
.foot a:hover,.foot p a{text-decoration:underline;text-underline-offset:4px}
/* phones: get the film into the first screen, keep Ask Snappy clear of the sticky join bar */
@media (max-width:720px){
  .hero .lede,.hero .path{display:none}
  .hero h1{margin-top:14px}
  .hero .cta-row{margin-top:16px}
  body.sticky-on .ask-fab{bottom:86px}
}

/* homepage professionals: one plan, shown with a photo (prices live in the pricing section) */
.biz-photo{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:0 30px 70px -30px rgba(10,5,32,.7);min-height:420px}
.biz-photo .biz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.biz-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:90px 24px 24px;background:linear-gradient(transparent,rgba(14,8,36,.94) 45%)}
.biz-photo figcaption b{width:100%;font:700 22px var(--head);color:#fff}
.biz-photo figcaption>span{width:100%;color:var(--on-d-2);margin-bottom:6px}
.biz-photo figcaption strong{color:#fff;font-size:20px}
.details-head{padding-bottom:0}
.details-head .pill-nav{margin-top:6px}
#dashboard-sec{padding-top:0}

/* 3 Nov, owner: "everything upar neeche, make it right": tidy the homepage layout */
/* hero: a bigger film, its three cards in one even row, no mascot over the cards, step chips without dashes */
.hero-in{grid-template-columns:.92fr 1.08fr}
.hero .hv.hv-film{max-width:680px;align-items:stretch}
.hv-film .hv-mascot{display:none}
.hv-film .hv-out{padding-right:14px}
.hero .path li+li::before{display:none}
/* pricing: the two plans side by side, the form full width under them (no empty column) */
#pricing .price-in{grid-template-columns:1fr;max-width:1000px;margin:0 auto;gap:28px}
#pricing .plans-col{grid-template-columns:1fr 1fr;align-items:stretch}
/* professionals: the photo card runs the full height of the text beside it */
.biz-in{align-items:stretch}
.biz-photo{height:100%;min-height:440px}
/* tablets and phones: the film right under the headline, the plan card right under its heading */
@media (max-width:1020px){
  .hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero-copy>.pill{order:1;align-self:flex-start}
  .hero h1{order:2}
  .hero .tagline{order:3}
  .hero .hv.hv-film{order:4;align-self:center;width:100%;max-width:680px;margin:20px auto 4px;padding:0}
  .hero .cta-row{order:5}
  .hero .price-note{order:6}
  .hero .lede{order:7}
  .hero .path{order:8}
  .biz-in{display:flex;flex-direction:column;gap:0}
  .biz-in>div{display:contents}
  .biz .sec-head{order:1;margin-bottom:22px}
  .biz-photo{order:2;height:auto;min-height:380px}
  .biz .tags{order:3;margin-top:26px}
  .biz .ticks{order:4}
  .biz-links{order:5}
}
@media (max-width:720px){
  #pricing .plans-col{grid-template-columns:1fr}
  .hv-film .hv-room,.hv-film .hv-call,.hv-film .hv-out{display:none}
  .biz-photo{min-height:340px}
}

/* 3 Nov, owner: sound should be on. Browsers only allow it after a tap, so while the film is muted the sound
   button sits big in the middle of the film (any tap on the page also turns the sound on). */
.film-unmute{left:50%;top:50%;transform:translate(-50%,-50%);gap:12px;padding:16px 28px;font-size:18px;white-space:nowrap;animation:unmutePulse 1.8s ease-out infinite}
.film-unmute .i{width:22px;height:22px}
@keyframes unmutePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 20px rgba(255,255,255,0)}}
@media (max-width:720px){.film-unmute{left:50%;top:50%;padding:12px 20px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.film-unmute{animation:none}}

/* FAQ: "Made for everyone in the room" (owner, 4 Nov 2026: the six kinds of guest and what could stop each one) */
.who-sec{padding-bottom:8px}
.who-h{text-align:center;font-size:clamp(24px,3vw,32px);margin-bottom:22px}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1040px;margin:0 auto}
.who-card{display:flex;flex-direction:column;gap:4px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.who-card:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 14px 34px rgba(60,20,120,.08)}
.who-card:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.who-card .i{width:26px;height:26px;color:var(--purple);margin-bottom:8px}
.who-card b{font-size:1.05rem}
.who-card span{font-size:.9rem;color:var(--ink-2)}
.who-card p{margin-top:8px;font-size:.95rem;line-height:1.45}
@media (max-width:860px){.who-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.who-grid{grid-template-columns:1fr}.who-card{padding:16px}}
@media (prefers-reduced-motion:reduce){.who-card,.who-card:hover{transition:none;transform:none}}

/* Ask Snappy: read answers aloud (device voice only), next to the close button */
.ask-say{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.ask-say[hidden]{display:none}
.ask-say[aria-pressed="true"]{background:#fff;color:var(--plum)}
.ask-say:not([hidden])+.ask-x{margin-left:8px}

/* Home hero: "Snappy, your Event Buddy" in big letters above the punchline (owner, 4 Nov 2026) */
.hero .buddy{margin:0;font:700 clamp(34px,4.6vw,60px)/1.04 var(--head);letter-spacing:-.02em;color:#fff}
.hero .buddy .grad{display:inline;white-space:nowrap}
.hero .buddy+h1{font-size:clamp(28px,3.2vw,42px);margin:16px 0 18px}

/* Every device (owner, 4 Nov: "laptop, iPad, mobile, fold phone, flip phone, any size"). Found by a 27-size sweep. */
/* The open menu is 500px tall: on a phone turned sideways or a flip phone's cover screen its last links (FAQ, Join)
   fell below the screen and could not be reached, because the header is fixed. Let the menu scroll inside itself. */
/* While the menu is open, the floating Ask Snappy button (it sits above the header) covered "Join Early Access". */
body.nav-open .ask-fab{visibility:hidden}
@media (max-width:1020px){
  .nav{max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;background:#140B2E}
}
/* Fingers need bigger targets than a mouse: footer links were 23px tall on phones and tablets. */
@media (pointer:coarse){
  .foot .foot-col{gap:0}
  .foot-col a{padding:9px 0}
}
/* Short screens (phones sideways, flip covers, keypad phones): a slimmer header leaves more room for the page. */
@media (max-height:440px){
  .top-in{min-height:56px}
  .nav{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}
}
/* Very short screens (about 340px tall or less): the floating Join bar covered a fifth of the screen; the header menu
   and the hero button still offer Join. */
@media (max-height:340px){
  .sticky{display:none}
  body.sticky-on .ask-fab{bottom:16px}
}
/* Narrow phones (fold covers, 320px phones): one photo per row so captions like "Weddings and engagements" fit. */
@media (max-width:340px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:220px}
  .mosaic .m-wide{grid-column:auto}
  .mosaic .m-tall{grid-row:auto}
  .poses figcaption{left:4px;right:4px;padding:3px 5px;font-size:10.5px}
  .poses figcaption .i{display:none}
}
/* Tiny screens (flip covers, 240px keypad phones): headline sizes that fit, so "Event Buddy" and "Memories Forever."
   are never cut off. */
@media (max-width:300px){
  .hero .buddy{font-size:27px}
  .hero .buddy+h1{font-size:21px}
  .btn-lg{font-size:15px;padding-inline:14px}
  .sticky{min-height:46px;padding:8px 16px;font-size:14.5px}
  .plan-k{font-size:1.05rem;gap:8px}
  .plan-k .i{width:32px;height:32px;padding:7px}
  .occ-body h3{font-size:15.5px}
}

/* Diwali 2026 (owner, 7 Nov): hero chip, "500 photos… you got 12" section with Create · Communicate · Click,
   scan-to-try QR and an honest comparison table. Snappy name everywhere; buttons go through /go/... links. */
.dw-chip{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.dw-chip .dw-ea{background:rgba(255,255,255,.06)}
.dw-eyebrow a{color:inherit;text-decoration:none}.dw-eyebrow a:hover{text-decoration:underline}
.dw-chip a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:linear-gradient(90deg,rgba(255,170,60,.22),rgba(219,39,119,.22));border:1px solid rgba(255,200,120,.45);color:#FFE7C2;font:600 14px/1.2 var(--body);text-decoration:none}
.dw-chip a b{color:#FFD23F}
.dw-chip a:hover{border-color:#FFD23F}
.nav-join{color:var(--on-d-2);font-size:14px}

/* Diwali 2026, round 2 (owner, 7 Nov: moving rail like rollouts.in, a blinking Diwali button, changing words,
   crackers, premium). Everything here stops under prefers-reduced-motion (site.css turns every animation off). */
.hero .fw{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-in{position:relative}
/* the changing word */
.rot{margin:-6px 0 14px;font:700 clamp(21px,2.3vw,30px)/1.25 var(--head);color:#F2ECFF;white-space:nowrap}
.rot-w{display:inline-block;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .28s cubic-bezier(.3,.7,.3,1),opacity .28s ease;will-change:transform}
.rot-w.out{transform:translateY(-70%);opacity:0}
.rot-w.pre{transform:translateY(70%);opacity:0;transition:none}
/* blinking Diwali chip + glowing buttons */
.dw-blink{position:relative;animation:dwBlink 1.8s ease-in-out infinite}
.dw-blink .spark{display:inline-block;margin-left:2px;font-style:normal;color:#FFD23F;animation:dwTwinkle 1.2s ease-in-out infinite}
@keyframes dwBlink{0%,100%{border-color:rgba(255,200,120,.45);box-shadow:0 0 0 rgba(255,210,63,0)}50%{border-color:#FFD23F;box-shadow:0 0 24px rgba(255,210,63,.55),inset 0 0 12px rgba(255,210,63,.18)}}
@keyframes dwTwinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}}
.btn-glow{position:relative;overflow:hidden;isolation:isolate;animation:dwPulse 2.2s ease-out infinite}
.btn-glow::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);transform:translateX(-130%);animation:dwSheen 3.4s ease-in-out infinite;pointer-events:none}
@keyframes dwPulse{0%{box-shadow:0 0 0 0 rgba(255,196,64,.6),0 12px 30px -12px rgba(147,51,234,.7)}70%{box-shadow:0 0 0 14px rgba(255,196,64,0),0 12px 30px -12px rgba(147,51,234,.7)}100%{box-shadow:0 0 0 0 rgba(255,196,64,0),0 12px 30px -12px rgba(147,51,234,.7)}}
@keyframes dwSheen{0%,58%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.sticky-glow{animation:dwPulse 2.2s ease-out infinite}
/* marigold toran: a garland under the menu, strands short enough to end above the hero's first line */
.toran{position:absolute;left:0;right:0;top:70px;height:56px;z-index:0;pointer-events:none}
.toran .swag{position:absolute;left:0;right:0;top:0;height:10px;background:radial-gradient(circle at 50% 0,transparent 15px,rgba(255,220,160,.35) 16px,transparent 17.5px) 0 -12px/46px 22px repeat-x}
.ts{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:tsSway 4.2s ease-in-out infinite;animation-delay:var(--d)}
.ts::before{content:"";position:absolute;top:-4px;bottom:6px;left:50%;width:1.5px;background:rgba(255,220,160,.35)}
.ts i{position:relative;width:13px;height:13px;margin-top:-1px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFD27A,#FF8A00 55%,#C25400);box-shadow:0 0 9px rgba(255,140,0,.45)}
.ts i.y{background:radial-gradient(circle at 40% 35%,#FFF3A6,#FFC400 55%,#C08A00);box-shadow:0 0 9px rgba(255,200,0,.45)}
.ts b{width:5px;height:8px;margin-top:1px;border-radius:0 0 50% 50%;background:#3E9B4F}
@keyframes tsSway{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
/* diyas along the bottom of the hero */
.diyas{position:absolute;left:0;right:0;bottom:10px;z-index:0;display:flex;justify-content:center;gap:clamp(18px,5vw,64px);pointer-events:none}
.diya{position:relative;width:34px;height:15px;border-radius:0 0 30px 30px;background:linear-gradient(180deg,#E07A2E,#9C4313);box-shadow:inset 0 3px 0 #F4A15A,0 0 22px rgba(255,170,60,.35)}
.diya i{position:absolute;left:50%;bottom:11px;width:9px;height:16px;margin-left:-4.5px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 75%,#FFF8D6,#FFD23F 45%,#FF7A00 85%);box-shadow:0 0 14px 4px rgba(255,190,60,.55);transform-origin:50% 100%;animation:diyaFlick .9s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes diyaFlick{0%{transform:scale(1,1) rotate(-3deg);opacity:.92}50%{transform:scale(.92,1.12) rotate(2deg);opacity:1}100%{transform:scale(1.05,.94) rotate(-1deg);opacity:.85}}
@media (max-width:720px){.toran{top:62px}.toran .swag{background-size:34px 22px}.ts i{width:11px;height:11px}.diya:nth-child(n+6){display:none}}
/* occasions: a moving rail */
.occ-viewport{position:relative;margin-inline:calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.occ.rail{display:flex;width:max-content;gap:14px;padding:6px 14px 6px 0;margin:0;overflow:visible;scroll-snap-type:none;animation:occRail 70s linear infinite}
.occ.rail .occ-t{flex:none;width:280px;min-height:390px;scroll-snap-align:none;transition:transform .3s ease,box-shadow .3s ease}
.occ.rail .occ-t:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line-d),0 24px 50px -20px rgba(219,39,119,.55)}
.occ-viewport:hover .occ.rail,.occ-viewport:focus-within .occ.rail,.occ.rail.hold{animation-play-state:paused}
@keyframes occRail{to{transform:translateX(-50%)}}
.occ-season{box-shadow:inset 0 0 0 2px rgba(255,210,63,.75),0 0 34px -6px rgba(255,170,60,.55)!important}
@media (max-width:720px){.occ.rail .occ-t{width:250px;min-height:360px}.occ.rail{animation-duration:55s}}
@media (max-width:370px){.rot{font-size:18px}}
@media (max-width:720px){.rot{margin:6px 0 12px}}

/* ---------- Price calculator (owner, 10 Nov 2026: one per-photo price, slider in two modes, always moving, compared
   with other services). A dark glass card in both looks; a slowly turning gradient ring; bars that grow; the guests
   slider glides by itself until someone touches it (assets/js/pricing.js). Still for reduced motion. ---------- */
.calc{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);max-width:1080px;margin:0 auto;padding:clamp(20px,3vw,40px);border-radius:32px;background:linear-gradient(160deg,rgba(43,16,96,.92),rgba(20,10,46,.96) 55%,rgba(58,10,48,.94));color:#F7F4FF;box-shadow:0 40px 90px -40px rgba(124,58,237,.65),0 0 0 1px rgba(255,255,255,.08) inset}
.calc-ring{position:absolute;inset:-2px;z-index:-1;border-radius:34px;padding:2px;background:conic-gradient(from var(--a,0deg),#7C3AED,#EC4899,#FFB547,#7C3AED);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:calcSpin 6s linear infinite;opacity:.9}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes calcSpin{to{--a:360deg}}
.calc-free{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:9px 16px;border-radius:999px;background:linear-gradient(90deg,rgba(255,210,63,.18),rgba(255,95,162,.18));border:1px solid rgba(255,210,63,.45);font-weight:600;color:#FFE7A8;animation:calcBadge 2.4s ease-in-out infinite}
.calc-free-row{margin:0}
a.calc-free{text-decoration:none}a.calc-free:hover{border-color:#FFD23F}
.calc-free-go{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.9em}.calc-free-go .i{width:14px;height:14px}
.calc-free b{color:#fff}
.calc-gift{display:inline-block;animation:calcGift 2.4s ease-in-out infinite}
@keyframes calcBadge{50%{box-shadow:0 0 0 6px rgba(255,210,63,.08),0 0 30px rgba(255,180,80,.35)}}
@keyframes calcGift{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-14deg) scale(1.15)}86%{transform:rotate(12deg) scale(1.15)}}
.calc-tabs{display:inline-flex;gap:6px;padding:5px;margin-bottom:22px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.calc-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:#D9D0F2;font:600 15px/1 var(--body,Inter),sans-serif;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.calc-tabs button .i{width:18px;height:18px}
.calc-tabs [aria-selected=true]{background:linear-gradient(90deg,#7C3AED,#DB2777);color:#fff;box-shadow:0 8px 22px -8px rgba(219,39,119,.7)}
.calc-tabs button:focus-visible{outline:3px solid #FFD23F;outline-offset:2px}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 4px;font-weight:600;color:#E9E1FF}
.calc-row output{font:700 clamp(26px,3vw,34px)/1 'Space Grotesk',Inter,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.calc-range{position:relative;--p:50%;margin-bottom:26px}
.calc-range input{-webkit-appearance:none;appearance:none;width:100%;height:12px;margin:10px 0 6px;border-radius:999px;background:linear-gradient(90deg,#FFD23F,#EC4899 var(--p),rgba(255,255,255,.14) var(--p));outline:none;cursor:pointer}
.calc-range input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid #EC4899;box-shadow:0 0 0 6px rgba(236,72,153,.25),0 6px 16px rgba(0,0,0,.4);transition:transform .2s}
.calc-range input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #EC4899;box-shadow:0 0 0 6px rgba(236,72,153,.25)}
.calc-range input:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc-range input:focus-visible{outline:3px solid #FFD23F;outline-offset:6px}
.calc.gliding .calc-range input::-webkit-slider-thumb{animation:calcThumb 1.6s ease-in-out infinite}
@keyframes calcThumb{50%{box-shadow:0 0 0 12px rgba(236,72,153,.18),0 6px 16px rgba(0,0,0,.4)}}
.calc-marks{display:flex;justify-content:space-between;font-size:12px;color:#B9AEDB}
.calc-marks i{font-style:normal}
.calc-out{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.4vw,28px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.calc-k{margin:0;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C4B5FD}
.calc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.calc-price b{font:700 clamp(46px,6vw,72px)/1 'Space Grotesk',Inter,sans-serif;letter-spacing:-.03em;background:linear-gradient(90deg,#fff,#FFE7A8);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.calc-price b.free{background:linear-gradient(90deg,#FFD23F,#FF5FA2);-webkit-background-clip:text;background-clip:text}
.calc-price span{color:#D9D0F2;font-weight:600}
.calc-per{margin:0;color:#D9D0F2}
.calc-vs{display:grid;gap:10px;margin:6px 0 2px}
.vs-row{display:grid;grid-template-columns:minmax(110px,.9fr) 1.4fr auto;align-items:center;gap:12px}
.vs-n{font-weight:700;color:#fff;line-height:1.2}
.vs-n small{display:block;font-size:12px;font-weight:500;color:#B9AEDB}
.vs-bar{display:block;height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.vs-bar b{display:block;height:100%;width:var(--w,10%);border-radius:inherit;background:linear-gradient(90deg,#8B7AB8,#B9A7E6);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.vs-row.us .vs-bar b{background:linear-gradient(90deg,#FFD23F,#EC4899);box-shadow:0 0 18px rgba(236,72,153,.55)}
.vs-p{font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.vs-row.us .vs-p{color:#FFE7A8}
.calc-save{margin:4px 0 2px;padding:12px 14px;border-radius:14px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35);color:#D1FAE5;font-weight:600}
.calc-save b{color:#6EE7B7}
.calc-fine{display:grid;gap:4px;margin:0;font-size:12.5px;line-height:1.5;color:#B9AEDB}
.calc-fine small{font-size:inherit}
.calc-fine a{color:#E9D5FF}
.price-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;max-width:760px;margin:0 auto;padding:22px 26px;border-radius:24px;background:linear-gradient(120deg,rgba(124,58,237,.18),rgba(236,72,153,.16));border:1px solid rgba(255,255,255,.14);text-align:center}
.price-teaser p{margin:0;font-size:18px}
@media (max-width:860px){.calc{grid-template-columns:1fr}.vs-row{grid-template-columns:minmax(96px,.8fr) 1fr auto}}
@media (prefers-reduced-motion:reduce){.calc-ring,.calc-free,.calc-gift,.calc.gliding .calc-range input::-webkit-slider-thumb{animation:none}.vs-bar b{transition:none}}

/* ---------- QR table card (owner, 10 Nov 2026: "this type of QR code design on our website that people can scan"). The real
   /go/qr code (counted) on a wedding table card; used on the home page and the wedding / QR landing pages. ---------- */
.tcard{position:relative;width:min(290px,100%);margin:10px auto 6px;padding:22px 20px 18px;border-radius:24px;background:linear-gradient(180deg,#FFF9EF,#FFF0D8);color:#2A0D2E;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),inset 0 0 0 6px #D9A334,inset 0 0 0 10px #FFF6E6,inset 0 0 0 12px #C98F22;transform:rotate(-1.5deg);animation:tcFloat 5s ease-in-out infinite}
@keyframes tcFloat{50%{transform:rotate(1deg) translateY(-6px)}}
.tc-top{margin:4px 0 0;font:700 13px/1 Inter,sans-serif;letter-spacing:.32em;color:#B0761A}
.tc-names{margin:8px 0 0;font:700 28px/1.05 'Space Grotesk',Inter,sans-serif;color:#5A1146}
.tc-sub{margin:6px 0 12px;font-size:14px;font-weight:600;color:#6D4A62}
.tc-qr{position:relative;display:block;width:180px;height:180px;margin:0 auto;padding:10px;border-radius:16px;background:#fff;box-shadow:0 0 0 4px #F3DFB8}
.tc-qr .dw-qr{display:block;width:100%;height:100%}
.tc-ic{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:10px;border:4px solid #fff;background:#fff url(/assets/img/icon-96.webp) center/cover}
.tc-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font:800 16px/1 Inter,sans-serif;color:#3B1450}
.tc-foot img{width:28px;height:28px;border-radius:8px}
.tc-foot span{margin-left:4px;font-size:11px;font-weight:600;color:#8A6A7A}
@media (prefers-reduced-motion:reduce){.tcard{animation:none}}

/* guide pages (10 Nov): plain reading text and a comparison table that becomes one card per row on a phone.
   Colours follow the text colour, so it reads right in the dark and the light look. */
.prose p{margin:0 0 1em;font-size:1.08rem;line-height:1.7}
.prose h2{margin-bottom:16px;font-size:clamp(26px,3vw,36px)}
.cmp-wrap{margin-top:8px}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.cmp-table thead th{font:700 12px/1.3 var(--body);letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.cmp-table tbody th{font:700 16px/1.3 var(--head)}
.cmp-table tbody tr:last-child>*{border-bottom:0}
.cmp-us>*{background:linear-gradient(90deg,rgba(124,58,237,.14),rgba(219,39,119,.12))}
.cmp-us th{color:var(--violet-d)}
.cmp-table tbody tr:last-child th{border-bottom-left-radius:18px}
.cmp-table tbody tr:last-child td:last-child{border-bottom-right-radius:18px}
@media (max-width:760px){
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block}
  .cmp-table thead{display:none}
  .cmp-table{box-shadow:none}
  .cmp-table tr{margin-bottom:14px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
  .cmp-table td{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:10px;padding:10px 16px}
  .cmp-table td::before{content:attr(data-l);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
  .cmp-table tbody tr:last-child>*{border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
  .cmp-table tbody tr>*:last-child{border-bottom:0}
}

/* 10 Nov: the hero says how it works in three numbered steps, on phones too (owner: "understand the flow within seconds").
   Phones and tablets: right under the tagline, before the film. Phones: three small cards in one row. */
.hero .path b{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;font:700 11.5px/1 var(--body)}
@media (max-width:1020px){.hero .path{order:3;margin-top:18px}}
@media (max-width:720px){
  .hero .path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
  .hero .path li{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 10px 11px;border-radius:14px;font-size:12.5px;line-height:1.3}
}
/* phones: Ask Snappy waits until the visitor scrolls, so it never covers the first screen (it sat on step 3) */
@media (max-width:720px){
  .ask-fab{transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .top:not(.scrolled)~.ask-fab:not(:focus-visible){opacity:0;visibility:hidden;transform:translateY(14px)}
}
/* desktop: the three steps fit on one line */
@media (min-width:1021px){.hero .path li{padding:7px 11px 7px 7px;gap:6px;font-size:13px}}

/* Most popular plans (owner, 10 Nov 2026): four cards across the top of the calculator; a tap sets the sliders.
   The calculator is always the dark card, so these colours hold in both looks. */
.calc-pop{grid-column:1/-1}
.calc-pop-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font:700 16px/1.2 var(--head);color:#FFE7A8}
.calc-pop-h small{font:500 13px/1.3 var(--body);color:#B9AEDB}
.pop-star{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#FFE27A,#FF9F43);color:#4A2300;font-size:13px;animation:popStar 3s ease-in-out infinite}
@keyframes popStar{0%,70%,100%{transform:none}80%{transform:rotate(-18deg) scale(1.15)}90%{transform:rotate(14deg) scale(1.1)}}
.pop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pop{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:14px 14px 13px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#F7F4FF;font:inherit;text-align:left;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.5,1),border-color .25s,background .25s,box-shadow .25s}
.pop:hover{transform:translateY(-3px);border-color:rgba(255,210,63,.6);box-shadow:0 14px 30px -16px rgba(255,180,80,.6)}
.pop:focus-visible{outline:3px solid #FFD23F;outline-offset:3px}
.pop[aria-pressed=true]{border-color:#FFD23F;background:linear-gradient(160deg,rgba(255,210,63,.2),rgba(236,72,153,.16));box-shadow:inset 0 0 0 1px #FFD23F,0 16px 34px -18px rgba(255,180,80,.75)}
.pop-k{font:700 15px/1.25 var(--head)}
.pop-n{font-size:12.5px;color:#C9BEEA}
.pop-p{margin-top:6px;font:700 26px/1 var(--head);background:linear-gradient(100deg,#FFE7A8,#FBCFE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pop-vs{font-size:12px;line-height:1.35;color:#B9AEDB}
.pop-usd{display:block;margin-top:3px;font-size:12px;font-weight:600;color:#E9DDFF}
.calc-price .calc-usd{flex-basis:100%;margin-top:-2px;font-size:15px;color:#E9DDFF}
.calc-price .calc-usd:empty{display:none}
.pop.hit{animation:popHit .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes popHit{0%{transform:scale(.95)}60%{transform:scale(1.04)}100%{transform:none}}
.calc-pop.glow .pop{animation:popGlow 1.3s ease both}
.calc-pop.glow .pop:nth-child(2){animation-delay:.12s}.calc-pop.glow .pop:nth-child(3){animation-delay:.24s}.calc-pop.glow .pop:nth-child(4){animation-delay:.36s}
@keyframes popGlow{30%{transform:translateY(-4px);border-color:#FFD23F;box-shadow:0 0 0 3px rgba(255,210,63,.35),0 18px 40px -16px rgba(255,180,80,.8)}}
@media (max-width:860px){.pop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pop{padding:12px}.pop-p{font-size:23px}}
/* Packages (11 Nov 2026, premium pricing): the wedding package carries a gold tag, notes under the cards, a quiet Book button */
.pkg-star{border-color:rgba(255,210,63,.55);background:linear-gradient(160deg,rgba(255,210,63,.12),rgba(255,255,255,.05))}
.pkg-tag{align-self:flex-start;margin-bottom:4px;padding:3px 9px;white-space:nowrap;border-radius:999px;background:linear-gradient(100deg,#F5C451,#FFE7A8);color:#3A2400;font:700 11px/1.3 var(--body);letter-spacing:.02em}
.pkg-notes{display:grid;gap:6px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:1.5;color:#D9D0F2}
.pkg-notes b{color:#FFE7A8}
.pkg-notes a{color:#E9D5FF}
.calc-book{margin-top:-4px}
.pkg-biz{text-decoration:none;border-style:dashed;border-color:rgba(255,231,168,.45)}
.pkg-biz .pop-p{font-size:21px}
.pkg-biz:hover{border-color:#FFD23F}


/* Hero "Check pricing" (owner, 10 Nov 2026: "new and eye-catching"): a light runs round the border, a sheen sweeps across,
   the ₹ coin flips and the line flips through FREE and the popular plans (assets/js/pricing.js). Still for reduced motion. */
@property --pp{syntax:'<angle>';inherits:false;initial-value:0deg}
.price-peek{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:8px 10px 8px 8px;border-radius:999px;background:rgba(20,10,46,.72);color:#fff;text-decoration:none;box-shadow:0 18px 40px -20px rgba(236,72,153,.75);transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.price-peek::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--pp),rgba(255,255,255,.14) 0 60%,#FFD23F 72%,#F472B6 82%,#A78BFA 91%,rgba(255,255,255,.14) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ppBeam 3.2s linear infinite}
.price-peek::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:ppSheen 3.2s ease-in-out infinite}
@keyframes ppBeam{to{--pp:360deg}}
@keyframes ppSheen{0%,45%{background-position:-150% 0}85%,100%{background-position:150% 0}}
.price-peek:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 46px -18px rgba(236,72,153,.9)}
.price-peek:focus-visible{outline:3px solid #FFD23F;outline-offset:3px}
.pp-coin{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF5CC,#FFD23F 45%,#E39A12);color:#5A3300;font:800 20px/1 var(--head);box-shadow:inset 0 -3px 0 rgba(120,60,0,.35),0 6px 16px -6px rgba(255,190,60,.85)}
.pp-coin i{font-style:normal}
.pp-coin.flip{animation:ppFlip .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes ppFlip{to{transform:rotateY(360deg)}}
.pp-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-tx b{font:700 16px/1.15 var(--head)}
.pp-line{display:block;overflow:hidden;width:14.5em;height:1.4em;font-size:13.5px;line-height:1.4;font-weight:600;color:#FFE7A8}
.pp-rot{display:inline-block;white-space:nowrap;transition:transform .28s cubic-bezier(.3,.7,.3,1),opacity .28s}
.pp-rot.out{transform:translateY(-100%);opacity:0}
.pp-rot.pre{transform:translateY(100%);opacity:0;transition:none}
.pp-go{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;transition:transform .3s}
.pp-go .i{width:16px;height:16px}
.price-peek:hover .pp-go{transform:translateX(3px)}
html[data-theme=light] .price-peek{background:#fff;color:var(--ink);box-shadow:0 16px 36px -18px rgba(124,58,237,.55)}
html[data-theme=light] .pp-line{color:#B4530F}
@media (min-width:1021px){.hero .path{margin-top:28px}}
@media (max-width:1020px){.hero .price-peek{order:3;align-self:flex-start}}
@media (max-width:720px){.hero .price-peek{align-self:stretch;margin-top:12px}.hero .pp-go{margin-left:auto}.pp-line{width:auto}}
@media (prefers-reduced-motion:reduce){.price-peek::before,.price-peek::after,.pop-star,.pp-coin.flip,.pop.hit,.calc-pop.glow .pop{animation:none}}
/* phones: the two offer chips on one line and shorter step cards, so Check pricing sits in the first screen above
   the sticky Open Snappy bar (an iPhone shows about 664 px of the page) */
@media (max-width:720px){
  .dw-chip{flex-wrap:nowrap;gap:6px}
  .dw-chip a{padding:7px 11px;font-size:12.5px;white-space:nowrap}
  .hero .path li{display:block;padding:9px 10px;font-size:12.5px;line-height:1.35}
  .hero .path b{width:18px;height:18px;margin-right:5px;font-size:10.5px;vertical-align:-3px}
}
@media (max-width:360px){.dw-chip{flex-wrap:wrap}}

/* Guides hub, Related guides and the footer guides column (11 Nov 2026: one list in tools/build.mjs GUIDES) */
.glist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gcard{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.gcard:hover,.gcard:focus-visible{transform:translateY(-3px);border-color:#C4B5FD;box-shadow:0 18px 34px -22px rgba(91,33,182,.55)}
.gcard .gk{font:700 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.gcard b{font:700 18px/1.3 var(--head)}
.gcard>span:last-child{color:var(--ink-2);font-size:15px;line-height:1.5}
.related{margin-top:8px}
.related h2{margin-bottom:18px;font-size:clamp(22px,2.4vw,28px)}
.related>p{margin-top:18px}
.cmp-src{margin-top:14px}
@media (max-width:640px){.glist{gap:12px}.gcard{padding:18px 20px;border-radius:18px}.gcard b{font-size:17px}}