/* The five designs. Each sets tokens for light and dark, then arranges the downloader stage. */
:root {
  --bg: #fff; --fg: #111; --muted: #666; --card: #fff; --soft: #f2f2f2; --line: #e5e5e5;
  --accent: #111; --accent-fg: #fff; --ok: #16a34a; --bad: #dc2626;
  --font-body: system-ui, sans-serif; --font-display: var(--font-body);
  --font-body-ar: "Noto Sans Arabic", system-ui, sans-serif; --font-display-ar: var(--font-body-ar);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
:root { --deva: "Noto Sans Devanagari"; }
[lang="hi"] body { font-family: var(--font-body), var(--deva), sans-serif; }

/* ======================================================= 1. GRABO — sticker pop (default) */
[data-layout="grabo"] {
  --bg: #ffd84d; --fg: #121212; --muted: #4a4220; --card: #ffffff; --soft: #fff3c2; --line: #121212;
  --accent: #121212; --accent-fg: #ffd84d; --accent-text: #121212; --focus: #121212;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif; --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body-ar: "Baloo Bhaijaan 2", system-ui, sans-serif; --font-display-ar: "Baloo Bhaijaan 2", system-ui, sans-serif;
  --mark-radius: 9px; --mark-rotate: rotate(-6deg); --mark-bg: #121212; --mark-fg: #ffd84d;
  --pill-bg: #fff; --pill-line: #121212; --bw-s: 2px;
  --field-bw: 2.5px; --field-line: #121212; --field-radius: 18px; --field-shadow: 6px 6px 0 #121212; --field-bg: #fff; --field-focus: #121212;
  --btn-bg: #121212; --btn-fg: #ffd84d; --btn-radius: 12px;
  --chip-bg: #fff; --chip-bw: 2px; --chip-line: #121212;
  --res-bw: 2.5px; --res-line: #121212; --res-radius: 22px; --res-shadow: 8px 8px 0 #121212; --res-bg: #fff;
  --thumb-bw: 2px; --opt-bw: 2px; --opt-line: #121212; --best-bg: #ffd84d; --best-line: #121212; --act-bg: #121212; --act-fg: #fff;
  --nw-bg: #7cf29a; --nw-fg: #121212; --nw-fg-dark: #121212; --nw-bw: 2px;
  --feat-bw: 2px; --feat-line: #121212; --feat-bg: #fff; --feat-radius: 16px;
  --cta-bg: #121212; --cta-fg: #fff; --cta-muted: #d9d2b0; --cta-btn-bg: #ffd84d; --cta-btn-fg: #121212;
  --h1-size: clamp(2.6rem, 7vw, 4.2rem); --display-tracking: -0.03em;
  --bar: #121212; --link: #121212;
}
[data-layout="grabo"][data-theme="dark"] {
  --bg: #141310; --fg: #fff6d6; --muted: #b8ad85; --card: #1f1d17; --soft: #2b281e; --line: #ffd84d;
  --accent: #ffd84d; --accent-fg: #121212; --accent-text: #ffd84d; --focus: #ffd84d;
  --mark-bg: #ffd84d; --mark-fg: #121212; --pill-bg: #1f1d17; --pill-line: #ffd84d;
  --field-line: #ffd84d; --field-shadow: 6px 6px 0 #ffd84d; --field-bg: #1f1d17; --field-focus: #ffd84d;
  --btn-bg: #ffd84d; --btn-fg: #121212;
  --chip-bg: #1f1d17; --chip-line: #ffd84d;
  --res-line: #ffd84d; --res-shadow: 8px 8px 0 #ffd84d; --res-bg: #1f1d17;
  --opt-line: #5c5236; --best-bg: #ffd84d; --best-line: #ffd84d; --act-bg: #ffd84d; --act-fg: #121212;
  --feat-line: #5c5236; --feat-bg: #1f1d17; --cta-bg: #ffd84d; --cta-fg: #121212; --cta-muted: #4a4220; --cta-btn-bg: #121212; --cta-btn-fg: #ffd84d;
  --bar: #ffd84d; --link: #ffd84d;
}
[data-layout="grabo"][data-theme="dark"] .opt.best { color: #121212; }
[data-layout="grabo"][data-theme="dark"] .opt.best .kind, [data-layout="grabo"][data-theme="dark"] .opt.best .sz { color: #4a4220; }
[data-layout="grabo"][data-theme="dark"] .opt.best .act { background: #121212; color: #ffd84d; }
[data-layout="grabo"] .hero-copy h1 .l2 { background: var(--card); border: 2.5px solid var(--line); padding: 0 .22em; border-radius: 16px; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--line); margin-top: 6px; }
[data-layout="grabo"] .res { transform: rotate(.6deg); }
[data-layout="grabo"] .res + .res { transform: rotate(-.6deg); }
[data-layout="grabo"] .feat, [data-layout="grabo"] .steps li, [data-layout="grabo"] .pf-card, [data-layout="grabo"] .faq-list details { box-shadow: 4px 4px 0 var(--line); }
[data-layout="grabo"][data-theme="dark"] .feat, [data-layout="grabo"][data-theme="dark"] .steps li, [data-layout="grabo"][data-theme="dark"] .pf-card, [data-layout="grabo"][data-theme="dark"] .faq-list details { box-shadow: none; }
[data-layout="grabo"] .steps .n { border: 2px solid var(--line); }
/* stage: copy + form on the left, result (or the sticker stack) on the right */
@media (min-width: 900px) {
  [data-layout="grabo"] .stage { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 44px; align-items: center; }
  [data-layout="grabo"] .stage > * { grid-column: 1; }
  [data-layout="grabo"] .stage .result, [data-layout="grabo"] .stage .idle-art { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  [data-layout="grabo"] .stage.has-result .idle-art { display: none; }
  /* With a result, the left column keeps its place: the result spans every row and any extra height goes to a last
     flexible row, so the headline, the link box and the platforms don't move when the result grows. */
  [data-layout="grabo"] .stage.has-result { grid-template-rows: repeat(5, auto) 1fr; }
  [data-layout="grabo"] .stage.has-result .result { grid-row: 1 / -1; align-self: start; }
  [data-layout="grabo"] .idle-art { display: block; position: relative; height: 380px; }
}
[data-layout="grabo"] .idle-art .st { position: absolute; border: 2.5px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 8px 8px 0 var(--line); }
[data-layout="grabo"] .idle-art .s1 { inset: 30px 60px 70px 20px; transform: rotate(-7deg); background: linear-gradient(135deg, #25f4ee, #fe2c55); }
[data-layout="grabo"] .idle-art .s2 { inset: 50px 30px 50px 60px; transform: rotate(5deg); background: linear-gradient(135deg, #feda75, #d62976 55%, #4f5bd5); }
[data-layout="grabo"] .idle-art .s3 { inset: 70px 70px 30px 40px; transform: rotate(-1deg); display: grid; place-items: center; }
[data-layout="grabo"] .idle-art .s3 i { width: 92px; height: 92px; border-radius: 50%; background: var(--accent); position: relative; }
[data-layout="grabo"] .idle-art .s3 i::after { content: ""; position: absolute; left: 36px; top: 28px; border-left: 30px solid var(--accent-fg); border-block: 18px solid transparent; }

/* ======================================================= 2. SAVVO — night glass */
[data-layout="savvo"] {
  --bg: #f3f6fb; --fg: #0d1426; --muted: #5b6785; --card: rgba(255, 255, 255, .78); --soft: #e7ecf6; --line: #d7deec;
  --accent: #14b8a6; --accent-fg: #03201c; --accent-text: #0d9488; --accent2: #f43f5e;
  --font-body: "Sora", system-ui, sans-serif; --font-display: "Sora", system-ui, sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-display-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --mark-radius: 50%; --mark-bg: conic-gradient(from 200deg, #2dd4bf, #fb7185, #2dd4bf); --mark-fg: transparent;
  --top-bg: color-mix(in srgb, var(--bg) 70%, transparent); --top-blur: blur(14px);
  --field-radius: 18px; --field-bg: rgba(255, 255, 255, .85); --btn-bg: linear-gradient(90deg, #2dd4bf, #5eead4); --btn-fg: #03201c;
  --res-radius: 22px; --res-bg: rgba(255, 255, 255, .8); --opt-cols: 1fr 1fr; --best-bg: color-mix(in srgb, #14b8a6 10%, transparent); --best-line: #14b8a6;
  --act-bg: #0d1426; --act-fg: #fff; --bar: linear-gradient(90deg, #2dd4bf, #fb7185);
  --feat-bg: rgba(255, 255, 255, .7); --stage-max: 980px; --h1-size: clamp(2.3rem, 6.4vw, 3.6rem); --h1-weight: 700;
  --cta-bg: #0d1426; --cta-fg: #eaf0ff; --cta-muted: #9aa7c7; --link: #0d9488;
}
[data-layout="savvo"][data-theme="dark"] {
  --bg: #0a0f1d; --fg: #eaf0ff; --muted: #9aa7c7; --card: rgba(255, 255, 255, .055); --soft: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .13);
  --accent: #2dd4bf; --accent-fg: #03201c; --accent-text: #2dd4bf; --field-bg: rgba(255, 255, 255, .06); --res-bg: rgba(255, 255, 255, .05);
  --best-bg: rgba(45, 212, 191, .1); --best-line: #2dd4bf; --act-bg: #eaf0ff; --act-fg: #0a0f1d; --feat-bg: rgba(255, 255, 255, .04);
  --cta-bg: linear-gradient(120deg, rgba(45, 212, 191, .16), rgba(251, 113, 133, .14)); --cta-fg: #eaf0ff; --link: #5eead4;
}
[data-layout="savvo"] body { background: radial-gradient(60% 45% at 88% 0%, rgba(45, 212, 191, .22), transparent 70%), radial-gradient(50% 40% at 0% 70%, rgba(251, 113, 133, .16), transparent 70%), var(--bg); background-attachment: fixed; }
[data-layout="savvo"] .mark::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); }
[data-layout="savvo"] .mark { font-size: 0; }
[data-layout="savvo"] .stage { justify-items: center; text-align: center; }
[data-layout="savvo"] .hero-copy .sub { margin-inline: auto; }
[data-layout="savvo"] .hero-copy h1 .l2 { background: linear-gradient(90deg, #2dd4bf, #fb7185); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-layout="savvo"] .grab { width: min(680px, 100%); backdrop-filter: blur(12px); }
[data-layout="savvo"] .chips { justify-content: center; }
[data-layout="savvo"] .result { width: min(860px, 100%); text-align: start; margin-top: 10px; }
[data-layout="savvo"] .res { backdrop-filter: blur(12px); --res-cols: 230px minmax(0, 1fr); }
[data-layout="savvo"] .go { box-shadow: 0 8px 26px rgba(45, 212, 191, .35); }
@media (max-width: 640px) { [data-layout="savvo"] { --opt-cols: 1fr; } }

/* ======================================================= 3. KLIPZO — film cut */
[data-layout="klipzo"] {
  --bg: #f1efe9; --fg: #161411; --muted: #6e675b; --card: #fbfaf7; --soft: #e8e4da; --line: #d6d0c3;
  --accent: #e89a00; --accent-fg: #161411; --accent-text: #b87900;
  --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-display: "Unbounded", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-body-ar: "Noto Kufi Arabic", system-ui, sans-serif; --font-display-ar: "Lalezar", system-ui, sans-serif;
  --font-field: var(--font-mono); --font-btn: "Unbounded", system-ui, sans-serif; --btn-tracking: .05em; --font-opt: var(--font-mono);
  --mark-radius: 7px; --brand-tracking: .08em;
  --field-radius: 10px; --btn-radius: 7px; --btn-radius-s: 6px; --res-radius: 12px; --thumb-radius: 8px; --opt-radius: 6px; --feat-radius: 10px; --pill-radius: 7px;
  --act-bg: #161411; --act-fg: #f3efe6; --best-bg: color-mix(in srgb, #e89a00 12%, transparent); --best-line: #e89a00;
  --trim-sel: #e89a00; --trim-bg: repeating-linear-gradient(90deg, #d9c9a6 0 22px, #cdb994 22px 44px);
  --h1-size: clamp(2.4rem, 6.5vw, 4rem); --display-tracking: -0.01em; --cta-bg: #161411; --cta-fg: #f3efe6; --cta-muted: #a69f92; --link: #b87900;
}
[data-layout="klipzo"][data-theme="dark"] {
  --bg: #0f0f0f; --fg: #f3efe6; --muted: #9b958a; --card: #181818; --soft: #222; --line: #2f2f2f;
  --accent: #ffb020; --accent-fg: #0f0f0f; --accent-text: #ffb020; --act-bg: #f3efe6; --act-fg: #0f0f0f;
  --best-bg: rgba(255, 176, 32, .08); --best-line: #ffb020; --trim-sel: #ffb020; --trim-bg: repeating-linear-gradient(90deg, #3a2a1a 0 22px, #4a3420 22px 44px);
  --cta-bg: #ffb020; --cta-fg: #0f0f0f; --cta-muted: #4a3a1a; --link: #ffb020;
}
[data-layout="klipzo"] .mark { font-size: 0; }
[data-layout="klipzo"] .mark::after { content: ""; border-inline-start: 11px solid var(--accent-fg); border-block: 7px solid transparent; margin-inline-start: 3px; }
[dir="rtl"][data-layout="klipzo"] .mark::after { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px; }
[data-layout="klipzo"] .brand-name { text-transform: uppercase; }
[data-layout="klipzo"] .nav a { font-family: var(--font-mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
[data-layout="klipzo"] body::before, [data-layout="klipzo"] body::after { content: ""; display: block; height: 16px; flex: none; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--line) 14px 28px); border-block: 4px solid var(--bg); background-color: var(--soft); }
[data-layout="klipzo"] .hero-copy h1 { text-transform: uppercase; }
[dir="rtl"][data-layout="klipzo"] .hero-copy h1 { text-transform: none; font-weight: 400; }
[data-layout="klipzo"] .hero-copy h1 .l2 { color: var(--accent-text); }
[data-layout="klipzo"] .hero-copy .sub { font-family: var(--font-mono); font-size: .86rem; }
[data-layout="klipzo"] .hero-copy .sub::before { content: "// "; color: var(--accent-text); }
[dir="rtl"][data-layout="klipzo"] .hero-copy .sub { font-family: var(--font-body-ar); }
[data-layout="klipzo"] .grab .rec { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ff4d3d; margin-inline: 10px 2px; box-shadow: 0 0 10px #ff4d3d; flex: none; animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }
[data-layout="klipzo"] .chip { font-family: var(--font-mono); border-radius: 6px; }
[data-layout="klipzo"] .res { --res-cols: minmax(0, 1.25fr) minmax(0, 1fr); }
[data-layout="klipzo"] .res .thumb { aspect-ratio: 16 / 9; }
[data-layout="klipzo"] .res-meta, [data-layout="klipzo"] .opt-h { font-family: var(--font-mono); }
[data-layout="klipzo"] .steps .n { border-radius: 6px; font-family: var(--font-mono); }
@media (min-width: 900px) {
  [data-layout="klipzo"] .hero-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
  [data-layout="klipzo"] .hero-copy .sub { margin: 0; }
}
@media (max-width: 640px) { [data-layout="klipzo"] .res { --res-cols: 1fr; } }

/* ======================================================= 4. FETCHLY — bento */
[data-layout="fetchly"] {
  --bg: #eef0ea; --fg: #17201b; --muted: #5d6a62; --card: #ffffff; --soft: #f3f5f0; --line: #e1e5dd;
  --accent: #0f766e; --accent-fg: #ecfdf5; --accent-text: #0f766e; --lime: #d9f99d;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body-ar: "Tajawal", system-ui, sans-serif; --font-display-ar: "Tajawal", system-ui, sans-serif;
  --mark-radius: 10px; --pill-bg: #fff; --pill-line: transparent; --pill-radius: 10px;
  --field-bw: 0; --field-radius: 16px; --btn-bg: #d9f99d; --btn-fg: #17201b; --btn-radius: 11px;
  --res-bw: 0; --res-radius: 24px; --feat-bw: 0; --feat-radius: 22px; --opt-bw: 0; --opt-bg: #f3f5f0; --best-bg: #0f766e; --act-bg: #17201b; --act-fg: #fff;
  --h1-size: clamp(2.2rem, 5.6vw, 3.2rem); --chip-bg: rgba(255, 255, 255, .14);
  --cta-bg: #17201b; --cta-fg: #e9f5ec; --cta-muted: #9fb0a5;
}
[data-layout="fetchly"][data-theme="dark"] {
  --bg: #0e1411; --fg: #e9f5ec; --muted: #9fb0a5; --card: #17201b; --soft: #1f2a24; --line: #26332c;
  --accent: #14b8a6; --accent-fg: #04201c; --accent-text: #5eead4; --opt-bg: #1f2a24; --best-bg: #0f766e;
  --pill-bg: #17201b; --act-bg: #d9f99d; --act-fg: #17201b; --cta-bg: #d9f99d; --cta-fg: #17201b; --cta-muted: #36502f; --cta-btn-bg: #17201b; --cta-btn-fg: #d9f99d;
}
[data-layout="fetchly"] .mark { font-size: 0; }
[data-layout="fetchly"] .mark::after { content: ""; width: 10px; height: 10px; border-inline-end: 3px solid #d9f99d; border-bottom: 3px solid #d9f99d; transform: rotate(45deg) translate(-2px, -2px); }
[data-layout="fetchly"] .opt.best { color: #ecfdf5; }
[data-layout="fetchly"] .opt.best .kind, [data-layout="fetchly"] .opt.best .sz, [data-layout="fetchly"] .opt.best .st { color: #b6e3d6; }
[data-layout="fetchly"] .opt.best .act { background: #d9f99d; color: #17201b; }
[data-layout="fetchly"] .tile { display: grid; gap: 8px; align-content: start; background: var(--card); border-radius: 24px; padding: 20px; }
[data-layout="fetchly"] .t-spread { background: #d9f99d; color: #17201b; }
[data-layout="fetchly"] .t-spread b { font-size: 1.05rem; line-height: 1.3; }
[data-layout="fetchly"] .t-spread small { color: #36502f; line-height: 1.6; }
[data-layout="fetchly"] .phone-mini { margin-top: 6px; background: #17201b; border-radius: 14px; padding: 10px; display: grid; gap: 6px; }
[data-layout="fetchly"] .phone-mini span { display: flex; align-items: center; gap: 8px; color: #e9f5ec; font-size: .75rem; background: #24302a; border-radius: 9px; padding: 6px 8px; }
[data-layout="fetchly"] .phone-mini .p-brand { background: #d9f99d; color: #17201b; }
[data-layout="fetchly"] .t-stat b { font-size: 1.9rem; font-weight: 800; color: var(--accent-text); line-height: 1.1; }
[data-layout="fetchly"] .t-stat small { color: var(--muted); }
[data-layout="fetchly"] .t-stat2 { background: #17201b; }
[data-layout="fetchly"] .t-stat2 b { color: #d9f99d; }
[data-layout="fetchly"] .t-stat2 small { color: #9fb0a5; }
[data-layout="fetchly"] .stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
[data-layout="fetchly"] .stage::before { content: ""; grid-area: 1 / 1 / 5 / 4; background: #0f766e; border-radius: 26px; }
[data-layout="fetchly"] .hero-copy { grid-area: 1 / 1 / 2 / 4; padding: 30px 30px 0; color: #ecfdf5; z-index: 1; }
[data-layout="fetchly"] .hero-copy .sub { color: #b6e3d6; }
[data-layout="fetchly"] .hero-copy h1 .l2 { color: #d9f99d; }
[data-layout="fetchly"] .grab { grid-area: 2 / 1 / 3 / 4; margin: 0 30px; z-index: 1; background: #fff; color: #17201b; }
[data-layout="fetchly"] .grab input::placeholder { color: #7b877f; }
[data-layout="fetchly"] .grab .paste { border-color: #e1e5dd; color: #5d6a62; }
[data-layout="fetchly"] .chips { grid-area: 3 / 1 / 4 / 4; padding: 0 30px; z-index: 1; color: #ecfdf5; }
[data-layout="fetchly"] .agree { grid-area: 4 / 1 / 5 / 4; padding: 0 30px 26px; z-index: 1; color: #b6e3d6; }
[data-layout="fetchly"] .t-spread { grid-area: 1 / 4 / 5 / 5; }
[data-layout="fetchly"] .t-stat { grid-area: 5 / 1 / 6 / 2; }
[data-layout="fetchly"] .t-stat2 { grid-area: 5 / 2 / 6 / 3; }
[data-layout="fetchly"] .result { grid-area: 5 / 3 / 6 / 5; }
[data-layout="fetchly"] .stage.has-result .result { grid-area: 6 / 1 / 7 / 5; }
@media (max-width: 860px) {
  [data-layout="fetchly"] .stage { grid-template-columns: 1fr 1fr; }
  [data-layout="fetchly"] .stage::before { grid-area: 1 / 1 / 5 / 3; }
  [data-layout="fetchly"] .hero-copy, [data-layout="fetchly"] .grab, [data-layout="fetchly"] .chips, [data-layout="fetchly"] .agree { grid-column: 1 / 3; }
  [data-layout="fetchly"] .hero-copy { padding: 22px 18px 0; }
  [data-layout="fetchly"] .grab { margin: 0 14px; }
  [data-layout="fetchly"] .chips, [data-layout="fetchly"] .agree { padding-inline: 18px; }
  [data-layout="fetchly"] .result, [data-layout="fetchly"] .stage.has-result .result { grid-area: 5 / 1 / 6 / 3; }
  [data-layout="fetchly"] .t-spread { grid-area: 6 / 1 / 7 / 3; }
  [data-layout="fetchly"] .t-stat { grid-area: 7 / 1 / 8 / 2; }
  [data-layout="fetchly"] .t-stat2 { grid-area: 7 / 2 / 8 / 3; }
}

/* ======================================================= 5. VIDORA — editorial */
[data-layout="vidora"] {
  --bg: #ffffff; --fg: #0d0d0d; --muted: #6b6b6b; --card: #ffffff; --soft: #f4f4f4; --line: #e6e6e6;
  --accent: #2f5bff; --accent-fg: #ffffff; --accent-text: #2f5bff;
  --font-body: "Manrope", system-ui, sans-serif; --font-display: "Instrument Serif", Georgia, serif;
  --font-body-ar: "Noto Sans Arabic", system-ui, sans-serif; --font-display-ar: "Noto Naskh Arabic", serif;
  --font-brand: "Instrument Serif", Georgia, serif; --brand-tracking: -0.01em;
  --top-line: 1px; --field-bw: 0; --field-bg: transparent; --field-radius: 0; --field-pad: 6px 0; --btn-radius: 99px;
  --res-bw: 0; --res-radius: 4px; --res-pad: 22px 0 0; --thumb-radius: 4px; --opt-bw: 0; --opt-radius: 0; --best-bg: transparent;
  --act-bg: transparent; --act-fg: #2f5bff; --feat-bw: 0; --feat-bg: transparent; --feat-radius: 0; --chip-bg: transparent;
  --h1-size: clamp(2.8rem, 8vw, 5rem); --h1-weight: 400; --cta-bg: #f4f4f4;
}
[data-layout="vidora"][data-theme="dark"] {
  --bg: #0b0b0c; --fg: #f2f2f2; --muted: #9a9a9a; --card: #0b0b0c; --soft: #18181a; --line: #29292c;
  --accent: #6d8bff; --accent-fg: #0b0b0c; --accent-text: #8ea5ff; --act-fg: #8ea5ff; --cta-bg: #151517;
}
[data-layout="vidora"] .mark { display: none; }
[data-layout="vidora"] .brand { font-weight: 400; font-size: 1.75rem; }
[dir="rtl"][data-layout="vidora"] .brand { font-family: var(--font-brand); }
[data-layout="vidora"] .hero-copy h1 .l2 { font-style: italic; color: var(--accent-text); }
[dir="rtl"][data-layout="vidora"] .hero-copy h1 { font-weight: 700; }
[dir="rtl"][data-layout="vidora"] .hero-copy h1 .l2 { font-style: normal; }
[data-layout="vidora"] .grab { border-bottom: 2px solid var(--fg); gap: 14px; }
[data-layout="vidora"] .grab input { font-size: 1.15rem; padding: 0; }
[data-layout="vidora"] .grab .paste { border: 0; }
[data-layout="vidora"] .chip { padding: 0; gap: 7px; font-weight: 500; color: var(--muted); margin-inline-end: 12px; }
[data-layout="vidora"] .chip .pdot { width: 18px; height: 18px; border-radius: 50%; }
[data-layout="vidora"] .res { border-top: 1px solid var(--line); --res-cols: 300px minmax(0, 1fr); gap: 28px; }
[data-layout="vidora"] .res-title { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; -webkit-line-clamp: 3; }
[dir="rtl"][data-layout="vidora"] .res-title { font-family: var(--font-display-ar); font-weight: 700; font-size: 1.4rem; line-height: 1.5; }
[data-layout="vidora"] .opt { border-top: 1px solid var(--line); padding-inline: 0; }
[data-layout="vidora"] .opt .act { padding: 0; }
[data-layout="vidora"] .opt .hd { background: transparent; color: var(--muted); border: 1px solid var(--line); }
[data-layout="vidora"] .feat { border-top: 2px solid var(--fg); padding-inline: 0; }
[data-layout="vidora"] .steps li { border-top: 2px solid var(--fg); border-radius: 0; background: none; padding-inline: 0; }
[data-layout="vidora"] .steps .n { background: none; color: var(--accent-text); font-family: var(--font-display); font-size: 1.6rem; width: auto; }
[data-layout="vidora"] .pf-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
[data-layout="vidora"] .faq-list details { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
@media (min-width: 900px) {
  [data-layout="vidora"] .stage { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 48px; }
  [data-layout="vidora"] .hero-copy { display: contents; }
  [data-layout="vidora"] .hero-copy h1 { grid-column: 1; grid-row: 1; }
  [data-layout="vidora"] .hero-copy .sub { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 8px; }
  [data-layout="vidora"] .stage > .grab, [data-layout="vidora"] .stage > .chips, [data-layout="vidora"] .stage > .agree, [data-layout="vidora"] .stage > .result { grid-column: 1 / -1; }
}
@media (max-width: 640px) { [data-layout="vidora"] .res { --res-cols: 1fr; } [data-layout="vidora"] .grab .go { flex-basis: 100%; } }

/* Persian and Urdu: one face that draws their letters correctly, in every design. */
html[lang="fa"], html[lang="ur"] { --font-body-ar: "Vazirmatn", system-ui, sans-serif !important; --font-display-ar: "Vazirmatn", system-ui, sans-serif !important; }
html[lang="fa"] .hero-copy h1, html[lang="ur"] .hero-copy h1 { font-weight: 800; }
@media (max-width: 640px) { [data-layout="vidora"] .chip { margin-inline-end: 0; padding: 4px 0; } [data-layout="vidora"] .chip .pdot { width: 18px; height: 18px; } }