/* reviewxm.ai — site.css
   Source: concept/mockup-c.html (owner-approved look). Mock-only parts removed
   (yellow note bar, placeholder tags and cards). Physical left/right turned into
   logical properties so ar (RTL) mirrors correctly. Widths use 100% (never the
   viewport-width unit, which includes the scrollbar). */

@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope-wght.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

/* Design tokens */
:root{
  --red:#C41E1E; --red-h:#9B1515; --red-l:#FEF2F2; --red-xl:#FFF7F7;
  --dark:#0F1623; --gray:#374151; --gray-m:#6B7280; --gray-l:#9CA3AF;
  --gray-xl:#D1D5DB; --border:#E5E7EB; --bg:#F8F9FB; --white:#FFFFFF;
  --blue:#00AEEF; --star:#C41E1E;
  --sh-sm:0 1px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:0 4px 20px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  --sh-lg:0 24px 64px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.06);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{width:100%;overflow-x:hidden;background:var(--white);scroll-padding-top:84px}
body{background:var(--white);color:var(--dark);font-family:var(--font);font-size:16px;line-height:1.7;width:100%;overflow-x:hidden}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;background:var(--dark);color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:700}
.skip:focus{top:8px}

/* PREVIEW bar (only with --allow-placeholders) */
.preview-bar{background:#FFFBEB;border-bottom:1px solid #FDE68A;color:#92400E;font-size:.72rem;font-weight:700;text-align:center;padding:.35rem 6vw}
mark.ph{background:#FEF3C7;color:#92400E;border-radius:4px;padding:0 .25rem;font-weight:700}

/* NAV */
nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);width:100%}
.nav-in{display:flex;align-items:center;height:72px;gap:1.5rem;padding:0 6vw}
.logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.logo img{height:30px;width:auto}
.nav-links{display:flex;list-style:none;gap:.1rem;flex:1;justify-content:center}
.nav-links a{font-size:.84rem;font-weight:500;color:var(--gray-m);padding:.44rem .9rem;border-radius:7px;display:block}
.nav-links a.on{color:var(--red);background:var(--red-xl)}
.nav-r{display:flex;gap:.6rem;align-items:center}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:9px;background:none;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.nav-toggle span{display:block;height:2px;background:var(--dark);border-radius:2px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:9px;padding:.54rem 1.3rem;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap;border:none;line-height:1.3}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(196,30,30,.22)}
.btn-red:hover{background:var(--red-h)}
.btn-red[disabled]{opacity:.65;cursor:wait}
.btn-outline{background:transparent;color:var(--dark);border:1.5px solid var(--border)}
.btn-lg{padding:.82rem 2rem;font-size:.95rem;border-radius:12px}
.btn-white{background:#fff;color:var(--dark);box-shadow:var(--sh)}

/* SECTION SHARED */
.wrap{width:100%;padding:5.5rem 6vw}
.sec-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:.75rem}
.sec-tag::before{content:'';width:16px;height:2px;background:var(--red);border-radius:1px}
.sec-h{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;color:var(--dark);line-height:1.25;margin-bottom:.6rem}
.sec-sub{font-size:.9rem;color:var(--gray-m);line-height:1.85;max-width:620px}

/* HERO: text left / form right */
#hero{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"form copy" "form trust";grid-template-rows:auto 1fr;column-gap:4rem;row-gap:0;align-items:start;padding:4.5rem 6vw 5rem;background:linear-gradient(180deg,var(--white) 0%,var(--bg) 100%);position:relative}
#hero::before{content:'';position:absolute;inset-inline-start:0;top:22%;height:56%;width:3px;background:linear-gradient(180deg,transparent,var(--red) 30%,var(--red) 70%,transparent)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;color:var(--red);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.3rem;text-shadow:0 0 6px rgba(196,30,30,.35),0 0 14px rgba(196,30,30,.2);animation:eyebrowGlow 3.2s ease-in-out infinite}
@keyframes eyebrowGlow{0%,100%{opacity:.8;text-shadow:0 0 4px rgba(196,30,30,.25),0 0 10px rgba(196,30,30,.12)}50%{opacity:1;text-shadow:0 0 8px rgba(255,59,59,.65),0 0 20px rgba(196,30,30,.45),0 0 34px rgba(196,30,30,.25)}}
@media (prefers-reduced-motion:reduce){.eyebrow{animation:none}}
.h1{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin-bottom:1.1rem}
.h1 span{color:var(--red)}
.h-sub{font-size:.98rem;color:var(--gray-m);line-height:1.85;max-width:470px;margin-bottom:1.8rem}
.hero-copy{grid-area:copy;padding-top:0}.hero-trust{grid-area:trust;align-self:start;padding-top:.4rem}#hero .form-card{grid-area:form;align-self:stretch}
.pledge{list-style:none;display:grid;gap:.7rem;margin-bottom:1.8rem}
.pledge li{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--gray);line-height:1.55}
.pledge strong{color:var(--dark)}
.ic{width:32px;height:32px;border-radius:9px;background:var(--red-l);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ic svg{width:17px;height:17px}
.xm-chip{display:inline-flex;align-items:center;gap:.9rem;background:var(--dark);border-radius:14px;padding:.8rem 1.2rem;color:rgba(255,255,255,.75);font-size:.74rem;line-height:1.4}
.xm-chip-logo{height:22px;width:auto;flex-shrink:0}
.xm-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--dark);border-radius:8px;padding:.32rem .55rem;flex-shrink:0}
.xm-badge img{height:15px;width:auto;display:block}

/* FORM CARD */
.form-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:2rem 2rem 1.1rem;box-shadow:var(--sh-lg);position:relative;display:flex;flex-direction:column}
.form-card::before{content:'';position:absolute;inset-inline:2rem;top:0;height:3px;background:var(--red);border-radius:0 0 3px 3px}
.fc-h{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:800;margin-bottom:1.1rem;line-height:1.3}
.lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:.4rem}
.lbl small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--gray-l)}
.field{margin-bottom:1rem;border:0;min-width:0}
.field legend{padding:0}
.stars-in{display:flex;gap:.35rem;align-items:center}
.stars-in input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.stars-in label{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--gray-xl);background:var(--white);cursor:pointer;line-height:1;user-select:none}
.stars-in label.on{background:var(--red);border-color:var(--red);color:#fff}
.stars-in input:focus-visible+label{outline:2px solid var(--red);outline-offset:2px}
.stars-in em{font-style:normal;font-size:.78rem;color:var(--gray-m);margin-inline-start:.5rem}
.inp{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:.7rem .85rem;font-size:.88rem;color:var(--dark);background:var(--white)}
.inp::placeholder{color:var(--gray-l)}
.inp[aria-invalid=true]{border-color:var(--red)}
textarea.inp{min-height:94px;resize:vertical;line-height:1.6;flex:1}
.f-body{display:flex;flex-direction:column;flex:1}
.f-body textarea.inp{flex:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.row2>div{min-width:0}
.sel{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gray-m) 50%),linear-gradient(135deg,var(--gray-m) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:2rem;color:var(--gray)}
[dir=rtl] .sel{background-position:13px 50%,18px 50%}
.chk{display:flex;gap:.6rem;align-items:flex-start;font-size:.76rem;color:var(--gray-m);line-height:1.5;margin-bottom:.55rem}
.chk input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--gray-xl);border-radius:4px;flex-shrink:0;margin-top:.1rem;background:var(--white);cursor:pointer;display:grid;place-content:center}
.chk input:checked{background:var(--red);border-color:var(--red)}
.chk input:checked::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.chk input[aria-invalid=true]{border-color:var(--red)}
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;flex-wrap:wrap}
.chk-c{margin:0;flex:1;min-width:0;font-size:.7rem;line-height:1.45}
.chk-c a{white-space:nowrap;color:var(--red);font-weight:700}
.req{color:var(--red)}
.hp{position:absolute!important;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.f-err{display:block;font-size:.74rem;font-weight:700;color:var(--red);margin-top:.35rem}
.f-msg{font-size:.8rem;font-weight:700;color:var(--red);margin-top:.8rem}
.f-msg:empty{display:none}
.f-msg.ok{color:var(--dark)}
.ts-slot:empty{display:none}
.ts-slot{margin-top:.8rem}
.f-done{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.8rem;flex:1;padding:1rem 0}
.f-done h3{font-size:1.3rem;font-weight:800}
.f-done p{font-size:.9rem;color:var(--gray-m);line-height:1.75}

/* Topic ratings inside form (from B) */
.tr-add{display:inline-block;font-size:.8rem;font-weight:700;color:var(--red);border:1.5px dashed var(--border);border-radius:10px;padding:.5rem .8rem;background:var(--bg);text-align:start;line-height:1.5}
.tr-add small{font-weight:600;color:var(--gray-m);font-size:.8rem}
.topics-in{border:1.5px dashed var(--border);border-radius:12px;padding:.8rem .9rem;background:var(--bg);margin-top:.6rem}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.tr{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:.45rem .65rem;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.tr legend{font-size:.72rem;font-weight:700;color:var(--gray);line-height:1.3;padding:0;float:left;width:100%}
.ts{display:flex;gap:.15rem;clear:both}
.ts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ts label{font-style:normal;font-size:1.15rem;line-height:1;color:var(--gray-xl);cursor:pointer;padding:.1rem}
.ts label.on{color:var(--red)}
.ts input:focus-visible+label{outline:2px solid var(--red);outline-offset:1px;border-radius:3px}
.tr-note{font-size:.68rem;color:var(--gray-l);margin-top:.5rem;line-height:1.5}

/* SUMMARY */
#summary{background:var(--white);padding-top:4.5rem;padding-bottom:4.5rem}
.sum-grid{display:grid;grid-template-columns:.9fr 1.1fr 1.4fr;gap:1.4rem;margin-top:2rem}
.card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:1.6rem;box-shadow:var(--sh-sm)}
.big-score{font-size:3.6rem;font-weight:900;line-height:1;color:var(--dark);letter-spacing:-.03em}
.stars{color:var(--star);letter-spacing:.12em;font-size:1rem}
.stars .off{color:var(--gray-xl)}
.muted{font-size:.76rem;color:var(--gray-l)}
.sum-lbl{font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.sum-count{margin-top:.4rem}
.sum-note{margin-top:.8rem;font-size:.72rem;color:var(--gray-m)}
.dist{display:grid;gap:.5rem;align-content:center}
.dist>div{display:grid;grid-template-columns:44px 1fr 34px;gap:.6rem;align-items:center;font-size:.76rem;color:var(--gray-m);font-weight:600}
.bar{height:8px;border-radius:99px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gray-xl)}
.dist.live .bar i{background:var(--red)}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.topic{border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;display:flex;gap:.7rem;align-items:center;min-width:0}
.topic b{display:block;font-size:.8rem;color:var(--dark)}
.topic span{font-size:.72rem;color:var(--gray-l)}
.topic .val{margin-inline-start:auto;font-size:1.1rem;font-weight:900;color:var(--gray-l)}
.topic .val.live{color:var(--dark)}

/* HUB */
#hub{background:var(--bg)}
.hub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.hub{display:grid;grid-template-columns:270px 1fr;gap:1.8rem;margin-top:2rem;align-items:start}
.filters{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:1.4rem}
.f-h{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);margin:1.1rem 0 .55rem}
.f-h:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-size:.74rem;font-weight:700;color:var(--gray);border:1.5px solid var(--border);border-radius:99px;padding:.28rem .7rem;background:var(--white);line-height:1.5}
.chip[aria-pressed=true],.chip.on{background:var(--red-l);border-color:rgba(196,30,30,.35);color:var(--red)}
.list{display:grid;gap:1rem;min-width:0}
.fbar{display:none;gap:.6rem;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.fbar::-webkit-scrollbar{display:none}
.fbar .btn,.fbar .chip{flex-shrink:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--gray-m)}
.toolbar strong{color:var(--dark)}
.rv{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.4rem 1.5rem;position:relative;min-width:0}
.rv:target{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.rv-top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.av{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gray-m);font-size:.85rem;flex-shrink:0}
.rv-name{font-size:.86rem;font-weight:700}
.rv-meta{font-size:.72rem;color:var(--gray-l)}
.rv-lang{margin-inline-start:auto;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-m);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.12rem .45rem}
.rv p{font-size:.86rem;color:var(--gray-m);line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}
.rv-topics{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;font-size:.72rem;font-weight:600}
.rv-foot{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;font-size:.72rem;color:var(--gray-l);font-weight:600}
.rv-report{margin-inline-start:auto;color:var(--gray-l);font-size:.72rem;font-weight:600;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0}
.pill{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.1rem .5rem;color:var(--gray)}
.pill b{color:var(--red);font-weight:700}
.more{text-align:center;margin-top:.5rem}
.rv-empty{text-align:center;padding:2.4rem 1.5rem}
.rv-empty h3{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.rv-empty p{font-size:.86rem;color:var(--gray-m);margin-bottom:1.1rem}

/* HOW REVIEWS WORK (from B) */
#how{background:var(--dark);color:rgba(255,255,255,.7)}
#how .sec-h{color:#fff}
#how .sec-sub{color:rgba(255,255,255,.6)}
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem;list-style:none}
.step{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.6rem;background:rgba(255,255,255,.03)}
.step-n{width:34px;height:34px;border-radius:9px;background:var(--red);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.step h3{color:#fff;font-size:1rem;font-weight:800;margin-bottom:.35rem}
.step p{font-size:.84rem;line-height:1.75}
.promise{margin-top:1.4rem;border-radius:14px;background:rgba(196,30,30,.16);border:1px solid rgba(196,30,30,.4);padding:1rem 1.3rem;font-size:.86rem;color:#fff}

/* FAQ */
#faq{background:var(--bg)}
.faq-head{text-align:center;max-width:640px;margin:0 auto 2.4rem}
.faq-head .sec-tag{justify-content:center}
.faq-list{max-width:780px;margin:0 auto}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:14px;margin-bottom:.75rem;overflow:hidden}
.faq-q{padding:1.05rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.92rem;font-weight:700;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red-l);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800}
.faq-ic::before{content:'+'}
.faq-item[open] .faq-ic::before{content:'\00d7'}
.faq-a{padding:0 1.4rem 1.15rem;font-size:.86rem;color:var(--gray-m);line-height:1.85}
.faq-a a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* CONTENT PAGES (About · legal · confirm · 404) */
.page{max-width:820px;margin:0 auto;padding:3.5rem 6vw 4.5rem}
.crumbs{font-size:.74rem;color:var(--gray-l);margin-bottom:1.4rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:'/';margin-inline-end:.4rem;color:var(--gray-xl)}
.crumbs a{color:var(--gray-m);font-weight:600}
.prose h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin-bottom:1.1rem}
.prose h2{font-size:1.25rem;font-weight:800;margin:2.2rem 0 .7rem;line-height:1.35}
.prose h3{font-size:1.02rem;font-weight:800;margin:1.6rem 0 .5rem}
.prose p,.prose li{font-size:.93rem;color:var(--gray);line-height:1.85}
.prose p{margin-bottom:.85rem}
.prose ul,.prose ol{padding-inline-start:1.3rem;margin-bottom:1rem;display:grid;gap:.35rem}
.prose a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--dark)}
.prose .lead{font-size:1rem;background:var(--bg);border:1px solid var(--border);border-inline-start:3px solid var(--red);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.4rem;color:var(--dark)}
.prose .updated{font-size:.78rem;color:var(--gray-l)}
.prose .crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.prose .crumbs li{font-size:.74rem;color:var(--gray-l);line-height:1.5}
.prose .crumbs a{color:var(--gray-m);font-weight:600;text-decoration:none}
.tbl{width:100%;overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--border);border-radius:12px}
.tbl table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:520px}
.tbl th,.tbl td{text-align:start;padding:.65rem .85rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--gray);line-height:1.6}
.tbl th{background:var(--bg);font-weight:800;color:var(--dark);font-size:.78rem}
.tbl tr:last-child td{border-bottom:0}
.notice{max-width:620px;margin:0 auto;text-align:center;padding:5rem 6vw}
.notice .ic{width:56px;height:56px;border-radius:16px;margin:0 auto 1.2rem}
.notice .ic svg{width:28px;height:28px}
.notice h1{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:900;line-height:1.15;margin-bottom:.8rem}
.notice p{font-size:.95rem;color:var(--gray-m);line-height:1.8;margin-bottom:1.6rem}
.notice .acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* REPORT dialog */
dialog.rep{border:1px solid var(--border);border-radius:18px;padding:1.6rem;max-width:min(460px,calc(100% - 32px));width:100%;margin:auto;box-shadow:var(--sh-lg);color:var(--dark)}
dialog.rep::backdrop{background:rgba(15,22,35,.55)}
dialog.rep h2{font-size:1.1rem;font-weight:800;margin-bottom:.4rem}
dialog.rep .sub{font-size:.8rem;color:var(--gray-m);margin-bottom:1rem}
dialog.rep .acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}

/* FOOTER */
footer{background:var(--dark);padding:4rem 6vw 2rem;color:rgba(255,255,255,.4)}
.foot-top{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:4rem;padding-bottom:2.4rem;margin-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.07)}
.foot-logo{display:flex;align-items:center;gap:.55rem;margin-bottom:.75rem}
.foot-desc{font-size:.8rem;line-height:1.9;max-width:320px}
.foot-col-h{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:1rem}
.foot-col ul{list-style:none;display:grid;gap:.5rem}
.foot-col a{font-size:.8rem;color:rgba(255,255,255,.4)}
.foot-col a:hover{color:rgba(255,255,255,.75)}
.foot-legal{font-size:.7rem;line-height:1.85;color:rgba(255,255,255,.32);margin-bottom:1.4rem}
.foot-legal p{margin-bottom:.7rem}
.foot-legal strong{color:rgba(255,255,255,.55)}
.foot-legal a{color:rgba(255,255,255,.6);text-decoration:underline}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.74rem}
.foot-lang{display:flex;flex-wrap:wrap;gap:.2rem .7rem;list-style:none}
.foot-lang a{color:rgba(255,255,255,.45)}
.foot-lang a[aria-current]{color:#fff;font-weight:700}

/* Logo sizes (option 1 "Voice") */
.logo img.rxm-logo{height:40px;width:auto}
.foot-logo img.rxm-logo-f{height:40px;width:auto}

/* RESPONSIVE */
@media (max-width:1100px){
  .sum-grid{grid-template-columns:1fr 1fr}
  .sum-grid .card:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .nav-links,.nav-r .btn-outline{display:none}
  .nav-toggle{display:flex}
  .nav-in{padding:0 16px;gap:.8rem;height:64px}
  .nav-r{margin-inline-start:auto}
  nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:64px;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 16px 1rem;box-shadow:var(--sh)}
  nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
  #hero{grid-template-columns:1fr;grid-template-areas:"copy" "form" "trust";grid-template-rows:auto;row-gap:1.8rem;padding:2.4rem 16px 3rem}
  .hero-copy,.hero-trust{padding-top:0}
  .h-sub{margin-bottom:0}
  #hero::before{display:none}
  .wrap{padding:3.5rem 16px}
  .page{padding:2.4rem 16px 3.5rem}
  .notice{padding:3.5rem 16px}
  .hub{grid-template-columns:1fr;margin-top:1.4rem}
  .filters{display:none}
  .hub.f-open .filters{display:block}
  .fbar{display:flex}
  .steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-top>div:first-child{grid-column:1/-1}
  footer{padding:3rem 16px 2rem}
  .preview-bar{padding-left:16px;padding-right:16px}
}
@media (max-width:560px){
  .sum-grid{grid-template-columns:1fr}
  .topics{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .tr-grid{grid-template-columns:1fr}
  .form-card{padding:1.5rem 1.15rem 1.3rem}
  .form-card::before{inset-inline:1.15rem}
  .stars-in label{width:36px;height:36px;font-size:1.15rem}
  .stars-in em{display:none}
  .fc-foot .btn{width:100%}
  .h1{font-size:2.05rem}
  .nav-r .btn-red{padding:.5rem .8rem;font-size:.78rem}
  .logo img.rxm-logo{height:32px}
  .rv{padding:1.2rem 1.1rem}
}

/* Review card = backend render.mjs markup (language tag inside .rv-meta · edit note under the text) */
.rv-meta .rv-lang{margin-inline-start:0;padding:.02rem .4rem;font-size:.58rem;vertical-align:1px}
.rv p.rv-edit{font-size:.72rem;color:var(--gray-l);margin-top:.45rem;white-space:normal}

/* Legal tables stack on phones so no column hides behind a sideways scroll (QA r3 render check) */
@media (max-width:560px){
  .tbl{border:0;overflow:visible}
  .tbl table{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody{display:grid;gap:.6rem}
  .tbl tr{display:block;border:1px solid var(--border);border-radius:12px;background:var(--white)}
  .tbl td{display:block;border:0;padding:.45rem .85rem}
  .tbl td+td{border-top:1px dashed var(--border)}
  .tbl td[data-label]::before{content:attr(data-label);display:block;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-l);margin-bottom:.1rem}
}

/* Language menu in the nav (CXM-20261108-08) — small outline button next to "Read reviews" */
.lang-sw{position:relative}
.lang-btn{list-style:none;padding:.54rem .8rem;gap:.3rem;user-select:none}
.lang-btn::-webkit-details-marker{display:none}
.lang-btn .chev{display:inline-block;width:6px;height:6px;margin-inline-start:.15rem;border-right:1.5px solid var(--gray-m);border-bottom:1.5px solid var(--gray-m);transform:translateY(-2px) rotate(45deg)}
.lang-sw[open] .chev{transform:translateY(1px) rotate(225deg);border-color:var(--red)}
@media (max-width:900px){.nav-r .lang-sw .lang-btn{display:inline-flex}}
.lang-sw[open] .lang-btn{border-color:var(--red);color:var(--red)}
.lang-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;min-width:200px;max-height:70vh;overflow:auto;list-style:none;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh);padding:.35rem}
.lang-list a,.nav-lang a{display:flex;gap:.6rem;align-items:center;font-size:.84rem;color:var(--gray);padding:.45rem .7rem;border-radius:8px}
.lang-list a b,.nav-lang a b{font-size:.68rem;font-weight:800;color:var(--gray-l);min-width:1.6rem}
.lang-list a[aria-current],.nav-lang a[aria-current]{background:var(--red-xl);color:var(--red);font-weight:700}
.lang-list a[aria-current] b,.nav-lang a[aria-current] b{color:var(--red)}
.nav-lang{display:none}
@media (max-width:560px){
  .nav-r .lang-sw{display:none}
  nav.top.open .nav-lang{display:block;border-top:1px solid var(--border);margin-top:.4rem;padding-top:.6rem}
  .nav-lang-h{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-l);padding:0 .9rem .3rem}
  .nav-lang ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
  nav.top.open .nav-links .nav-lang a{padding:.5rem .9rem;font-size:.88rem}
}

/* Multi-language render check (plan step 11 · 8 Nov 2026).
   Manrope has Latin/Cyrillic/Vietnamese only, so other scripts fall back per glyph.
   Each script gets a named system-font stack (no web-font download: Privacy notice
   promises no third-party font calls). Rules are scoped with :lang() so EN is untouched. */
html:lang(th){--font:'Manrope','Leelawadee UI','Noto Sans Thai','Sukhumvit Set','Thonburi',Tahoma,sans-serif}
html:lang(hi){--font:'Manrope','Nirmala UI','Noto Sans Devanagari','Kohinoor Devanagari','Devanagari Sangam MN',Mangal,sans-serif}
html:lang(ar){--font:'Manrope','Segoe UI','Noto Sans Arabic','Geeza Pro','Arabic UI Text',Tahoma,sans-serif}
html:lang(zh){--font:'Manrope','PingFang SC','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','Hiragino Sans GB',sans-serif}
html:lang(ko){--font:'Manrope','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
/* Thai / Devanagari / Arabic carry marks above and below the line: the 1.08 Latin
   headline leading makes them touch, and letter-spacing pulls clusters apart. */
:lang(th) .h1,:lang(hi) .h1{line-height:1.3;letter-spacing:0}
:lang(ar) .h1{line-height:1.35;letter-spacing:0}
/* Tracking splits Thai/Devanagari clusters and breaks Arabic joining: no letter-spacing at all
   (covers every uppercase label class: eyebrow, sec-tag, lbl, card labels, footer heads, table labels) */
html:is(:lang(th),:lang(hi),:lang(ar)) body *,
html:is(:lang(th),:lang(hi),:lang(ar)) body *::before{letter-spacing:0!important}
/* Korean: break between words, not inside them */
:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
/* ar: the review box is dir=auto so typed English stays LTR, but while it is empty the
   Arabic placeholder must read right-to-left (full stop at the left end). */
[dir=rtl] textarea.inp[dir=auto]:placeholder-shown{direction:rtl}
/* Long placeholders (vi, ru email) end with an ellipsis instead of a hard cut */
.inp{text-overflow:ellipsis}
/* Country + email side by side: when one label wraps to 2 lines (ru), keep both
   inputs on the same line. Subgrid rows = label / input / error. */
@media (min-width:561px){
  @supports (grid-template-rows:subgrid){
    .row2{grid-template-rows:auto auto auto;row-gap:0}
    .row2>div{display:grid;grid-row:span 3;grid-template-rows:subgrid}
    .row2>div>.lbl{align-self:end}
  }
}
/* Desktop hero: the form card should end level with the left column. Languages with a
   short left column (th hi zh vi) left the card taller; a smaller textarea floor lets the
   card shrink to the column. The textarea still grows (flex:1) when the column is taller.
   EN is excluded so the owner-approved EN layout stays pixel-identical at every width. */
@media (min-width:901px){
  html:not(:lang(en)) #hero .f-body textarea.inp{min-height:64px}
}

/* Top nav in other languages: labels never break inside a word, and the menu folds into
   the menu button below the width each language needs (measured with nowrap, plan step 11).
   EN keeps its own 900px fold. Same rules as the 900px block, nav part only. */
html:not(:lang(en)) .nav-links a{white-space:nowrap}
@media (min-width:901px) and (max-width:1419px){
  html:lang(es) .nav-links,html:lang(es) .nav-r .btn-outline{display:none}
  html:lang(es) .nav-toggle{display:flex}
  html:lang(es) .nav-r{margin-inline-start:auto}
  html:lang(es) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(es) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(es) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}
@media (min-width:901px) and (max-width:1339px){
  html:lang(pt) .nav-links,html:lang(pt) .nav-r .btn-outline{display:none}
  html:lang(pt) .nav-toggle{display:flex}
  html:lang(pt) .nav-r{margin-inline-start:auto}
  html:lang(pt) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(pt) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(pt) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}
@media (min-width:901px) and (max-width:1259px){
  html:lang(ru) .nav-links,html:lang(ru) .nav-r .btn-outline{display:none}
  html:lang(ru) .nav-toggle{display:flex}
  html:lang(ru) .nav-r{margin-inline-start:auto}
  html:lang(ru) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(ru) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(ru) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}
@media (min-width:901px) and (max-width:1109px){
  html:lang(ar) .nav-links,html:lang(ar) .nav-r .btn-outline,html:lang(fr) .nav-links,html:lang(fr) .nav-r .btn-outline,html:lang(vi) .nav-links,html:lang(vi) .nav-r .btn-outline,html:lang(hi) .nav-links,html:lang(hi) .nav-r .btn-outline,html:lang(id) .nav-links,html:lang(id) .nav-r .btn-outline{display:none}
  html:lang(ar) .nav-toggle,html:lang(fr) .nav-toggle,html:lang(vi) .nav-toggle,html:lang(hi) .nav-toggle,html:lang(id) .nav-toggle{display:flex}
  html:lang(ar) .nav-r,html:lang(fr) .nav-r,html:lang(vi) .nav-r,html:lang(hi) .nav-r,html:lang(id) .nav-r{margin-inline-start:auto}
  html:lang(ar) .nav-r .lang-sw .lang-btn,html:lang(fr) .nav-r .lang-sw .lang-btn,html:lang(vi) .nav-r .lang-sw .lang-btn,html:lang(hi) .nav-r .lang-sw .lang-btn,html:lang(id) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(ar) nav.top.open .nav-links,html:lang(fr) nav.top.open .nav-links,html:lang(vi) nav.top.open .nav-links,html:lang(hi) nav.top.open .nav-links,html:lang(id) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(ar) nav.top.open .nav-links a,html:lang(fr) nav.top.open .nav-links a,html:lang(vi) nav.top.open .nav-links a,html:lang(hi) nav.top.open .nav-links a,html:lang(id) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}
@media (min-width:901px) and (max-width:1009px){
  html:lang(th) .nav-links,html:lang(th) .nav-r .btn-outline,html:lang(ko) .nav-links,html:lang(ko) .nav-r .btn-outline{display:none}
  html:lang(th) .nav-toggle,html:lang(ko) .nav-toggle{display:flex}
  html:lang(th) .nav-r,html:lang(ko) .nav-r{margin-inline-start:auto}
  html:lang(th) .nav-r .lang-sw .lang-btn,html:lang(ko) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(th) nav.top.open .nav-links,html:lang(ko) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(th) nav.top.open .nav-links a,html:lang(ko) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}
@media (min-width:901px) and (max-width:959px){
  html:lang(zh) .nav-links,html:lang(zh) .nav-r .btn-outline{display:none}
  html:lang(zh) .nav-toggle{display:flex}
  html:lang(zh) .nav-r{margin-inline-start:auto}
  html:lang(zh) .nav-r .lang-sw .lang-btn{display:inline-flex}
  html:lang(zh) nav.top.open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 6vw 1rem;box-shadow:var(--sh)}
  html:lang(zh) nav.top.open .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}

/* ---------- Motion ("quiet luxury" · owner-approved 15 Nov 2026) ----------
   Only transform/opacity, every piece <= .6s. Everything lives inside
   prefers-reduced-motion:no-preference -> reduce = no motion at all.
   Scroll reveals hide content only when site.js adds .rv-anim (no JS = all visible).
   Load animations (hero, sub pages) are CSS-only and end fully visible. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
[dir=rtl] .bar i{transform-origin:right center}
.bar i{transform-origin:left center}
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes rxmRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  @keyframes rxmRiseSoft{from{opacity:.35;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
  @keyframes rxmRiseT{from{transform:translate3d(0,10px,0)}to{transform:none}}
  @keyframes rxmFade{from{opacity:0}to{opacity:1}}
  @keyframes rxmLine{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}
  @keyframes rxmPop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
  @keyframes rxmDlg{from{opacity:0;transform:translate3d(0,10px,0) scale(.98)}to{opacity:1;transform:none}}

  /* hero: staggered on load (H1 starts visible + delay 0 to protect LCP) */
  #hero .h1{animation:rxmRiseSoft .6s var(--ease) both}
  #hero .eyebrow{animation:rxmRiseT .6s var(--ease) both,eyebrowGlow 3.2s ease-in-out infinite}
  #hero .form-card{animation:rxmRise .6s var(--ease) .1s both}
  #hero .h-sub{animation:rxmRise .6s var(--ease) .2s both}
  #hero .pledge li{animation:rxmRise .55s var(--ease) .3s both}
  #hero .pledge li:nth-child(2){animation-delay:.4s}
  #hero .pledge li:nth-child(3){animation-delay:.5s}
  #hero .xm-chip{animation:rxmRise .55s var(--ease) .6s both}
  #hero::before{transform-origin:center;animation:rxmLine .6s var(--ease) .1s both}

  /* sub pages (about / policy / privacy / terms / confirm / 404) */
  main>.page,main>.notice{animation:rxmRise .5s var(--ease) both}

  /* scroll reveal (classes added by site.js) */
  .rv-anim{opacity:0;transform:translate3d(0,18px,0)}
  .rv-anim.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--rv-d,0ms),transform .6s var(--ease) var(--rv-d,0ms)}

  /* #summary distribution bars grow when the card is revealed (row by row) */
  .dist.rv-anim .bar i{transform:scaleX(0)}
  .dist.rv-anim.in .bar i{transform:none;transition:transform .6s var(--ease) calc(var(--rv-d,0ms) + .15s + var(--k,0s))}
  .dist>div:nth-child(2){--k:.06s}.dist>div:nth-child(3){--k:.12s}.dist>div:nth-child(4){--k:.18s}.dist>div:nth-child(5){--k:.24s}

  /* small UI motion */
  .topics-in:not([hidden]){animation:rxmFade .3s var(--ease) both}
  .f-done{animation:rxmRise .5s var(--ease) both}
  dialog.rep[open]{animation:rxmDlg .3s var(--ease) both}
  dialog.rep[open]::backdrop{animation:rxmFade .3s var(--ease) both}
  .stars-in label,.ts label{transition:transform .18s var(--ease),background-color .18s,border-color .18s,color .18s}
  [data-stars] input:checked+label{animation:rxmPop .32s var(--ease)}

  /* hover lift: real pointers only */
  @media (hover:hover) and (pointer:fine){
    .btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s}
    .btn:not([disabled]):hover{transform:translate3d(0,-1px,0)}
    .btn-red:not([disabled]):hover{box-shadow:0 8px 20px rgba(196,30,30,.26)}
    .btn-outline:hover{border-color:var(--gray-xl)}
    .rv,.sum-grid>.card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
    .rv:hover,.sum-grid>.card:hover{transform:translate3d(0,-2px,0);box-shadow:var(--sh)}
    .rv:target:hover{box-shadow:0 0 0 3px var(--red-l),var(--sh)}
    .step{transition:transform .25s var(--ease),border-color .25s}
    .step:hover{transform:translate3d(0,-2px,0);border-color:rgba(255,255,255,.22)}
    .stars-in label:hover,.ts label:hover{transform:translate3d(0,-1px,0) scale(1.06)}
  }
}