/* ReviewSaid landing — shared by index.html (ko) and en.html (en). No build step: edit directly. */
:root{
--ground:#FBFBF9; --surface:#FFFFFF; --surface-2:#F4F4F1;
--ink:#1A1917; --ink-2:#4F4D47; --ink-3:#86837B;
--line:#E7E5E0; --line-2:#D4D1CA;
--rec:#15734A; --rec-bg:#E9F3ED; --rec-line:#BFE0CD;
--reg:#AC3A30; --reg-bg:#FAEAE8; --reg-line:#F0CBC6;
--mix:#9A6512; --mix-bg:#FAF0DC;
--accent:#15734A;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#111312; --surface:#191B1A; --surface-2:#212423;
--ink:#ECEDEA; --ink-2:#A3A5A0; --ink-3:#7B7D78;
--line:#2A2D2B; --line-2:#3A3E3B;
--rec:#58BE8B; --rec-bg:#16291F; --rec-line:#255039;
--reg:#E5897F; --reg-bg:#2D1917; --reg-line:#4E2924;
--mix:#D7A455; --mix-bg:#2B2114;
--accent:#58BE8B;
}
}
:root[data-theme="dark"]{
--ground:#111312; --surface:#191B1A; --surface-2:#212423;
--ink:#ECEDEA; --ink-2:#A3A5A0; --ink-3:#7B7D78;
--line:#2A2D2B; --line-2:#3A3E3B;
--rec:#58BE8B; --rec-bg:#16291F; --rec-line:#255039;
--reg:#E5897F; --reg-bg:#2D1917; --reg-line:#4E2924;
--mix:#D7A455; --mix-bg:#2B2114;
--accent:#58BE8B;
}
*{box-sizing:border-box}
body{
margin:0; background:var(--ground); color:var(--ink);
font-family:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem; margin:0 auto; padding:1.5rem 1.4rem 5rem}
@media(max-width:640px){.wrap{padding:1rem 1.1rem 3.5rem}}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"Gothic A1","Noto Sans KR",sans-serif; margin:0; text-wrap:balance}
/* ---------- top bar ---------- */
.bar{display:flex; align-items:center; gap:1rem; padding:.5rem 0 2.5rem}
.logo{font-family:"Gothic A1",sans-serif; font-weight:900; font-size:1.2rem; letter-spacing:-.02em}
.langs{margin-left:auto; display:flex; gap:.25rem}
.langs a{font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600;
letter-spacing:.06em; padding:.3rem .6rem; border-radius:999px; text-decoration:none;
border:1px solid var(--line); background:var(--surface); color:var(--ink-3)}
.langs a[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}
/* ---------- hero ---------- */
.hero{padding-bottom:2.75rem; border-bottom:1px solid var(--line)}
h1{font-size:clamp(2.1rem,7vw,3.2rem); font-weight:900; line-height:1.18; letter-spacing:-.035em}
h1 .hi{color:var(--rec)}
.sub{margin:1.15rem 0 0; font-size:1.06rem; color:var(--ink-2); max-width:34ch}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem}
.chips span{font-size:.82rem; color:var(--ink-2); background:var(--surface);
border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem}
section{padding:2.75rem 0; border-bottom:1px solid var(--line)}
h2{font-size:1.35rem; font-weight:900; letter-spacing:-.02em}
.lead{margin:.6rem 0 0; color:var(--ink-2); max-width:56ch}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.7rem}
/* ---------- the sample result ---------- */
.demo{margin-top:1.4rem; border:1px solid var(--line); border-radius:12px;
background:var(--surface); overflow:hidden}
.demo .flag{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0;
background:var(--mix-bg); padding:.6rem .9rem; font-size:.78rem; color:var(--ink-2)}
.demo .flag b{font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.06em;
background:var(--mix); color:#fff; padding:.15rem .42rem; border-radius:3px}
.demo .body{padding:1.1rem}
.q{font-family:"Gothic A1",sans-serif; font-weight:900; font-size:1.3rem; letter-spacing:-.02em}
.meta{font-size:.78rem; color:var(--ink-3); margin-top:.2rem}
.row{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; margin-top:1rem}
.row .name{font-weight:700}
.n-rec{color:var(--rec); font-size:.86rem}
.n-reg{color:var(--reg); font-size:.86rem}
.bar2{height:6px; border-radius:99px; background:var(--reg); overflow:hidden; margin-top:.4rem}
.bar2 i{display:block; height:100%; background:var(--rec)}
.quote{margin:.7rem 0 0; padding-left:.8rem; border-left:2px solid var(--line-2);
font-size:.93rem; color:var(--ink)}
.quote cite{display:block; font-style:normal; font-size:.74rem; color:var(--ink-3); margin-top:.25rem}
.reasons{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem}
.tag{font-size:.78rem; font-weight:500; border-radius:6px; padding:.18rem .5rem; border:1px solid}
.tag.p{background:var(--rec-bg); color:var(--rec); border-color:var(--rec-line)}
.tag.n{background:var(--reg-bg); color:var(--reg); border-color:var(--reg-line)}
/* ---------- how ---------- */
ol.how{list-style:none; margin:1.3rem 0 0; padding:0; counter-reset:s;
display:flex; flex-direction:column; gap:1rem}
ol.how li{counter-increment:s; position:relative; padding-left:2.4rem}
ol.how li::before{content:counter(s); position:absolute; left:0; top:.1rem;
font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600; color:var(--accent);
width:1.6rem; height:1.6rem; border:1px solid var(--line); border-radius:999px;
display:grid; place-items:center; background:var(--surface)}
ol.how b{display:block; font-weight:700}
ol.how p{margin:.15rem 0 0; color:var(--ink-2); font-size:.94rem}
/* ---------- honest status ---------- */
.status{margin-top:1.3rem; display:flex; flex-direction:column; gap:.5rem}
.status div{display:flex; gap:.7rem; align-items:flex-start;
background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.7rem .9rem}
.status .mark{font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600;
letter-spacing:.04em; padding:.15rem .45rem; border-radius:3px; white-space:nowrap; margin-top:.15rem}
.status .yes{background:var(--rec-bg); color:var(--rec)}
.status .no{background:var(--surface-2); color:var(--ink-3)}
.status p{margin:0; font-size:.93rem; color:var(--ink-2)}
.status p b{color:var(--ink); font-weight:700}
/* ---------- what an AI reads vs what we read ---------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.3rem}
@media(max-width:640px){.vs{grid-template-columns:1fr}}
.vs>div{border:1px solid var(--line); border-radius:9px; padding:.9rem 1rem; background:var(--surface-2)}
.vs>div.ours{background:var(--surface); border-color:var(--rec-line)}
.vs .who{display:block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem}
.vs>div.ours .who{color:var(--rec)}
.vs p{margin:0; font-size:.93rem; color:var(--ink-2)}
.vs p b{color:var(--ink); font-weight:700}
.punch{margin:1.2rem 0 0; font-family:"Gothic A1","Noto Sans KR",sans-serif; font-weight:700;
font-size:1.08rem; letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
/* ---------- FAQ ----------
Answers stay open rather than sitting in : a question-shaped heading with its
answer right there is what both a featured snippet and an answer engine lift. Collapsing
them would hide the one thing this section exists to hand over. */
.faq{margin-top:1.4rem; display:flex; flex-direction:column; gap:1.2rem}
.faq h3{font-size:1rem; font-weight:700; letter-spacing:-.015em}
.faq p{margin:.3rem 0 0; color:var(--ink-2); font-size:.94rem; max-width:62ch}
/* ---------- sign up ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem;
background:var(--ink); color:var(--ground); text-decoration:none; font-weight:700;
font-family:inherit; font-size:1rem; line-height:1.4; border:0; cursor:pointer;
padding:.8rem 1.4rem; border-radius:10px}
.btn:hover{opacity:.88}
/* .btn sets display, which outranks the UA rule for [hidden] — the button would stay on
screen after a successful sign-up without this. */
.btn[hidden]{display:none}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.hero .btn{margin-top:1.75rem}
.cta{border-bottom:none; padding-bottom:0}
.signup{margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start}
.signup label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.signup input{flex:1 1 14rem; min-width:0;
font-family:inherit; font-size:1rem; color:var(--ink); background:var(--surface);
border:1px solid var(--line-2); border-radius:10px; padding:.8rem 1rem}
.signup input[name="category"]{flex:1 1 12rem}
.signup input::placeholder{color:var(--ink-3)}
.signup input:focus{border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px}
.formmsg{flex:1 0 100%; margin:.2rem 0 0; font-size:.88rem}
.formmsg[data-kind="ok"]{color:var(--rec)}
.formmsg[data-kind="error"]{color:var(--reg)}
.fine{margin-top:.8rem; font-size:.8rem; color:var(--ink-3)}
footer{padding-top:2.5rem; font-size:.8rem; color:var(--ink-3)}
a{color:var(--accent)}
:where(a,button,input):focus-visible{outline:2px solid var(--accent); outline-offset:2px}