/* House of White Wings: white, porcelain and soft champagne gold. Calm by design
   (spec §2): no flashing, low motion, cool neutrals (never cream or yellow). */
@font-face { font-family: 'Aref Ruqaa'; src: url(/ww/fonts/ArefRuqaa-700.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Amiri'; src: url(/ww/fonts/Amiri-400.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Amiri'; src: url(/ww/fonts/Amiri-700.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(/ww/fonts/IBMPlexSansArabic-400.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(/ww/fonts/IBMPlexSansArabic-500.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url(/ww/fonts/CormorantGaramond-500.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url(/ww/fonts/CormorantGaramond-600.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url(/ww/fonts/CormorantGaramond-500i.ttf); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/ww/fonts/Inter-400.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/ww/fonts/Inter-500.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url(/static/fonts/baloo-bhaijaan-2-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --white: #ffffff; --porcelain: #f7f8fa; --mist: #eef1f5; --cloud: #e3e8ef; --line: #e6e1d6;
  --ink: #2b3140; --ink-soft: #586071; --ink-faint: #7d8492;
  --gold-hi: #f4ead6; --gold: #c4ab7e; --gold-mid: #b0966a; --gold-deep: #8a6f45; --gold-text: #7a6140;
  --foil: linear-gradient(100deg, #8c7046 0%, #b99d6c 16%, #e6d6b2 28%, #a2865a 42%, #c9b183 58%, #8a6e44 78%, #b49867 100%);
  --err: #a8322b; --ok: #2e7d4f;
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 34px rgba(37,55,85,.07), 0 2px 6px rgba(37,55,85,.04);
  --r: 22px;
  --display: 'Aref Ruqaa', 'Amiri', serif;
  --serif: 'Amiri', 'Times New Roman', serif;
  --sans: 'Plex Arabic', 'Inter', system-ui, sans-serif;
}
[lang=en] { --display: 'Cormorant', Georgia, serif; --serif: 'Cormorant', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ww { margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.65 var(--sans);
  background: linear-gradient(180deg, #e9eff6 0, #f3f6fa 340px, #fbfcfd 760px, #ffffff 1200px); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--gold-text); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: #fff; padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(176,150,106,.55); outline-offset: 3px; border-radius: 8px; }
#stage:focus, h1[tabindex="-1"]:focus { outline: none; }

.sky { position: absolute; inset: 0 0 auto; height: 520px; overflow: hidden; pointer-events: none; z-index: 0; }
.sky .flock { position: absolute; width: min(520px, 70vw); inset-inline-end: -40px; top: 40px; opacity: .55; }
[dir=rtl] .sky .flock { transform: scaleX(-1); }

/* ---------- KODOMO wordmark: six brand colours, Baloo Bhaijaan 2 ---------- */
.kodomo { font: 800 1em/1 'Baloo', 'Inter', sans-serif; letter-spacing: .01em; white-space: nowrap; display: inline-block; direction: ltr; }
.k1 { color: #E52521; } .k2 { color: #2EA84A; } .k3 { color: #1EA3DF; } .k4 { color: #E6197E; } .k5 { color: #8D3D97; } .k6 { color: #F6C21C; }
.k6 { text-shadow: 0 0 .5px rgba(150,110,0,.45); }
.by { color: var(--ink-faint); font: 500 .8em/1 var(--sans); display: inline-flex; align-items: baseline; gap: .4em; }
.by .kodomo { font-size: 1.45em; }

/* ---------- top bar ---------- */
.bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left)); max-width: 1120px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 42px; height: 42px; flex: none; border-radius: 50%; box-shadow: 0 4px 12px rgba(120,100,70,.14); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-house { font: 700 18px/1.2 var(--serif); color: var(--gold-text); white-space: nowrap; }
[lang=en] .brand-house { font: 600 19px/1.1 'Cormorant', serif; letter-spacing: .3px; }
.brand .by { font-size: 12px; margin-top: 3px; }
.bar-end { display: flex; gap: 8px; align-items: center; flex: none; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.8);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 14px/1 var(--sans); backdrop-filter: blur(8px); }
.pill:hover { border-color: var(--gold); }
.pill.lang { font-family: 'Plex Arabic', 'Inter', sans-serif; }

main { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 8px 16px 40px; }
.view { animation: viewIn .5s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- gold foil text ---------- */
.foil { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .12em .2em .42em; margin: -.12em 0 -.42em; filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -.5px 0 rgba(120,96,60,.28)); }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 18px 0 8px; }
.hero-emblem { width: min(250px, 62vw); height: auto; display: block; margin: 0 auto 4px; filter: drop-shadow(0 14px 26px rgba(120,100,70,.12)); }
.kicker { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--gold-text); letter-spacing: .3px; }
[lang=en] .kicker { font: 500 12px/1.4 'Inter'; letter-spacing: 2.4px; text-transform: uppercase; }
.title { margin: 6px 0 0; font: 700 clamp(44px, 9vw, 72px)/1.25 var(--display); }
[lang=en] .title { font: 500 clamp(40px, 8vw, 64px)/1.15 'Cormorant'; letter-spacing: .5px; }
.hero-by { margin: 10px 0 18px; font-size: 20px; }
.hero-by .by { font-size: 17px; }
.nominated { display: inline-block; margin: 0 0 18px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.message { max-width: 760px; margin: 0 auto; padding: 30px clamp(20px, 5vw, 48px); background: rgba(255,255,255,.88); border-radius: 28px;
  box-shadow: var(--shadow); border: 1px solid rgba(196,171,126,.28); position: relative; }
.message::before, .message::after { content: ''; position: absolute; left: 50%; width: 120px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.message::before { top: 14px; } .message::after { bottom: 14px; }
.message p { margin: 0 0 14px; font: 400 clamp(18px, 2.4vw, 21px)/1.95 var(--serif); color: var(--ink); }
[lang=en] .message p { font: 500 clamp(18px, 2.3vw, 21px)/1.6 'Cormorant'; }
.message .lead { font-size: clamp(21px, 3vw, 25px); color: var(--gold-text); font-weight: 700; }
[lang=en] .message .lead { font-weight: 600; font-style: italic; }
.message .close { margin: 0; color: var(--gold-text); }
.counter { display: inline-block; margin: 22px auto 0; padding: 8px 22px; color: var(--ink-soft); font-size: 15px;
  border-top: 1px solid rgba(196,171,126,.5); border-bottom: 1px solid rgba(196,171,126,.5); }

/* ---------- sections ---------- */
section { position: relative; }
.about, .why, .doors-sec { margin-top: 56px; text-align: center; }
.sec-title { margin: 0 0 10px; font: 700 clamp(26px, 4vw, 34px)/1.4 var(--serif); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 16px; }
[lang=en] .sec-title { font: 600 clamp(28px, 4vw, 36px)/1.2 'Cormorant'; }
.sec-title::before, .sec-title::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.sec-title::after { transform: scaleX(-1); }
.sub-title { margin: 34px 0 16px; font: 500 15px/1.4 var(--sans); color: var(--gold-text); letter-spacing: .3px; }
[lang=en] .sub-title { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; }
.what { max-width: 680px; margin: 0 auto; font-size: 18px; color: var(--ink-soft); }

.ico { width: 48px; height: 48px; flex: none; fill: none; stroke: var(--gold-mid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .ico-ring { fill: #fff; stroke: #e8dcc4; }

ul[role=list], ol[role=list] { list-style: none; margin: 0; padding: 0; }
.who-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: start; }
.who-card { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); border: 1px solid #edf0f4; }
.who-card h4 { margin: 12px 0 6px; font: 700 19px/1.35 var(--serif); }
[lang=en] .who-card h4 { font: 600 22px/1.2 'Cormorant'; }
.who-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.75; }
.who-card.soon { background: linear-gradient(180deg, #fbfcfd, #f5f7fa); }
.soon-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 500 12px/1.6 var(--sans); color: var(--gold-text);
  background: var(--gold-hi); border: 1px solid rgba(196,171,126,.45); vertical-align: middle; }
.soon-tag.big { font-size: 14px; padding: 4px 14px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: st; text-align: start; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: rgba(255,255,255,.7); border-radius: 18px; border: 1px solid #edf0f4; position: relative; }
.steps li::before { counter-increment: st; content: counter(st); position: absolute; top: 10px; inset-inline-end: 14px; font: 500 12px/1 'Inter'; color: var(--gold); }
.steps .ico { width: 40px; height: 40px; }
.steps b { display: block; font: 500 16px/1.4 var(--sans); color: var(--ink); }
.steps span { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.trust { max-width: 720px; margin: 22px auto 0; font-size: 14px; color: var(--ink-faint); line-height: 1.8; }
.trust::before { content: '✦'; color: var(--gold); margin-inline-end: 8px; }

.why { padding: 40px clamp(16px, 4vw, 40px) 34px; border-radius: 32px; background: rgba(255,255,255,.72); border: 1px solid rgba(196,171,126,.25); box-shadow: var(--shadow); }
.khayr { margin: 8px 0 0; font: 700 clamp(34px, 6vw, 50px)/1.35 var(--display); display: inline-block; }
[lang=en] .khayr { font: 500 italic clamp(34px, 6vw, 48px)/1.2 'Cormorant'; }
.khayr-sub { max-width: 640px; margin: 10px auto 26px; font: 400 18px/1.9 var(--serif); color: var(--ink-soft); }
[lang=en] .khayr-sub { font: 500 19px/1.55 'Cormorant'; }
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: start; }
.reasons li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border-radius: 18px; border: 1px solid #eef0f3; }
.reasons h4 { margin: 2px 0 4px; font: 500 17px/1.4 var(--sans); }
.reasons p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.parents-soon { margin: 22px auto 0; max-width: 700px; font-size: 15px; color: var(--ink-soft); }

/* ---------- doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.door { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 280px; padding: 30px 18px 26px;
  text-decoration: none; color: var(--ink); border-radius: 160px 160px 24px 24px;
  background: radial-gradient(ellipse 80% 55% at 50% 22%, #ffffff 0, #fbfcfd 50%, #eef2f6 100%);
  box-shadow: inset 0 0 0 1px rgba(196,171,126,.55), inset 0 0 0 7px #fff, inset 0 0 0 8px rgba(196,171,126,.28), 0 18px 40px rgba(37,55,85,.09);
  transition: transform .35s ease, box-shadow .35s ease; }
.door:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(176,150,106,.8), inset 0 0 0 7px #fff, inset 0 0 0 8px rgba(196,171,126,.4), 0 24px 48px rgba(37,55,85,.12); }
.door-arch { margin-bottom: auto; margin-top: 26px; }
.door-arch .ico { width: 76px; height: 76px; stroke-width: 1.2; }
.door-label { font: 700 22px/1.35 var(--serif); }
[lang=en] .door-label { font: 600 24px/1.2 'Cormorant'; }
.door-sub { font-size: 14px; color: var(--ink-faint); }
.door-soon { opacity: .78; }
.door-soon .door-label { color: var(--ink-soft); }

/* ---------- forms ---------- */
.crumbs { margin: 6px 0 0; font-size: 14px; }
.crumbs a { text-decoration: none; }
[dir=rtl] .crumbs a::before { content: '→ '; } [dir=ltr] .crumbs a::before { content: '← '; }
.form-head, .me-head { text-align: center; margin: 18px auto 22px; max-width: 680px; }
.form-icon .ico { width: 64px; height: 64px; }
.title-sm { margin: 6px 0 8px; font: 700 clamp(28px, 5vw, 38px)/1.35 var(--serif); }
[lang=en] .title-sm { font: 600 clamp(30px, 5vw, 40px)/1.2 'Cormorant'; }
.intro { margin: 0; color: var(--ink-soft); }
.reqnote { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.reg { max-width: 760px; margin: 0 auto; }
.card-sec { background: #fff; border-radius: var(--r); padding: 22px clamp(16px, 4vw, 30px) 10px; margin-bottom: 16px; box-shadow: var(--shadow); border: 1px solid #edf0f4; }
.card-sec h2 { margin: 0 0 12px; font: 700 21px/1.4 var(--serif); color: var(--gold-text); }
[lang=en] .card-sec h2 { font: 600 24px/1.2 'Cormorant'; }
.sec-note { margin: -4px 0 14px; font-size: 14px; color: var(--ink-soft); }
.field { margin-bottom: 16px; }
.field label, .group legend { display: block; font: 500 15px/1.5 var(--sans); color: var(--ink); margin-bottom: 6px; }
.req { color: var(--gold-deep); }
.hint { margin: -2px 0 6px; font-size: 13px; color: var(--ink-faint); }
input[type=text], input[type=email], input[type=tel], input[type=search], select, input[type=file], textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid #d9dee6; background: #fbfcfd; color: var(--ink); font: 400 16px/1.4 var(--sans); }
input[type=file] { padding: 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-mid); box-shadow: 0 0 0 4px rgba(196,171,126,.22); background: #fff; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-mid) 50%), linear-gradient(135deg, var(--gold-mid) 50%, transparent 50%);
  background-size: 6px 6px; background-repeat: no-repeat; background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; padding-inline-end: 40px; }
[dir=rtl] select { background-position: 16px 21px, 22px 21px; }
.group { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px; border-radius: 999px; border: 1px solid #dfe3ea; background: #fbfcfd;
  font: 400 14.5px/1.3 var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
.chip input { accent-color: var(--gold-deep); width: 18px; height: 18px; margin: 0; flex: none; }
.chip:has(input:checked) { border-color: var(--gold-mid); background: #fbf7ef; }
.chip:has(input:focus-visible) { outline: 3px solid rgba(176,150,106,.55); outline-offset: 2px; }
.check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { accent-color: var(--gold-deep); width: 20px; height: 20px; margin-top: 3px; flex: none; }
.err { margin: 4px 0 0; font-size: 13.5px; color: var(--err); min-height: 0; }
.err:empty { display: none; }
.has-err input[type=text], .has-err input[type=email], .has-err input[type=tel], .has-err select, .has-err input[type=file], .has-err textarea { border-color: var(--err); background: #fff8f7; }
.has-err .chips .chip { border-color: #e7b9b5; }
.errsum { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: #fff6f5; border: 1px solid #efc9c5; color: var(--err); }
.errsum p { margin: 0; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.consent .trust { margin: 6px 0 12px; text-align: start; }
.submit-row { text-align: center; margin: 22px 0 10px; }
.sending { display: none; margin: 10px 0 0; color: var(--ink-faint); font-size: 14px; }
.htmx-request .sending, .htmx-request.reg .sending { display: block; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 15.5px/1.2 var(--sans); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s; }
.btn.gold { color: #2a2418; background: linear-gradient(100deg, #c3a774 0%, #e3d2ac 28%, #f1e6cd 46%, #d2bb8d 66%, #b89c6b 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(120,96,60,.25) inset, 0 8px 22px rgba(120,100,70,.22); }
.btn.gold:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn.big { min-height: 56px; padding: 0 34px; font-size: 17px; }
.btn.ghost, .btn.wa { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(196,171,126,.7); }
.btn.ghost:hover, .btn.wa:hover { box-shadow: inset 0 0 0 1px var(--gold-deep); }
.btn.wa::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #25a35a; }
.btn[disabled], .btn:disabled { opacity: .6; cursor: progress; }
.link-btn { background: none; border: 0; padding: 6px 8px; font: 500 14px/1.2 var(--sans); color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- soon / verify ---------- */
.soon-card, .verify-card { max-width: 640px; margin: 30px auto; padding: 34px clamp(18px, 5vw, 44px); text-align: center; background: #fff; border-radius: 28px; box-shadow: var(--shadow); border: 1px solid rgba(196,171,126,.25); }
.soon-line { font: 400 19px/1.9 var(--serif); color: var(--ink); }
[lang=en] .soon-line { font: 500 21px/1.5 'Cormorant'; }
.soon-why, .verify-why { color: var(--ink-soft); font-size: 15px; }
.verify-emblem { width: 150px; height: auto; }
.tick { color: var(--ok); }
.verify-dl { margin: 18px 0; display: grid; gap: 10px; text-align: start; }
.verify-dl div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef0f3; }
.verify-dl dt { color: var(--ink-faint); font-size: 14px; }
.verify-dl dd { margin: 0; font-weight: 500; }
.v-name { font: 700 20px/1.4 var(--serif) !important; }
.mono { font: 500 14px/1.4 'Inter', monospace; letter-spacing: 1px; }
.disclaimer { font-size: 13px; color: var(--ink-faint); }

/* ---------- the registrant's page ---------- */
.me-name { margin: 0; font: 700 22px/1.5 var(--serif); color: var(--gold-text); }
.status-pill { display: inline-block; margin: 10px 0 0; padding: 4px 14px; border-radius: 999px; font-size: 14px; background: #f3f5f8; color: var(--ink-soft); border: 1px solid #e3e7ed; }
.status-pill.approved { background: #f0f8f3; color: var(--ok); border-color: #cfe7d8; }
.badge { display: inline-flex; gap: 10px; align-items: center; margin: 14px auto 0; padding: 8px 18px 8px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); text-align: start; }
.badge .ico { width: 36px; height: 36px; }
.badge small { display: block; color: var(--ink-faint); font-size: 12.5px; }

/* the printer: porcelain body, gold band, a dark slot; the paper rises out of it */
.press { --s: .6; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.paper-well { position: relative; width: 86%; z-index: 1; }
.paper { position: relative; width: 100%; height: calc(794px * var(--s)); direction: ltr; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(30,40,60,.08), 0 18px 40px rgba(30,45,70,.12); }
.cert-frame { position: absolute; top: 0; left: 0; width: 1123px; height: 794px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; background: #fff; pointer-events: none; }
.printer { position: relative; z-index: 2; width: 100%; margin-top: -6px; }
.printer-slot { position: absolute; top: 0; left: 5%; right: 5%; height: 12px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #2f3542, #4a5262 70%, #6b7383); box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.printer-glow { position: absolute; left: 6%; right: 6%; top: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f4ead6, transparent); opacity: 0; transition: opacity 1.2s ease; }
.printer-body { position: relative; height: 104px; margin-top: 6px; border-radius: 18px 18px 30px 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 46%, #e7ebf0 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 14px rgba(140,155,175,.18), 0 20px 34px rgba(37,55,85,.14), 0 2px 0 rgba(196,171,126,.45);
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.printer-body::before { content: ''; position: absolute; left: 7%; right: 7%; top: 26px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-hi), var(--gold), transparent); opacity: .8; }
.printer-cap { position: absolute; left: 0; right: 0; top: 0; height: 20px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #f2f4f7, #fff); }
.printer-emblem { width: 52px; height: auto; position: relative; top: 10px; }
.printer-name { position: relative; top: 10px; font: 700 17px/1 var(--serif); color: var(--gold-text); }
[lang=en] .printer-name { font: 600 18px/1 'Cormorant'; letter-spacing: .5px; }
.printer-led { position: absolute; top: 46px; inset-inline-end: 9%; width: 8px; height: 8px; border-radius: 50%; background: #cfe6d7; box-shadow: 0 0 0 3px rgba(207,230,215,.35); transition: background 1s ease; }
.press.feeding .printer-glow { opacity: .85; }
.press.feeding .printer-led { background: #b9dcc5; }
/* fresh: the paper starts inside the printer (hidden under the slot) */
.press.fresh .paper-well { overflow: hidden; }
.press.fresh .paper { transform: translateY(100%); }
.press.fresh.feeding .paper { animation: feed var(--feed, 4200ms) steps(42, end) forwards; }
@keyframes feed { from { transform: translateY(100%); } to { transform: translateY(0); } }
.press.fresh.printed .paper-well { overflow: visible; }
.press.fresh.printed .paper, .press.done .paper { transform: none; animation: none; }
.press-status { min-height: 1.6em; margin: 14px 0 0; color: var(--ink-soft); font-size: 15px; text-align: center; }
.press-tools { display: flex; gap: 12px; justify-content: center; }
.stamp { position: absolute; z-index: 4; left: 0; top: 0; width: 120px; opacity: 0; pointer-events: none; transform-origin: 50% 100%; will-change: transform, opacity; }
.stamp svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(30,40,60,.18)); }
.ink-bloom { position: absolute; z-index: 3; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(196,171,126,.38) 0, rgba(196,171,126,.16) 42%, rgba(196,171,126,0) 70%); }
/* reduced motion: one gentle fade, nothing else */
.press.fresh.reduced .paper { transform: none; opacity: 0; transition: opacity .9s ease; }
.press.fresh.reduced.done .paper { opacity: 1; }

.after { max-width: 860px; margin: 26px auto 0; transition: opacity .8s ease, transform .8s ease; }
.after.hold { opacity: 0; transform: translateY(8px); visibility: hidden; }
.review-note { text-align: center; color: var(--ink-soft); font-size: 15px; max-width: 640px; margin: 0 auto 18px; }
.act-sec { background: #fff; border-radius: var(--r); padding: 20px clamp(16px, 4vw, 28px); margin-bottom: 16px; box-shadow: var(--shadow); border: 1px solid #edf0f4; }
.sec-title-sm { margin: 0 0 12px; font: 700 20px/1.4 var(--serif); color: var(--gold-text); }
[lang=en] .sec-title-sm { font: 600 23px/1.2 'Cormorant'; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hint-sm { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.hint-sm:empty { display: none; }
.creatives { display: grid; grid-template-columns: 1fr 1.42fr; gap: 16px; margin-top: 16px; align-items: end; }
.creatives.one { grid-template-columns: minmax(0, 320px); }
.creative { margin: 0; }
.cframe-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 26px rgba(37,55,85,.10); background: #f4f6f9; direction: ltr; }
.cframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.creative figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invite { margin: 12px 0 16px; padding: 16px; border-radius: 16px; background: var(--porcelain); border: 1px solid #e8ebf0; }
.invite-text { margin: 0 0 12px; font-size: 15px; }
.nom-form { margin-top: 14px; }
.keylink { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.keylink code { font: 400 13px/1.5 'Inter', monospace; background: var(--porcelain); padding: 6px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.private { background: #fcfcfd; }

.foot { position: relative; z-index: 1; text-align: center; padding: 26px 16px 34px; color: var(--ink-faint); font-size: 13px; border-top: 1px solid #eef0f3; max-width: 1040px; margin: 0 auto; }
.foot p { margin: 4px 0; }
.foot .made { display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.foot .kodomo { font-size: 22px; }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  .who-cards, .doors, .reasons { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .door { min-height: 210px; border-radius: 120px 120px 22px 22px; }
  .door-arch { margin-top: 10px; }
  .door-arch .ico { width: 60px; height: 60px; }
}
@media (max-width: 560px) {
  body.ww { font-size: 15.5px; }
  .steps { grid-template-columns: 1fr; }
  .brand-house { font-size: 16px; }
  .brand img { width: 36px; height: 36px; }
  .bar { padding: 10px 12px; }
  .pill { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .paper-well { width: 92%; }
  .printer-body { height: 78px; border-radius: 14px 14px 22px 22px; }
  .printer-body::before { top: 20px; }
  .printer-emblem { width: 38px; top: 8px; }
  .printer-name { font-size: 14px; top: 8px; }
  .printer-led { top: 36px; }
  .creatives { grid-template-columns: 1fr 1fr; gap: 10px; }
  .creative figcaption { flex-direction: column; align-items: flex-start; gap: 0; }
  .verify-dl div { grid-template-columns: 1fr; gap: 2px; }
  .acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .door, .btn, .after { transition: none; }
  .door:hover { transform: none; }
}
@media print {
  .bar, .foot, .sky, .printer, .press-tools, .after { display: none !important; }
}

.hero-cta { margin: 22px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- inside the house in the city (ww.js adds .ww-embed when wwhouse.js frames the page) ----------
   The hall around the frame has the header, «رجوع للقاعة» and the way out, so the page keeps only its content. */
.ww-embed body.ww { background: transparent; min-height: 0; }
.ww-embed .bar, .ww-embed .sky, .ww-embed .skip, .ww-embed .crumbs, .ww-embed .foot .made { display: none; }
.ww-embed main { padding-top: 4px; }
.ww-embed .form-head, .ww-embed .me-head { margin-top: 10px; }
.ww-embed .foot { border-top: 0; padding: 8px 16px 22px; }

/* the specialist's other specialties: optional, behind «لديّ تخصّصات أخرى أيضًا» */
.more-sp { margin: 2px 0 10px; }
.more-sp > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 18px; border-radius: 999px; border: 1px dashed #d6c8aa;
  background: #fff; color: var(--gold-text); font: 500 15px/1.3 var(--sans); cursor: pointer; list-style: none; }
.more-sp > summary::-webkit-details-marker { display: none; }
.more-sp > summary::before { content: '+'; font: 700 18px/1 var(--sans); }
.more-sp[open] > summary::before { content: '−'; }
.more-sp[open] > summary { margin-bottom: 12px; border-style: solid; }
.more-sp > summary:focus-visible { outline: 3px solid rgba(176,150,106,.55); outline-offset: 2px; }

textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.warn { margin: -2px 0 8px; padding: 8px 12px; border-radius: 12px; background: #fbf7ef; border: 1px solid rgba(196,171,126,.45); font-size: 13.5px; color: var(--gold-text); }

/* ---------- phone with its country (ww.js turns the select into a searchable picker) ---------- */
.phone-row { display: flex; gap: 8px; align-items: stretch; position: relative; }
.phone-row select.cc { flex: 0 0 auto; width: auto; max-width: 46%; }
.phone-row input[type=tel] { flex: 1 1 auto; min-width: 0; }
.phone-row select.cc-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cc-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1px solid #d9dee6;
  background: #fbfcfd; color: var(--ink); font: 500 16px/1 var(--sans); cursor: pointer; }
.cc-btn:focus-visible, .cc-open .cc-btn { outline: none; border-color: var(--gold-mid); box-shadow: 0 0 0 4px rgba(196,171,126,.22); background: #fff; }
.cc-caret { width: 7px; height: 7px; border-inline-end: 2px solid var(--gold-mid); border-bottom: 2px solid var(--gold-mid); transform: rotate(45deg) translateY(-2px); }
.flag { flex: none; width: 24px; height: 18px; border-radius: 3px; background: #eef1f5 url(/static/img/flags-phone.webp) no-repeat; background-size: 384px 288px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.phone-field { position: relative; }
.cc-pop { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% - 18px); width: min(380px, 100%); padding: 10px; border-radius: 18px; background: #fff;
  border: 1px solid #e3d7bd; box-shadow: 0 22px 46px -20px rgba(37,55,85,.45); }
.cc-search { min-height: 44px; margin-bottom: 8px; }
.cc-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.cc-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.cc-list li[hidden] { display: none; }
.cc-list li.active { background: #fbf7ef; box-shadow: inset 0 0 0 1px rgba(196,171,126,.6); }
.cc-list li[aria-selected=true] .cc-name { font-weight: 600; }
.cc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.3; }
.cc-name small { font-size: 12px; color: var(--ink-faint); }
.cc-dial { flex: none; font: 500 14px/1 var(--sans); color: var(--ink-soft); }
.cc-none { margin: 6px 4px; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 600px) {
  .cc-pop { position: fixed; inset: auto 0 0 0; width: auto; top: auto; border-radius: 22px 22px 0 0; padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .cc-list { max-height: 52vh; }
}

/* ---------- prices ---------- */
.price-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.price-row { padding: 12px; border-radius: 16px; background: #fbfcfd; border: 1px solid #e6e9ef; }
.price-label { margin: 0 0 8px; font: 500 14.5px/1.4 var(--sans); }
.price-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.price-inputs .pf { display: flex; flex-direction: column; gap: 4px; flex: 1 1 90px; min-width: 80px; font-size: 13px; color: var(--ink-faint); }
.price-inputs .pf input { min-height: 46px; text-align: center; }
.price-inputs .dash { padding-bottom: 12px; color: var(--ink-faint); }
.price-inputs .cur { padding: 0 2px 13px; font: 600 15px/1 var(--sans); color: var(--gold-text); }
.price-inputs .pu { flex: 1 1 130px; }
.price-inputs .pu select { min-height: 46px; }
.has-err.price-row { border-color: #efc9c5; background: #fffafa; }

/* ---------- the parents' door ---------- */
.health-note { padding: 14px 16px; border-radius: 16px; background: #f7f9fb; border: 1px solid #e6e9ef; margin-bottom: 14px; }
.health-note p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-soft); }
.health-note p:last-child { margin: 0; }
.health-note b { color: var(--ink); font-weight: 600; }
.family-line { margin: 4px 0 0; color: var(--ink-soft); }
.shield-stage { position: relative; max-width: 440px; margin: 10px auto 0; text-align: center; }
.shield-frame { border-radius: 22px; box-shadow: 0 24px 50px -22px rgba(37,55,85,.35); }
.shield-glow { position: absolute; inset: -40px -60px; background: radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(255,255,255,0) 65%); pointer-events: none; }
.shield-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,250,236,.55) 48%, transparent 60%); transform: translateX(-120%); }
.shield-stage.fresh:not(.revealing):not(.shown) .shield-frame { opacity: 0; transform: translateY(16px) scale(.97); }
.shield-stage.revealing .shield-frame { animation: shieldIn 1.8s cubic-bezier(.2,.8,.2,1) both; }
.shield-stage.revealing .shield-sheen { animation: sheen 2.2s ease-in-out .9s both; }
@keyframes shieldIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.card-sec.danger { border-color: #f0d7d3; }
.btn.danger { color: #fff; background: #a8322b; }
.btn.danger:hover { background: #8f2924; }
.del-form .btn { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .shield-stage.revealing .shield-frame { animation: shieldFade .6s ease both; }
  .shield-stage.revealing .shield-sheen { animation: none; }
  @keyframes shieldFade { from { opacity: 0; } to { opacity: 1; } }
}
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }

/* privacy policy and terms (internal/server/legal.go) */
.foot-legal { margin: 6px 0 0; font-size: .86rem; }
.legal-line { margin-top: 6px; }
.legal-links a { color: var(--gold-text); text-underline-offset: 3px; }