@charset "UTF-8";
/* =====================================================================
   mail.point.tokyo
   日本企業向け・清潔・信頼感重視。レスポンシブ。
   状態色: 赤=ブロック / 黄=報告待ち・候補 / 緑グレー=解除済み
   ===================================================================== */

:root {
  --c-text:        #1c2431;
  --c-text-sub:    #5b6675;
  --c-text-muted:  #8b95a3;
  --c-bg:          #f5f7fa;
  --c-surface:     #ffffff;
  --c-border:      #dfe4ec;
  --c-border-soft: #eceff4;

  --c-primary:     #14539a;
  --c-primary-dk:  #0f4079;
  --c-primary-lt:  #eaf1fa;

  --c-danger:      #c0342c;
  --c-danger-bg:   #fdecea;
  --c-warn:        #9a6b00;
  --c-warn-bg:     #fdf4e0;
  --c-ok:          #1c7a4a;
  --c-ok-bg:       #e8f5ee;
  --c-muted-bg:    #eef1f5;

  --radius:  8px;
  --radius-l: 12px;
  --shadow: 0 1px 2px rgba(28, 36, 49, .06), 0 4px 16px rgba(28, 36, 49, .05);
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------
   ヘッダー / フッター
   --------------------------------------------------------------- */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; line-height: 1.3; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { font-weight: 700; font-size: 18px; color: var(--c-text); letter-spacing: .01em; }
.brand-dot { color: var(--c-primary); }
.brand-sub { font-size: 11px; color: var(--c-text-muted); letter-spacing: .08em; }

.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 14px; color: var(--c-text-sub); white-space: nowrap;
}
.site-nav a:hover { background: var(--c-primary-lt); color: var(--c-primary); text-decoration: none; }

.site-main { min-height: 60vh; padding-bottom: 64px; }

.site-footer {
  background: #1c2431; color: #c6ccd6; margin-top: 64px;
  padding: 40px 0 24px;
}
.footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-brand strong { color: #fff; font-size: 16px; }
.footer-brand p { margin: 4px 0 0; font-size: 13px; color: #97a1af; }
.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a { color: #c6ccd6; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
.footer-copy { margin-top: 28px; padding-top: 16px; border-top: 1px solid #2d3746; color: #7e8794; }

/* ---------------------------------------------------------------
   ヒーロー
   --------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4fa 100%);
  border-bottom: 1px solid var(--c-border);
  padding: 64px 0 56px;
}
.hero h1 {
  margin: 0 0 20px; font-size: 40px; line-height: 1.45; letter-spacing: .01em;
}
.hero-lead { font-size: 17px; color: var(--c-text-sub); margin: 0 0 32px; max-width: 44em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-sub-links { margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }

/* ---------------------------------------------------------------
   ボタン
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--c-primary); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--c-primary-dk); color: #fff; text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-outline { background: #fff; color: var(--c-primary); border-color: #b9cbe2; }
.btn-outline:hover { background: var(--c-primary-lt); color: var(--c-primary-dk); border-color: var(--c-primary); }

.btn-danger { background: var(--c-danger); }
.btn-danger:hover { background: #9c2a23; }

.btn-sm { padding: 7px 14px; font-size: 13px; font-weight: 500; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------
   セクション / カード
   --------------------------------------------------------------- */
.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }
.section h2 { font-size: 26px; margin: 0 0 8px; }
.section-lead { color: var(--c-text-sub); margin: 0 0 32px; }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 28px;
}
.card + .card { margin-top: 20px; }
.card h2, .card h3 { margin-top: 0; }

.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: 28px; margin: 0 0 8px; }
.page-head p { color: var(--c-text-sub); margin: 0; }

.narrow { max-width: 720px; }

/* ---------------------------------------------------------------
   フロー（1→5）
   --------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flow-step {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); padding: 22px 18px; position: relative;
}
.flow-step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-weight: 700; font-size: 14px;
  margin-bottom: 12px;
}
.flow-step p { margin: 0; font-size: 14px; line-height: 1.7; }
.flow-step.is-block .num { background: var(--c-danger); }

.pull-quote {
  margin: 36px 0 0; padding: 24px 28px;
  background: var(--c-primary-lt); border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 18px; font-weight: 600; line-height: 1.7;
}

/* ---------------------------------------------------------------
   フォーム
   --------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field > label, .field-label {
  display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;
}
.req, .opt {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: 2px;
}
.req { background: var(--c-danger-bg); color: var(--c-danger); }
.opt { background: var(--c-muted-bg); color: var(--c-text-muted); }

.field .hint { font-size: 13px; color: var(--c-text-muted); margin: 4px 0 0; }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="datetime-local"], input[type="date"],
input[type="search"], select, textarea {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  color: var(--c-text); background: #fff;
  border: 1px solid #c8d0dc; border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(20, 83, 154, .12);
}
textarea { min-height: 180px; resize: vertical; line-height: 1.7; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7686 50%), linear-gradient(135deg, #6b7686 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--c-danger); }
.field-error { color: var(--c-danger); font-size: 13px; margin: 5px 0 0; font-weight: 600; }

.checkline { display: flex; align-items: flex-start; gap: 10px; }
.checkline input[type="checkbox"] { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--c-primary); }
.checkline label { font-size: 15px; line-height: 1.7; }

.form-actions { margin-top: 28px; }

.inline-form { display: inline; }

/* ---------------------------------------------------------------
   注意書き / アラート
   --------------------------------------------------------------- */
.notice {
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 24px;
  border: 1px solid; font-size: 14px; line-height: 1.8;
}
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice h3 { margin: 0 0 10px; font-size: 15px; }

.notice-warn   { background: var(--c-warn-bg);   border-color: #ebd5a3; color: #6d4b00; }
.notice-danger { background: var(--c-danger-bg); border-color: #f0c4c0; color: #8c2620; }
.notice-info   { background: var(--c-primary-lt);border-color: #c3d6ec; color: #123f73; }
.notice-ok     { background: var(--c-ok-bg);     border-color: #b6ddc8; color: #145c37; }

.alert { border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; font-size: 14px; font-weight: 500; border: 1px solid; }
.alert-error { background: var(--c-danger-bg); border-color: #f0c4c0; color: #8c2620; }
.alert-ok    { background: var(--c-ok-bg);     border-color: #b6ddc8; color: #145c37; }
.alert-info  { background: var(--c-primary-lt);border-color: #c3d6ec; color: #123f73; }

/* ---------------------------------------------------------------
   状態バッジ
   --------------------------------------------------------------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.st-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.st-warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.st-ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.st-muted  { background: var(--c-muted-bg);  color: var(--c-text-sub); }

/* ---------------------------------------------------------------
   定義リスト（確認画面）
   --------------------------------------------------------------- */
.kv { margin: 0; border-top: 1px solid var(--c-border-soft); }
.kv > div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; }
.kv dt { flex: 0 0 150px; font-size: 13px; color: var(--c-text-sub); font-weight: 600; margin: 0; }
.kv dd { flex: 1 1 260px; margin: 0; word-break: break-all; }

/* ---------------------------------------------------------------
   コード
   --------------------------------------------------------------- */
pre.code, code.inline {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
}
pre.code {
  background: #1c2431; color: #e3e8ef; padding: 18px 20px;
  border-radius: var(--radius); overflow-x: auto; line-height: 1.7; margin: 0 0 16px;
}
code.inline { background: var(--c-muted-bg); padding: 2px 6px; border-radius: 4px; color: #33405a; }

.copy-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   テーブル
   --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-l); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; }
table.data th { background: #f7f9fc; font-size: 12px; color: var(--c-text-sub); font-weight: 700; white-space: nowrap; }
table.data tbody tr:hover { background: #fafbfd; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; word-break: break-all; }
.empty-row { text-align: center; color: var(--c-text-muted); padding: 36px 0; }

/* ---------------------------------------------------------------
   ページング
   --------------------------------------------------------------- */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 24px 0 0; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 7px 13px; border-radius: var(--radius); font-size: 14px;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text-sub);
}
.pager .current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.pager .disabled { opacity: .4; }

/* ---------------------------------------------------------------
   管理画面
   --------------------------------------------------------------- */
body.admin { background: #eef1f6; }
.admin-bar { background: #1c2431; color: #fff; }
.admin-bar .container { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 16px; flex-wrap: wrap; }
.admin-bar .admin-brand { color: #fff; font-weight: 700; font-size: 15px; }
.admin-bar .admin-brand:hover { text-decoration: none; }
.admin-bar .admin-user { font-size: 13px; color: #9aa4b2; display: flex; align-items: center; gap: 14px; }
.admin-bar .admin-user a { color: #c6ccd6; }

.admin-nav { background: #263043; }
.admin-nav .container { display: flex; gap: 2px; overflow-x: auto; }
.admin-nav a {
  padding: 12px 15px; font-size: 14px; color: #b9c2cf; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.admin-nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.05); }
.admin-nav a.active { color: #fff; border-bottom-color: #4d90d6; font-weight: 600; }

.admin-main { padding: 28px 0 64px; }
.admin-main h1 { font-size: 22px; margin: 0 0 4px; }
.admin-main .page-sub { color: var(--c-text-sub); font-size: 14px; margin: 0 0 24px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-l);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .label { font-size: 12px; color: var(--c-text-sub); margin-bottom: 4px; }
.stat .value { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat.is-danger .value { color: var(--c-danger); }
.stat.is-warn .value   { color: var(--c-warn); }
.stat.is-ok .value     { color: var(--c-ok); }

.filter-bar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-l);
  padding: 16px 18px; margin-bottom: 20px;
}
.filter-bar .field { margin: 0; }
.filter-bar input, .filter-bar select { min-width: 180px; }

.admin-panel { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: 22px; margin-bottom: 22px; box-shadow: var(--shadow); }
.admin-panel h2 { font-size: 17px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border-soft); }

.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

.evidence { background: #fbfcfe; border: 1px dashed #c8d0dc; border-radius: var(--radius); padding: 16px 18px; font-size: 13px; }
.evidence .kv dt { flex-basis: 130px; }

.msg-body {
  background: #f7f9fc; border: 1px solid var(--c-border-soft); border-radius: var(--radius);
  padding: 16px 18px; white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.8; max-height: 420px; overflow-y: auto;
}

/* ---------------------------------------------------------------
   ログイン
   --------------------------------------------------------------- */
.login-wrap { max-width: 400px; margin: 72px auto; }
.login-wrap .card { padding: 32px; }
.login-wrap h1 { font-size: 20px; margin: 0 0 6px; text-align: center; }
.login-wrap .sub { text-align: center; color: var(--c-text-muted); font-size: 13px; margin: 0 0 26px; }

/* ---------------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero { padding: 40px 0 36px; }
  .hero h1 { font-size: 28px; }
  .hero-lead { font-size: 15px; }
  .section { padding: 36px 0; }
  .card { padding: 20px; }
  .flow { grid-template-columns: 1fr; }
  .header-inner { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .site-nav { width: 100%; }
  .site-nav a { padding: 6px 9px; font-size: 13px; }
  .kv dt { flex-basis: 100%; }
  .btn { width: 100%; }
  .btn-sm, .filter-bar .btn { width: auto; }
  .hero-actions .btn { width: 100%; }
}

/* mail.point.tokyo visual refresh */
:root { --c-text:#172235; --c-text-sub:#667085; --c-bg:#f7f7f4; --c-surface:#fff; --c-border:#e7e8e3; --c-primary:#172d52; --c-primary-dk:#0d1d37; --c-primary-lt:#edf2f7; --c-coral:#ff705f; --c-coral-dk:#e45a4d; --radius:12px; --radius-l:20px; --shadow:0 12px 35px rgba(23,34,53,.07); --maxw:1180px; }
body { font-family: Inter, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; background:var(--c-bg); letter-spacing:.01em; }
.container { padding:0 28px; }
.site-header { background:rgba(247,247,244,.88); border:0; backdrop-filter:blur(16px); }
.header-inner { min-height:78px; }
.brand { flex-direction:row; align-items:center; gap:11px; }
.brand-logo { width:38px; height:38px; object-fit:contain; mix-blend-mode:multiply; }
.brand-copy { display:flex; flex-direction:column; line-height:1.15; }
.brand-mark { font-size:17px; letter-spacing:.02em; }
.brand-sub { margin-top:5px; font-size:10px; letter-spacing:.05em; }
.site-nav { gap:8px; align-items:center; }
.site-nav a { padding:9px 12px; font-size:13px; color:#596579; }
.site-nav .nav-appeal { color:var(--c-text); border:1px solid #d8dcd6; border-radius:999px; }
.site-main { padding-bottom:0; }
.hero-home { position:relative; overflow:hidden; min-height:650px; padding:110px 0 100px; color:#fff; background:#08172f; border:0; }
.hero-art { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,23,47,.98) 0%,rgba(8,23,47,.86) 43%,rgba(8,23,47,.18) 100%),url('../asset/images/hero-gateway.png') center/cover; opacity:.98; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; min-height:430px; }
.hero-content { max-width:630px; }
.eyebrow,.section-kicker { display:flex; align-items:center; gap:9px; color:var(--c-coral); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow-dot,.pulse { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--c-coral); box-shadow:0 0 0 5px rgba(255,112,95,.16); }
.hero h1 { margin:24px 0 24px; font-size:clamp(38px,4.6vw,64px); line-height:1.22; letter-spacing:-.045em; font-weight:700; }
.hero h1 em { color:#ff988b; font-style:normal; }
.title-line { display:block; width:max-content; max-width:100%; }
.hero-lead { max-width:530px; margin-bottom:34px; color:#d5ddea; font-size:17px; line-height:2; }
.hero-actions { gap:13px; }
.btn { border-radius:999px; padding:14px 22px; font-size:14px; }
.btn span { font-size:18px; line-height:0; }
.btn-coral { background:var(--c-coral); color:#fff; box-shadow:0 10px 25px rgba(255,112,95,.22); }
.btn-coral:hover { background:var(--c-coral-dk); }
.btn-ghost { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.16); color:#fff; }
.hero-note { margin:20px 0 0; color:#aebacd; font-size:12px; }
.hero-side { display:flex; justify-content:flex-end; align-items:flex-end; height:100%; }
.hero-side-card { display:flex; align-items:center; gap:11px; padding:15px 18px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(4,15,34,.42); backdrop-filter:blur(10px); color:#c2ccdc; font-size:12px; }
.hero-side-card strong { color:#fff; font-size:14px; }
.stats-section { padding:42px 0 34px; background:#fff; }
.stats-intro { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; }
.stats-intro p { margin:0; color:var(--c-text-sub); font-size:13px; }
.stat-grid { gap:16px; margin:0; }
.stat { padding:22px 25px; border:1px solid var(--c-border); border-radius:16px; box-shadow:none; }
.stat .label { font-size:12px; color:#8992a0; }
.stat .value { margin-top:10px; color:var(--c-text); font-size:32px; letter-spacing:-.03em; }
.stat .value small { color:#a0a8b2; font-size:12px; font-weight:500; letter-spacing:0; }
.stat-coral { background:#fff3f0; border-color:#ffdad5; }.stat-coral .value { color:var(--c-coral-dk); }
.section { padding:100px 0; }.section-heading { max-width:650px; margin-bottom:42px; }.section h2 { margin:17px 0 13px; font-size:clamp(30px,4vw,46px); line-height:1.3; letter-spacing:-.04em; }.section-lead { line-height:1.9; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.feature-card { min-height:285px; padding:30px; border:1px solid var(--c-border); border-radius:18px; background:#fff; }.feature-number { color:var(--c-coral); font-size:12px; font-weight:800; letter-spacing:.12em; }.feature-card h3 { margin:60px 0 10px; font-size:21px; }.feature-card p { margin:0; color:var(--c-text-sub); font-size:14px; line-height:1.9; }.feature-card-dark { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }.feature-card-dark p { color:#bdc9db; }
.section-dark { background:var(--c-primary); color:#fff; }.section-dark .section-kicker { color:#ff968a; }.section-dark h2 { color:#fff; }.section-dark p { color:#bdc9db; max-width:480px; line-height:1.9; }.install-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.code-card { overflow:hidden; border:1px solid #304566; border-radius:18px; background:#0b1b35; box-shadow:0 20px 40px rgba(0,0,0,.15); }.code-top { display:flex; align-items:center; gap:6px; padding:15px 18px; border-bottom:1px solid #263b5b; }.code-top span { width:7px; height:7px; border-radius:50%; background:#435674; }.code-top small { margin-left:auto; color:#7789a3; font-size:11px; }.code-card pre { margin:0; padding:25px; color:#d7e5f6; font-size:13px; line-height:1.8; }.final-cta { text-align:center; background:#fff; }.final-cta .container { display:flex; flex-direction:column; align-items:center; }.final-cta p { margin:0 0 26px; color:var(--c-text-sub); }.btn-primary { background:var(--c-primary); }.btn-primary:hover { background:var(--c-primary-dk); }.site-footer { margin-top:0; padding:55px 0 25px; background:#08172f; }.footer-brand p { color:#8d9ab0; }.footer-nav a { color:#bdc8d8; }
.code-caption { margin:14px 4px 0!important; color:#8fa0b8!important; font-size:12px; }
.install-options { margin-top:22px; border-top:1px solid #304566; color:#d7e5f6; }.install-options summary { padding:18px 4px 0; cursor:pointer; color:#d7e5f6; font-size:13px; font-weight:700; }.install-options summary::marker { color:var(--c-coral); }.install-options-body { padding-top:14px; }.section-dark .install-options-body p { margin:0 0 14px; color:#9cacc2; font-size:12px; line-height:1.8; }.install-options code { padding:2px 5px; border-radius:4px; background:#0b1b35; color:#f0b2aa; }.code-card-small { border-radius:12px; box-shadow:none; }.code-card-small pre { padding:18px 20px; font-size:12px; line-height:1.65; }.section-dark .install-options-body .install-feedback-note { margin:13px 2px 0; color:#8fa0b8; }
.final-cta-copy { max-width:650px; margin:0 0 28px; }.final-cta-copy p { margin:0; }.final-cta-copy p+p { margin-top:9px; }
@media (max-width:900px) { .hero-grid,.install-grid { grid-template-columns:1fr; }.hero-side { display:none; }.hero-home { min-height:auto; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:0; }.feature-card h3 { margin-top:36px; } }
@media (max-width:640px) { .container { padding:0 20px; }.header-inner { min-height:65px; }.brand-sub { display:none; }.site-nav { width:auto; margin-left:auto; }.site-nav a { display:none; }.site-nav .nav-appeal { display:block; padding:7px 10px; font-size:11px; }.hero-home { padding:72px 0 66px; }.hero h1 { font-size:8vw; line-height:1.28; letter-spacing:-.05em; }.hero-lead { font-size:15px; line-height:1.85; }.hero-actions .btn { width:auto; }.hero-actions { flex-direction:column; align-items:flex-start; }.hero-note { max-width:30em; line-height:1.8; }.stats-intro { display:block; }.stats-intro p { margin-top:9px; line-height:1.8; }.section { padding:70px 0; }.section h2 .title-line { width:auto; }.stat-grid { grid-template-columns:1fr; }.install-grid { gap:35px; }.code-card pre { font-size:11px; padding:18px; }.footer-inner { flex-direction:column; } }

/* One-field report experience */
.report-page { min-height:calc(100vh - 78px); padding:92px 0 110px; background:radial-gradient(circle at 8% 15%,rgba(255,112,95,.10),transparent 28%),var(--c-bg); }
.report-container { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,500px); gap:90px; align-items:center; max-width:1060px; }
.report-copy .section-kicker { margin-bottom:22px; }.report-copy h1 { margin:0 0 25px; color:var(--c-text); font-size:clamp(40px,5vw,64px); line-height:1.2; letter-spacing:-.045em; }.report-copy h1 em { color:var(--c-coral-dk); font-style:normal; }.report-copy>p { max-width:520px; color:var(--c-text-sub); font-size:16px; line-height:1.95; }
.privacy-points { display:flex; flex-direction:column; gap:12px; margin-top:34px; color:#4f5d70; font-size:13px; }.privacy-points span { display:flex; align-items:center; gap:10px; }.privacy-points i { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#e9f4ed; color:#31865a; font-style:normal; font-size:11px; font-weight:800; }
.report-form-card { padding:35px; border:0; border-radius:24px; box-shadow:0 25px 70px rgba(23,34,53,.12); }.report-form-head { display:flex; align-items:center; gap:14px; margin-bottom:32px; padding-bottom:25px; border-bottom:1px solid var(--c-border); }.report-form-head>span { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--c-primary); color:#fff; font-size:11px; font-weight:800; }.report-form-head h2 { margin:0 0 3px; font-size:20px; letter-spacing:-.02em; }.report-form-head p { margin:0; color:#8a94a3; font-size:12px; }.report-email-field label { margin-bottom:10px; }.email-input-wrap { display:flex; align-items:center; overflow:hidden; border:1px solid #cbd2dc; border-radius:13px; background:#fff; transition:border-color .15s,box-shadow .15s; }.email-input-wrap:focus-within { border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(23,45,82,.10); }.email-input-wrap>span { padding-left:15px; color:var(--c-coral); font-size:19px; font-weight:700; }.email-input-wrap input { border:0; padding:15px 13px; box-shadow:none!important; font-size:16px; }.report-form-card .btn-block { margin-top:8px; padding:16px 22px; }.report-legal { margin:17px 0 0; color:#939ba7; font-size:10px; line-height:1.7; text-align:center; }
.report-success { grid-column:1/-1; width:100%; max-width:640px; margin:auto; padding:55px; border:0; border-radius:25px; text-align:center; box-shadow:0 25px 70px rgba(23,34,53,.10); }.report-success-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 24px; border-radius:50%; background:#e8f5ee; color:#1c7a4a; font-size:25px; }.report-success .section-kicker { justify-content:center; }.report-success h1 { margin:15px 0 12px; font-size:34px; letter-spacing:-.04em; }.report-success-lead { max-width:460px; margin:0 auto 30px; color:var(--c-text-sub); }.report-result { margin:0; border-top:1px solid var(--c-border); }.report-result>div { display:flex; justify-content:space-between; gap:20px; padding:15px 4px; border-bottom:1px solid var(--c-border); text-align:left; }.report-result dt { color:#8b95a3; font-size:12px; }.report-result dd { margin:0; color:var(--c-text); font-size:13px; font-weight:600; word-break:break-all; }.report-success .form-actions { display:flex; justify-content:center; align-items:center; gap:22px; }.report-home-link { color:var(--c-text-sub); font-size:13px; }
@media (max-width:900px) { .report-container { grid-template-columns:1fr; gap:45px; max-width:620px; }.report-page { padding:65px 0 80px; }.report-copy { text-align:center; }.report-copy>p { margin-left:auto; margin-right:auto; }.report-copy .section-kicker { justify-content:center; }.privacy-points { display:inline-flex; text-align:left; } }
@media (max-width:640px) { .report-page { padding:45px 0 65px; }.report-copy h1 { font-size:38px; }.report-form-card { padding:25px 20px; border-radius:19px; }.report-success { padding:38px 20px; }.report-success .form-actions { flex-direction:column; }.report-success .btn { width:100%; } }

/* Shared UX polish */
html { scroll-behavior:smooth; }
body { background:linear-gradient(180deg,#f8f8f5 0%,#f4f5f1 100%); }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(255,112,95,.38); outline-offset:3px; }
.site-header { box-shadow:0 1px 0 rgba(23,34,53,.05); }
.header-inner { max-width:1240px; }
.brand-logo { border-radius:11px; filter:saturate(.92) contrast(1.04); }
.site-nav a { position:relative; transition:color .2s,background .2s,transform .2s; }
.site-nav a:hover { transform:translateY(-1px); }
.site-nav a:not(.nav-appeal)::after { content:""; position:absolute; right:12px; bottom:5px; left:12px; height:1px; background:var(--c-coral); transform:scaleX(0); transition:transform .2s; }
.site-nav a:not(.nav-appeal):hover::after { transform:scaleX(1); }
.nav-appeal { background:rgba(255,255,255,.65); }
.site-main { overflow:hidden; }
.site-main > .container.narrow { padding-top:22px; }
.page-head { position:relative; padding:70px 0 30px; }
.page-head::before { content:"CFS BLOCKER"; display:block; margin-bottom:13px; color:var(--c-coral); font-size:10px; font-weight:800; letter-spacing:.17em; }
.page-head h1 { margin:0 0 12px; font-size:clamp(30px,4vw,42px); line-height:1.3; letter-spacing:-.035em; }
.page-head p { max-width:650px; color:#6d7785; font-size:14px; line-height:1.9; }
.card { border-color:rgba(23,34,53,.07); box-shadow:0 18px 55px rgba(23,34,53,.075); }
.container.narrow>.card { padding:clamp(24px,4vw,40px); border:0; border-radius:22px; }
.container.narrow>.card h2 { margin:38px 0 12px; padding-top:4px; font-size:21px; letter-spacing:-.02em; }
.container.narrow>.card h2:first-child { margin-top:0; }
.container.narrow>.card h3 { font-size:17px; }
.container.narrow>.card p,.container.narrow>.card li { color:#596579; }
.field { margin-bottom:26px; }.field>label,.field-label { margin-bottom:8px; color:#334155; font-size:13px; }
input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="datetime-local"],input[type="date"],input[type="search"],select,textarea { min-height:48px; padding:12px 14px; border-color:#d5dae2; border-radius:11px; background:#fdfdfc; }
input:hover,select:hover,textarea:hover { border-color:#b8c0cc; }
.notice,.alert { border-width:0; border-left:3px solid; border-radius:12px; box-shadow:0 8px 24px rgba(23,34,53,.035); }
.notice-info,.alert-info { border-left-color:var(--c-primary); }.notice-warn { border-left-color:#d89a24; }.notice-danger,.alert-error { border-left-color:var(--c-danger); }.notice-ok,.alert-ok { border-left-color:var(--c-ok); }
.btn { min-height:48px; transition:transform .2s,box-shadow .2s,background .2s; }.btn:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(23,34,53,.14); }.btn:active { transform:translateY(0); }
.table-wrap { border:0; border-radius:16px; box-shadow:0 12px 36px rgba(23,34,53,.06); }
table.data th { padding-top:14px; padding-bottom:14px; background:#f1f3f4; color:#657083; letter-spacing:.03em; }
table.data td { padding-top:14px; padding-bottom:14px; }
pre.code { border:1px solid #2c3d58; border-radius:13px; box-shadow:inset 0 1px rgba(255,255,255,.06); }
.site-footer { position:relative; margin-top:72px; padding-top:62px; border-radius:0; }
.site-footer::before { content:""; position:absolute; top:0; left:50%; width:min(1120px,calc(100% - 40px)); height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:translateX(-50%); }
.footer-inner { align-items:flex-start; }.footer-brand strong { font-size:19px; letter-spacing:.01em; }.footer-brand p { margin-top:9px; }.footer-nav { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:9px 28px; }.footer-nav a { transition:color .2s,transform .2s; }.footer-nav a:hover { transform:translateX(3px); text-decoration:none; }.footer-copy { margin-top:38px; padding-top:18px; }
@media (max-width:640px) { .site-main>.container.narrow { padding-top:0; }.page-head { padding:48px 0 23px; }.site-header .brand-logo { width:34px; height:34px; }.site-nav { gap:4px; }.site-nav a:first-child,.site-nav .nav-appeal { display:block; border:0; background:transparent; padding:7px 8px; font-size:10px; }.site-nav a:first-child { color:var(--c-coral-dk); font-weight:700; }.site-nav a:not(.nav-appeal)::after { display:none; }.site-footer { margin-top:52px; padding-top:48px; border-radius:0; }.footer-nav { grid-template-columns:1fr; }.container.narrow>.card { border-radius:18px; } }

/* CFS BLOCKER brand lockup */
.brand-logo.brand-logo-wide { width:245px; height:auto; max-height:62px; border-radius:0; object-fit:contain; mix-blend-mode:normal; filter:none; }
@media (max-width:760px) { .brand-logo.brand-logo-wide { width:176px; height:auto; max-height:52px; }.site-nav .nav-appeal { display:none; } }
@media (max-width:390px) { .brand-logo.brand-logo-wide { width:158px; }.site-nav a:first-child { font-size:9px; padding-right:0; } }

/* Legal documents */
.legal-page { max-width:880px; }.legal-card { counter-reset:legal; }.legal-lead { margin:0 0 38px; padding:22px 24px; border-left:3px solid var(--c-coral); border-radius:0 12px 12px 0; background:#fff5f3; color:#4c5869!important; line-height:2; }.legal-card h2 { margin-top:46px!important; padding-top:30px!important; border-top:1px solid var(--c-border); color:var(--c-text); }.legal-card h2:first-of-type { margin-top:0!important; padding-top:0!important; border-top:0; }.legal-card ol,.legal-card ul { padding-left:1.5em; }.legal-card li { margin:8px 0; line-height:1.9; }.legal-card p { line-height:1.95; }.legal-table { margin:20px 0; box-shadow:none; border:1px solid var(--c-border); }.legal-table table.data { min-width:600px; }.legal-table td:first-child { width:185px; color:var(--c-text); font-weight:700; }.legal-note { margin-top:18px; padding:15px 17px; border-radius:10px; background:var(--c-primary-lt); font-size:13px; }.legal-foot { margin-top:50px!important; padding-top:25px; border-top:1px solid var(--c-border); color:#7d8795!important; font-size:13px; }.legal-nav { display:flex; gap:9px; margin-bottom:0; font-size:13px; }
@media (max-width:640px) { .legal-lead { padding:17px 18px; font-size:14px; }.legal-card h2 { margin-top:38px!important; padding-top:25px!important; font-size:18px!important; }.legal-table { margin-right:-4px; margin-left:-4px; }.legal-card ol,.legal-card ul { padding-left:1.25em; } }

/* Admin workspace: full-width, dense data tables and compact row actions */
body.admin .container { width:100%; max-width:none; padding-right:clamp(16px,2vw,32px); padding-left:clamp(16px,2vw,32px); }
body.admin .admin-main { padding-top:24px; }
body.admin .admin-main h1 { font-size:24px; letter-spacing:-.02em; }
body.admin .filter-bar { gap:12px; padding:14px 16px; border:0; border-radius:14px; box-shadow:0 8px 28px rgba(23,34,53,.06); }
body.admin .filter-bar .field:first-child { flex:1 1 320px; }
body.admin .filter-bar .field:first-child input { width:100%; }
body.admin .filter-bar input,body.admin .filter-bar select { min-height:40px; }
body.admin .btn.btn-sm { width:auto; min-height:34px; padding:6px 12px; border-radius:8px; font-size:12px; line-height:1.2; box-shadow:none; transform:none; }
body.admin .table-wrap { width:100%; border-radius:14px; box-shadow:0 8px 28px rgba(23,34,53,.055); }
body.admin table.data { font-size:12px; }
body.admin table.data th,body.admin table.data td { padding:10px 9px; vertical-align:middle; }
body.admin table.data th { position:sticky; top:0; z-index:1; background:#f1f3f6; }
body.admin table.data tbody tr:nth-child(even) { background:#fbfcfd; }
body.admin table.data tbody tr:hover { background:#f3f7fb; }
.admin-email-table { min-width:1320px!important; }
.admin-email-table .email-actions-cell { width:205px; min-width:205px; }
.email-action-form { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.email-action-form select { width:138px; min-width:138px; min-height:34px; padding:6px 28px 6px 9px; border-radius:8px; background-color:#fff; font-size:12px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:760px) { body.admin .admin-bar .container { padding-top:10px; padding-bottom:10px; }.admin-bar .admin-user { width:100%; gap:10px; overflow-x:auto; white-space:nowrap; }.admin-email-table { min-width:1240px!important; } }
.admin-email-add { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(520px,1.3fr); gap:28px; align-items:end; padding:18px 20px; }.admin-email-add h2 { margin:0 0 5px; padding:0; border:0; }.admin-email-add-copy p { margin:0; color:var(--c-text-sub); font-size:12px; line-height:1.7; }.admin-email-add-form { display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,1fr) auto; gap:10px; align-items:end; }.admin-email-add-form .field { margin:0; }.admin-email-add-form input { min-height:40px; }.admin-email-add-submit { padding-bottom:3px; }.admin-email-add-submit .btn { white-space:nowrap; }
@media (max-width:1050px) { .admin-email-add { grid-template-columns:1fr; gap:14px; }.admin-email-add-form { grid-template-columns:1fr 1fr auto; } }
@media (max-width:700px) { .admin-email-add-form { grid-template-columns:1fr; }.admin-email-add-submit { padding:0; }.admin-email-add-submit .btn { width:100%; min-height:42px; } }
.bulk-action-bar { display:flex; align-items:end; gap:10px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--c-border); border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(23,34,53,.04); }.bulk-action-bar .field { margin:0; }.bulk-action-bar select { width:170px; min-height:38px; }.bulk-reason-field { flex:1 1 280px; }.bulk-reason-field input { min-height:38px; }.bulk-selection-count { align-self:center; min-width:72px; color:var(--c-text-sub); font-size:12px; white-space:nowrap; }.bulk-selection-count strong { color:var(--c-primary); font-size:18px; }.bulk-action-submit { padding-bottom:3px; }.select-cell { width:38px; min-width:38px; text-align:center!important; }.select-cell input { width:17px; height:17px; accent-color:var(--c-primary); cursor:pointer; }
@media (max-width:760px) { .bulk-action-bar { align-items:stretch; flex-wrap:wrap; }.bulk-selection-count { width:100%; }.bulk-action-bar .field { flex:1 1 100%; }.bulk-action-bar select { width:100%; }.bulk-action-submit .btn { width:100%; min-height:42px; } }
.bulk-action-bar { display:grid; grid-template-columns:150px minmax(170px,210px) minmax(260px,1fr) auto; align-items:end; gap:14px; margin:24px 0 0; padding:18px 20px; border:1px solid #dce2ea; border-radius:14px; background:#f8fafc; box-shadow:none; transition:border-color .15s,background .15s,box-shadow .15s; }.bulk-action-bar.has-selection { border-color:#aebed3; background:#fff; box-shadow:0 8px 28px rgba(23,34,53,.06); }.bulk-action-heading { align-self:center; }.bulk-action-heading>span { display:block; margin-bottom:4px; color:var(--c-text); font-size:14px; font-weight:700; }.bulk-action-bar .bulk-selection-count { min-width:0; }.bulk-action-buttons { display:flex; align-items:center; gap:8px; padding-bottom:3px; }.bulk-action-buttons .btn { white-space:nowrap; }.bulk-action-bar select:disabled,.bulk-action-bar input:disabled { cursor:not-allowed; background:#f1f3f6; color:#9aa3af; }.bulk-action-bar .btn:disabled { transform:none; box-shadow:none; }
@media (max-width:1050px) { .bulk-action-bar { grid-template-columns:130px minmax(170px,200px) 1fr; }.bulk-action-buttons { grid-column:2/-1; justify-content:flex-end; } }
@media (max-width:700px) { .bulk-action-bar { grid-template-columns:1fr; gap:12px; padding:16px; }.bulk-action-heading,.bulk-action-buttons { grid-column:auto; }.bulk-action-buttons { display:grid; grid-template-columns:1fr 1.4fr; }.bulk-action-buttons .btn { width:100%; min-height:42px; } }