/* BackHome website — the shell (feature 28, slice 1). House tokens: frontend/DESIGN-SYSTEM.md. One family, Vazirmatn,
   self-hosted. Logical properties only (inline-start/end), so /fa/ mirrors with no overrides. */
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:100 900;font-display:swap;src:url("vazirmatn.4e3fa217.woff2") format("woff2")}
:root{--bg:#fffdf7;--surface:#fff;--ink:#142339;--ink-deep:#0e1a2b;--ink-mid:#1f3247;--ink2:#5a6678;--ink3:#8c97a8;--line:#e7e3d6;
  --turq:#0fb2c0;--teal-700:#0a7c87;--mint:#e7f7f6;--coral:#ff5a54;--coral-700:#c7362f;--green-brand:#1e6f5c;--on-dark:#e7f7f6;--on-dark2:#aeb8c7;
  --r:14px;--r-lg:18px;--shadow:0 12px 34px -16px rgba(20,35,57,.28);--focus:0 0 0 4px rgba(15,178,192,.20);
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65}
[dir=rtl] body{line-height:1.85}
img{max-width:100%;display:block}
a{color:var(--teal-700)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--teal-700);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:10px;z-index:30}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:16px;line-height:1.2;border-radius:var(--r);padding:13px 22px;min-height:48px;text-align:center;border:0;text-decoration:none;cursor:pointer;min-height:48px}
/* the primary button is the turquoise of the card's bullets with a navy label (6.13:1; white on it would be 2.58:1), owner 2026-10-21; every button shares .btn's one size; coral is an accent only */
.btn-primary{background:var(--turq);color:var(--ink)}.btn-primary:hover{background:var(--turq);color:var(--ink);filter:brightness(.94)}
.btn-navy{background:var(--ink);color:var(--surface)}.btn-navy:hover{background:var(--ink-mid);color:var(--surface)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* the language offer (a visitor whose remembered language differs) */

/* nav */
.nav{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:10}
.nav-row{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-.02em}
.foot a.brand-dark{color:var(--surface)}
.brand-dark .mark path:first-child{stroke:var(--on-dark)}
.nav-links{display:flex;flex-wrap:wrap;gap:22px;font-size:15px;font-weight:600;flex:1;min-width:0}
.nav-links a,.nav-end a:not(.btn){color:var(--ink);text-decoration:none}
/* the language switch: a 44 × 44 target around its two letters (audit S3) */
.nav-lang{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
/* the skip link's target takes focus without drawing a ring round the whole page (audit S4) */
main:focus{outline:none}
/* a long handle wraps rather than pushing the page sideways at large text sizes (audit S6) */
.tg-handle{overflow-wrap:anywhere}
.nav-links a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--turq);padding-bottom:4px}
.nav-end{display:flex;align-items:center;gap:18px;font-weight:600;font-size:15px;margin-inline-start:auto}
/* in the nav only (owner 2026-10-21): Tell us in the brand green, Sign in a navy button; the bar itself stays cream */
.nav .nav-tell{background:var(--green-brand);color:var(--surface)}.nav .nav-tell:hover{background:var(--green-brand);color:var(--surface);filter:brightness(.92)}
.nav-menu,.menu-close{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);place-items:center;cursor:pointer}
.menu{position:absolute;inset-inline:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.menu-body{display:flex;flex-direction:column;gap:4px;padding-block:12px 20px}
.menu-body a:not(.btn){display:block;padding:12px 4px;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.menu-body a[aria-current=page]{color:var(--teal-700)}
.menu-body .btn{margin-top:12px;width:100%}
.menu-close{display:grid;align-self:flex-end}
/* six links from 2026-10-21 (Become a partner joined, owner): up to 1139 px they sit closer so the row stays one line; below 960 they cannot, so the menu button takes over */
@media (min-width:901px) and (max-width:1139px){.nav-row{gap:16px}.nav-links{gap:14px;font-size:14px}.nav-end{gap:10px}}
@media (min-width:901px) and (max-width:959px){.nav-links,.nav-signin,.nav-tell{display:none}.nav-menu{display:grid}.nav-end{gap:12px}}
@media (max-width:900px){
  .nav-links,.nav-signin,.nav-tell{display:none}
  .nav-menu{display:grid}
  .nav-end{gap:12px}
}

/* inner-page headers: photo / video (full-bleed, navy scrim, darker at the foot where the text sits: white text ≥ 4.5:1 over the lightest photo, audit S2) and band */
.hdr{position:relative;color:var(--surface)}
.hdr-media{min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hdr-media .ph,.hdr-media picture,.hdr-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;border:0}
.hdr-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,35,57,.8),rgba(20,35,57,.64) 60%,rgba(20,35,57,.52))}
.hdr-body{position:relative;width:100%;padding-block:56px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hdr h1{font-size:clamp(34px,5vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:0;max-width:820px;text-wrap:balance;overflow-wrap:anywhere}
[dir=rtl] .hdr h1{letter-spacing:0;line-height:1.35}
.hdr-line{font-size:clamp(16px,1.6vw,19px);margin:0;max-width:640px;color:var(--surface)}
.hdr-band{background:var(--ink-deep)}
.hdr-band .hdr-body{padding-block:56px 48px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:600;color:var(--on-dark)}
.crumb a{color:var(--on-dark)}
@media (max-width:640px){.hdr-media{min-height:420px}.hdr-body{padding-block:28px}}

/* a rendered photo: the same box as its placeholder, the image covering it */
.pic{background:none;padding:0;aspect-ratio:var(--ar,auto)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hdr-media .pic{position:absolute;inset:0;aspect-ratio:auto!important}
.ph-draft{position:absolute;inset-inline-start:0;top:0;z-index:2}
/* photo slots: a quiet brand field until the photo arrives; labels only in preview builds */
.ph{position:relative;background:repeating-linear-gradient(135deg,var(--mint) 0 14px,var(--bg) 14px 28px);border-radius:var(--r-lg);display:flex;align-items:flex-start;overflow:hidden}
.hdr-media .ph{background:repeating-linear-gradient(135deg,var(--ink-deep) 0 14px,var(--ink-mid) 14px 28px)}
.hdr-media .ph-label{position:relative;z-index:2}
/* an empty slot in production: a flat brand tile with the mark, never stripes; the hero and the diptych collapse it */
.ph-empty{background:var(--mint);align-items:center;justify-content:center;color:var(--turq-deep);opacity:.9}
.ph-empty .ph-mark{opacity:.35}
.hdr-media .ph-empty{background:var(--ink-deep)}
.hdr-media .ph-empty .ph-mark{display:none}
.hero-side>.ph-empty{display:none}
.diptych:has(.ph-empty){display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--mint);border-radius:var(--r-lg)}
.diptych:has(.ph-empty) .dip .ph-empty{display:none}
.diptych:has(.ph-empty) .chip-city{position:static}
.diptych:has(.ph-empty) .seam{position:static;transform:none;justify-content:flex-start}
.ph-label{margin:12px;background:var(--bg);color:var(--ink2);font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;line-height:1.4}

/* the request band (every inner page) */
.band{padding-block:64px}
.band-form{padding:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px;align-items:center}
.band-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.band-label{font-size:clamp(22px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.band-copy p{margin:0;color:var(--ink2);font-size:16px}
.band-fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.band textarea,.band select{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px}
.band textarea{resize:none;min-height:96px;max-height:var(--ta-max,240px);overflow:auto;field-sizing:content}
.band textarea:focus,.band select:focus{outline:none;border-color:var(--teal-700);box-shadow:var(--focus)}
.band-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.band-row label{font-size:14px;color:var(--ink2);font-weight:600}
.band-row .btn{margin-inline-start:auto}
.band-meta{justify-content:space-between;font-size:14px}
.band-reply{font-weight:700}
@media (max-width:640px){.band-row .btn{width:100%;margin-inline-start:0}.band-row select{flex:1}}
/* on a phone the boxes stop growing at about seven lines, so the button below stays within reach; the box scrolls */
@media (max-width:640px){.band textarea,.composer textarea{--ta-max:190px}.rq-field textarea{--ta-max:280px}}

/* footer */
.foot{background:var(--ink-deep);color:var(--on-dark2);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px;padding-block:40px}
.foot-brand p{margin:10px 0 0}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col b{color:var(--surface)}
.foot a{color:var(--on-dark2)}.foot a:hover{color:var(--surface)}
.foot-legal{border-top:1px solid var(--ink-mid);padding-block:16px 28px;font-size:13px;color:var(--ink3)}

/* ── the homepage (slice 2) ── */
.eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}
[dir=rtl] .eyebrow{letter-spacing:0;text-transform:none;font-size:14px}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
[dir=rtl] h2{letter-spacing:0;line-height:1.4}
h3{font-size:19px;line-height:1.3;margin:0}
.lead{color:var(--ink2);margin:8px 0 0;max-width:62ch}
.more{font-weight:700;text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}
@media (max-width:640px){.more{white-space:normal}} /* a long link wraps on a phone instead of running off the screen */
.sec{padding-block:clamp(56px,7vw,96px)}
.sec-tint{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:32px}
.quote{font-style:italic;color:var(--ink)}
[dir=rtl] .quote{font-style:normal}
.avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--ink);font-weight:800;font-size:12px;flex:none}
.who{display:inline-flex;align-items:center;gap:8px;font-weight:700}

.hero{padding-block:clamp(28px,4vw,52px) clamp(32px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.hero h1{font-size:clamp(36px,5.2vw,62px);line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance}
[dir=rtl] .hero h1{letter-spacing:0;line-height:1.3}
.hero-sub{margin:0;font-size:clamp(17px,1.6vw,19px);color:var(--ink2);max-width:56ch}
.composer{padding:20px;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.composer-label{font-weight:800;font-size:18px;margin:0}
.composer textarea,.composer select{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px}
.composer textarea{resize:none;min-height:92px;max-height:var(--ta-max,240px);overflow:auto;field-sizing:content}
.composer textarea:focus,.composer select:focus{outline:none;border-color:var(--teal-700);box-shadow:var(--focus)}
.composer .band-row label{font-size:14px;color:var(--ink2);font-weight:600}
.composer .band-row .btn{margin-inline-start:auto}
.try,.task-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.try-chip{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.try-chip:hover{border-color:var(--turq)}
.need-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.need-chips .try-chip{font-weight:600}
.door-short{display:flex;flex-direction:column;gap:12px;max-width:72ch}.door-short h2{margin:0}
/* the consult/record card on the left, a photo on the right with a soft shadow (owner 2026-10-21) */
.door-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch;margin-block:28px 20px}
.door-card{display:flex;flex-direction:column;gap:14px;min-width:0}.door-card .more{align-self:flex-start}
/* the card as product UI (owner 2026-10-21, style B): a window bar with dots and the mark, a deeper shadow, a pale turquoise stage; the card stays real text */
.pc-stage{background:linear-gradient(140deg,#dff4f3 0%,#c9ecee 100%);border-radius:24px;padding:clamp(16px,2.4vw,28px)}
.pc-frame{border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 34px 70px -28px rgba(20,35,57,.5),0 0 0 1px rgba(20,35,57,.08)}
.pc-bar{display:flex;align-items:center;gap:7px;height:36px;padding-inline:14px;background:#f3f1ea;border-bottom:1px solid var(--line)}
.pc-bar i{width:11px;height:11px;border-radius:50%;background:#dcd6c6;flex:none}
.pc-bar-mark{margin-inline-start:auto;display:flex;align-items:center}.pc-bar-mark svg{width:16px;height:16px}
.pc-frame .pc{border:0;border-radius:0;box-shadow:none;width:100%}
.door-photo{display:flex;min-width:0}.door-photo>.ph{flex:1;aspect-ratio:auto!important;min-height:300px;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.door-photo>.ph-empty{display:none}
.assure{margin:0;font-size:14px;color:var(--ink2)}
.hero-side{display:flex;flex-direction:column;gap:14px;align-items:stretch;min-width:0}
.hero-side>.ph{border-radius:var(--r-lg)}
.hero-side .more{align-self:flex-start;background:var(--bg);border-radius:999px;padding:4px 12px}
/* the hero (owner 2026-10-21). From 1160 px the photo, 4:3 and never stretched, sits beside the headline, lead and
   request box with its top on the headline's top and its bottom on the box's bottom: the eyebrow sits above both
   columns, the reply line and the assurance below them, and the box's textarea takes up the slack. Below 1160 the hero
   stacks so the photo and the request box share the first screen: headline, the photo as a 16:9 banner, the box, the lead. */
.hero-top{padding-bottom:14px}.hero-top .eyebrow{margin:0}
.hero-after{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.hero-after .band-meta{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px;margin:0}
@media (min-width:1160px){
  .hero .wrap{max-width:1320px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,3vw,48px)}
  .hero h1{font-size:clamp(48px,3.6vw,52px)}[dir=rtl] .hero h1{line-height:1.2}
  .hero-copy{gap:12px}.hero-sub{font-size:17px;line-height:1.55}
  .hero .composer{flex:1;margin:0;padding:14px 16px;gap:8px}.hero .composer-label{font-size:17px}
  .hero .composer textarea{flex:1;min-height:48px}
  .hero .composer .try{gap:6px;font-size:13px}.hero .composer .try-chip{font-size:13px;min-height:30px;padding:3px 10px}
  .hero-side{justify-content:flex-start}.hero-side>.ph{aspect-ratio:4/3}
}
@media (max-width:1159px){
  /* phones and tablets (owner 2026-10-21): the family photo FIRST, full width at the top of the hero, then the
     eyebrow and the headline, the request box, the lead. The hero's wrappers dissolve (display:contents) so the
     photo can lead from inside the desktop grid without a second copy of the image in the page. */
  .hero{display:flex;flex-direction:column;gap:12px;padding-top:0}
  .hero>.wrap,.hero-copy,.hero-side{display:contents}
  /* width:100% is the Safari fix: a flex/grid item with an aspect-ratio is not stretched by default, and the image
     inside is absolute, so WebKit gave the photo 0 × 0 (found 2026-10-21 in WebKit; Chrome stretched it) */
  .hero-side>.ph{order:1;width:100%;aspect-ratio:4/3;border-radius:0;margin-bottom:4px}
  .hero-top .eyebrow{order:2}.hero h1{order:3}.hero-copy>*{order:4}.hero .composer{order:4}.hero-sub{order:5}.hero-after>*{order:6}
  .hero-top .eyebrow,.hero h1,.hero .composer,.hero-sub,.hero-after>*{box-sizing:border-box;width:min(calc(100% - 2*clamp(16px,4vw,32px)),608px);margin-inline:auto}
  .hero h1{font-size:clamp(34px,5.2vw,48px)}
  .hero .composer{margin-block:4px 0;padding:14px;gap:10px;min-width:0}.hero .composer textarea{min-height:58px}
  .hero .composer .band-row{flex-wrap:nowrap;gap:10px}.hero .composer .band-row select{flex:1;min-width:0}
  .hero .composer .band-row .btn{width:auto;margin-inline-start:0;flex:none}
  .hero .composer .try{order:5}
}
@media (min-width:641px) and (max-width:1159px){
  /* a tablet: the photo inside the column, not edge to edge */
  .hero{padding-top:20px}.hero-side>.ph{width:min(calc(100% - 64px),608px);margin-inline:auto;border-radius:var(--r-lg)}
}

.pc{position:relative;margin:0;width:94%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;font-size:14px}
.pc-pane{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pc-record{background:var(--bg);border-inline-start:1px solid var(--line)}
.pc-title{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}
[dir=rtl] .pc-title{letter-spacing:0;text-transform:none;font-size:13px}
.consult{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.consult li{display:flex;flex-direction:column;gap:2px}
.js .pc .consult li{animation:pcIn .45s ease-out calc(.25s + var(--i)*.4s) both}
.consult b{font-size:12px;color:var(--ink2);font-weight:700}
.pc-order{margin:0;display:flex;flex-direction:column;gap:2px}
.pc-order b{font-size:15px}
.pc-order span{color:var(--ink2)}
.stepper{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.stepper li{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.js .pc .stepper li{animation:pcStep .3s ease-out calc(1.9s + var(--i)*.45s) both}
.stepper li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--turq);flex:none}
.stepper li.now{color:var(--ink);font-weight:800}
.stepper li.now::before{box-shadow:0 0 0 4px var(--mint)}
.pc-note{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.js .pc .pc-note{animation:pcIn .45s ease-out 4.2s both}
.pc-note b{font-size:12px;color:var(--ink2)}
.pc-confirm{align-self:flex-start;background:var(--turq);color:var(--ink);font-weight:700;border-radius:10px;padding:6px 14px}
.js .pc .pc-confirm{animation:pcIn .45s ease-out 4.5s both}
@keyframes pcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pcStep{from{color:var(--ink3)}to{}}

.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip-row{list-style:none;margin-block:0;padding-block:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px 24px;font-size:14px;font-weight:600;line-height:1.4}
.strip li{display:flex;align-items:center;gap:8px}
.strip svg{width:22px;height:22px;fill:none;stroke:var(--teal-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px}
.fam{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;gap:8px;padding-bottom:20px}
.fam>.ph{aspect-ratio:2/1;border-radius:0;margin-bottom:8px}
.fam>:not(.ph){margin-inline:20px}
.fam h3 a{color:inherit;text-decoration:none}.fam h3 a:hover{text-decoration:underline}
.fam p{margin-block:0}
.usually{color:var(--ink2);font-size:15px;margin-top:6px!important}
.fam-not{background:var(--ink-deep);color:var(--surface);border:0;padding:28px 0;justify-content:center;gap:14px}
.fam-not p{color:var(--on-dark2)}
.fam-not .btn{align-self:flex-start}

.moments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.moments li{display:flex;flex-direction:column;gap:8px;min-width:0}
.moments .ph,.moment-confirm{aspect-ratio:3/2;border-radius:var(--r)}
.moments p{margin:0;color:var(--ink2);font-size:15px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--surface);font-weight:800;font-size:14px}
.moment-confirm{background:var(--mint);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--ink)}
.moment-confirm span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--turq);color:var(--ink)}

.door{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start}
.door-intro{display:flex;flex-direction:column;gap:12px}
.door-intro .ph{aspect-ratio:3/2;margin-top:12px}
.door-open{margin:0;font-size:clamp(20px,2vw,24px);font-weight:800;line-height:1.35;color:var(--ink)}
.door-parts{display:flex;flex-direction:column;gap:16px}
.part{padding:22px;display:flex;flex-direction:column;gap:8px}
.part p{margin:0}
.part-q{font-size:13px;font-weight:800;color:var(--teal-700)}
.frag{margin-top:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.timeline{list-style:none;display:flex;flex-direction:column;gap:6px}
.timeline li{display:flex;justify-content:space-between;gap:12px}
.timeline time{color:var(--ink2);white-space:nowrap}

.diptych{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dip{position:relative}
.dip .ph{aspect-ratio:6/5;border-radius:var(--r-lg)}
.chip{display:inline-block;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow)}
.chip-city{position:absolute;inset-block-end:16px;inset-inline-start:16px}
.chip-done{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.seam{position:absolute;inset-inline:0;inset-block-start:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}

.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.aud{display:flex;flex-direction:column;gap:8px}
.aud .ph{aspect-ratio:5/2;margin-bottom:8px}
.aud p{margin:0}
.aud>p:not(.eyebrow){color:var(--ink2)}

.money{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.step{padding:24px;display:flex;flex-direction:column;gap:6px}
.step p{margin:0}
.big{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}

.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:start}
.faq .more{display:inline-block;margin-top:14px}
.qa{display:flex;flex-direction:column;gap:10px}
.qa details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px 18px}
.qa summary{cursor:pointer;font-weight:700;padding-block:12px;list-style-position:inside}
.qa p{margin:0 0 14px;color:var(--ink2)}

.closing{background:var(--ink-deep);color:var(--surface);padding-block:clamp(48px,6vw,80px)}
.closing p{color:var(--on-dark2);margin:10px 0 0;max-width:56ch}
.closing-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.closing-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.closing-cta a:not(.btn){color:var(--on-dark)}

@media (max-width:900px){
  .hero-grid,.door,.faq{grid-template-columns:1fr}
  .pc{width:100%}
  .door-row{grid-template-columns:1fr}.door-photo>.ph{aspect-ratio:var(--ar,4/3)!important;min-height:0}
  .moments{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pc{grid-template-columns:1fr}
  .pc-record{border-inline-start:0;border-top:1px solid var(--line)}
  .moments{grid-template-columns:1fr}
  .moments .ph{aspect-ratio:16/7}
  .moment-confirm{aspect-ratio:auto;padding:18px}
  .diptych{grid-template-columns:1fr}
  .dip .ph{aspect-ratio:4/3}
  .seam{position:static;transform:none;margin-block:6px;justify-content:flex-start}
  .composer .band-row .btn{width:100%;margin-inline-start:0}
}

/* ── inner pages (slice 3) ── */
q{quotes:"\201C" "\201D"}
:lang(fa) q{quotes:"\00AB" "\00BB"}
.jump{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.jump-row{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.jump-row a{flex:none;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface)}
.jump-row a:hover{border-color:var(--teal-700)}
.nfam{scroll-margin-top:64px}
.nfam-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.nfam-intro{display:flex;flex-direction:column;gap:10px}
.nfam-intro p{margin:0;color:var(--ink2)}
.nfam-intro .nfam-who{color:var(--ink);font-weight:600}
.nfam-intro .ph{aspect-ratio:2/1;margin-top:8px}
.needs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.needs-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px}
.sec-tint .needs-list li{background:var(--bg)}
.needs-list q{font-size:17px;font-weight:600;min-width:0}
.needs-list a{font-size:14px;font-weight:700;text-decoration:none}
.needs-list a:hover{text-decoration:underline}
.nf-not .closing-cta a{color:var(--on-dark);font-weight:700}
@media (max-width:900px){.nfam-grid{grid-template-columns:1fr}}

.hw-steps{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:28px}
.hw-step{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:8px;border-top:1px solid var(--line);padding-top:28px}
.hw-text{display:flex;flex-direction:column;gap:8px}
.hw-text p{margin:0;color:var(--ink2)}
.hw-text .hw-more{color:var(--ink)}
.hw-frag{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);box-shadow:var(--shadow)}
.hw-frag b{font-size:12px;color:var(--ink2)}
.hw-frag .pc-confirm,.hw-frag .who{align-self:flex-start}
.hw-where{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:28px}
.hw-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.hw-pair h2{font-size:clamp(22px,2.4vw,28px)}
@media (max-width:900px){.hw-step{grid-template-columns:1fr}}

.tr-open{display:flex;flex-direction:column;gap:10px}
.tr-open>*{max-width:760px}
.tr-open .door-open{font-size:clamp(24px,3vw,34px);line-height:1.3}
.tr-list{margin:0;padding-inline-start:1.2em;display:flex;flex-direction:column;gap:8px}
.tr-links{display:flex;gap:18px;font-weight:700}
#record .pc-note{margin-top:12px}

.pr-before{margin-top:20px}
.pr-before h2{font-size:clamp(22px,2.4vw,28px)}

.ab-why{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.ab-why p{margin:0;font-size:clamp(17px,1.5vw,19px)}
.ab-aud{margin-top:28px}
.aud{scroll-margin-top:24px}

.pp-jobs{display:flex;flex-direction:column;gap:12px}
.pp-jobs .frag{display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.pp-jobs .pc-confirm{margin-top:6px}

.fq{display:flex;flex-direction:column;gap:40px;max-width:860px}
.fq-group h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}

.rq-form{max-width:760px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.rq-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.rq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rq-field label{font-weight:700;font-size:15px}
.rq-field input,.rq-field textarea,.rq-field select{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
[dir=rtl] .rq-field input[dir=ltr]{text-align:end}
.rq-field textarea{resize:none;min-height:120px;max-height:var(--ta-max,360px);overflow:auto;field-sizing:content}
.rq-field input:focus,.rq-field textarea:focus,.rq-field select:focus{outline:none;border-color:var(--teal-700);box-shadow:var(--focus)}
.rq-form .btn{align-self:flex-start}
.rq-note{margin:0;font-size:15px;color:var(--ink2)}
.rq-strong{font-weight:700;color:var(--ink)}
.rq-err{color:var(--coral-700);font-weight:700}
.rq-ok{margin:0;background:var(--mint);color:var(--ink);font-weight:700;border-radius:var(--r);padding:14px 16px}
.rq-trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.legal{max-width:820px;display:flex;flex-direction:column;gap:16px}
.legal-draft{margin:0;background:var(--mint);color:var(--ink);font-weight:700;border-radius:var(--r);padding:10px 14px}
.legal-body{text-align:start}
.legal-body h2{font-size:22px;margin:28px 0 8px}
.legal-body h3{font-size:17px;margin:20px 0 6px}
.legal-body ul{padding-inline-start:1.3em}
.legal-version{color:var(--ink2);font-size:14px}
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nf-links a{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;text-decoration:none;background:var(--surface)}

/* preview-only note (never in a published page) */
.preview-note{padding-block:40px;color:var(--ink2);font-size:14px}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}