:root{
  /* Warm sunny theme: cream-dominant surfaces, sunflower-yellow accents, dark warm-brown text */
  --bg:#FFF8E1; --bg-alt:#FFF3D1; --ink:#3B2A14; --muted:#6B5434; --line:#F0DCA0;
  --brand:#FFC83D; --brand-hover:#FFD966; --brand-strong:#E6A800; --brand-ink:#3B2A14;
  --brand-tint:#FFF0C2; --link:#7A4E00; --accent:#FFC83D; --accent-ink:#7A4E00;
  --focus:#3B2A14; --card:#FFFDF6;
  --warn-bg:#FFF0C2; --warn-line:#E6A800; --ok-bg:#FFF6D6; --ok-line:#E6A800;
  --radius:14px; --shadow:0 2px 10px rgba(59,42,20,.08);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"Noto Sans Arabic","Segoe UI","Geeza Pro","Tahoma",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
html[lang="ar"] body{font-family:var(--font-ar);line-height:1.75}
img{max-width:100%}
a{color:var(--link)}
a:hover{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;top:0;inset-inline-start:8px;background:var(--ink);color:#FFF8E1;padding:8px 12px;z-index:100;transform:translateY(-120%)}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px rgba(255,200,61,.55)}
.site-footer :focus-visible,.proto-bar :focus-visible{outline-color:var(--brand)}

.proto-bar{background:var(--ink);color:#FFF1CC;border-bottom:3px solid var(--brand);font-size:.88rem;padding:8px 20px;text-align:center}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,225,.96);backdrop-filter:blur(6px);border-bottom:3px solid var(--brand)}
.header-inner{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;margin-inline-end:auto}
.brand small{font-weight:400;color:var(--muted);font-size:.75rem}
.logo{font-size:1.6rem}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:8px;font-size:.95rem}
.nav a:hover{background:var(--brand-tint);box-shadow:inset 0 -3px 0 var(--brand)}
.nav-toggle{display:none;background:none;color:var(--ink);border:1px solid var(--brand-strong);border-radius:8px;font-size:1.3rem;padding:4px 10px;cursor:pointer}
.lang-toggle{border:2px solid var(--brand-strong);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;cursor:pointer;font-size:.95rem}
.lang-toggle:hover{background:var(--brand);color:var(--brand-ink)}

.hero{background:radial-gradient(circle at 85% 20%,rgba(255,200,61,.35) 0,rgba(255,200,61,0) 45%),linear-gradient(160deg,#FFF3D1 0%,#FFF8E1 70%);padding:56px 0 64px}
.hero-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;color:var(--ink);background:var(--brand);padding:2px 10px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;margin:0 0 8px}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none;font-size:.95rem}
h1{font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.15;margin:0 0 16px}
html[lang="ar"] h1{line-height:1.4}
.lead{font-size:1.12rem;color:#4A3720;max-width:60ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 20px;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 0 var(--brand-strong)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.secondary{background:var(--card);color:var(--ink);border:2px solid var(--brand-strong)}
.btn.secondary:hover{background:var(--brand-tint)}
.btn.link{background:none;color:var(--muted);text-decoration:underline;padding:6px 0;font-weight:400;font-size:.9rem}
.hero-card{background:var(--card);border:2px solid var(--brand);border-radius:20px;box-shadow:var(--shadow);padding:28px;text-align:center}
.hero-emoji{font-size:3rem;margin-bottom:12px}
.hero-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-list li{background:var(--brand-tint);border-radius:10px;padding:10px;font-weight:600}

.section{padding:56px 0}
.section.alt{background:var(--bg-alt)}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 8px}
h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--brand);margin-top:8px}
h3{margin:0 0 6px;font-size:1.1rem}
.caption{color:var(--muted);margin:0 0 24px;max-width:75ch}

.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.steps p{margin:0;color:var(--muted)}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-weight:700;margin-bottom:10px}

.form-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.form{display:grid;gap:14px}
.form label{display:grid;gap:4px;font-weight:600;font-size:.95rem}
.form label.inline,.checks label,.seg label{display:flex;align-items:center;gap:8px;font-weight:400}
input[type=text],input[type=email],input[type=date],select,textarea{font:inherit;font-weight:400;width:100%;padding:10px 12px;border:1px solid #CDB27A;border-radius:10px;background:#FFFFFF;color:var(--ink)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:3px solid var(--brand);outline-offset:0}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--brand-strong);margin:0}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
.checks,.seg{display:flex;flex-wrap:wrap;gap:8px}
.checks label,.seg label{border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);cursor:pointer}
.checks label:has(input:checked),.seg label:has(input:checked){border-color:var(--brand-strong);background:var(--brand);color:var(--brand-ink);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:#A63A12}
.confirm strong+*{display:inline}
input[type=email]{direction:ltr}
html[dir="rtl"] input[type=email]{text-align:right}
.form-error{background:#fdecea;border:1px solid #e8a39a;color:#8a2a1c;padding:10px 12px;border-radius:10px;margin:0}
.tiny{font-size:.82rem;color:var(--muted);margin:0}
.confirm{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.confirm strong{display:block;margin-bottom:4px}
.saved-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.saved-list li{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:.92rem}
.saved-list .empty{border:0;color:var(--muted);padding:0}
.saved-list .meta{color:var(--muted);font-size:.85rem}

.example-banner{background:var(--card);border:2px dashed var(--brand-strong);border-radius:12px;padding:12px 16px;margin:12px 0 20px}
.example-banner strong{color:var(--accent-ink);margin-inline-end:6px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{font:inherit;color:var(--ink);border:1px solid var(--brand-strong);background:var(--card);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600}
.tab:hover{background:var(--brand-tint)}
.tab.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand-strong)}
.count{display:inline-block;min-width:1.6em;padding:0 6px;border-radius:999px;background:rgba(59,42,20,.1);font-size:.8rem}
.tab.active .count{background:rgba(255,255,255,.55)}
.filters,.match-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.match-pick{grid-template-columns:minmax(0,1fr)}
.filters label,.match-pick label{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:grid;gap:6px;align-content:start}
.pcard h3{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.pcard .meta{color:var(--muted);font-size:.9rem;margin:0}
.pcard p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.78rem;padding:3px 10px;border-radius:999px;background:var(--brand-tint);color:#6B4A00;font-weight:600}
.chip.ex{background:#FFE7B8;color:#8A3B0A}
.chip.same{background:var(--brand);color:var(--brand-ink)}
.chip.near{background:#FFE58A;color:var(--ink)}
.chip.far{background:#F3EBDA;color:#5A4A33}
.empty-state{color:var(--muted);background:var(--card);border-radius:12px;padding:16px;border:1px solid var(--line)}

.warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:12px 16px;margin:12px 0 22px}
.rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:28px}
.rule{background:var(--card);border-inline-start:4px solid var(--brand) !important;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.rule p{margin:0 0 8px}
.rule .src{font-size:.85rem;color:var(--muted);margin:0}
.tag.uncertain{background:var(--warn-bg);border-inline-start:4px solid var(--warn-line);padding:6px 10px;border-radius:6px;font-size:.88rem}
.tag.uncertain::before{content:"⚠ "}
.ticks{padding:0;list-style:none;display:grid;gap:8px}
.ticks li{padding-inline-start:28px;position:relative}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:4px;color:var(--accent-ink);font-weight:700}

.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.res{display:grid;gap:4px;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}
.res:hover{transform:translateY(-2px);border-color:var(--brand-strong);box-shadow:0 4px 14px rgba(230,168,0,.25)}
.res p{margin:0;font-size:.93rem}
.res .pets{color:var(--accent-ink);font-weight:700;font-size:.85rem}
.res .url{color:var(--link);font-size:.85rem;margin-top:6px;direction:ltr;unicode-bidi:embed}
.res .url::after{content:" ↗"}

.site-footer{background:#2E2110;color:#FFF1CC;border-top:4px solid var(--brand);padding:32px 0;font-size:.93rem}
.site-footer .tiny{color:#E8D6A8}
.site-footer a{color:var(--brand)}

@media (max-width:900px){
  .hero-inner,.form-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--bg);flex-direction:column;padding:8px 20px 16px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .header-inner{position:relative}
}
@media (max-width:600px){
  .steps,.filters,.two{grid-template-columns:1fr}
  .section{padding:40px 0}
  .hero{padding:36px 0 44px}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.res{transition:none}}