/* invite.hawsar.app for couples: the landing, the maker and each couple's
   own page. Hawsar's colours (lib/core/theme/app_colors.dart) and its display
   face; phone first, and a real two-column layout from 960px so the site
   reads as well on a laptop as in WhatsApp's browser. Invitations themselves
   are styled by /assets/invite.css, which these pages also load for their
   live previews. */

@font-face {
  font-family: "ArkanEffra";
  src: url("/fonts/ArkanEffra-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #FFF6F0;
  --peach: #FEE1D1;
  --peach-deep: #F6CDB8;
  --white: #FFFFFF;
  --navy: #144474;
  --navy-deep: #0E3055;
  --ceil: #858AC2;
  --gold: #C9A66B;
  --gold-ink: #7A5D2E;
  --ink: #1A1614;
  --muted: #6B5E55;
  --line: #EFD5C4;
  --line-strong: #E0BCA4;
  --ok: #2E7D5B;
  --ok-wash: #E4F2EA;
  --warn: #B3261E;
  --warn-wash: #FDECEA;
  --wait-wash: #FFF3DC;
  /* WhatsApp's green, darkened until white bold words on it read (5:1). */
  --wa: #118044;
  --wa-deep: #0E6E3B;
  --shadow: 0 30px 60px -32px rgba(20, 68, 116, .45);
  --shadow-soft: 0 18px 40px -28px rgba(20, 68, 116, .35);
  --display: "ArkanEffra", "Noto Sans Arabic", sans-serif;
  --body: "Noto Sans Arabic", system-ui, sans-serif;
  --latin: "Manrope", "Noto Sans Arabic", sans-serif;
  --r: 16px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.num { font-family: var(--latin); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 820px; }

/* ---------- header ---------- */
.site-top { position: sticky; top: 0; z-index: 30; background: rgba(255, 246, 240, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(224, 188, 164, .5); }
.site-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: calc(env(safe-area-inset-top) + 10px) 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.brand .mark { height: 24px; width: auto; }
.brand span { font-family: var(--display); font-size: 1.05rem; color: var(--ink); line-height: 1; padding-top: 4px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.lang { border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .9rem; min-height: 40px; white-space: nowrap; }
.top-actions .btn { white-space: nowrap; }
@media (max-width: 420px) { .brand span { display: none; } }
/* The language switch (PLAN-EN 2.7): the page's language on a button, and a small menu listing all three, each
   in its own script. On the narrowest phones the globe steps aside so the header's own button keeps its room. */
.site-lang { position: relative; flex: none; display: flex; }
.site-lang .lang { display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px 14px; }
.site-lang .lang svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.site-lang .lang[aria-expanded="true"] { background: var(--white); border-color: var(--navy); }
.lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 50; display: grid; gap: 2px; min-width: 9.5rem; padding: 6px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.lang-menu button { min-height: 44px; padding: 6px 14px; border: 0; border-radius: 11px; background: none; font-weight: 600; font-size: 1rem; line-height: 1.3; text-align: center; white-space: nowrap; }
.lang-menu button[lang="en"] { font-family: var(--latin); }
.lang-menu button:hover { background: var(--cream); }
.lang-menu button[aria-current="true"] { background: var(--peach); color: var(--navy-deep); font-weight: 700; }
@media (max-width: 360px) {
  .site-lang .lang { padding-inline: 12px; }
  .site-lang .lang svg { display: none; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.3; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 16px 30px -18px rgba(20, 68, 116, .8); }
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--white); }
.btn.gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 16px 30px -18px rgba(122, 93, 46, .8); }
.btn.gold:hover { background: #D7B57A; }
.btn.small { min-height: 42px; padding: 8px 18px; font-size: .92rem; }
.btn.big { min-height: 58px; padding: 14px 34px; font-size: 1.12rem; }
.btn.wide { width: 100%; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .wa { fill: currentColor; stroke: none; }
/* A cover drawn in this page keeps the invitation's own button (invite.css), not this page's navy one:
   :where() adds nothing to the weight, so a design's own button rules, and the white one over a photo, still win. */
:where(.cover-box) .btn { min-height: 48px; padding: 12px 24px; background: var(--i-btn); color: var(--i-btn-ink); box-shadow: 0 14px 28px -16px var(--i-btn); }
.link { background: none; border: 0; padding: 4px 0; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* WhatsApp, wherever the landing sells: green, with its mark; a round one in the phone's bar. */
.wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--wa); color: var(--white); font-weight: 700; font-size: .95rem; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.wa-btn:hover { background: var(--wa-deep); }
.wa-btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.wa-btn.round { width: 48px; min-height: 48px; height: 48px; padding: 0; flex: none; }
.wa-btn.round svg { width: 24px; height: 24px; }
/* A round button with an icon: the live Door's sound, struck through while muted. */
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy-deep); flex: none; }
.icon-btn svg { width: 22px; height: 22px; --snd-on: 1; --snd-off: 0; }
.icon-btn[aria-pressed="false"] svg { --snd-on: 0; --snd-off: 1; }
.icon-btn[aria-pressed="false"] { color: var(--muted); }

/* ---------- 1. the first screen ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 780px; height: 780px; border-radius: 50%; border: 1px solid rgba(201, 166, 107, .45); inset-inline-start: -260px; top: -300px; pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 780px; height: 780px; border-radius: 50%; border: 1px solid rgba(133, 138, 194, .35); inset-inline-start: -120px; top: -300px; pointer-events: none; }
.hero .wrap { position: relative; display: grid; gap: 30px; padding-block: 26px 44px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-ink); font-weight: 700; font-size: .98rem; margin: 0; }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 7.6vw, 3.7rem); line-height: 1.4; margin: 8px 0 14px; color: var(--navy-deep); text-wrap: balance; }
/* The price, said once and plainly: Latin digits, as every price here. */
.from { margin: 0 0 24px; }
.from b { display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 5.2vw, 1.9rem); line-height: 1.3; color: var(--navy-deep); padding-bottom: 2px; background: linear-gradient(var(--gold), var(--gold)) bottom / 100% 3px no-repeat; }
.from b .num, .bar-from .num { font-family: var(--latin); font-weight: 800; letter-spacing: -.01em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-actions .btn { min-width: min(100%, 260px); }
.continue { margin-top: 14px; font-size: .95rem; }

/* The Door, live: the real invitation in a phone, knocked on with a tap. */
.hero-door { display: grid; justify-items: center; gap: 12px; }
.phone { position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 18.5; margin-inline: auto; border-radius: 42px; padding: 10px; background: #15110F; box-shadow: var(--shadow), inset 0 0 0 1.5px #3B332E; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #000; transform: translateZ(0); }
/* A real phone's window (390 wide, as tall as the frame's proportions), scaled to the frame by common.js fitScreen. */
.phone iframe { position: absolute; top: 0; left: 0; width: 390px; height: 100%; border: 0; display: block; transform-origin: 0 0; background: var(--white); }
/* The live Door is laid out in a phone's own window (390 wide) and scaled to its frame, as a guest's phone shows it. */
.phone.live { width: min(318px, 80vw); }
.phone.live iframe { background: #2A1A12; }
.door-under { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; max-width: 360px; min-height: 44px; }
.door-caption { margin: 0; color: var(--muted); font-size: .95rem; font-weight: 600; text-align: center; }
.door-caption .num { font-weight: 700; color: var(--ink); }
.door-tools { display: flex; align-items: center; gap: 8px; }
.door-tools:not(:has(:not([hidden]))) { display: none; }

/* the live covers used in the gallery: the real invitation markup, contained */
/* Placed by physical top/left in common.js: with inset:0 as well, a right-to-left page would ignore
   left and pin the 390px box to the right edge, and the scaled cover would slide out of view.
   From 1024px wide common.js draws each cover in a frame of its own instead, with these same rules. */
.cover-box { position: absolute; overflow: hidden; }
.cover-box .inv { min-height: 100%; height: 100%; }
.cover-box .inv-cover { position: absolute; }
.cover-box .inv-bar, .cover-box .inv-page { display: none; }
.cover-box .open-btn { pointer-events: none; }
/* Covers are designed to look complete at rest: a picker shows them still. */
.cover-box *, .cover-box *::before, .cover-box *::after { animation: none !important; transition: none !important; }

/* ---------- 2. proof ---------- */
.proof { border-block: 1px solid var(--line); background: rgba(255, 255, 255, .55); }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding-block: 16px; }
.proof p { margin: 0; font-weight: 700; color: var(--navy-deep); }
.stores { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 12px; background: var(--ink); color: var(--white); text-decoration: none; }
.store svg { width: 20px; height: 20px; fill: currentColor; }
.store b { font-family: var(--latin); font-size: .95rem; font-weight: 700; direction: ltr; }

/* ---------- sections ---------- */
.section { padding-block: 52px; }
.section.alt { background: var(--white); border-block: 1px solid var(--line); }
.section h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.35; margin: 0 0 10px; color: var(--navy-deep); text-wrap: balance; }
.section .sub { color: var(--muted); margin: 0 0 26px; max-width: 52ch; }

/* ---------- 3. the designs ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { border: 1px solid var(--line-strong); background: var(--white); border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: .92rem; min-height: 40px; }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* A phone swipes through them; a laptop lays them side by side. */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.design { scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; align-content: start; }
.design .frame { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 9 / 15; border-radius: 22px; overflow: hidden; background: var(--peach); border: 1px solid var(--line); box-shadow: var(--shadow-soft); cursor: pointer; }
.design .cover-slot { position: absolute; inset: 0; }
/* A design's name stays on one line; where it, its tier and its price do not fit across a phone's card (کۆتری سپی,
   صينية الخطوبة), the price moves under them. */
.design .meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.design .meta b { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; white-space: nowrap; }
.design .meta .price { font-family: var(--latin); font-weight: 800; white-space: nowrap; }
.design .meta .price small { font-family: var(--body); font-weight: 700; color: var(--muted); font-size: .8rem; }
.design .gesture { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.65; }
.design .acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.design .acts .btn.wide { grid-column: 1 / -1; }
.design .acts .btn.ghost { min-height: 44px; }
/* The frame shows its button on hover; the visible «see it» button below does the same. */
.design .frame .peek-label { position: absolute; inset: auto 12px 12px; z-index: 2; display: flex; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.design .frame:hover .peek-label, .design .frame:focus-visible .peek-label { opacity: 1; }
.design .frame .peek-label span { background: rgba(26, 22, 20, .78); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .9rem; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge.premium { background: var(--navy-deep); color: #F3E3C3; }
.badge.premium::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.badge.classic { background: var(--peach); color: var(--gold-ink); }
.design .tierline { display: flex; align-items: center; gap: 8px; }

/* ---------- 4. guests and you: two phones ---------- */
/* A phone swipes from one to the other, each large enough to read; from 720px they stand side by side. */
.journey { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 80%); gap: 18px; margin-top: 22px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none; }
.journey::-webkit-scrollbar { display: none; }
.journey figure { margin: 0; display: grid; gap: 12px; align-content: start; scroll-snap-align: start; }
.journey figcaption b { display: block; font-family: var(--display); font-size: 1.12rem; line-height: 1.35; color: var(--navy-deep); margin-bottom: 2px; }
.journey figcaption p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
/* A phone drawn in the page, its words sized to its own width (cqw) so it reads the same small or large. */
.mock { position: relative; width: 100%; max-width: 280px; aspect-ratio: 9 / 17; border-radius: 30px; padding: 7px; background: #15110F; box-shadow: var(--shadow-soft), inset 0 0 0 1.5px #3B332E; container-type: inline-size; }
.mock-screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; font-size: 11px; font-size: 4.6cqw; line-height: 1.5; }
.mock-tag { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; border-radius: 999px; padding: 1px 9px; background: rgba(26, 22, 20, .66); color: #fff; font-size: 10px; font-size: 4.2cqw; font-weight: 700; }
/* The chat: a guest's phone receiving the invitation. */
.chat { background: #EFE7DE; }
.chat-top { display: flex; align-items: center; gap: .6em; padding: 1.1em .9em .7em; background: #0F5C4E; color: #fff; font-weight: 700; }
.chat-top i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #F6CDB8; color: var(--navy-deep); font-style: normal; font-family: var(--display); }
.chat-body { flex: 1; display: grid; align-content: end; gap: .7em; padding: .8em .7em 1.1em; }
.bubble { max-width: 88%; padding: .45em .55em .35em; border-radius: .9em; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.bubble.in { justify-self: start; border-start-start-radius: .2em; }
.bubble.out { justify-self: end; background: #D9FDD3; border-start-end-radius: .2em; }
.bubble time { display: block; text-align: end; color: #667781; font-size: .8em; font-family: var(--latin); direction: ltr; }
.bubble .card { display: block; border-radius: .6em; overflow: hidden; background: #F5F6F6; margin-bottom: .35em; }
.bubble .card img, .bubble .card .ph { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: #D9C3A5; }
.bubble .card b { display: block; padding: .35em .5em 0; font-size: .95em; line-height: 1.4; }
.bubble .card small { display: block; padding: 0 .5em .35em; color: #667781; font-family: var(--latin); direction: ltr; text-align: end; }
.bubble .link-text { color: #027EB5; font-family: var(--latin); direction: ltr; text-align: left; word-break: break-all; font-size: .92em; }
/* The couple's own page: who opened it, who is coming, and the wishes. */
.mine-mock { background: var(--cream); padding: 1.3em .9em .9em; gap: .7em; }
.mine-mock .pill { justify-self: start; align-self: flex-start; font-size: .85em; }
.mine-mock h4 { margin: 0; font-family: var(--display); font-size: 1.35em; line-height: 1.3; color: var(--navy-deep); }
.mine-mock .stats { gap: .4em; }
.mine-mock .stat { padding: .45em .2em; border-radius: .7em; }
.mine-mock .stat b { font-size: 1.45em; }
.mine-mock .stat span { font-size: .78em; line-height: 1.3; display: block; }
.mine-mock .replies { border-radius: .8em; }
.mine-mock .replies .r { padding: .4em .6em; align-items: center; }
.mine-mock .pill { padding: .05em .6em; }
.mine-mock .wish { padding: .5em .6em; border-radius: .8em; background: var(--white); border: 1px solid var(--line); }
.mine-mock .wish b { display: block; font-size: .9em; }
.mine-mock .wish p { margin: 0; color: var(--muted); }
.mine-mock .share { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .4em; padding: .55em; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; }
.mine-mock .share svg { width: 1.3em; height: 1.3em; fill: currentColor; }

/* ---------- 5. three steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; font-weight: 600; }
.steps li::before { content: counter(s, arabic-indic); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--peach); color: var(--navy-deep); font-family: var(--display); font-size: 1.3rem; }

/* ---------- 6. the prices ---------- */
.tiers { display: grid; gap: 16px; }
.tier { position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 22px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.tier h3 { font-family: var(--display); font-size: 1.5rem; margin: 0; line-height: 1.3; }
.tier .line { margin: 0; color: var(--muted); }
.tier .price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; }
.tier .price b { font-family: var(--latin); font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.tier .price span { font-weight: 700; color: var(--muted); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; }
.tier li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 5px; border-radius: 50%; background: var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.5' fill='none' stroke='%232E7D5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tier.premium { background: var(--navy-deep); color: #F7EEE6; border-color: var(--gold); box-shadow: 0 30px 70px -30px rgba(14, 48, 85, .9); }
.tier.premium .line, .tier.premium .price span { color: #C9D2E3; }
.tier.premium li::before { background-color: rgba(201, 166, 107, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.5' fill='none' stroke='%23D7B57A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tier .flag { position: absolute; top: -13px; inset-inline-start: 22px; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 3px 12px; }
.tier.custom { background: var(--cream); border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
/* Premium is decided on a phone, and only once it has been seen: it comes first there. */
.tier.premium { order: -1; }
.tier .price small { font-weight: 700; color: var(--muted); font-size: .92rem; }
.tier.custom .price { flex-wrap: wrap; }
/* Each tier's own question, on WhatsApp, under its button. */
.tier-ask { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--wa); font-weight: 700; font-size: .95rem; text-decoration: none; }
.tier-ask svg { width: 20px; height: 20px; fill: currentColor; }
.tier-ask:hover { text-decoration: underline; text-underline-offset: 4px; }
.tier.premium .tier-ask { color: #8FE0B0; }
.fine { color: var(--muted); font-size: .92rem; margin: 22px 0 0; text-align: center; }

.closed { display: grid; gap: 10px; padding: 22px; border-radius: var(--r); background: var(--wait-wash); border: 1px solid #F1D9A6; }
.closed h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.closed p { margin: 0; }

/* ---------- the Studio's sale (2026-10-04) ----------
   A price in the sale shows the old one struck through and muted before it, and a small gold badge says what is off
   (the gold of Premium's "our pick" flag). What the sale takes in, and how long it has left, is said in a slim navy
   strip over the whole landing, which leaves the first screen's price and button where they are (placed there
   2026-10-04: a box under the price had pushed the button below a small phone's fold), and in a quiet line over the
   prices and over the maker's designs. Its figures are Latin, as every price, so a line keeps to one system. Nothing
   here moves: the clock's figures only change, tabular so a line never shifts. */
s.was { color: var(--muted); font-weight: 600; text-decoration-line: line-through; text-decoration-thickness: 1.5px; }
.sale-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--navy-deep); font: 800 .76rem/1.35 var(--latin); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* What the sale takes off, its tag mark kept with it; then the countdown, a pill of its own beside it where there is
   room and on the next line where there is not, never broken inside. */
.sale-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.sale-offer { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sale-mark { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold-ink); stroke-width: 1.7; stroke-linejoin: round; }
.sale-what { font-weight: 700; color: var(--navy-deep); font-size: .95rem; line-height: 1.5; text-wrap: balance; }
.sale-what .num { font-weight: 800; }
.sale-ends { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px 2px 9px; border-radius: 999px; background: var(--white); border: 1px solid rgba(201, 166, 107, .7); color: var(--ink); font-size: .86rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.sale-time { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--gold-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sale-left { white-space: nowrap; }
.sale-clock { display: inline-block; font-family: var(--latin); font-variant-numeric: tabular-nums; font-weight: 800; }
/* The strip over the landing: navy, its words in the middle, one line on a laptop and two at most on a phone. It
   scrolls away with the page; the header keeps its place at the top. */
.sale-strip { justify-content: center; gap: 4px 14px; padding: calc(env(safe-area-inset-top) + 6px) var(--gutter) 6px; background: var(--navy-deep); color: #F6EDE4; text-align: center; }
.sale-strip .sale-what { color: var(--white); font-size: .9rem; line-height: 1.4; }
.sale-strip .sale-mark { width: 18px; height: 18px; stroke: #E2C48E; }
.sale-strip .sale-ends { padding-block: 1px; background: rgba(255, 255, 255, .08); border-color: rgba(226, 196, 142, .55); color: #F6EDE4; font-size: .84rem; line-height: 1.4; }
.sale-strip .sale-time { stroke: #E2C48E; }
.sale-strip .sale-clock { color: #F0D9A8; }
/* A narrow phone keeps the offer on one line: «داشکاندنی 12,500 دینار لەسەر دیزاینە پرێمیۆمەکان» at 320px. */
@media (max-width: 400px) {
  .sale-strip { column-gap: 10px; }
  .sale-strip .sale-what { font-size: .82rem; }
  .sale-strip .sale-mark { width: 16px; height: 16px; }
  .sale-strip .sale-offer { gap: 6px; }
  .sale-strip .sale-ends { font-size: .8rem; }
}
/* The narrowest phones give the offer the tag mark's room too: the navy strip says "sale" on its own. */
@media (max-width: 340px) { .sale-strip .sale-mark { display: none; } }
/* A laptop's first screen is the window less the header; while the strip shows, less the strip too (960px and up). */
body:has(> .sale-strip:not([hidden])) { --strip-h: 40px; }
/* The first screen's price: the old one smaller, in the page's own weight. */
.from b s.was, .bar-from s.was { font-size: .7em; font-weight: 700; margin-inline-end: 2px; }
/* The phone's bar breaks a sale's price evenly, the new figure kept with its unit. */
.bar-from.on-sale { text-wrap: balance; }
.door-caption s.was { font-weight: 600; }
/* A design's card: the old price before the new on its line and the badge after it, clear of the cover's own words.
   While any card is on sale every card's price has a row of its own under its name, so a row's descriptions line up. */
.design .meta .price s.was { font-size: .86em; font-weight: 700; }
.design .meta .price .sale-tag { margin-inline-start: 8px; vertical-align: 1px; }
.gallery.sale-on .design .meta .price { flex-basis: 100%; }
/* A tier's card: the old price and the badge on a line of their own over the new one. */
.tier .price.on-sale { flex-wrap: wrap; row-gap: 6px; }
.tier .price .was-line { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.tier .price s.was { font-family: var(--latin); font-size: 1.15rem; font-weight: 700; }
.tier .price .sale-tag, .tier.premium .price .sale-tag { color: var(--navy-deep); }
.tier.premium .price s.was { color: #C9D2E3; }
/* "From" before a Premium sale price that only some of its designs have: the card's light ink, as the struck price. */
.tier.premium .price small { color: #C9D2E3; }
/* The line over the prices, under their heading. */
.section .sale-note { margin: -8px 0 26px; }
/* The maker: the sale's line over the design cards; in the summary, the discount in green under the design with its
   countdown on a line of its own in the same row, then the total; on the couple's own page, an order made in the sale
   shows its tier's price struck through. */
.group > .sale-note { margin: 0; }
.theme-card .hint s.was { font-weight: 600; font-size: .92em; }
.line-item.mk-off { flex-wrap: wrap; row-gap: 0; }
.line-item.mk-off .num { color: var(--ok); font-weight: 700; }
.kv b s.was { font-weight: 600; margin-inline-end: 2px; }
.line-item.total { border-bottom: 0; }
.mk-sale-ends { flex-basis: 100%; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.mk-sale-ends .sale-clock { color: var(--ink); }

/* ---------- 7. the last doubts ---------- */
.faq { display: grid; gap: 10px; margin-top: 18px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
/* A chevron pointing down, and up once open: drawn with physical sides, as the page is right to left and the arrow is not. */
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 2px 0; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--muted); }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; font-weight: 600; }

/* ---------- 8. footer: a person to talk to ---------- */
.site-foot { background: var(--navy-deep); color: #DCE3EF; padding-block: 40px calc(env(safe-area-inset-bottom) + 36px); }
.site-foot .wrap { display: grid; gap: 26px; }
.foot-ask { display: grid; justify-items: center; gap: 10px; text-align: center; padding-bottom: 26px; border-bottom: 1px solid rgba(220, 227, 239, .16); }
.foot-title { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 4.6vw, 1.8rem); line-height: 1.4; color: var(--white); }
.foot-number { margin: 0; }
.foot-number .num { font-weight: 800; color: var(--white); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; }
.foot-who { margin: 0; font-size: .92rem; color: #B9C4D8; }
.site-foot .mark { height: 24px; width: auto; color: var(--white); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: .95rem; }
.site-foot nav a { color: #DCE3EF; text-decoration: none; }
.site-foot nav a:hover { color: var(--white); text-decoration: underline; }

/* ---------- the phone's bar: the price, the next step and WhatsApp ---------- */
/* Only on a phone, once the first screen is behind; clear of the home indicator (the safe area). */
.buy-bar { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; background: rgba(255, 246, 240, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -22px rgba(20, 68, 116, .5); transform: translateY(110%); transition: transform .28s ease; }
.buy-bar.on { transform: none; }
.buy-bar .wrap { display: flex; align-items: center; gap: 10px; padding-block: 10px calc(env(safe-area-inset-bottom) + 10px); }
.bar-from { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--navy-deep); }
.buy-bar .btn { white-space: nowrap; min-height: 48px; padding-inline: 18px; }
@media (max-width: 959px) {
  /* Room at the foot of the page for the bar, so it never covers the last words. */
  .landing .site-foot { padding-bottom: calc(env(safe-area-inset-bottom) + 106px); }
  .top-wa { display: none !important; }
}
@media (max-width: 359px) {
  .bar-from { font-size: .92rem; }
  .buy-bar .btn { padding-inline: 12px; }
}

/* preview modal (landing "see it" and the maker's preview on phones): the bar, the preview as
   large as the screen allows, and the phone/laptop switch under it */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 14px); background: rgba(14, 22, 34, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; max-width: 960px; }
.modal-bar .btn { box-shadow: none; }
.modal-bar .btn.ghost { background: var(--white); }
.modal-bar .icon-btn { margin-inline-end: auto; }
.modal-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.modal .phone { height: 100%; max-height: 820px; width: auto; aspect-ratio: 9 / 18.5; }
.modal .laptop { width: min(92%, 1100px, calc((100vh - 210px) * 1.6)); margin-bottom: 12px; }
.modal .seg { background: var(--white); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: nowrap; }
.modal .seg button { border-color: transparent; background: transparent; }
.modal .seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

/* the preview as a laptop (setDevice in common.js): the page in a 1280x800 window, scaled to the
   width it has, in a slim lid on a thin base */
.laptop { position: relative; width: 92%; margin-inline: auto; padding: 8px 8px 11px; border-radius: 14px 14px 5px 5px; background: #15110F; box-shadow: var(--shadow), inset 0 0 0 1.5px #3B332E; }
.laptop .screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--white); transform: translateZ(0); }
.laptop iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; display: block; transform-origin: 0 0; background: var(--white); }
.laptop::after { content: ""; position: absolute; left: -4.5%; right: -4.5%; top: 100%; height: 11px; border-radius: 1px 1px 12px 12px; background: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, .16) 42%, rgba(0, 0, 0, .16) 58%, transparent 58%) top / 100% 3px no-repeat, linear-gradient(#E6E0DA, #B8B0A9); box-shadow: 0 14px 22px -14px rgba(20, 68, 116, .55); }

/* ---------- the maker ---------- */
.maker-top .wrap { gap: 10px; }
.progress { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); font-weight: 600; }
.progress .bar { width: 90px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
/* "Step 1 of 5" stays on one line beside the language switch; on a phone the bar gives it the room. */
#progress-text { white-space: nowrap; }
@media (max-width: 400px) { .progress .bar { width: 56px; } }
/* A 320 px phone keeps the mark, "step 1 of 5" and the switch on one line, without the bar. */
@media (max-width: 360px) { .maker-top .progress .bar { display: none; } }
.progress .bar i { display: block; height: 100%; background: var(--navy); transition: width .3s ease; }
.maker { display: grid; gap: 24px; padding-block: 22px 120px; }
.pane { display: grid; gap: 22px; }
.pane h1 { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.35; margin: 0; color: var(--navy-deep); }
.group { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.group > h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.row2 { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: .92rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--cream); font-size: 16px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 68, 116, .15); background: var(--white); }
.field textarea { min-height: 88px; resize: vertical; line-height: 1.8; }
.field input[dir="ltr"] { text-align: left; font-family: var(--latin); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.field .err { color: var(--warn); font-size: .88rem; font-weight: 600; margin: 0; }
.hint { color: var(--muted); font-size: .88rem; margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 1px solid var(--line-strong); background: var(--cream); border-radius: 999px; padding: 8px 16px; font-weight: 600; min-height: 44px; }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-weight: 600; }
.toggle:last-child { border-bottom: 0; }
.sw { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; margin: 0; cursor: pointer; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.sw:checked { background: var(--ok); }
.sw:checked::after { transform: translateX(-20px); }
details.more { border-top: 1px dashed var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--navy); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 12px; }

.halls { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; }
.hall { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--cream); text-align: start; }
.hall img, .hall .ph { width: 64px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--peach); flex: none; }
.hall b { display: block; line-height: 1.4; }
.hall small { color: var(--muted); }
.hall[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); background: var(--white); }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-card { position: relative; display: grid; gap: 8px; min-width: 0; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--cream); text-align: start; }
.theme-card .frame { position: relative; aspect-ratio: 9 / 13; border-radius: 12px; overflow: hidden; }
/* The name on a line of its own; the tier and the price share the next, or take two on a phone's narrow card. */
.theme-card .name { padding-inline: 4px; font-size: .95rem; line-height: 1.35; }
.theme-card .meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; padding-inline: 4px; }
.theme-card[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); background: var(--white); }
/* The design an older invitation has, which the pickers no longer offer: a ribbon on its cover (and aria-current). */
.theme-card[aria-current="true"] .frame::after { content: ""; position: absolute; top: 0; inset-inline-start: 12px; z-index: 2; width: 18px; height: 26px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line-strong); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--navy); }
.swatches .cw-name { font-weight: 600; font-size: .92rem; color: var(--muted); margin-inline-start: 4px; }
.letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.letter { border: 1px solid var(--line); background: var(--cream); border-radius: 14px; padding: 10px; display: grid; gap: 2px; justify-items: center; }
.letter b { font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.letter small { color: var(--muted); font-weight: 600; }
.letter[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); background: var(--white); }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; }
/* where the photo sits: a plain range, as wide as the box, easy to catch with a thumb */
.focus { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--line); }
.focus label { font-size: .92rem; font-weight: 600; color: var(--muted); }
.focus input { width: 100%; height: 44px; margin: 0; accent-color: var(--navy); cursor: pointer; }

/* More for the guests. Every class here starts mk-: the maker links the guest page's stylesheet,
   whose .programme, .gallery and .wishes are the invitation's own. */
/* A programme line: the time, what happens then, and its remove button on one row; on an invitation
   in both languages the Arabic label sits under the Kurdish one, as its translation. */
.mk-prog { display: grid; gap: 8px; }
.mk-prog:empty { display: none; }
.field.mk-prog-row { grid-template-columns: 8.2rem minmax(0, 1fr) 44px; grid-template-areas: "time label del"; gap: 8px; align-items: center; padding: 8px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.field.mk-prog-row.both { grid-template-areas: "time label del" ". ar ."; }
.mk-prog-row .mk-time { grid-area: time; }
.mk-prog-row .mk-label { grid-area: label; }
.mk-prog-row .mk-label-ar { grid-area: ar; }
/* English under the base language's box (PLAN-EN 3.6): in the second place beside one other language, the third
   beside Kurdish and Arabic. A line with English (.stack) gives each language the row's whole width on a phone. */
.mk-prog-row.both .mk-label-en { grid-area: ar; }
.mk-prog-row.three .mk-label-en { grid-area: en; }
.field.mk-prog-row.stack { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "time del" "label label" "ar ar" "en en"; }
.field.mk-prog-row.stack .mk-time { justify-self: start; width: 8.2rem; }
.mk-prog-row .mk-x { grid-area: del; }
.field.mk-prog-row input { min-height: 46px; padding: 8px 10px; background: var(--white); }
.field.mk-prog-row input[type="time"] { padding-inline: 8px 6px; font-family: var(--latin); font-weight: 600; text-align: left; }
.mk-prog-row .err { grid-column: 1 / -1; }
.mk-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--muted); }
.mk-x:hover { color: var(--warn); border-color: var(--warn); }
.mk-x svg, .mk-ideas svg, .mk-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.mk-ideas { align-items: center; }
.mk-ideas .hint { margin-inline-end: 2px; }
.mk-ideas button { display: inline-flex; align-items: center; gap: 4px; background: var(--white); padding-inline: 12px 16px; }
.mk-ideas button svg { width: 15px; height: 15px; color: var(--gold-ink); }
/* The hashtag: its # sits on the side the tag starts from (see the script). */
.field > .mk-tag { display: flex; align-items: center; gap: 2px; min-height: 52px; padding-inline: 14px 4px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--cream); font-size: 1rem; font-weight: 400; color: var(--ink); }
.mk-tag[dir="ltr"] { padding-inline: 14px 4px; }
.mk-tag b { font-family: var(--latin); font-weight: 800; font-size: 1.1rem; color: var(--gold-ink); }
.field .mk-tag input { flex: 1; min-width: 0; min-height: 50px; border: 0; background: transparent; padding-inline: 4px 10px; box-shadow: none; }
.field .mk-tag input:focus { box-shadow: none; background: transparent; }
.field > .mk-tag:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 68, 116, .15); background: var(--white); }
.field.bad > .mk-tag { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
/* The gallery: three square slots a row on a phone, each with its own replace and remove. */
.mk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-slot { display: grid; gap: 2px; align-content: start; min-width: 0; }
.mk-slot img, .mk-slot .ph { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--peach); border: 1px solid var(--line); }
.mk-slot-acts { display: flex; justify-content: space-between; gap: 2px; }
.mk-slot-acts button { min-height: 36px; padding: 4px 2px; border: 0; background: none; font-size: .84rem; font-weight: 700; color: var(--navy); }
.mk-slot-acts button[data-g-del] { color: var(--warn); }
button.mk-add { aspect-ratio: 1; place-content: center; justify-items: center; gap: 2px; padding: 6px; border-radius: 14px; border: 1.5px dashed var(--line-strong); background: var(--cream); color: var(--navy); text-align: center; }
button.mk-add:hover { background: var(--white); border-color: var(--navy); }
button.mk-add.busy { opacity: .55; pointer-events: none; }
.mk-add svg { width: 24px; height: 24px; }
.mk-add b { font-size: .88rem; line-height: 1.35; }
.mk-add small { color: var(--muted); font-size: .78rem; font-weight: 600; }
@media (min-width: 720px) {
  .field.mk-prog-row { grid-template-columns: 8.5rem minmax(0, 1fr) 44px; }
  .field.mk-prog-row.both { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "time label ar del"; }
  .mk-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field.mk-prog-row.stack.both { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "time label ar del"; }
  .field.mk-prog-row.stack.three { grid-template-columns: 8.5rem minmax(0, 1fr) 44px; grid-template-areas: "time label del" ". ar ." ". en ."; }
  .field.mk-prog-row.stack .mk-time { justify-self: stretch; width: auto; }
  .field.mk-prog-row.stack:not(.both):not(.three) { grid-template-columns: 8.5rem minmax(0, 1fr) 44px; grid-template-areas: "time label del"; }
}

/* The design cards narrowed to a tier; the music's upsell scrolls here, clear of the sticky header. */
#theme-group { scroll-margin-top: calc(env(safe-area-inset-top) + 76px); }
.filters.mk-filters { margin: 0; }
/* A design that plays music: a gold note beside its name. */
.theme-card .mk-note { display: inline-block; vertical-align: -2px; margin-inline-start: 6px; color: var(--gold-ink); }
.theme-card .mk-note svg { display: block; width: 15px; height: 15px; fill: currentColor; }
/* English only (make.js): the name's last word and its note, kept on one line. */
.theme-card .mk-nw { white-space: nowrap; }

/* Music (Premium only): "No music" and the tracks as cards. The button to hear one sits first; the rest of
   the card chooses it (its ::after covers the card). On a design without music they show locked. */
.mk-music > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.mk-track { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--cream); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.mk-track.on { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); background: var(--white); }
.mk-track-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; text-align: start; }
button.mk-track-pick::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
button.mk-track-pick:focus-visible { outline: 0; }
button.mk-track-pick:focus-visible::after { outline: 2px solid var(--navy); outline-offset: 3px; }
.mk-track-text { display: grid; min-width: 0; }
.mk-track-text b { font-size: 1rem; line-height: 1.45; }
.mk-track-text small { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.mk-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--white); }
.mk-track.on .mk-tick { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.mk-listen { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: var(--white); color: var(--gold-ink); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.mk-listen:hover { background: var(--peach); }
.mk-listen svg { width: 18px; height: 18px; fill: currentColor; }
/* The play triangle sits a touch towards its point; the page is right to left, the triangle is not. */
.mk-listen .play { transform: translateX(1px); }
.mk-listen .stop, .mk-listen[aria-pressed="true"] .play { display: none; }
.mk-listen[aria-pressed="true"] .stop { display: block; }
.mk-listen[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: 0 0 0 4px rgba(201, 166, 107, .35); }
/* The track is still on its way (the file loads only on this tap): an arc turns round the button, the stop square
   dimmed inside, until the first sound. */
.mk-listen.loading { box-shadow: none; }
.mk-listen.loading .stop { opacity: .45; }
.mk-listen.loading::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold-ink); border-inline-start-color: var(--gold-ink); animation: mk-spin .8s linear infinite; }
@keyframes mk-spin { to { transform: rotate(1turn); } }
.mk-listen.mute { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); }
.mk-listen.mute svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-music.locked .mk-track { background: var(--white); border-style: dashed; }
.mk-music.locked .mk-track.playing { border-style: solid; border-color: var(--gold); }
.mk-lock { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--gold-ink); }
.mk-lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mk-music-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-music-more:empty { display: none; }
.mk-music-more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

.summary { display: grid; gap: 10px; }
.summary .names { font-family: var(--display); font-size: 1.5rem; line-height: 1.4; margin: 0; }
.line-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.line-item:last-child { border-bottom: 0; }
.line-item.total { font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--line-strong); padding-top: 12px; }
.line-item .num { white-space: nowrap; }
.code-row { display: flex; gap: 8px; }
.input { min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--white); font-size: 16px; }
.code-row input { flex: 1; min-width: 0; text-transform: uppercase; }

.bottom-bar { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; background: rgba(255, 246, 240, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.bottom-bar .wrap { display: flex; gap: 10px; align-items: center; padding-block: 10px calc(env(safe-area-inset-bottom) + 10px); }
.bottom-bar .grow { flex: 1; }
.bottom-bar .btn { white-space: nowrap; padding-inline: 20px; }
/* On a small phone the longest label («save the changes») takes two lines rather than leaving the screen. */
@media (max-width: 420px) {
  .bottom-bar .btn { padding-inline: 14px; }
  .bottom-bar #next { min-width: 0; white-space: normal; text-align: center; }
}
.peek { display: inline-flex; }

.stage { display: none; }
.stage-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* the couple's own page */
.mine { display: grid; gap: 18px; padding-block: 22px 60px; max-width: 760px; margin: 0 auto; }
.status-card { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.status-card.live { background: var(--ok-wash); border-color: #BFE0CD; }
.status-card.wait { background: var(--wait-wash); border-color: #F1D9A6; }
.status-card.bad { background: var(--warn-wash); border-color: #F2C4C0; }
.status-card h2 { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.4; }
.status-card p { margin: 0; }
.kv { display: grid; gap: 8px; }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.kv > div > span { line-height: 1.5; }
.kv b { font-family: var(--latin); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.copy { white-space: nowrap; }
.status-card > .badge { justify-self: start; }
.status-card .names { font-family: var(--display); font-size: 1.35rem; line-height: 1.4; margin: 0; }
.status-card .when { margin: 0; color: var(--muted); font-weight: 600; }
.copy { border: 1px solid var(--line-strong); background: var(--white); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 700; min-height: 34px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.story-row { display: grid; gap: 6px; justify-items: start; }
.linkbox { font-family: var(--latin); direction: ltr; text-align: left; font-weight: 700; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; }
.linkbox span { white-space: nowrap; }
.qr-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qr { width: 120px; height: 120px; padding: 8px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.qr img, .qr canvas { width: 102px !important; height: 102px !important; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.stat b { display: block; font-family: var(--latin); font-size: 1.6rem; line-height: 1.2; }
.stat span { color: var(--muted); font-size: .88rem; font-weight: 600; }
.replies { display: grid; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.replies .r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.replies .r:first-child { border-top: 0; }
.replies .none { padding: 16px; color: var(--muted); }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-weight: 700; }
.pill.yes { background: var(--ok-wash); color: var(--ok); }
.pill.no { background: var(--wait-wash); color: var(--gold-ink); }
/* the wishes guests left, on the couple's own page */
.mk-wish { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--line); }
.mk-wish:first-child { border-top: 0; }
.mk-wish b { display: block; line-height: 1.5; }
.mk-wish p { margin: 2px 0 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.mk-wi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--peach); color: var(--navy-deep); font-family: var(--display); font-size: 1.1rem; line-height: 1; }
.mk-wishes-title .num { color: var(--muted); font-size: .95rem; }
.danger-zone { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.confirm { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--warn-wash); }
.confirm p { margin: 0; }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 70; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--cream); padding: 10px 20px; border-radius: 999px; font-weight: 600; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; justify-items: start; padding: 22px; }
  /* Classic and Premium side by side, Custom under them. */
  .tiers { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .tier.premium { order: 0; }
  .tier.custom { grid-column: 1 / -1; }
  /* The two phones side by side. */
  .journey { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .mock-screen { font-size: 13px; font-size: 4.6cqw; }
}
@media (min-width: 960px) {
  /* The first screen is the whole window: the offer on one side, the Door on the other. */
  .hero .wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 56px; padding-block: 36px 44px; min-height: calc(100vh - 62px - var(--strip-h, 0px)); }
  .hero h1 { font-size: clamp(2.6rem, 4.2vw, 3.9rem); }
  .from { margin-bottom: 30px; }
  .phone.live { width: auto; height: min(700px, calc(100vh - 170px - var(--strip-h, 0px))); min-height: 520px; }
  .phone { width: 320px; }
  .proof .wrap { padding-block: 18px; }
  /* Every design in one row (--n, set by the script), each at most 290 wide. */
  .gallery { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--n, 3), minmax(0, 290px)); justify-content: center; gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .section { padding-block: 84px; }
  .journey { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; gap: 48px; }
  .journey figure { grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 24px; }
  .mock { max-width: none; }
  /* In reading order on a laptop: Classic, Premium raised in the middle, Custom. */
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .tier.custom { grid-column: auto; }
  .tier.premium { transform: translateY(-14px); padding-block: 30px; }
  .foot-ask { grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 22px; }
  .maker { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; padding-bottom: 60px; }
  .stage { display: grid; gap: 12px; justify-items: center; position: sticky; top: 86px; }
  .stage .phone { width: 340px; }
  .peek { display: none; }
  .bottom-bar { position: static; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 22px; }
  .bottom-bar .wrap { padding: 0; }
  /* No bar on a laptop: WhatsApp sits in the header instead. */
  .buy-bar { display: none; }
}
/* Room for the preview as a laptop, whose page is a 1280-wide window drawn small. */
@media (min-width: 1200px) {
  .maker { grid-template-columns: minmax(0, 1fr) 440px; }
}
/* ---------- English (PLAN-EN D6, D7): left to right, Manrope for reading, Latin line heights ----------
   Every rule is scoped to an English page, so a Kurdish or Arabic one never meets it. The display face, ArkanEffra,
   carries the brand's own Latin (A-z, digits, ş ê î û ç). */
html[lang="en"] { --body: "Manrope", system-ui, sans-serif; }
html[lang="en"] body { line-height: 1.6; }
html[lang="en"] .hero h1 { line-height: 1.12; letter-spacing: -.01em; }
html[lang="en"] .section h2 { line-height: 1.18; }
html[lang="en"] .pane h1, html[lang="en"] .status-card h2, html[lang="en"] .foot-title, html[lang="en"] .tier h3,
html[lang="en"] .closed h3, html[lang="en"] .journey figcaption b, html[lang="en"] .summary .names,
html[lang="en"] .status-card .names, html[lang="en"] .mine-mock h4 { line-height: 1.22; }
html[lang="en"] .design .gesture, html[lang="en"] .journey figcaption p { line-height: 1.5; }
html[lang="en"] .mk-promise, html[lang="en"] .field textarea { line-height: 1.55; }
/* A design's card is its track's width, never its name's: "The Engagement Tray" and its Premium chip, wider than a
   phone's card or a 1024px laptop's column, put the chip under the name rather than widen the card past its row. */
html[lang="en"] .design { grid-template-columns: minmax(0, 1fr); }
html[lang="en"] .design .tierline { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
/* The phone number on one line. */
html[lang="en"] .foot-number .num { white-space: nowrap; }
@media (max-width: 360px) {
  /* English words run longer than their Kurdish: the header's button and the phone's bar give a little room. */
  html[lang="en"] .top-actions { gap: 6px; }
  html[lang="en"] .top-actions .btn.small { padding-inline: 14px; }
  html[lang="en"] .buy-bar .wrap { gap: 8px; }
}
/* The steps count 1 2 3, not ١ ٢ ٣. */
html[lang="en"] .steps li::before { content: counter(s); font-family: var(--latin); font-weight: 800; }
/* A switch is off at the start and slides toward the end: the knob's side follows the page. */
html[dir="ltr"] .sw::after { right: auto; left: 4px; }
html[dir="ltr"] .sw:checked::after { transform: translateX(20px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* An endless turn at a hundredth of a millisecond flickers: the loading arc stands still instead. */
  .mk-listen.loading::after { animation: none; }
}

/* The makers' band now closes the page, above the footer (2026-10-04). On a phone: the line, then the two
   store buttons side by side at equal width, so they never wrap one under the other, down to 320 px. */
.proof .wrap { padding-block: 22px; }
@media (max-width: 560px) {
  .proof .wrap { flex-direction: column; gap: 12px; }
  .proof p { text-align: center; }
  .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 340px; }
  .store { justify-content: center; padding-inline: 10px; }
}
@media (max-width: 360px) {
  .store { gap: 6px; padding-inline: 8px; }
  .store b { font-size: .88rem; }
}
/* The WhatsApp number never breaks in its middle (it did at 320 px in Kurdish: «0773 407 / 9932»). */
.foot-number .num { white-space: nowrap; unicode-bidi: isolate; }