/* ════════════════════════════════════════════════════════════════
   تماس هوشمند آراد — design system shared by index.html (customer)
   and sales.html (seller). Palette is the app's own: the indigo
   poster ramp #6E9BFF → #3F55C9 → #242F72 on the app's #F2F4FA ground.
   Fonts are self-hosted — Iran network blocks CDNs.
   ════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap }

:root{
  --azure:#6E9BFF;
  --indigo:#3F55C9;
  --indigo-dark:#2A3A9E;
  --navy:#242F72;
  --ink:#101635;
  --ink-2:#18204A;
  --ink-3:#222C5E;
  --indigo-soft:#EAEFFE;
  --indigo-soft-2:#F4F7FF;
  --green:#16A34A; --green-soft:#E9F8EF; --green-dark:#0F7A38;
  --amber:#E9A23B; --amber-soft:#FEF5E7; --amber-dark:#9C6410;
  --red:#DC2626; --red-soft:#FDECEC;
  --body:#3D4560; --muted:#6C7590; --faint:#9AA2BC;
  --border:#E3E7F2; --divider:#EEF1F8;
  --bg:#FFFFFF; --bg-soft:#F2F4FA; --bg-tint:#EDF1FB;

  --t-h1:clamp(30px, 8.6vw, 48px);
  --t-h2:clamp(23px, 6.4vw, 32px);
  --t-body:15.5px;
  --pad-x:clamp(20px, 5.6vw, 34px);
  --pad-y:clamp(52px, 11vw, 78px);
  --r:18px; --r-lg:24px; --r-xl:30px;
  --sh:0 2px 6px rgba(16,22,53,.04), 0 12px 30px rgba(16,22,53,.06);
  --sh-lg:0 10px 24px rgba(16,22,53,.08), 0 32px 64px rgba(16,22,53,.12);
}

*{ margin:0; padding:0; box-sizing:border-box }
html{
  /* House standard: no default tap flash. Chrome/Android paints a grey-blue box
     over any tapped link or button, which on a full-bleed photo cover reads as a
     rendering glitch. Every tappable thing here has its own :active feedback. */
  -webkit-tap-highlight-color:transparent; -webkit-print-color-adjust:exact; print-color-adjust:exact; scroll-behavior:smooth;
      overflow-x:hidden; scroll-padding-top:66px }
body{ font-family:'Vazirmatn','Noto Sans Arabic',Tahoma,sans-serif; background:#080C1C;
      color:var(--body); font-size:var(--t-body); line-height:1.9;
      -webkit-font-smoothing:antialiased; overflow-x:hidden }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
/* inline links inside prose — the default `color:inherit` above hides them */
.ilink,.sec-lead a,.acc .a a,.ticks a{ color:var(--indigo); font-weight:600;
  border-bottom:1px solid rgba(63,85,201,.35); padding-bottom:1px }
.s-ink .sec-lead a,.full .sec-lead a,.s-ink .ticks a,.full .ticks a,.s-ink .ilink,.full .ilink{
  color:var(--azure); border-bottom-color:rgba(110,155,255,.45) }
svg{ display:block }
/* tracking only on latin/number runs — never on Persian, it breaks cursive joining */
.latin{ font-family:'Inter','Poppins','Avenir Next',Arial,sans-serif; letter-spacing:.02em }
.num{ font-variant-numeric:tabular-nums; letter-spacing:normal }
b,strong{ font-weight:600; color:var(--ink) }

.sheet{ max-width:640px; margin:0 auto; background:var(--bg); position:relative;
        box-shadow:0 0 100px rgba(0,0,0,.55) }
section{ position:relative; padding:var(--pad-y) var(--pad-x); overflow:hidden }
.s-soft{ background:var(--bg-soft) }
.s-tint{ background:linear-gradient(180deg,var(--bg-tint) 0%,#FAFBFF 100%) }
.s-ink{ background:var(--ink); color:#C4CCE6 }
.s-ink .sec-title{ color:#fff } .s-ink .sec-lead{ color:#8E98BC } .s-ink b{ color:#fff }

/* ————— quiet aurora, the only abstract decoration ————— */
.aura{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(64px); opacity:.55 }
.aura.a1{ width:300px; height:300px; background:rgba(63,85,201,.20); inset-inline-end:-120px; top:-100px }
.aura.a2{ width:260px; height:260px; background:rgba(110,155,255,.18); inset-inline-start:-110px; bottom:-90px }
section > *:not(.aura):not(.bgfull){ position:relative; z-index:1 }

.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1) }
.rv.in{ opacity:1; transform:none }
.stag > *:nth-child(2){ transition-delay:.06s } .stag > *:nth-child(3){ transition-delay:.12s }
.stag > *:nth-child(4){ transition-delay:.18s } .stag > *:nth-child(5){ transition-delay:.24s }
.stag > *:nth-child(6){ transition-delay:.30s } .stag > *:nth-child(7){ transition-delay:.36s }
.stag > *:nth-child(8){ transition-delay:.42s }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none } }

/* ————— type ————— */
.kicker{ display:inline-flex; align-items:center; gap:9px; color:var(--indigo-dark);
         font-weight:600; font-size:13px; letter-spacing:normal }
.kicker::before{ content:''; width:22px; height:2.5px; border-radius:2px; background:var(--indigo) }
.s-ink .kicker,.full .kicker{ color:var(--azure) }
.s-ink .kicker::before,.full .kicker::before{ background:var(--azure) }
.sec-title{ font-size:var(--t-h2); font-weight:700; color:var(--ink); line-height:1.5; margin:12px 0 14px }
.sec-lead{ color:var(--muted); font-size:15px; margin-bottom:28px; max-width:44ch }
.fine{ font-size:13px; color:var(--faint); line-height:1.85 }

/* ════════ full-bleed photo sections — the spine of both catalogs ════════ */
.full{ min-height:min(100svh, 860px); display:flex; flex-direction:column; justify-content:flex-end;
       color:#E4EBFB; padding-top:calc(var(--pad-y) + 20px); padding-bottom:calc(var(--pad-y) - 6px);
       background:var(--ink) }
.full .sec-title{ color:#fff } .full .sec-lead{ color:#A9B4D6 }
.full b{ color:#fff }
/* the photo behind a headline can be bright (an office window) or nearly black
   (a night desk); the shadow is what keeps the text readable over both. */
.full .sec-title,.full .sec-lead,.full .kicker,.hero h1,.hero .lead,.hero .lockup{
  text-shadow:0 1px 16px rgba(8,12,28,.62), 0 1px 3px rgba(8,12,28,.5) }
.bgfull{ position:absolute; inset:0; z-index:0; overflow:hidden }
/* Every photo was briefed with its subject in the upper third, so the cover crop
   is anchored high. Centred, a 9:16 source inside the 640px-wide sheet loses ~138px
   off the top and beheads whoever is standing there — visible from 640px up, where
   the sheet stops growing but the section keeps its height. */
.bgfull img{ width:100%; height:100%; object-fit:cover; object-position:center 26%;
             opacity:0; transition:opacity 1.2s ease;
             filter:saturate(.82) contrast(1.05) }
.bgfull img.ok{ opacity:1 }
/* the ink veil: dark at the bottom where the text sits, clearer at the top where the subject is */
.bgfull::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,22,53,.55) 0%, rgba(16,22,53,.42) 26%,
             rgba(16,22,53,.82) 62%, rgba(10,14,36,.96) 100%) }
.bgfull.even::after{ background:linear-gradient(180deg, rgba(16,22,53,.60) 0%, rgba(16,22,53,.86) 48%, rgba(10,14,36,.96) 100%) }
/* branded stand-in until the photo file exists */
.bgfull.noimg{ background:
  radial-gradient(120% 80% at 78% 6%, rgba(110,155,255,.34), transparent 56%),
  linear-gradient(165deg, #1B245A 0%, #202A66 45%, #101635 100%) }
.bgfull.noimg::before{ content:''; position:absolute; inset:0; opacity:.10;
  background:url('brand/handset-mark.svg') center 26% no-repeat; background-size:150px 150px }

/* ————— hero cover ————— */
/* the cover's whole job is the photo — the subject sits in the upper third, so the
   copy block is pushed as low as it can sit and still clear the home indicator,
   leaving the top of the frame open. */
.hero{ min-height:min(100svh, 900px); justify-content:flex-end;
  padding-bottom:calc(clamp(14px, 2.6vw, 20px) + env(safe-area-inset-bottom)) }
.hero .lockup{ display:flex; align-items:center; gap:12px; margin-bottom:auto }
.hero .lockup img{ width:44px; height:44px; border-radius:12px }
.hero .lockup b{ display:block; font-size:17px; color:#fff; font-weight:700; line-height:1.5 }
.hero .lockup span{ font-size:12px; color:#93A0C6 }
.hero h1{ font-size:var(--t-h1); font-weight:700; color:#fff; line-height:1.44; margin-bottom:16px }
.hero h1 em{ font-style:normal; color:var(--azure) }
.hero .lead{ font-size:16px; color:#AFBBDC; max-width:36ch; margin-bottom:26px }
.hero .acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.hero .foot{ margin-top:20px; padding-top:15px; border-top:1px solid rgba(255,255,255,.12);
             display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#8F9BC2 }

/* ————— buttons ————— */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:14px; padding:15px 24px; font-weight:600; font-size:15px; line-height:1;
  transition:transform .16s ease, box-shadow .16s ease; cursor:pointer; border:0;
  font-family:inherit }
.btn:active{ transform:scale(.97) }
.btn-ind{ background:var(--indigo); color:#fff; box-shadow:0 10px 26px rgba(63,85,201,.42) }
.btn-white{ background:#fff; color:var(--ink) }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--border) }
.btn-line{ background:rgba(255,255,255,.07); color:#fff; border:1.5px solid rgba(255,255,255,.28) }
.btn svg{ width:18px; height:18px; flex:0 0 auto }

/* ————— header —————
   House rule for every catalog (see ../best-practices.md):
   1. the cover owns the full screen — the bar is off-canvas until it is scrolled past;
   2. from the second section on, the glass takes the theme of whatever is behind it,
      so it reads as part of that page rather than as a fixed dark strip. */
.nav{ position:fixed; top:0; inset-inline:0; z-index:60; max-width:640px; margin:0 auto;
  height:60px; display:flex; align-items:center; gap:11px; padding:0 16px;
  background:rgba(255,255,255,.66); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(16,22,53,.08);
  transition:background .3s ease, border-color .3s ease,
             transform .32s cubic-bezier(.2,.7,.3,1), opacity .26s ease;
  transform:translateY(-100%); opacity:0; pointer-events:none }
body.nav-on .nav{ transform:none; opacity:1; pointer-events:auto }
.nav img{ width:30px; height:30px; border-radius:9px }
.nav .nm{ font-weight:700; font-size:15px; color:var(--ink); line-height:1.3;
  transition:color .3s ease }
.nav .nm small{ display:block; font-size:10.5px; font-weight:400; color:var(--muted) }
.nav .sp{ margin-inline-start:auto }
.nav .cta{ font-size:13px; font-weight:600; background:var(--indigo); color:#fff;
  padding:9px 15px; border-radius:11px }
/* dark backdrop → dark glass */
body.nav-dark .nav{ background:rgba(16,22,53,.72); border-bottom-color:rgba(255,255,255,.12) }
body.nav-dark .nav .nm{ color:#fff }
body.nav-dark .nav .nm small{ color:#8F9BC2 }

.prog{ position:fixed; top:60px; inset-inline:0; height:2px; z-index:61; max-width:640px; margin:0 auto;
  opacity:0; transition:opacity .26s ease }
body.nav-on .prog{ opacity:1 }
.prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--azure),var(--indigo)) }

/* ————— sticky bottom actions —————
   held back until the reader is half-way down, so the ask lands after the pitch. */
.dock{ position:fixed; bottom:0; inset-inline:0; z-index:60; max-width:640px; margin:0 auto;
  display:flex; gap:9px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px);
  border-top:1px solid rgba(16,22,53,.09);
  transform:translateY(115%); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .28s ease }
body.dock-on .dock{ transform:none; opacity:1; pointer-events:auto }
.dock .btn{ flex:1; padding:14px 12px; font-size:14.5px; border-radius:13px }
.dock .btn svg{ width:17px; height:17px }
body.has-dock .sheet{ padding-bottom:80px }
@media (prefers-reduced-motion: reduce){
  .nav,.dock{ transition:opacity .2s ease, background .3s ease } }

/* ════════ device frame around a real screenshot ════════ */
.dev{ position:relative; width:100%; max-width:268px; margin:0 auto;
      background:#0A0F26; border-radius:30px; padding:8px;
      box-shadow:var(--sh-lg), 0 0 0 1px rgba(255,255,255,.06) inset }
.dev::before{ content:''; position:absolute; top:15px; inset-inline-start:50%; transform:translateX(50%);
      width:56px; height:5px; border-radius:99px; background:rgba(255,255,255,.16); z-index:2 }
.dev img{ width:100%; aspect-ratio:412/892; object-fit:cover; object-position:top;
          border-radius:23px; display:block; background:var(--bg-soft) }
.dev.lg{ max-width:300px }
.dev.sm{ max-width:210px }
.devcap{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.7 }
.full .devcap{ color:#A9B4D6 }
.devwrap{ display:grid; gap:22px; grid-template-columns:1fr; justify-items:center }
@media (min-width:560px){ .devwrap.two{ grid-template-columns:1fr 1fr } }

/* horizontally scrolling screenshot strip */
.strip{ display:flex; gap:14px; overflow-x:auto; padding:4px 0 14px;
        margin:0 calc(var(--pad-x) * -1); padding-inline:var(--pad-x);
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.strip::-webkit-scrollbar{ height:0 }
.strip > figure{ flex:0 0 auto; width:200px; scroll-snap-align:center; margin:0 }
.strip .dev{ max-width:200px }
.strip figcaption{ font-size:12px; color:var(--muted); text-align:center; margin-top:9px; line-height:1.65 }
.full .strip figcaption,.s-ink .strip figcaption{ color:#A9B4D6 }
.striphint{ font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px; margin-top:-4px }
.striphint svg{ width:14px; height:14px }

/* ————— wide photo band (5:2) — same graceful fallback as .bgfull ————— */
.band{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/2;
  box-shadow:var(--sh-lg);
  background:radial-gradient(120% 90% at 80% 8%, rgba(110,155,255,.30), transparent 56%),
             linear-gradient(160deg,#1B245A 0%,#202A66 50%,#101635 100%) }
.band::before{ content:''; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background:url('brand/handset-mark.svg') center no-repeat; background-size:92px 92px }
.band img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease }
.band img.ok{ opacity:1 }
.band.noimg img{ display:none }

/* ————— cards ————— */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:17px 17px;
       box-shadow:var(--sh) }
.s-ink .card,.full .card{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11);
       box-shadow:none; color:#BCC6E4 }
.stack{ display:grid; gap:12px }
.two{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:520px){ .two{ grid-template-columns:1fr 1fr } }
.ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto }
.ic svg{ width:19px; height:19px }
.ic-ind{ background:var(--indigo-soft); color:var(--indigo-dark) }
.ic-green{ background:var(--green-soft); color:var(--green-dark) }
.ic-amber{ background:var(--amber-soft); color:var(--amber-dark) }
.ic-red{ background:var(--red-soft); color:#B91C1C }
.s-ink .ic-ind,.full .ic-ind{ background:rgba(110,155,255,.16); color:var(--azure) }
.s-ink .ic-green,.full .ic-green{ background:rgba(22,163,74,.18); color:#63E39B }
.s-ink .ic-amber,.full .ic-amber{ background:rgba(233,162,59,.18); color:#F5C67E }
.row{ display:flex; gap:13px; align-items:flex-start }
.row h3{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.6; margin-bottom:3px }
.row p{ font-size:14px; color:var(--muted) }
.s-ink .row h3,.full .row h3{ color:#fff }
.s-ink .row p,.full .row p{ color:#98A3C6 }

/* ————— stat band ————— */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border);
        border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden }
@media (min-width:520px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stats .st{ background:#fff; padding:18px 12px; text-align:center }
.stats .st .v{ font-size:26px; font-weight:700; color:var(--indigo-dark); line-height:1.4 }
.stats .st .l{ font-size:12px; color:var(--muted); line-height:1.6 }
.s-ink .stats,.full .stats{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12) }
.s-ink .stats .st,.full .stats .st{ background:rgba(16,22,53,.55) }
.s-ink .stats .st .v,.full .stats .st .v{ color:var(--azure) }
.s-ink .stats .st .l,.full .stats .st .l{ color:#98A3C6 }

/* ————— chips ————— */
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{ font-size:13.5px; padding:9px 14px; border-radius:99px; background:#fff;
  border:1px solid var(--border); color:var(--ink); box-shadow:var(--sh);
  display:inline-flex; align-items:center; gap:7px }
.chip svg{ width:15px; height:15px; color:var(--indigo) }
.s-ink .chip,.full .chip{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
  color:#CBD4EC; box-shadow:none }
.s-ink .chip svg,.full .chip svg{ color:var(--azure) }
.chip.ok{ background:var(--green-soft); border-color:#BCE7CD; color:#14532D }
.chip.ok svg{ color:var(--green) }

/* ————— numbered steps ————— */
.steps{ position:relative }
.steps::before{ content:''; position:absolute; inset-inline-start:19px; top:22px; bottom:26px; width:2px;
  background:linear-gradient(180deg,var(--indigo),var(--azure) 55%,var(--green)); opacity:.32 }
.step{ display:flex; gap:16px; padding-bottom:22px }
.step .n{ width:40px; height:40px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--border); color:var(--indigo-dark); font-weight:700; font-size:15px;
  box-shadow:0 0 0 6px #fff, var(--sh); z-index:1 }
.s-soft .step .n{ box-shadow:0 0 0 6px var(--bg-soft), var(--sh) }
.s-ink .step .n,.full .step .n{ background:var(--ink-3); border-color:rgba(255,255,255,.16); color:#fff;
  box-shadow:0 0 0 6px var(--ink) }
.step .n svg{ width:19px; height:19px }
.step .bd{ padding-top:4px }
.step h3{ font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.6 }
.step p{ font-size:14px; color:var(--muted); margin-top:2px }
.s-ink .step h3,.full .step h3{ color:#fff }
.s-ink .step p,.full .step p{ color:#98A3C6 }

/* ————— feature grid ————— */
.fgrid{ display:grid; gap:11px; grid-template-columns:1fr }
@media (min-width:520px){ .fgrid{ grid-template-columns:1fr 1fr } }
.feat{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px 15px; box-shadow:var(--sh) }
.feat .ic{ width:36px; height:36px; border-radius:11px; margin-bottom:11px }
.feat .ic svg{ width:18px; height:18px }
.feat h4{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.6; margin-bottom:3px }
.feat p{ font-size:13.5px; color:var(--muted); line-height:1.75 }
.s-ink .feat,.full .feat{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11) }
.s-ink .feat h4,.full .feat h4{ color:#fff }
.s-ink .feat p,.full .feat p{ color:#98A3C6 }

/* ————— tick list ————— */
.ticks{ list-style:none; display:grid; gap:10px }
.ticks li{ display:flex; gap:11px; font-size:14.5px; color:var(--body) }
.ticks li svg{ width:17px; height:17px; flex:0 0 auto; margin-top:5px; color:var(--green) }
.s-ink .ticks li,.full .ticks li{ color:#BCC6E4 }
.s-ink .ticks li svg,.full .ticks li svg{ color:#63E39B }

/* ————— quote / say-this ————— */
.quote{ background:linear-gradient(160deg,var(--ink) 0%,#25317A 100%); color:#fff;
  border-radius:var(--r-xl); padding:26px 22px 22px; position:relative; overflow:hidden;
  box-shadow:var(--sh-lg) }
.quote::before{ content:'”'; position:absolute; top:-18px; inset-inline-start:18px;
  font-size:100px; color:rgba(110,155,255,.2); font-family:Georgia,serif }
.quote p{ font-size:clamp(17px,4.8vw,21px); font-weight:600; line-height:1.85; position:relative }
.quote .by{ margin-top:14px; font-size:12.5px; color:#8FA6D8 }
.say{ border-inline-start:3px solid var(--green); background:var(--green-soft);
  border-radius:0 13px 13px 0; padding:13px 15px; font-size:14.5px; color:#14532D }
.dont{ border-inline-start:3px solid var(--red); background:var(--red-soft);
  border-radius:0 13px 13px 0; padding:13px 15px; font-size:14.5px; color:#7F1D1D }
.say b,.dont b{ color:inherit }

/* ————— details/accordion ————— */
.acc{ background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh) }
.acc + .acc{ margin-top:10px }
.acc > summary{ list-style:none; cursor:pointer; padding:16px 17px; display:flex; gap:12px; align-items:flex-start }
.acc > summary::-webkit-details-marker{ display:none }
.acc > summary .q{ flex:1; font-size:15px; font-weight:600; color:var(--ink); line-height:1.7 }
.acc > summary .m{ width:23px; height:23px; flex:0 0 auto; border-radius:8px; background:var(--indigo-soft);
  color:var(--indigo-dark); display:grid; place-items:center; font-size:13px; font-weight:700; margin-top:3px }
.acc > summary .cv{ width:21px; height:21px; color:var(--faint); transition:transform .25s; margin-top:4px; flex:0 0 auto }
.acc[open] > summary .cv{ transform:rotate(180deg) }
.acc[open] > summary{ border-bottom:1px solid var(--divider) }
.acc .a{ padding:14px 17px 17px; font-size:14.5px; color:var(--body) }
.acc .a .line{ margin-top:11px; background:var(--green-soft); border-radius:11px; padding:12px 13px;
  font-size:14px; color:#14532D }
.acc .a .line b{ color:#14532D }

/* ————— seller-only marker + presentation mode ————— */
.tag-int{ display:inline-flex; align-items:center; gap:7px; background:var(--amber-soft);
  color:var(--amber-dark); border:1px solid #F0DDB8; font-size:11.5px; font-weight:600;
  padding:5px 11px; border-radius:99px; margin-bottom:12px }
.tag-int svg{ width:13px; height:13px }
.s-ink .tag-int,.full .tag-int{ background:rgba(233,162,59,.16); border-color:rgba(233,162,59,.36); color:#F5C67E }
body.present .internal{ display:none }
.tgl{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  background:rgba(16,22,53,.05); border:1px solid rgba(16,22,53,.12); color:var(--muted);
  padding:7px 12px; border-radius:99px; font-size:12px; font-weight:500; font-family:inherit;
  transition:background .3s ease, border-color .3s ease, color .3s ease }
.tgl .dot{ width:8px; height:8px; border-radius:50%; background:#B3BAD1; transition:background .2s }
body.nav-dark .tgl{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#C4CCE6 }
body.nav-dark .tgl .dot{ background:#5A648C }
body.present .tgl{ background:rgba(22,163,74,.22); border-color:rgba(22,163,74,.5); color:#8BE8AC }
body.present .tgl .dot{ background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.18) }

/* ————— chapter index ————— */
.navbtn{ width:36px; height:36px; border-radius:11px; border:0; cursor:pointer;
  background:rgba(16,22,53,.06); color:var(--ink); display:grid; place-items:center; flex:0 0 auto;
  transition:background .3s ease, color .3s ease }
body.nav-dark .navbtn{ background:rgba(255,255,255,.1); color:#fff }
.navbtn:active{ transform:scale(.94) }
.navbtn svg{ width:19px; height:19px }
.idx{ position:fixed; inset:0; z-index:70; display:none }
.idx.open{ display:block }
.idx .scrim{ position:absolute; inset:0; background:rgba(8,12,28,.66); backdrop-filter:blur(3px) }
.idx .panel{ position:absolute; bottom:0; inset-inline:0; max-width:640px; margin:0 auto;
  background:#fff; border-radius:22px 22px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:82vh; overflow:auto; animation:acUp .28s ease }
@keyframes acUp{ from{ transform:translateY(30px); opacity:.4 } to{ transform:none; opacity:1 } }
.idx h4{ font-size:13px; color:var(--muted); font-weight:600; margin:4px 4px 10px }
.idx a{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:12px;
  font-size:14px; color:var(--ink); font-weight:500 }
.idx a:active{ background:var(--bg-soft) }
.idx a i{ font-style:normal; width:25px; height:25px; flex:0 0 auto; border-radius:8px;
  background:var(--indigo-soft); color:var(--indigo-dark); display:grid; place-items:center;
  font-size:11.5px; font-weight:700 }
.idx a.int i{ background:var(--amber-soft); color:var(--amber-dark) }
body.present .idx a.int{ display:none }

/* ————— contact / order ————— */
.c-rows{ display:grid; gap:10px; margin:24px 0 18px }
.c-row{ display:flex; gap:13px; align-items:center; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:14px 16px; transition:background .2s }
.c-row:active{ background:rgba(255,255,255,.13) }
.c-row .ic{ background:rgba(110,155,255,.15); color:var(--azure) }
.c-row b{ display:block; font-size:15px; color:#fff }
.c-row span{ font-size:12.5px; color:#98A3C6 }
.qrbox{ background:#fff; border-radius:20px; padding:16px; text-align:center; max-width:196px; margin:0 auto }
.qrbox img{ width:136px; height:136px; margin:0 auto 9px }
.qrbox span{ font-size:12.5px; color:var(--muted) }
.made{ margin-top:24px; font-size:12.5px; color:#7E88AE; text-align:center; line-height:2 }
.made a{ color:var(--azure) }

@media print{
  body{ background:#fff } .sheet{ box-shadow:none; max-width:none; padding:0 }
  .nav,.dock,.idx,.prog{ display:none !important }
  section{ page-break-inside:avoid; padding:14mm 12mm }
  .full{ min-height:0 }
  .rv{ opacity:1 !important; transform:none !important }
  .acc .a{ display:block !important } .acc,.card,.dev{ break-inside:avoid }
  .strip{ overflow:visible; flex-wrap:wrap }
}