/* dply landing: the app's "Eclipse" light look (cykl-app plan 050) as plain
   CSS. Light only. Tokens are copied from cykl-app/src/styles/dply-tokens.css;
   keep them in step if the brand changes. Fonts are the app's own files.
   Direction-safe: logical properties only, so the Persian (rtl) page needs no
   separate rules except type. */

@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/vazirmatn-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --f-ui:'Figtree','Vazirmatn',system-ui,sans-serif;
  --cream:#F8EFEA; --surface:#FFFFFF;
  --ink:#2A161B; --ink-60:rgba(42,22,27,.62); --ink-40:rgba(42,22,27,.46);
  --ink-20:rgba(42,22,27,.16); --ink-08:rgba(42,22,27,.06);
  --accent:#6E2A3C; --on-accent:#FCF3F0; --danger:#B3261E;
  --blush:rgba(244,200,194,.6); --halftone:rgba(212,146,150,.36);
  --vig-in:#FBF4F0; --vig-out:#F1E4DE;
  --mat:linear-gradient(160deg,#FFFFFF 0%,#F9F3F0 100%);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 60px -30px rgba(110,55,55,.42),0 2px 6px rgba(110,55,55,.05);
  --cta:linear-gradient(180deg,#7B3347,#642536);
  --cta-shadow:inset 0 1px 0 rgba(255,215,225,.28),inset 0 -3px 8px rgba(40,0,10,.18),0 14px 28px -12px rgba(110,42,60,.62);
  --r-card:30px; --r-pill:100px;
  /* "only": phones in dark mode (Chrome's auto dark, Telegram's browser)
     must not darken the page themselves; the gradient headline goes dark on
     dark when they do */
  color-scheme:only light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background:var(--cream);color:var(--ink);font:400 16px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}

/* Background: soft colour blobs that drift on slow, out-of-step loops, so the
   mix never repeats exactly. Only transforms animate (no repaint). */
.ground{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 30%,var(--vig-in),var(--vig-out))}
.ground i{position:absolute;border-radius:50%;will-change:transform;animation:18s ease-in-out infinite alternate}
/* Wine and warm sand from the brand, with a cool ink-violet so it reads less
   "beauty brand" and more calm/technical. */
.ground .b1{width:78vmax;height:78vmax;top:-38vmax;right:-30vmax;animation-name:drift-a;
  background:radial-gradient(closest-side,rgba(168,96,108,.34),rgba(196,150,140,.18) 55%,transparent)}
.ground .b2{width:62vmax;height:62vmax;top:38%;left:-30vmax;animation-name:drift-b;animation-duration:23s;
  background:radial-gradient(closest-side,rgba(226,184,132,.46),rgba(232,206,170,.22) 55%,transparent)}
.ground .b3{width:60vmax;height:60vmax;bottom:-34vmax;right:-14vmax;animation-name:drift-c;animation-duration:27s;
  background:radial-gradient(closest-side,rgba(92,86,160,.24),rgba(130,122,180,.1) 55%,transparent)}
.ground .b4{width:34vmax;height:34vmax;top:6%;left:24%;animation-name:drift-d;animation-duration:20s;
  background:radial-gradient(closest-side,rgba(110,42,60,.16),transparent)}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vw,8vh,0) scale(1.14)}100%{transform:translate3d(-4vw,16vh,0) scale(.92)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vw,-10vh,0) scale(1.18)}100%{transform:translate3d(6vw,8vh,0) scale(.96)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-16vw,-12vh,0) scale(.9)}100%{transform:translate3d(-6vw,-20vh,0) scale(1.15)}}
@keyframes drift-d{0%{transform:translate3d(0,0,0) scale(.9)}50%{transform:translate3d(18vw,14vh,0) scale(1.2)}100%{transform:translate3d(-10vw,24vh,0) scale(1)}}
/* Matching network over the whole background (drawn by app.js): dots for
   people, a band that sweeps across, a few pairs linked. It breathes between
   faint and clearer. */
.ground .net{position:absolute;inset:0;width:100%;height:100%;animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.28}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.ground i{animation:none}.ground .net{animation:none;opacity:.5}}
.ground::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,var(--halftone) .9px,transparent 1.35px) 0 0/6px 6px;
  -webkit-mask-image:radial-gradient(50% 34% at 100% 0%,#000 8%,transparent 74%),radial-gradient(30% 24% at 0% 60%,#000 4%,transparent 72%);
          mask-image:radial-gradient(50% 34% at 100% 0%,#000 8%,transparent 74%),radial-gradient(30% 24% at 0% 60%,#000 4%,transparent 72%)}

/* ---- header ---- */
.top{direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 16px 0;max-width:1120px;width:100%;margin:0 auto}
.wordmark{font:700 26px/1 var(--f-ui);letter-spacing:-.06em}
.top-right{display:flex;align-items:center;gap:8px}
.pill{unicode-bidi:plaintext;font:600 10.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:9px 12px;border-radius:var(--r-pill);border:1px solid var(--ink-20)}
/* the white thumb slides between the two buttons instead of jumping */
.lang{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-pill);background:var(--ink-08)}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-pill);background:var(--surface);box-shadow:0 2px 8px -2px rgba(110,55,55,.3);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.lang[data-on=fa]::before{transform:translateX(100%)}
.lang button{position:relative;min-width:40px;height:30px;padding:0 10px;border-radius:var(--r-pill);font:600 12.5px/1 var(--f-ui);color:var(--ink-60);transition:color .25s}
.lang button[lang=fa]{font-family:'Vazirmatn',sans-serif;font-size:13.5px}
.lang button[aria-pressed=true]{color:var(--ink)}
.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- layout ---- */
.layout{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:36px 16px 40px;display:grid;gap:36px}
@media (min-width:900px){
  /* The pitch starts level with the form, not halfway down it (the form is
     tall now, with the questions under it), and on a screen tall enough it
     stays in view while the form scrolls. */
  .layout{grid-template-columns:1fr 440px;gap:72px;align-items:start;padding-block:56px}
  .pitch{padding-top:24px}
}
@media (min-width:900px) and (min-height:760px){
  .pitch{position:sticky;top:40px}
}

/* ---- pitch ---- */
h1{margin:0;display:flex;flex-direction:column;text-wrap:balance}
h1 span{font:700 clamp(46px,12vw,92px)/.92 var(--f-ui);letter-spacing:-.055em}
h1 em{font:400 clamp(46px,12vw,92px)/.98 var(--f-ui);font-style:normal;letter-spacing:-.045em;color:var(--accent);margin-top:.02em}
/* The second line is wine, with a band of violet and sand passing through it
   every few seconds, then resting: the "AI is thinking" cue, no extra copy. */
h1 em{background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 36%,#7A4A9E 44%,#C98A6A 50%,#5C56A0 56%,var(--accent) 64%,var(--accent) 100%) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* background-clip:text only paints inside the box, and Persian dots below
     the line (the پ in سوایپ) hang past it: pad the box, cancel the space */
  padding:.08em 0 .3em;margin-block:-.06em -.3em;animation:ai-sweep 7s cubic-bezier(.45,0,.25,1) .6s infinite both}
html[dir=rtl] h1 em{animation-direction:reverse}
@keyframes ai-sweep{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){h1 em{animation:none;background-position:0 0}}
/* a browser that darkens anyway (app.js checks): plain text it can recolour */
html.forced-dark h1 em{background:none;color:var(--accent);animation:none}
.lede{margin:22px 0 0;max-width:24em;font-size:18px;line-height:1.55;color:var(--ink-60);text-wrap:pretty}
.tags{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.6);border:1px solid var(--ink-08);font:600 13px/1.2 var(--f-ui);color:var(--ink)}/* Persian: Vazirmatn throughout, weight contrast instead of the serif, no
   negative tracking (it breaks joined letters). */
html[lang=fa]{--f-ui:'Vazirmatn',system-ui,sans-serif}
html[lang=fa] h1 span{font:700 clamp(44px,11.5vw,84px)/1.15 'Vazirmatn',sans-serif;letter-spacing:0}
html[lang=fa] h1 em{font:300 clamp(44px,11.5vw,84px)/1.2 'Vazirmatn',sans-serif;letter-spacing:0}
html[lang=fa] h2{font:700 26px/1.3 'Vazirmatn',sans-serif}
html[lang=fa] .pill{letter-spacing:0;text-transform:none;font-size:12px}

/* ---- panel ---- */
.panel{background:var(--mat);box-shadow:var(--mat-shadow);border-radius:var(--r-card);padding:26px 18px}
@media (min-width:480px){.panel{padding:32px 28px}}
h2{margin:0;font:700 30px/1.1 var(--f-ui);letter-spacing:-.03em}
.hint{margin:6px 0 22px;color:var(--ink-60);font-size:15px}

.field{margin:0 0 16px;padding:0;border:0;min-width:0}
.field>label,legend{display:block;margin:0 0 7px;padding:0;font:600 13.5px/1.3 var(--f-ui)}
input[type=email],input[type=text],textarea{-webkit-appearance:none;appearance:none;width:100%;font:500 16px/1.4 var(--f-ui);color:var(--ink);background:var(--surface);border:1.5px solid var(--ink-08);border-radius:16px;padding:13px 16px;outline:none;transition:border-color .15s}
textarea{resize:vertical;min-height:84px}
input::placeholder,textarea::placeholder{color:var(--ink-40)}
input:focus-visible,textarea:focus-visible{border-color:var(--accent)}
[aria-invalid=true]{border-color:var(--danger)!important}
.help{margin:6px 2px 0;font-size:13px;color:var(--ink-60)}
.help:empty{display:none}
.err{margin:6px 2px 0;font-size:13px;font-weight:600;color:var(--danger)}
.err:empty{display:none}
.count{text-align:end}

.seg{display:flex;gap:8px}
.seg label{flex:1 1 0;min-width:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--ink-08);font:600 14.5px/1.2 var(--f-ui);transition:background .15s,border-color .15s,color .15s;text-align:center}
.seg input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.seg.invalid span{border-color:var(--danger)}

.citylist{list-style:none;margin:6px 0 0;padding:6px;background:var(--surface);border:1.5px solid var(--ink-08);border-radius:16px;max-height:260px;overflow:auto;box-shadow:0 18px 36px -18px rgba(60,20,30,.35)}
.citylist li{padding:10px 12px;border-radius:12px;cursor:pointer;display:grid;gap:1px}
.citylist li[aria-selected=true],.citylist li:hover{background:var(--ink-08)}
.citylist .main{font-weight:600}
.citylist .sub{font-size:13px;color:var(--ink-60)}
.picked{color:var(--accent);font-weight:600}

.prefix{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--ink-08);border-radius:16px;padding-inline-start:16px}
.prefix:focus-within{border-color:var(--accent)}
.prefix span{color:var(--ink-40);font-weight:600}
.prefix input{border:0!important;background:none;padding-inline-start:4px}
.prefix:has([aria-invalid=true]){border-color:var(--danger)}

.optional{margin:4px 0 0;border-top:1px solid var(--ink-08);padding-top:14px}
.optional summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(110,42,60,.06);background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px dashed rgba(110,42,60,.3);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.optional summary::-webkit-details-marker{display:none}
/* The plus is drawn with two bars, not a glyph, so it is exactly centred and
   turns on its own middle. */
.optional summary::after{content:"";grid-row:1/3;grid-column:2;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(var(--on-accent),var(--on-accent)) center/12px 2px no-repeat,
             linear-gradient(var(--on-accent),var(--on-accent)) center/2px 12px no-repeat,var(--accent);
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.optional[open]:not(.closing) summary::after{transform:rotate(135deg)}
.optional summary{transition:background .3s}
.optional[open]:not(.closing) summary{background:rgba(110,42,60,.09);background:color-mix(in srgb,var(--accent) 9%,transparent)}
/* app.js animates this box's height; the gap lives inside so it animates too */
.opt-inner{padding-top:16px}
.optional summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt-title{font:700 15px/1.3 var(--f-ui);color:var(--accent)}
.opt-sub{margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-60)}
.answer-foot{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.answer-foot .count{flex:none}

.hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-60);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}

.cta{margin-top:20px;width:100%;min-height:56px;border-radius:var(--r-pill);background:var(--cta);box-shadow:var(--cta-shadow);color:var(--on-accent);font:600 16px/1 var(--f-ui);transition:transform .12s,opacity .15s}
.cta:active{transform:scale(.985)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta[disabled]{opacity:.6;cursor:progress}
.form-err{text-align:center}

.done{text-align:center;padding:8px 0 16px;outline:none}
.done p{color:var(--ink-60);margin:10px auto 0;max-width:26em}
.done h2{margin-top:4px}

/* ---- the pass: a holographic foil card with the person's name ----
   --rx/--ry tilt it, --px/--py move the foil, --gx/--gy move the glare.
   app.js drives them from the pointer, the phone's tilt, or a slow idle
   sweep. Colours are the brand wine with an iridescent foil on top. */
.pass-stage{width:min(100%,300px);margin:6px auto 24px;perspective:1100px;animation:pass-in 1.1s cubic-bezier(.2,.85,.25,1) both}
@keyframes pass-in{
  0%{opacity:0;transform:translateY(40px) rotateY(-110deg) scale(.86)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.pass{--rx:0deg;--ry:0deg;--px:50%;--py:50%;--gx:50%;--gy:30%;
  position:relative;aspect-ratio:5/7;border-radius:26px;overflow:hidden;color:#FCEFF0;text-align:start;
  background:
    radial-gradient(110% 70% at 15% 0%,rgba(176,74,103,.85),transparent 62%),
    radial-gradient(90% 60% at 100% 100%,rgba(120,40,70,.7),transparent 60%),
    linear-gradient(160deg,#5B1F30 0%,#2B0D17 55%,#13060A 100%);
  box-shadow:0 34px 60px -24px rgba(80,18,36,.7),0 10px 24px -12px rgba(80,18,36,.45),inset 0 0 0 1px rgba(255,214,226,.16),inset 0 1px 0 rgba(255,232,238,.38);
  transform:rotateX(var(--ry)) rotateY(var(--rx));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pass.live{transition:transform .08s linear}
.pass-holo,.pass-dots,.pass-glare{position:absolute;inset:0;pointer-events:none}
.pass-holo{
  background:linear-gradient(115deg,transparent 18%,rgba(255,150,180,.7) 30%,rgba(255,214,160,.65) 38%,rgba(255,190,170,.6) 46%,rgba(150,190,255,.65) 54%,rgba(220,160,255,.65) 62%,transparent 76%);
  background-size:260% 260%;background-position:var(--px) var(--py);mix-blend-mode:color-dodge;opacity:.32}
.pass-dots{
  background:radial-gradient(circle,rgba(255,196,214,.42) .9px,transparent 1.45px) 0 0/7px 7px;
  -webkit-mask-image:radial-gradient(70% 45% at 100% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(70% 45% at 100% 0%,#000 10%,transparent 72%),radial-gradient(50% 35% at 0% 100%,#000 5%,transparent 70%)}
.pass-glare{background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.5),rgba(255,255,255,.08) 28%,transparent 52%);mix-blend-mode:overlay}
/* one bright sweep when the card lands */
.pass::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-80%);animation:pass-sweep 1.4s .7s ease-in-out both;pointer-events:none;mix-blend-mode:overlay}
@keyframes pass-sweep{to{transform:translateX(80%)}}

.pass-body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px 22px 20px}
.pass-top{display:flex;align-items:center;justify-content:space-between}
.pass-mark{font:700 24px/1 var(--f-ui);font-family:'Figtree',sans-serif;letter-spacing:-.06em}
.pass-kind{font:600 9.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,220,230,.3);background:rgba(255,220,230,.08)}
html[lang=fa] .pass-kind{letter-spacing:0;font-size:11px}
.pass-mid{display:flex;flex-direction:column;gap:8px}
.pass-name{font:600 clamp(42px,14vw,60px)/1.05 var(--f-ui);overflow-wrap:anywhere;
  background:linear-gradient(100deg,#FFFFFF 0%,#F7C9C2 22%,#FFFFFF 42%,#E9B1C6 62%,#FFF4EC 82%,#F7C9C2 100%);background-size:220% 100%;background-position:var(--px) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(255,190,205,.18)}
/* three equal columns with hairlines between; every value lines up under
   its label in both directions (match-parent: a latin city or the code in
   the Persian page still aligns to the right like its label) */
.pass-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding-top:14px;border-top:1px solid rgba(255,220,230,.18)}
.pass-meta div{min-width:0;padding-inline:12px}
.pass-meta div:first-child{padding-inline-start:0}
.pass-meta div:last-child{padding-inline-end:0}
.pass-meta div+div{border-inline-start:1px solid rgba(255,220,230,.16)}
.pass-meta dt{font:600 8.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:rgba(252,239,240,.55)}
html[lang=fa] .pass-meta dt{letter-spacing:0;font-size:10.5px}
.pass-meta dt,.pass-meta dd{text-align:match-parent}
.pass-meta dd{margin:7px 0 0;font:600 13.5px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}


@media (prefers-reduced-motion:reduce){.pass-stage,.pass::after{animation:none}}

.foot{display:flex;justify-content:space-between;gap:16px;max-width:1120px;width:100%;margin:0 auto;padding:0 16px 24px;font-size:13px;color:var(--ink-40)}

/* language switch: the page fades and settles instead of flipping in place */
.layout,.foot,.pill{transition:opacity .2s ease,transform .2s ease,filter .2s ease}
html.swapping .layout,html.swapping .foot,html.swapping .pill{opacity:0;transform:translateY(6px);filter:blur(3px)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html.swapping .layout,html.swapping .foot,html.swapping .pill{transform:none;filter:none}}
/* An empty dir="auto" field falls back to ltr; keep its placeholder on the page side. */
html[dir=rtl] :is(input,textarea)[dir=auto]:placeholder-shown{direction:rtl}

/* after signing up: invite a friend */
.sharerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:12px 12px 12px 18px;padding-inline:18px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--ink-08);text-align:start}
.done .sharerow p{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.sharebtn{flex:none;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--cta);box-shadow:var(--cta-shadow);color:var(--on-accent);font:600 14px/1 var(--f-ui)}
.sharebtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* "tell me on Telegram too": Telegram's own blue only on the icon, so it is
   recognisable without fighting the wine CTA */
.tgrow{margin-top:20px}
.tgbtn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding-block:8px;padding-inline:8px 20px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--ink-08);box-shadow:0 10px 24px -14px rgba(110,42,60,.45);font:600 15px/1.2 var(--f-ui);color:var(--ink);text-decoration:none}
.tgbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tg-ico{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:#2AABEE}
.tg-ico::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;transform:translateX(-1px);background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.6 2.9 10.7c-1.3.5-1.2 2.3.1 2.7l4.6 1.4 1.8 5.6c.3.9 1.5 1.2 2.2.5l2.6-2.5 4.6 3.4c.8.6 2 .2 2.2-.8l3.1-15.2c.3-1.4-1-2.5-2.7-2.2zM9.8 14.6l-.5 3.7-1.3-4.1 9.6-6.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.6 2.9 10.7c-1.3.5-1.2 2.3.1 2.7l4.6 1.4 1.8 5.6c.3.9 1.5 1.2 2.2.5l2.6-2.5 4.6 3.4c.8.6 2 .2 2.2-.8l3.1-15.2c.3-1.4-1-2.5-2.7-2.2zM9.8 14.6l-.5 3.7-1.3-4.1 9.6-6.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.done .tg-why{margin-top:10px;font-size:13.5px}

/* "put your pass on your story": small and quiet, so Telegram stays the
   thing to do */
.storyrow{margin-top:16px}
.storysm{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--ink-08);color:var(--ink-60);font:600 13px/1 var(--f-ui);transition:background .15s,color .15s}
@media (hover:hover){.storysm:hover{background:var(--surface);color:var(--ink)}}
.storysm:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.storysm i{position:relative;flex:none;width:16px;height:16px;border-radius:5px;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.storysm i::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid #fff}

/* the sheet before the story: rises from the bottom */
.ss-dlg{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(42,22,27,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .26s;overscroll-behavior:contain}
.ss-dlg.open{opacity:1}
.ss{width:100%;max-width:460px;padding:10px 22px max(24px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--cream);box-shadow:0 -20px 50px -20px rgba(40,10,20,.45);transform:translateY(40px);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ss-dlg.open .ss{transform:none}
@media (min-width:520px){.ss-dlg{align-items:center}.ss{border-radius:28px}}
.ss-grab{display:block;width:40px;height:5px;margin:0 auto 16px;border-radius:3px;background:var(--ink-20)}
.ss h3{margin:0;font:700 19px/1.4 var(--f-ui)}
.ss-why{margin:6px 0 14px;font-size:13.5px;line-height:1.75;color:var(--ink-60)}
.ss-link{display:flex;align-items:center;gap:8px;padding-block:6px;padding-inline:14px 6px;border-radius:16px;background:var(--surface);border:1.5px solid var(--ink-08)}
.ss-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.2 'Figtree',sans-serif}
.ss-link button{flex:none;min-height:38px;padding:0 14px;border-radius:var(--r-pill);background:rgba(30,122,60,.1);color:#1E7A3C;font:600 13px/1 var(--f-ui)}
.ss-how{list-style:none;margin:16px 0 4px;padding:0;display:grid;gap:10px}
.ss-how li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.8}
.ss-how i{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 12px/1 var(--f-ui);font-style:normal}
.ss-sticker{display:inline-block;padding:0 8px;border-radius:7px;background:var(--surface);border:1px solid var(--ink-08);font:700 11.5px/1.8 'Figtree',sans-serif;color:#3B82F6}
.ss-later{display:block;margin:10px auto 0;min-height:40px;padding:0 16px;color:var(--ink-60);font:600 14px/1 var(--f-ui)}

/* questions under the form: one open at a time, the + turns into a × */
.faq{margin-top:26px}
.faq h3{margin:0 0 10px;font:700 16px/1.4 var(--f-ui)}
.qa{margin-bottom:8px;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid var(--ink-08);transition:background .3s,box-shadow .3s}
.qa.open{background:var(--surface);box-shadow:0 14px 30px -20px rgba(110,42,60,.45)}
.q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;text-align:start;font:600 14.5px/1.5 var(--f-ui)}
.q:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:18px}
.q i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink-08);transition:background .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.q i::before,.q i::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:2px;border-radius:1px;background:var(--ink);transition:background .3s}
.q i::after{transform:rotate(90deg)}
.qa.open .q i{background:var(--accent);transform:rotate(135deg)}
.qa.open .q i::before,.qa.open .q i::after{background:var(--on-accent)}
.a{height:0;overflow:hidden}
.a p{margin:0;padding:0 16px 16px;font-size:13.5px;line-height:1.85;color:var(--ink-60)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- "How it works": the button, the line under it ---- */
.tour{margin-top:26px}
.tour-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding-block:8px;padding-inline:8px 20px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--ink-08);box-shadow:0 10px 24px -14px rgba(110,42,60,.45);font:600 15px/1.2 var(--f-ui);color:var(--ink);transition:transform .15s,box-shadow .2s}
@media (hover:hover){.tour-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(110,42,60,.55)}}
.tour-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tour-play{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--cta)}
.tour-play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--on-accent);transform:translateX(1.5px)}
.tour-play::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:tour-ping 2.4s 1s ease-out infinite}
@keyframes tour-ping{0%{opacity:.55;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.tour-why{margin:14px 0 0;max-width:27em;font-size:14px;line-height:1.6;color:var(--ink-60);text-wrap:pretty}
.tour-why::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:9px;border-radius:50%;background:var(--accent);vertical-align:middle;box-shadow:0 0 0 3px rgba(110,42,60,.14)}

/* ---- the slides ---- */
html.tour-lock{overflow:hidden}
.tour-dlg{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(42,22,27,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .26s}
.tour-dlg.open{opacity:1}
.tour-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:420px;height:min(720px,calc(100vh - 32px));height:min(720px,calc(100dvh - 32px));overflow:hidden;border-radius:28px;background:var(--cream);box-shadow:0 40px 80px -30px rgba(40,10,20,.6);transform:translateY(16px) scale(.97);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.tour-dlg.open .tour-card{transform:none}
@media (max-width:480px){.tour-dlg{padding:0}.tour-card{max-width:none;height:100vh;height:100dvh;border-radius:0}}
/* iPhone: no page scroll or rubber-band behind the story; swipes are read
   from pointer events, nothing in it scrolls. */
.tour-dlg{overscroll-behavior:contain;touch-action:none}

.tour-bars{display:flex;gap:4px;padding:14px 16px 0}
@media (max-width:480px){.tour-bars{padding-top:max(14px,env(safe-area-inset-top))}}
.tour-bars i{flex:1;height:3px;overflow:hidden;border-radius:2px;background:var(--ink-08)}
.tour-bars b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
html[dir=rtl] .tour-bars b{transform-origin:right}
.tour-bars i.past b{transform:scaleX(1)}
.tour-bars i.now b{animation:tour-fill .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tour-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ltr in both languages: close stays top right, where people look for it */
.tour-head{direction:ltr;display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0}
.tour-mark{font:700 20px/1 var(--f-ui);letter-spacing:-.06em}
.tour-x{position:relative;width:40px;height:40px;border-radius:50%;background:var(--ink-08)}
.tour-x::before,.tour-x::after{content:"";position:absolute;inset:0;width:14px;height:2px;margin:auto;border-radius:1px;background:var(--ink);transform:rotate(45deg)}
.tour-x::after{transform:rotate(-45deg)}
.tour-x:focus-visible,.tour-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tour-view{flex:1;min-height:0;overflow:hidden;-webkit-user-select:none;user-select:none}
.tour-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
/* No scrolling: the picture (.tv) is the only part that gives up height, so
   the words and the button always fit under it. */
.tour-slide{display:flex;flex:0 0 100%;flex-direction:column;min-height:0;padding:16px 22px 18px;overflow:hidden}
.tour-slide h3{margin:18px 0 0;font:700 26px/1.15 var(--f-ui);letter-spacing:-.02em;text-wrap:balance}
html[lang=fa] .tour-slide h3{font:700 23px/1.5 'Vazirmatn',sans-serif;letter-spacing:0}
.tour-slide>h3,.tour-slide>p{flex:none}
.tour-slide>p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ink-60);text-wrap:pretty}
.tour-slide h3,.tour-slide>p,.tour-cta{opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .5s .15s cubic-bezier(.2,.8,.2,1)}
.tour-slide>p{transition-delay:.25s}
.tour-slide.is-on h3,.tour-slide.is-on>p,.tour-slide.is-on .tour-cta{opacity:1;transform:none}
/* a tighter shadow than the page CTA, so it fits in the slide's padding and
   is not cut off at the bottom */
.tour-cta{flex:none;margin-top:auto;transition-delay:.4s;box-shadow:inset 0 1px 0 rgba(255,215,225,.28),inset 0 -3px 8px rgba(40,0,10,.18),0 8px 14px -8px rgba(110,42,60,.6)}
.tour-slide>p:has(+.tour-cta){margin-bottom:18px}

/* prev (quiet circle) · hint · next (wine pill, the obvious one). The row
   mirrors in Persian, so next sits on the left with its arrow pointing left. */
.tour-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px max(16px,env(safe-area-inset-bottom))}
.tour-prev{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink-08)}
.tour-prev::before,.tour-next i{content:"";display:block;width:9px;height:9px;border:solid currentColor;border-width:0 0 2px 2px}
.tour-prev::before{position:absolute;inset:0;margin:auto;transform:translateX(2px) rotate(45deg)}
.tour-next{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--cta);box-shadow:var(--cta-shadow);color:var(--on-accent);font:600 14.5px/1 var(--f-ui)}
.tour-next i{transform:translateX(-2px) rotate(-135deg)}
html[dir=rtl] .tour-prev::before{transform:translateX(-2px) rotate(-135deg)}
html[dir=rtl] .tour-next i{transform:translateX(2px) rotate(45deg)}
.tour-nav button:disabled{opacity:.3;box-shadow:none;cursor:default}
.tour-hint{flex:1;min-width:0;text-align:center;font-size:12.5px;line-height:1.4;color:var(--ink-40)}
.tour-card.at-end .tour-hint,.tour-card.at-end .tour-next{visibility:hidden}

/* The picture on each slide: a wine panel; what is in it plays when the
   slide comes on (.is-on), so it replays on every visit. */
/* -webkit-mask-image: Safari otherwise lets animated children paint past
   the rounded corners of an overflow:hidden box */
.tv{position:relative;flex:0 1 330px;min-height:180px;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);border-radius:24px;color:#FCEFF2;
  background:radial-gradient(120% 90% at 15% 0%,#94405A,transparent 60%),radial-gradient(90% 80% at 100% 100%,#5C56A0,transparent 62%),linear-gradient(160deg,#6E2A3C,#33182A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,210,222,.22) .9px,transparent 1.4px) 0 0/7px 7px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}

/* 1: a deck of profile cards swiped away, again and again */
.tv-deck i{position:absolute;left:50%;top:50%;width:120px;height:160px;margin:-80px 0 0 -60px;border-radius:16px;box-shadow:0 18px 30px -12px rgba(0,0,0,.55);animation:deck 4s cubic-bezier(.4,0,.2,1) infinite;--fly:-190%;--rot:-16deg}
.tv-deck i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.45) 0 17%,transparent 18%),radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.4) 0 34%,transparent 35%)}
.tv-deck i:nth-child(1){background:linear-gradient(160deg,#F2C4B0,#C98A6A)}
.tv-deck i:nth-child(2){background:linear-gradient(160deg,#D9B8E8,#8A7BC8);animation-delay:-1s;--fly:190%;--rot:16deg}
.tv-deck i:nth-child(3){background:linear-gradient(160deg,#F7D9C4,#E09A98);animation-delay:-2s}
.tv-deck i:nth-child(4){background:linear-gradient(160deg,#CFE0F4,#7E9CC9);animation-delay:-3s;--fly:190%;--rot:16deg}
@keyframes deck{0%{z-index:1;opacity:0;transform:translateY(18px) scale(.86)}12%{opacity:1}30%{z-index:2;transform:none}60%{z-index:3;opacity:1;transform:none}85%,100%{z-index:3;opacity:0;transform:translateX(var(--fly)) rotate(var(--rot))}}

/* 2: the chat */
.tv-chat{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px}
.bub{max-width:84%;margin:0;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;opacity:0;transform:translateY(8px) scale(.96)}
.bub.ai{align-self:flex-start;border-end-start-radius:6px;background:rgba(255,255,255,.15)}
.bub.me{align-self:flex-end;border-end-end-radius:6px;background:#FCF3F0;color:var(--ink)}
.tour-slide.is-on .bub{animation:bub .45s cubic-bezier(.2,.8,.2,1) .3s forwards}
.tour-slide.is-on .bub.me{animation-delay:1.4s}
.tour-slide.is-on .bub.typing{animation-delay:2.5s}
.typing{display:flex;gap:4px;padding:13px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bub{to{opacity:1;transform:none}}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* 3: today's few, each with a reason */
.tv-intros{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:16px 18px}
.tv-intros .today{align-self:flex-start;padding:7px 11px;border:1px solid rgba(255,220,230,.3);border-radius:var(--r-pill);font:600 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,230,236,.85)}
html[lang=fa] .tv-intros .today{font-size:12.5px;letter-spacing:0}
.tv-intros .row{display:flex;flex:0 1 auto;min-height:0;align-items:center;gap:10px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.12);font-size:13.5px;line-height:1.3;opacity:0;transform:translateX(var(--from,-14px))}
html[dir=rtl] .tv-intros .row{--from:14px}
.tv-intros .row i{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(160deg,#F2C4B0,#C98A6A)}
.tv-intros .row:nth-of-type(2) i{background:linear-gradient(160deg,#D9B8E8,#8A7BC8)}
.tv-intros .row:nth-of-type(3) i{background:linear-gradient(160deg,#CFE0F4,#7E9CC9)}
.tv-intros .row:nth-of-type(4) i{background:linear-gradient(160deg,#F7D9C4,#E09A98)}
.tv-intros .row:nth-of-type(5) i{background:linear-gradient(160deg,#C9E4D6,#6FA58C)}
.tour-slide.is-on .tv-intros .row{animation:row .5s cubic-bezier(.2,.8,.2,1) .3s forwards}
.tour-slide.is-on .tv-intros .row:nth-of-type(2){animation-delay:.55s}
.tour-slide.is-on .tv-intros .row:nth-of-type(3){animation-delay:.8s}
.tour-slide.is-on .tv-intros .row:nth-of-type(4){animation-delay:1.05s}
.tour-slide.is-on .tv-intros .row:nth-of-type(5){animation-delay:1.3s}
@keyframes row{to{opacity:1;transform:none}}

/* 4: a face scanned, then verified */
.tv-real{display:flex;align-items:center;justify-content:center}
.tv-real .face{position:relative;width:132px;height:132px;overflow:hidden;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.12);
  background:radial-gradient(circle at 50% 38%,#F7D9C4 0 21%,transparent 22%),radial-gradient(ellipse at 50% 100%,#F7D9C4 0 37%,transparent 38%),linear-gradient(160deg,#C98A6A,#8A3A52)}
.tv-real .scan{position:absolute;inset-inline:0;top:-35%;height:35%;background:linear-gradient(to bottom,transparent,rgba(170,215,255,.6),transparent)}
.tour-slide.is-on .tv-real .scan{animation:scan 1.4s .3s ease-in-out forwards}
.tv-real .badge{position:absolute;left:50%;top:calc(50% + 58px);display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);background:#FCF3F0;color:var(--ink);font:700 13px/1 var(--f-ui);opacity:0;transform:translateX(-50%) scale(.6)}
.tv-real .badge::before{content:"";width:16px;height:16px;border-radius:50%;background:#0ca30c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tour-slide.is-on .tv-real .badge{animation:badge .45s cubic-bezier(.2,1.4,.4,1) 1.75s forwards}
@keyframes scan{to{top:100%}}
@keyframes badge{to{opacity:1;transform:translateX(-50%) scale(1)}}

/* 3: the AI in the middle, what it comes to understand around it */
.tv-know .lines{position:absolute;inset:0;width:100%;height:100%}
.tv-know .lines path{fill:none;stroke:rgba(255,220,230,.45);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100}
/* The AI core: two blurred colour fields turning against each other inside
   a glass sphere, with two slow orbits around it. */
.tv-know .orb{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);border-radius:50%;background:#1E0F2A;
  box-shadow:0 0 0 1px rgba(255,225,235,.22),0 0 40px 6px rgba(214,120,160,.42),0 0 90px 18px rgba(92,86,160,.35);animation:orb 4s ease-in-out infinite}
.tv-know .orb .fl{position:absolute;inset:-10%;border-radius:50%;filter:blur(7px);animation:spin 7s linear infinite;
  background:radial-gradient(circle at 28% 30%,#FF6F9E 0 18%,transparent 42%),radial-gradient(circle at 74% 38%,#7A63FF 0 17%,transparent 42%),radial-gradient(circle at 46% 80%,#FFA36B 0 15%,transparent 40%)}
.tv-know .orb .f2{inset:-4%;mix-blend-mode:screen;opacity:.85;animation-duration:4.4s;animation-direction:reverse;
  background:radial-gradient(circle at 66% 70%,#4FB6FF 0 14%,transparent 38%),radial-gradient(circle at 34% 58%,#D94C8C 0 16%,transparent 40%),radial-gradient(circle at 56% 22%,#FFD1E0 0 8%,transparent 26%)}
.tv-know .orb .glass{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse 30% 20% at 34% 22%,rgba(255,255,255,.7),transparent 70%),radial-gradient(circle at 50% 50%,transparent 58%,rgba(255,230,240,.18) 72%,transparent 74%);
  box-shadow:inset 0 -14px 24px rgba(20,6,30,.6),inset 0 0 0 1px rgba(255,255,255,.18)}
.tv-know .orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,220,230,.16);animation:spin 9s linear infinite}
.tv-know .o1{width:132px;height:132px;margin:-66px 0 0 -66px}
.tv-know .o2{width:190px;height:190px;margin:-95px 0 0 -95px;border-style:dashed;border-color:rgba(255,220,230,.1);animation-duration:16s;animation-direction:reverse}
.tv-know .orbit b{position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#FFE9F0;box-shadow:0 0 10px 3px rgba(255,200,220,.7)}
.tv-know .o2 b{top:auto;bottom:-2.5px;width:5px;height:5px;background:#C9C0FF;box-shadow:0 0 10px 3px rgba(157,139,240,.7)}
@keyframes spin{to{transform:rotate(1turn)}}
.tv-know .chip{position:absolute;padding:8px 13px;border:1px solid rgba(255,220,230,.3);border-radius:var(--r-pill);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 13px/1.2 var(--f-ui);white-space:nowrap;opacity:0;transform:scale(.8)}
.tv-know .c1{left:6%;top:12%}
.tv-know .c2{right:5%;top:33%}
.tv-know .c3{left:10%;bottom:11%}
.tour-slide.is-on .tv-know path{animation:draw .6s ease-out forwards}
.tour-slide.is-on .tv-know path:nth-child(2){animation-delay:.5s}
.tour-slide.is-on .tv-know path:nth-child(3){animation-delay:1s}
.tour-slide.is-on .tv-know .chip{animation:chip .45s cubic-bezier(.2,1.3,.4,1) .45s forwards}
.tour-slide.is-on .tv-know .c2{animation-delay:.95s}
.tour-slide.is-on .tv-know .c3{animation-delay:1.45s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes chip{to{opacity:1;transform:none}}
@keyframes orb{50%{transform:scale(1.04);box-shadow:0 0 0 1px rgba(255,225,235,.3),0 0 52px 10px rgba(214,120,160,.55),0 0 110px 24px rgba(92,86,160,.42)}}

/* last slide: the "and more" line */
.tour-slide>.tour-extra{flex:none;display:flex;align-items:center;gap:10px;margin:14px 0 18px;padding:12px 14px;border:1px solid rgba(110,42,60,.16);border-radius:16px;
  background:linear-gradient(120deg,rgba(110,42,60,.08),rgba(92,86,160,.1));font:600 14px/1.5 var(--f-ui);color:var(--ink);transition-delay:.35s}
.tour-extra .spark{flex:none;width:22px;height:22px;background:linear-gradient(135deg,#B05A78,#5C56A0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.8) rotate(20deg);opacity:.7}}

/* short phones: tighter words so the picture keeps some room */
@media (max-height:680px){
  .tv{min-height:130px}
  .tour-slide h3{margin-top:12px}
  .tour-slide>p{font-size:15px;line-height:1.55}
  .tour-slide>.tour-extra{margin:10px 0 12px;padding-block:8px}
}

/* a phone on its side: too short for picture over words, so the story takes
   the whole screen with the picture beside the words. The "surprise" line
   goes; there is no room for it next to the button. */
@media (orientation:landscape) and (max-height:500px){
  .tour-dlg{padding:0}
  .tour-card{max-width:none;height:100vh;height:100dvh;border-radius:0;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
  .tour-bars{padding-top:10px}
  .tour-head{padding-top:6px}
  .tour-x{width:36px;height:36px}
  .tour-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:24px;padding:8px 22px 10px}
  .tv{grid-column:1;grid-row:1/-1;min-height:0;border-radius:20px}
  .tour-slide>h3{grid-column:2;grid-row:2;margin:0;font-size:21px}
  html[lang=fa] .tour-slide h3{font-size:19px}
  .tour-slide>p{grid-column:2;grid-row:3;margin-top:8px;font-size:14.5px;line-height:1.5}
  .tour-slide>.tour-extra{display:none}
  .tour-slide>p:has(+.tour-cta),.tour-slide>p:has(+.tour-extra){margin-bottom:12px}
  .tour-cta{grid-column:2;grid-row:4;margin-top:0;min-height:46px}
  .tour-nav{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .tour-prev{width:40px;height:40px}
  .tour-next{min-height:40px}
}

/* 6: a city lighting up */
.tv-city .pin{position:absolute;left:50%;top:44%;z-index:1;width:22px;height:22px;margin:-11px 0 0 -11px;border:4px solid #FCF3F0;border-radius:50%;background:#E99AAE;box-shadow:0 0 24px 6px rgba(233,154,174,.5)}
/* On entry the pin drops in, then the rings start from it, then the label
   rises. The rings only run while the slide is on, so they always begin at
   the pin instead of mid-pulse (which read as rings shrinking in). */
.tv-city .ring{position:absolute;left:50%;top:44%;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid rgba(255,220,230,.7);border-radius:50%;opacity:0}
.tv-city .label{position:absolute;left:50%;bottom:22px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);font:600 13px/1 var(--f-ui);white-space:nowrap;opacity:0;transform:translate(-50%,8px)}
.tv-city .pin{opacity:0;transform:translateY(-26px) scale(.6)}
.tour-slide.is-on .tv-city .pin{animation:pin .55s cubic-bezier(.2,1.4,.4,1) .2s forwards}
.tour-slide.is-on .tv-city .ring{animation:ring 2.6s ease-out .6s infinite}
.tour-slide.is-on .tv-city .ring.r2{animation-delay:1.9s}
.tour-slide.is-on .tv-city .label{animation:label .5s cubic-bezier(.2,.8,.2,1) .8s forwards}
@keyframes pin{to{opacity:1;transform:none}}
@keyframes label{to{opacity:1;transform:translate(-50%,0)}}
@keyframes ring{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(4.2)}}

@media (prefers-reduced-motion:reduce){
  .tour-play::after,.tv-deck i,.typing i,.tour-slide .tv-city .ring{animation:none}
  .tour-slide .tv-city .pin,.tour-slide .tv-city .label{animation:none!important;opacity:1}
  .tour-slide .tv-city .pin{transform:none}
  .tour-slide .tv-city .label{transform:translate(-50%,0)}
  .tv-deck i{opacity:1;transform:rotate(calc(var(--rot) * .3))}
  .tour-slide .bub,.tour-slide .tv-intros .row{animation:none!important;opacity:1;transform:none}
  .tour-slide .tv-real .badge{animation:none!important;opacity:1;transform:translateX(-50%)}
  .tour-slide .tv-real .scan{display:none}
  .tv-know .orb,.tv-know .orb .fl,.tv-know .orbit,.tour-extra .spark{animation:none}
  .tour-slide .tv-know .chip{animation:none!important;opacity:1;transform:none}
  .tour-slide .tv-know path{animation:none!important;stroke-dashoffset:0}
  .tour-slide h3,.tour-slide>p,.tour-cta{opacity:1;transform:none}
  .tour-bars i.now b{animation:none;transform:scaleX(1)}
}