:root { color-scheme:light; --ink:#222; --muted:#666; --accent:#fff9c4; }
* { box-sizing:border-box; }
body { margin:0; background:#f3f4f6; color:var(--ink); font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-bar,footer { max-width:1600px; margin:auto; padding:24px 5%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:white; }
.site-bar { border-bottom:1px solid #cfcfcf; }
.brand { font-weight:750; letter-spacing:.06em; font-size:19px; }
.brand-mark { color:#777; font-size:28px; vertical-align:middle; margin-right:8px; }
.header-note,.eyebrow,.card-index,.hero-bottom { font-size:11px; letter-spacing:.16em; }
.header-note { color:var(--muted); }
.hero { min-height:640px; min-height:min(760px,85svh); position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; overflow:hidden; padding:90px 24px 120px; background:white; }
.field-lines { position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.3; filter:grayscale(1); }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,#ffffffed 0%,#ffffff99 55%,#ffffff00 100%); }
.hero-content { text-align:center; max-width:920px; }
.eyebrow { color:#666; text-transform:uppercase; margin:0 0 20px; }
h1 { font-size:clamp(52px,8.5vw,128px); line-height:1.08; letter-spacing:-.06em; margin:0; font-weight:750; }
h1 span { color:#666; }
.subtitle { font-size:clamp(20px,2.2vw,30px); margin:18px 0; }
.hero-description { color:#666; font-size:17px; margin:0; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button { min-width:140px; padding:12px 22px; border:1px solid #bbb; border-radius:4px; background:#e6e6e6; display:flex; justify-content:space-between; gap:32px; font-weight:600; }
.button.primary { background:var(--accent); color:#222; border-color:#bbb; }
.button:hover { border-color:#888; background:#fff9c4; color:#222; }
.hero-bottom { position:absolute; bottom:30px; display:flex; justify-content:center; flex-wrap:wrap; gap:30px; color:#777; padding:0 18px; }
.overview { max-width:1440px; margin:auto; padding:64px 5% 40px; display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid #cfcfcf; align-items:center; }
h2 { font-size:clamp(26px,3vw,40px); line-height:1.2; margin:0; letter-spacing:-.03em; }
.overview > p { color:var(--muted); line-height:1.9; }
.tools { max-width:1440px; margin:0 auto 70px; padding:0 5%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tool-card { padding:28px; border:1px solid #cfcfcf; background:white; }
.card-index { color:#666; font-size:10px; }
.tool-card h2 { font-size:26px; display:flex; justify-content:space-between; margin:24px 0 16px; }
.tool-card p { color:var(--muted); font-size:14px; margin:0; }
.tool-card:hover { border-color:#888; }
footer { border-top:1px solid #cfcfcf; color:var(--muted); font-size:12px; }
footer > a { letter-spacing:.1em; }
:focus-visible { outline:2px solid #3267c8; outline-offset:5px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:12px; z-index:5; background:white; padding:8px; }
@media(max-width:700px) { .header-note { display:none; } .hero { min-height:600px; padding:70px 18px 110px; } .hero-bottom { gap:12px; font-size:9px; } .overview { grid-template-columns:1fr; gap:12px; padding-top:40px; } .tools { grid-template-columns:1fr; } .button { min-width:110px; padding:10px 16px; gap:16px; } footer { flex-wrap:wrap; } }

/* One-screen home: cards are the primary navigation. */
body { height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.site-bar,footer { width:100%; padding-top:12px; padding-bottom:12px; }
main { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto auto; }
.hero { min-height:0; padding:24px 20px 44px; }
h1 { font-size:clamp(44px,7vw,100px); }
.hero .eyebrow { margin-bottom:12px; }
.subtitle { margin:12px 0; }
.hero-bottom { bottom:12px; }
.overview { width:100%; padding:20px 5%; gap:32px; }
.overview h2 { font-size:clamp(22px,2vw,30px); }
.overview .eyebrow { margin-bottom:8px; }
.overview > p { font-size:16px; margin:0; line-height:1.6; }
.tools { width:100%; margin:0 auto 16px; gap:16px; }
.tool-card { padding:25px; }
.tool-card h2 { margin:12px 0 10px; font-size:23px; }
.tool-card p { font-size:15px; line-height:1.6; }
@media(max-width:700px) {
 .site-bar,footer { padding:8px 16px; }
 .hero { padding:16px 12px 32px; }
 .hero-description { font-size:13px; }
 .overview { padding:12px 5%; gap:8px; }
 .overview > div { display:none; }
 .overview > p { font-size:12px; }
 .tools { grid-template-columns:1fr; gap:6px; margin-bottom:10px; }
 .tool-card { padding:10px 14px; }
 .card-index { display:none; }
 .tool-card h2 { margin:0 0 4px; font-size:18px; }
 .tool-card p { font-size:13px; line-height:1.4; }
 .hero-bottom { font-size:8px; gap:10px; bottom:8px; }
 footer { font-size:10px; }
}
@media(max-height:650px) {
 .overview { padding-top:10px; padding-bottom:10px; }
 .hero-description,.hero-bottom { display:none; }
 .hero { padding:12px; }
 h1 { font-size:clamp(34px,5vw,64px); }
 .subtitle { font-size:18px; margin:6px 0; }
 .hero .eyebrow { margin-bottom:6px; }
 .tool-card { padding:12px; }
 .tool-card h2 { margin:6px 0; }
}
@media(max-height:450px) { .overview { display:none; } main { grid-template-rows:minmax(0,1fr) auto; } .tools { grid-template-columns:repeat(3,minmax(0,1fr)); } .tool-card p,.card-index { display:none; } }

/* Balance the lower section without stretching its cards. */
.explore-content { display:contents; }
.site-bar, footer { max-width:none; width:100%; margin:0; }
footer { padding-top:22px; padding-bottom:22px; font-size:13px; }
@media(min-width:701px) and (min-height:651px) {
 main { grid-template-rows:minmax(0,50dvh) minmax(min-content,1fr); }
 .explore-content { display:flex; flex-direction:column; justify-content:center; padding:24px 0; gap:24px; border-top:1px solid #cfcfcf; }
 .explore-content .overview { flex:none; margin:0 auto; padding-top:0; padding-bottom:0; border-top:0; }
 .explore-content .tools { flex:none; margin:0 auto; }
 .hero { padding-top:18px; padding-bottom:38px; }
 .tools { align-self:start; margin-bottom:16px; }

}
@media(max-width:700px), (max-height:650px) {
 footer { padding-top:14px; padding-bottom:14px; font-size:12px; }
}

/* RCWA is temporarily unavailable. */
.tool-card-disabled { position:relative; overflow:hidden; cursor:default; }
.tool-card-disabled:hover { border-color:#cfcfcf; }
.card-preview { filter:blur(3px); opacity:.45; pointer-events:none; user-select:none; }
.coming-soon-badge { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#333; font-size:16px; font-weight:600; }

/* Landscape tablets: reserve space for the entire hero, including its labels. */
@media (min-width:701px) and (max-width:1366px) and (max-height:900px) and (orientation:landscape) {
 main { grid-template-rows:minmax(max-content,1fr) auto; }
 .hero { flex-direction:column; gap:12px; padding:16px 20px; }
 .hero-content { flex:none; }
 .hero h1 { font-size:clamp(44px,5.2vw,64px); }
 .hero .eyebrow { margin-bottom:6px; font-size:10px; }
 .hero .subtitle { font-size:22px; line-height:1.3; margin:8px 0; }
 .hero-description { display:block; font-size:14px; line-height:1.4; }
 .hero-bottom { position:static; display:flex; flex:none; font-size:9px; gap:20px; }
 .explore-content { display:flex; flex-direction:column; gap:16px; padding:16px 0; border-top:1px solid #cfcfcf; }
 .explore-content .overview { margin:0 auto; padding-top:0; padding-bottom:0; border-top:0; }
 .overview h2 { font-size:22px; }
 .overview > p { font-size:14px; line-height:1.5; }
 .explore-content .tools { margin:0 auto; }
 .tool-card { padding:18px; }
 .tool-card h2 { margin:10px 0 8px; }
 .tool-card p { line-height:1.45; }
 .site-bar, footer { padding-top:12px; padding-bottom:12px; }
}

/* Phone layout: content stays in flow when browser chrome changes height. */
@media (max-width:700px) {
 body { min-height:100dvh; height:auto; grid-template-rows:auto 1fr auto; }
 main { grid-template-rows:minmax(max-content,1fr) auto; }
 .site-bar { padding:10px 18px; }
 .brand { font-size:18px; }
 .hero { flex-direction:column; gap:12px; padding:20px 16px 16px; }
 .hero-content { flex:none; width:100%; }
 .hero .eyebrow { font-size:9px; letter-spacing:.12em; margin-bottom:12px; }
 .hero h1 { font-size:clamp(36px,11vw,54px); }
 .hero .subtitle { font-size:clamp(17px,4.6vw,21px); line-height:1.3; margin:12px 0; }
 .hero-description { display:block; font-size:13px; line-height:1.45; }
 .hero-bottom { position:static; display:flex; flex:none; gap:6px 12px; padding:0; font-size:8px; letter-spacing:.1em; }
 .explore-content { display:flex; flex-direction:column; gap:12px; padding:14px 16px; border-top:1px solid #cfcfcf; }
 .explore-content .overview { display:block; margin:0; padding:0; border:0; }
 .overview > p { font-size:13px; line-height:1.5; }
 .explore-content .tools { padding:0; margin:0; gap:10px; }
 .tool-card { padding:12px 14px; }
 .tool-card h2 { font-size:18px; margin:0 0 6px; }
 .tool-card p { font-size:13px; line-height:1.45; }
 footer { padding:12px 16px; gap:6px 12px; font-size:10px; }
}