/* Shared visual language for all public pages. Loaded after front.css. */
:root { --navy:#10234f; --ink:#10234f; --ink-soft:#586b8b; --muted:#70809b; --cta:#10bfb0; --cta-dark:#078b83; --blue:#087f79; --soft:#f5f2eb; --line:#e6e0d6; }
body { background:#fffcf7; }
.front-header { background:#fffcf7ed; border-color:#deded9; }
.front-header-inner { max-width:1232px; height:74px; }
.front-btn { border-radius:10px; }
.front-btn-ghost { border-color:#d9ddd9; }
.front-nav>a:not(.front-btn):hover { color:#078b83; }
.btn-cta { background:var(--navy); color:#fff; box-shadow:none; }
.btn-cta:hover { background:#213c65; }
.hl { background:none; color:var(--cta); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #10bfb0; outline-offset:4px; }
.front-footer { background:#10234f; border-top:1px solid #ffffff18; padding-top:60px; }
.footer-grid,.footer-bottom { max-width:1200px; }
.footer-col h4 { font-size:11px; letter-spacing:.15em; font-weight:500; color:#8cdbd0; }
.footer-col a:hover { color:#72d9c9; }
.footer-brand p { color:#b6c4d8; line-height:1.8; }
.page-body { max-width:900px; padding:76px 28px 96px; min-height:60vh; }
.page-eyebrow { color:#087f79; font:11px/1.6 monospace; letter-spacing:.17em; text-transform:uppercase; margin-bottom:18px; }
.page-body h1 { font-size:clamp(30px,4vw,52px); line-height:1.16; font-weight:600; letter-spacing:-.045em; margin-bottom:24px; overflow-wrap:anywhere; }
.blog-index { max-width:1200px; }
.blog-lead { max-width:650px; font-size:17px; line-height:1.85; margin:0 0 42px; color:#61718c; }
.blog-index::before,.theme-index::before { content:''; pointer-events:none; position:absolute; top:74px; left:0; right:0; height:340px; z-index:-1; background:radial-gradient(ellipse at 85% 0,#dceee5 0,transparent 55%),linear-gradient(#faf4ea,#fffcf7); }
.blog-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:26px; }
.blog-card { border:1px solid var(--line); background:#fffefa; border-radius:18px; box-shadow:none; }
.blog-card:hover { box-shadow:0 15px 35px #10234f0a; transform:translateY(-4px); }
.blog-card-img { aspect-ratio:16/10; }
.blog-card-noimg { background:radial-gradient(circle at 75% 15%,#c9e8df,transparent 65%),#e9eee4; color:#10234f; font-size:70px; font-weight:500; }
.blog-card-body { padding:25px; gap:13px; }
.blog-card-body time,.blog-post-date { color:#75857c; font:11px/1.7 monospace; letter-spacing:.06em; }
.blog-card-body h2 { font-size:22px; line-height:1.35; font-weight:600; letter-spacing:-.03em; }
.blog-card-body p { font-size:14px; line-height:1.8; }
.blog-card-more { color:#087f79; font-size:13px; padding:8px 0; }
.blog-empty { padding:52px 28px; text-align:center; border:1px solid var(--line); border-radius:20px; background:#f7f5ed; }
.blog-empty>span { display:block; color:#0da89e; font-size:54px; }
.blog-empty h2 { font-size:24px; font-weight:500; margin:10px 0; }
.blog-empty p { color:var(--ink-soft); }
.blog-breadcrumb { font-size:12px; line-height:1.8; padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.blog-breadcrumb a { color:#087f79; }
.blog-post-date { margin:0 0 32px; }
.blog-post-img { border-radius:18px; margin-bottom:38px; }
.page-content { font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.page-content h2,.page-content h3 { color:var(--navy); font-weight:600; letter-spacing:-.025em; line-height:1.35; margin-top:32px; }
.page-content p { margin-bottom:20px; }
.page-content a { color:#087f79; text-underline-offset:4px; }
.page-content img,.page-content video,.page-content iframe { max-width:100%; }
.page-content img { height:auto; border-radius:12px; }
.page-content blockquote { border-left:3px solid #10bfb0; background:#edf5ef; padding:20px 26px; margin:28px 0; color:var(--navy); }
.page-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.page-content th,.page-content td { padding:12px; border:1px solid var(--line); }
.content-page h1 { padding-bottom:28px; border-bottom:1px solid var(--line); }
.theme-card { background:#fffefa; border:1px solid var(--line); box-shadow:none; border-radius:16px; }
.theme-card h3 { font-weight:600; }
.tshop-cta { background:radial-gradient(ellipse at 90% 0,#1c5b60,transparent 65%),#10234f; border-radius:20px; padding:48px 28px; }
.tshop-cta .btn-cta { background:#10bfb0; color:#10234f; }
.tshop-cta p { color:#c1cedb; }
.auth-wrap { min-height:76vh; padding:64px 24px 80px; background:radial-gradient(ellipse at 85% 4%,#daeee5,transparent 45%),linear-gradient(#faf4ea,#fffcf7); }
.auth-split { max-width:1020px; grid-template-columns:1fr 1.05fr; margin:0; border:1px solid #e4e0d5; border-radius:22px; box-shadow:0 20px 70px #10234f08; }
.auth-aside { padding:48px 42px; background:radial-gradient(ellipse at 10% 100%,#20565a,transparent 65%),#10234f; }
.auth-aside::before { background-image:radial-gradient(#9ad8cc33 1px,transparent 1px); background-size:24px 24px; }
.auth-aside::after { content:''; position:absolute; width:360px; height:360px; right:-195px; bottom:-100px; border:1px solid #9ad8cc30; border-radius:50%; box-shadow:0 0 0 45px #9ad8cc08,0 0 0 90px #9ad8cc06; pointer-events:none; }
.auth-aside-logo { margin-bottom:58px; }
.auth-aside-logo img { max-width:100%; height:auto; width:220px; }
.auth-aside h2 { font-size:34px; line-height:1.22; font-weight:500; letter-spacing:-.04em; margin-bottom:22px; }
.auth-aside h2 span { color:#64dacc; }
.auth-aside-sub { color:#becbdd; line-height:1.85; font-size:14px; margin-bottom:32px; }
.auth-points { gap:20px; }
.auth-points li { align-items:flex-start; font-size:13px; line-height:1.7; color:#dbe7ec; }
.auth-points svg { width:24px; height:24px; background:#64dacc20; color:#76e0cf; border-radius:50%; padding:5px; margin-top:1px; }
.auth-aside-foot { display:flex; gap:10px; align-items:center; color:#b0c6cb; font:10px monospace; letter-spacing:.1em; padding-top:30px; }
.auth-status-dot { width:7px; height:7px; border-radius:50%; background:#35c8b4; box-shadow:0 0 0 4px #35c8b41a; }
.auth-card,.auth-split .auth-card { background:#fffefa; padding:46px; }
.auth-card { border-color:var(--line); box-shadow:0 20px 60px #10234f08; max-width:480px; }
.auth-card h1 { font-size:32px; font-weight:600; letter-spacing:-.04em; text-align:left; }
.auth-card .page-eyebrow { margin-bottom:12px; font-size:9px; }
.auth-sub { text-align:left; font-size:13px; line-height:1.8; margin:10px 0 28px; }
.auth-field { margin-bottom:18px; }
.auth-field label { font-size:12px; font-weight:500; color:#344663; }
.auth-field input { border-color:#dddeda; background:#fffcf7; border-radius:9px; padding:13px 14px; color:var(--navy); font-size:14px; min-width:0; }
.auth-field input::placeholder { color:#9aabae; }
.auth-field input:focus { border-color:#10bfb0; box-shadow:0 0 0 3px #10bfb018; }
.auth-btn { padding:14px 18px; border-radius:9px; font-size:14px; }
.auth-links { font-size:12px; line-height:1.8; border-top:1px solid var(--line); padding-top:22px; margin-top:24px; }
.auth-links a,.auth-consent a { color:#087f79; }
.auth-consent .consent-label { font-size:11px; line-height:1.7; }
.auth-consent input[type=checkbox] { accent-color:#078b83; }
@media(max-width:860px) {
 .front-header-inner { height:74px; }
 .auth-split { grid-template-columns:1fr; max-width:520px; }
 .auth-aside { display:block; padding:28px 32px; }
 .auth-aside-logo,.auth-points,.auth-aside-foot { display:none; }
 .auth-aside h2 { font-size:27px; margin:0 0 12px; }
 .auth-aside-sub { margin:0; font-size:13px; }
 .auth-split .auth-card { padding:32px; }
 .auth-wrap { padding:36px 20px 54px; }
 .page-body { padding:48px 24px 64px; }
}
@media(max-width:560px) {
 .front-header-inner { height:64px; padding:10px 14px; }
 .front-logo .logo-img { height:auto; width:150px; }
 .front-btn { font-size:11px; padding:8px; }
 .page-body h1 { font-size:34px; }
 .blog-lead { font-size:15px; margin-bottom:30px; }
 .blog-card-body h2 { font-size:21px; }
 .auth-wrap { padding:24px 16px 40px; }
 .auth-card,.auth-split .auth-card { padding:28px 22px; }
 .auth-card h1 { font-size:28px; }
 .auth-aside { padding:25px 22px; }
 .auth-aside h2 { font-size:25px; }
 .auth-row { gap:10px; }
 .auth-field label small { font-size:10px; }
 .footer-grid { gap:30px 20px; }
 .footer-brand { grid-column:1 / -1; }
 .footer-brand .front-logo .logo-img { height:auto; width:220px; }
 .footer-bottom { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
/* Keep a single article at card width instead of stretching its cover. */
.blog-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }
.blog-card>a { text-decoration:none; }
.guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:24px; }
.guide-card { padding:28px; border:1px solid #e6e0d6; border-radius:18px; background:#fffdf9; }
.guide-card h3 { font-size:21px; line-height:1.4; margin:12px 0; }
.guide-card h3 a { color:#10234f; text-decoration:none; }
.guide-card>p:not(.page-eyebrow) { color:#62708a; font-size:15px; line-height:1.8; margin-bottom:20px; }
.blog-related { border-top:1px solid #e6e0d6; margin-top:48px; padding-top:32px; }
.blog-publisher { color:#62708a; font-size:14px; margin:10px 0 24px; }
.article-toc { padding:24px; background:#eff6f2; border:1px solid #dce9e1; border-radius:14px; margin:28px 0; }
.article-toc ol { margin-bottom:0; }
.page-content h2[id] { scroll-margin-top:100px; }
.article-table { overflow-x:auto; margin:24px 0; border:1px solid #e6e0d6; border-radius:12px; }
.article-table table { border-collapse:collapse; width:100%; min-width:540px; font-size:15px; line-height:1.65; }
.article-table caption { padding:16px; text-align:left; font-weight:600; }
.article-table th,.article-table td { padding:14px 16px; border-top:1px solid #e6e0d6; text-align:left; vertical-align:top; }
.article-table thead { background:#eff6f2; }
/* Collapsible navigation keeps every public-page link available on mobile. */
.front-menu-toggle { display:none; }
@media(max-width:1100px) {
 .front-header-inner { position:relative; }
 .front-menu-toggle { display:flex; align-items:center; gap:10px; margin-left:auto; padding:9px 14px; border:1px solid #d9ddd9; border-radius:9px; color:#10234f; background:#fffcf7; font:500 13px inherit; cursor:pointer; }
 .front-menu-toggle span { font-size:18px; }
 .front-header .front-nav { display:none; position:absolute; left:16px; right:16px; top:calc(100% + 8px); padding:16px; border:1px solid #e6e0d6; border-radius:14px; background:#fffcf7; box-shadow:0 16px 35px #10234f18; max-height:calc(100dvh - 100px); overflow-y:auto; }
 .front-header .front-nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
 .front-header .front-nav>a:not(.front-btn) { display:block; padding:10px 12px; font-size:14px; border-radius:8px; }
 .front-header .front-nav>a:hover { background:#e7f4ee; color:#10234f; }
 .front-header .front-nav .front-btn { text-align:center; padding:11px; font-size:13px; margin-top:6px; }
 .front-menu-toggle { font-family:inherit; font-size:13px; }
}