/* ==========================================================================
   OmniView Ads — Landing Page
   Design system: financial / security SaaS
   Palette: deep navy base, confident blue (brand), muted teal (secure),
            success green (comparison only), muted amber (attention only).
   Type: Inter (latin / numerals) + Noto Sans JP (japanese), tabular numerals.
   ========================================================================== */

:root {
  /* Navy scale */
  --navy-900: #0A1A2F;
  --navy-850: #0C2038;
  --navy-800: #0F2743;
  --navy-700: #16324F;
  --navy-600: #21456B;

  /* Brand blue */
  --brand: #2563EB;
  --brand-600: #1D4ED8;
  --brand-700: #1E40AF;
  --brand-050: #EAF1FE;
  --brand-100: #D7E4FD;

  /* Secondary accents */
  --teal: #14A89A;          /* secure / "守る" */
  --teal-700: #0F766E;
  --teal-050: #E6F6F4;
  --green: #0E9F6E;         /* comparison ✓ */
  --amber: #B26B12;         /* attention / risk (muted, never flashy red) */
  --amber-050: #FBF2E6;

  /* Neutrals */
  --paper: #FFFFFF;
  --mist: #F5F8FC;
  --mist-2: #EDF2F8;
  --line: #E4EAF2;
  --line-2: #D5DEEA;

  /* Text */
  --ink: #0E2036;
  --ink-2: #33445B;
  --muted: #5E708A;
  --muted-2: #8496AE;
  --on-dark: #EAF1FA;
  --on-dark-muted: #9DB2CC;

  /* System */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16,32,54,.06), 0 1px 3px rgba(16,32,54,.05);
  --shadow: 0 10px 30px -12px rgba(16,32,54,.18), 0 4px 12px -6px rgba(16,32,54,.10);
  --shadow-lg: 0 40px 80px -30px rgba(8,20,40,.45), 0 16px 40px -20px rgba(8,20,40,.30);
  --maxw: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);

  --font: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

.section { padding: clamp(64px, 8vw, 108px) 0; position: relative; }
.section--mist { background: var(--mist); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); }
.section--dark {
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 500px at 8% 110%, rgba(20,168,154,.16), transparent 55%),
    var(--navy-900);
  color: var(--on-dark);
}
.section--dark .lead { color: var(--on-dark-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-600);
  margin: 0 0 14px;
}
.section--dark .eyebrow { color: #7FB0FF; }
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .5;
}
.eyebrow--center { justify-content: center; }

.h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.35; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 18px; color: inherit;
}
.section--dark .h2 { color: #fff; }
.lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--muted); max-width: 56ch; margin: 0 0 8px;
}
.head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 52px); }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .lead { margin-left: auto; margin-right: auto; }

.accent { color: var(--brand-600); }
.section--dark .accent { color: #8CB6FF; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 15px 24px; border-radius: 11px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.55);
}
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(37,99,235,.6); }
.btn--ghost {
  background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-600); background: var(--brand-050); }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.section--dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.10); }
.btn--lg { padding: 18px 32px; font-size: 1.05rem; border-radius: 12px; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { height: 28px; width: auto; flex-shrink: 0; display: block; object-fit: contain; }
.brand__name { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); }
.brand__name .v { color: var(--brand); }
.nav { display: flex; align-items: center; gap: 26px; margin-left: 14px; }
.nav a { font-size: .92rem; font-weight: 600; color: var(--ink-2); transition: color .15s; }
.nav a:hover { color: var(--brand-600); }
.header__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header__cta .btn { padding: 11px 18px; font-size: .9rem; }
.navtoggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(37,99,235,.28), transparent 58%),
    radial-gradient(900px 560px at 4% 8%, rgba(20,168,154,.16), transparent 52%),
    linear-gradient(180deg, var(--navy-900), var(--navy-850) 70%, var(--navy-800));
  color: var(--on-dark);
  padding: clamp(52px, 7vw, 84px) 0 0;
}
.hero::before { /* subtle converging grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1000px 600px at 70% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(1000px 600px at 70% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; }
.hero .eyebrow { color: #86B2FF; justify-content: center; }
.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  line-height: 1.24; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 20px; color: #fff;
}
.hero h1 .hl { color: #7FB0FF; }
.hero__sub { font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--on-dark-muted); max-width: 60ch; margin: 0 auto 14px; }
.hero__sub strong { color: #DCE8FA; font-weight: 600; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 30px 0 18px; }
.hero__ctanote { font-size: .84rem; color: var(--on-dark-muted); max-width: 44ch; margin: 0 auto; }

.hero__badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin: 30px auto 0; max-width: 820px;
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: #CFE0F5;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: 7px 13px; border-radius: 999px;
}
.pill svg { width: 14px; height: 14px; color: var(--teal); }
.pill--blue svg { color: #7FB0FF; }

/* App window (dashboard demo) */
.window {
  position: relative; z-index: 2;
  margin: clamp(40px, 6vw, 64px) auto 0; max-width: 1120px;
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: #fff;
  transform: translateY(clamp(24px, 4vw, 46px));
}
.window__bar {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px;
  background: #0E1D30; border-bottom: 1px solid rgba(255,255,255,.06);
}
.window__dots { display: flex; gap: 7px; }
.window__dots i { width: 11px; height: 11px; border-radius: 50%; background: #33465e; }
.window__url {
  margin-left: 12px; font-size: .78rem; color: #9DB2CC;
  background: #0A1626; border: 1px solid rgba(255,255,255,.08);
  padding: 5px 14px; border-radius: 7px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 7px;
}
.window__url svg { width: 12px; height: 12px; color: var(--teal); }
.window__shot { display: block; width: 100%; }
.window__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; color: #fff;
  background: rgba(10,22,40,.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14); padding: 6px 11px; border-radius: 8px;
}
.window__cap svg { width: 13px; height: 13px; color: var(--teal); }
.hero__spacer { height: clamp(24px, 4vw, 46px); background: var(--paper); }

/* Trust strip (logos-of-value under hero) */
.truststrip { background: var(--paper); border-bottom: 1px solid var(--line); }
.truststrip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 26px; padding: 22px 24px;
}
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.trust-item svg { width: 17px; height: 17px; color: var(--teal-700); }
.trust-sep { width: 1px; height: 18px; background: var(--line-2); }

/* ---------- Demo detail ---------- */
.demo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.demo-shot {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: #fff;
}
.demo-shot img { width: 100%; }
.demo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.demo-points li { display: flex; gap: 14px; }
.demo-points .ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; background: var(--brand-050); color: var(--brand-600);
}
.demo-points .ic svg { width: 20px; height: 20px; }
.demo-points h3 { margin: 2px 0 4px; font-size: 1.02rem; font-weight: 700; }
.demo-points p { margin: 0; font-size: .95rem; color: var(--muted); }

/* ---------- Checklist (problem) ---------- */
.checklist {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px;
  margin: 0 0 30px; padding: 0; list-style: none;
}
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .96rem; font-weight: 500;
}
.section--mist .checklist li { background: #fff; }
.checklist svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted-2); margin-top: 1px; }
.close {
  border-left: 3px solid var(--brand); background: var(--brand-050);
  padding: 20px 24px; border-radius: 0 12px 12px 0; font-size: 1.05rem; font-weight: 600; color: var(--ink);
}

/* ---------- Risk cards ---------- */
.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.risk-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.section--mist .risk-card { background: #fff; }
.risk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.risk-card .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--amber-050); color: var(--amber); margin-bottom: 14px;
}
.risk-card .ic svg { width: 22px; height: 22px; }
.risk-card h3 { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.5; }

/* ---------- Benefits ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.benefit-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.benefit-card .ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-050), #E8F5F3); color: var(--brand-600); margin-bottom: 16px;
}
.benefit-card .ic svg { width: 24px; height: 24px; }
.benefit-card h3 { margin: 0 0 7px; font-size: 1.06rem; font-weight: 700; }
.benefit-card p { margin: 0; font-size: .93rem; color: var(--muted); }

/* ---------- Tables (features / compare / referral) ---------- */
.tablecard {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); background: #fff;
}
.dtable { width: 100%; border-collapse: collapse; font-size: .96rem; }
.dtable th, .dtable td { text-align: left; padding: 17px 22px; vertical-align: middle; }
.dtable thead th {
  background: var(--navy-900); color: #fff; font-weight: 700; font-size: .92rem;
  letter-spacing: .01em;
}
.dtable tbody tr + tr { border-top: 1px solid var(--line); }
.dtable tbody tr:nth-child(even) { background: var(--mist); }
.dtable .k { font-weight: 700; color: var(--ink); width: 34%; }
.dtable .desc { color: var(--ink-2); }

/* Comparison */
.ctable thead th:nth-child(2) { background: var(--brand-700); position: relative; }
.ctable .own-head { display: inline-flex; align-items: center; gap: 8px; }
.ctable .own-head svg { width: 16px; height: 16px; }
.ctable td.own {
  background: var(--brand-050) !important; font-weight: 600; color: var(--ink);
  box-shadow: inset 3px 0 0 var(--brand), inset -3px 0 0 var(--brand);
}
.ctable tbody tr:nth-child(even) td.own { background: #E1EDFE !important; }
.ctable .yes { display: inline-flex; align-items: center; gap: 7px; color: var(--teal-700); font-weight: 700; }
.ctable .yes svg { width: 16px; height: 16px; color: var(--green); }
.ctable .maybe { color: var(--muted); }
.ctable .k { width: 30%; }
.ctable td:nth-child(3) { color: var(--muted); }

/* Referral */
.rtable td.res { font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.rtable td.off { color: var(--teal-700); font-weight: 700; font-variant-numeric: tabular-nums; }
.rtable tbody tr:last-child { background: var(--brand-050); }
.rtable tbody tr:last-child td.res { color: var(--green); }
.rtable .free-tag {
  display: inline-block; margin-left: 8px; font-size: .72rem; font-weight: 700;
  background: var(--green); color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}

.notecard {
  display: flex; gap: 12px; margin-top: 20px; padding: 18px 20px;
  background: var(--mist); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0; font-size: .93rem; color: var(--ink-2);
}
.notecard svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--brand-600); margin-top: 2px; }
.section--dark .notecard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); border-left-color: var(--teal); color: var(--on-dark-muted); }
.section--dark .notecard svg { color: var(--teal); }

/* ---------- Cases ---------- */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.case-tag {
  align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--brand-700); background: var(--brand-050); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}
.case-tag.media { color: var(--teal-700); background: var(--teal-050); }
.case-metric { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.case-metric .up { color: var(--green); }
.case-card p { margin: 0; font-size: .93rem; color: var(--muted); }
.disclaimer { margin-top: 22px; font-size: .82rem; color: var(--muted-2); }

/* ---------- Security (dark) ---------- */
.secure-lead {
  max-width: 760px; font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--on-dark-muted);
  margin: 0 0 clamp(30px, 4vw, 46px);
}
.secure-lead b { color: #DCE8FA; font-weight: 600; }
.secure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.secure-item {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 22px 22px;
}
.secure-item .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(20,168,154,.16); color: var(--teal); margin-bottom: 13px;
}
.secure-item .ic svg { width: 21px; height: 21px; }
.secure-item h3 { margin: 0 0 6px; font-size: 1.0rem; font-weight: 700; color: #fff; }
.secure-item p { margin: 0; font-size: .9rem; color: var(--on-dark-muted); line-height: 1.7; }

/* two-password clarifier */
.pwbox {
  margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.pwcol {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px;
}
.pwcol h4 { margin: 0 0 6px; font-size: 1.02rem; color: #fff; display: flex; align-items: center; gap: 9px; }
.pwcol h4 svg { width: 18px; height: 18px; color: var(--teal); }
.pwcol .tag { font-size: .76rem; font-weight: 700; color: #7FB0FF; letter-spacing: .04em; }
.pwcol p { margin: 8px 0 0; font-size: .9rem; color: var(--on-dark-muted); }

.secbar {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
  padding: 18px 22px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
}
.secbar .lbl { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7FB0FF; }
.secbar .it { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #DCE8FA; }
.secbar .it svg { width: 16px; height: 16px; color: var(--teal); }
.secbar__note { flex-basis: 100%; font-size: .8rem; color: var(--on-dark-muted); margin: 0; }

/* ---------- Company card ---------- */
.company {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px;
  margin-top: 20px; padding: 18px 24px; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); background: rgba(255,255,255,.04);
}
.company .role { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.company .name { font-size: 1.06rem; font-weight: 700; color: #fff; }
.company .tail { font-size: .88rem; color: var(--on-dark-muted); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.price-card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.price-card__top { padding: 30px 32px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--mist)); }
.price-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700;
  color: var(--teal-700); background: var(--teal-050); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.price-badge svg { width: 14px; height: 14px; }
.price-amount { display: flex; align-items: baseline; gap: 4px; }
.price-amount .cur { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.price-amount .num { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-amount .per { font-size: 1.05rem; color: var(--muted); font-weight: 600; }
.price-sub { margin: 6px 0 0; font-size: .92rem; color: var(--muted); }
.price-card__body { padding: 26px 32px 30px; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; }
.price-list svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
.price-fine {
  margin-top: 20px; padding: 16px 18px; background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .84rem; color: var(--ink-2); line-height: 1.7;
}
.price-fine b { color: var(--ink); }

/* ROI calculator */
.roi {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-850));
  color: var(--on-dark); border-radius: var(--radius-lg); padding: 30px 30px 32px;
  box-shadow: var(--shadow);
}
.roi h3 { margin: 0 0 6px; font-size: 1.18rem; color: #fff; display: flex; align-items: center; gap: 9px; }
.roi h3 svg { width: 20px; height: 20px; color: var(--teal); }
.roi__sub { margin: 0 0 20px; font-size: .86rem; color: var(--on-dark-muted); }
.roi-field { margin-bottom: 18px; }
.roi-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; font-weight: 600; color: #DCE8FA; margin-bottom: 9px; }
.roi-field label .val { font-size: 1.02rem; font-weight: 800; color: #7FB0FF; font-variant-numeric: tabular-nums; }
.roi input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.16); outline: none;
}
.roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer;
}
.roi input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; cursor: pointer;
}
.roi-out {
  margin-top: 24px; padding: 22px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.roi-out__row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: .92rem; color: var(--on-dark-muted); }
.roi-out__row b { font-size: 1.24rem; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.roi-out__net {
  margin-top: 14px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.roi-out__net span { font-size: .92rem; font-weight: 700; color: #DCE8FA; }
.roi-out__net b { font-size: 1.7rem; font-weight: 800; color: #48D6A0; font-variant-numeric: tabular-nums; }
.roi-out__net b.neg { color: #FFB27F; }
.roi__disc { margin: 14px 0 0; font-size: .76rem; color: var(--on-dark-muted); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 22px; box-shadow: var(--shadow-sm);
}
.section--mist .step { background: #fff; }
.step__n {
  position: absolute; top: -16px; left: 22px; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 14px -6px rgba(37,99,235,.6); font-variant-numeric: tabular-nums;
}
.step h3 { margin: 12px 0 4px; font-size: 1.0rem; font-weight: 700; }
.step p { margin: 0; font-size: .88rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 20px 22px; background: none; border: 0; font-size: 1.0rem; font-weight: 700; color: var(--ink);
}
.faq-q .qmark { color: var(--brand); font-weight: 800; flex-shrink: 0; }
.faq-q .chev { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; color: var(--muted-2); transition: transform .25s ease; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--brand); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a__inner { padding: 0 22px 20px 50px; font-size: .95rem; color: var(--ink-2); line-height: 1.8; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final .h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.final__lead { max-width: 620px; margin: 0 auto 30px; color: var(--on-dark-muted); font-size: 1.05rem; }
.final .hero__cta { margin-top: 6px; }
.final__badges { margin-top: 26px; }

/* ---------- Form ---------- */
.formcard {
  max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(26px, 4vw, 44px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.req { color: #C2410C; font-size: .74rem; font-weight: 700; margin-left: 6px; }
.opt { color: var(--muted-2); font-size: .74rem; font-weight: 600; margin-left: 6px; }
.input, .select, .textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-2); border-radius: 10px;
  font-family: inherit; font-size: .96rem; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.textarea { resize: vertical; min-height: 96px; }
.form-actions { margin-top: 26px; }
.form-note { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.form-note svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--teal-700); margin-top: 2px; }

/* radio pills */
.radiorow { display: flex; flex-wrap: wrap; gap: 10px; }
.radiopill { position: relative; }
.radiopill input { position: absolute; opacity: 0; }
.radiopill span {
  display: inline-block; padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: all .15s;
}
.radiopill input:checked + span { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: var(--on-dark-muted); padding: 54px 0 30px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .brand__name { color: #fff; }
.footer__desc { max-width: 400px; font-size: .9rem; margin: 14px 0 0; line-height: 1.8; }
.footer__co { font-size: .88rem; }
.footer__co .role { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 4px; }
.footer__co .name { color: #fff; font-weight: 700; font-size: 1.0rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; }
.footer__links a { font-size: .86rem; color: var(--on-dark-muted); transition: color .15s; }
.footer__links a:hover { color: #fff; }
.footer__bottom { padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--muted-2); }

/* ---------- Sticky mobile CTA ---------- */
.mobilecta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); gap: 10px;
}
.mobilecta .btn { flex: 1; padding: 14px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-grid .demo-shot { order: -1; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pwbox { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .header__cta .btn--ghost { display: none; }
  .navtoggle {
    display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto;
    border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink);
  }
  .navtoggle svg { width: 22px; height: 22px; }
  .header__cta { margin-left: 0; }
  .header__cta .btn { display: none; }

  /* mobile drawer */
  .mobilenav {
    position: fixed; inset: 68px 0 auto 0; z-index: 55; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none; flex-direction: column; padding: 12px 24px 22px;
  }
  .mobilenav.open { display: flex; }
  .mobilenav a { padding: 13px 4px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mobilenav .btn { margin-top: 14px; }

  .mobilecta { display: flex; }
  body { padding-bottom: 74px; }
}

@media (max-width: 720px) {
  .pcbr { display: none; }
  .checklist { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .trust-sep { display: none; }
  .hero__cta .btn { width: 100%; }

  /* Stacking tables into cards on small screens */
  .dtable, .dtable thead, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable thead { display: none; }
  .dtable tbody tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; padding: 6px 4px; }
  .dtable tbody tr:nth-child(even) { background: #fff; }
  .dtable td { padding: 10px 16px; border: 0 !important; box-shadow: none !important; }
  .dtable td::before {
    content: attr(data-label); display: block; font-size: .74rem; font-weight: 700;
    letter-spacing: .04em; color: var(--muted-2); margin-bottom: 3px; text-transform: uppercase;
  }
  .dtable .k { width: auto; }
  .ctable td.own { box-shadow: inset 3px 0 0 var(--brand) !important; border-radius: 0 0 0 0; }
  .ctable td.own::before { color: var(--brand-600); }
  .rtable tbody tr { padding: 10px 8px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .window { border-radius: 12px; }
  .window__url { display: none; }
  .brand__name { font-size: 1rem; }
  .roi, .price-card__body, .price-card__top { padding-left: 22px; padding-right: 22px; }
}

/* ==========================================================================
   DECOR & ILLUSTRATION LAYER (あしらい・挿絵)
   ========================================================================== */

/* keep decorative layers behind content but allow section clipping */
.section { overflow: clip; }
.section--dark, .hero, .final { isolation: isolate; }

/* --- soft gradient blobs / orbs --- */
.blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .55; z-index: 0; pointer-events: none; }
.blob--blue  { background: radial-gradient(circle at 30% 30%, #6FA8FF, #2563EB 70%); }
.blob--teal  { background: radial-gradient(circle at 30% 30%, #57D6C7, #14A89A 70%); }
.blob--sage  { background: radial-gradient(circle at 30% 30%, #B7CBA8, #8FA68E 70%); }
.blob--amber { background: radial-gradient(circle at 30% 30%, #F3C98B, #D9902F 70%); }
.section--dark .blob, .hero .blob, .final .blob { opacity: .38; }

/* --- scattered mini shapes --- */
.deco { position: absolute; z-index: 0; pointer-events: none; opacity: .8; }
.deco-ring { border-radius: 50%; border: 2px solid var(--brand-100); }
.deco-ring.teal { border-color: #BEEAE4; }
.deco-dot { border-radius: 50%; background: var(--brand-100); }
.deco-plus { color: var(--brand-100); font-weight: 700; line-height: 1; }
.deco-dots-svg { position: absolute; z-index: 0; pointer-events: none; opacity: .5; }
.section--dark .deco-ring { border-color: rgba(127,176,255,.32); }
.section--dark .deco-plus { color: rgba(127,176,255,.4); }

/* --- heading highlighter / marker (あしらい) --- */
.mark {
  background: linear-gradient(transparent 58%, rgba(20,168,154,.30) 58%, rgba(20,168,154,.30) 92%, transparent 92%);
  padding: 0 .06em; border-radius: 2px;
}
.mark--blue { background: linear-gradient(transparent 58%, rgba(37,99,235,.22) 58%, rgba(37,99,235,.22) 92%, transparent 92%); }
.section--dark .mark { background: linear-gradient(transparent 58%, rgba(20,168,154,.42) 58%, rgba(20,168,154,.42) 92%, transparent 92%); }
/* squiggle underline under accent word */
.squig { position: relative; white-space: nowrap; }
.squig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'><path d='M1 5 Q 8 1 15 5 T 29 5 T 43 5 T 57 5' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round'/></svg>") repeat-x;
  background-size: 60px 8px; opacity: .8;
}

/* eyebrow chip variant (pill-like) */
.eyebrow.chip {
  background: var(--brand-050); color: var(--brand-700); padding: 7px 14px 7px 12px;
  border-radius: 999px; margin-bottom: 18px;
}
.eyebrow.chip::before { display: none; }
.eyebrow.chip svg { width: 15px; height: 15px; }
.section--dark .eyebrow.chip { background: rgba(127,176,255,.14); color: #A9C8FF; }

/* --- hero floating accent chips --- */
.float-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  padding: 11px 15px; border-radius: 14px; box-shadow: var(--shadow-lg);
  font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.float-chip .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.float-chip .ic svg { width: 17px; height: 17px; }
.float-chip small { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); }
.float-chip .ic.blue { background: var(--brand-050); color: var(--brand-600); }
.float-chip .ic.teal { background: var(--teal-050); color: var(--teal-700); }
.float-chip .ic.sage { background: #EDF2E9; color: #5F7A5A; }
.chip-a { top: 8%; left: -2%; transform: rotate(-4deg); animation: floaty 6s ease-in-out infinite; }
.chip-b { top: 34%; right: -1%; transform: rotate(3deg); animation: floaty 7s ease-in-out infinite .6s; }
.chip-c { bottom: 12%; left: 3%; transform: rotate(2deg); animation: floaty 6.5s ease-in-out infinite .3s; }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (prefers-reduced-motion: reduce) { .float-chip { animation: none !important; } }

/* --- stats band --- */
.stats-band { position: relative; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg); padding: 40px 30px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 22px 22px; opacity: .6;
}
.stat { position: relative; text-align: center; padding: 0 8px; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.12); }
.stat__num {
  font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  background: linear-gradient(180deg, #fff, #A9C8FF); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums;
}
.stat__num .u { font-size: .5em; -webkit-text-fill-color: #7FB0FF; }
.stat__label { margin-top: 8px; font-size: .86rem; color: var(--on-dark-muted); font-weight: 600; }
.stats__note { text-align: center; margin: 14px 0 0; font-size: .78rem; color: var(--muted-2); }

/* --- illustrated feature rows (alternating) --- */
.featrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.featrow + .featrow { margin-top: clamp(40px, 6vw, 80px); }
.featrow--flip .featrow__art { order: 2; }
.featrow__art { position: relative; }
.featrow__art .spot { width: 100%; height: auto; display: block; }
.featrow__badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800;
  color: var(--brand-700); background: var(--brand-050); padding: 6px 13px; border-radius: 999px; margin-bottom: 14px;
}
.featrow__badge.teal { color: var(--teal-700); background: var(--teal-050); }
.featrow h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.45; margin: 0 0 12px; }
.featrow p { color: var(--muted); font-size: 1rem; margin: 0; }

/* generic spot illustration frame */
.spot-wrap { position: relative; }
.spot-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px;
}

/* --- quote / testimonial cards --- */
.quote-card { position: relative; }
.quote-card::before {
  content: "\201C"; position: absolute; top: 6px; right: 20px;
  font-size: 4.4rem; line-height: 1; color: var(--brand-100); font-family: Georgia, serif;
}
.quote-head { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 1rem; flex-shrink: 0;
}
.avatar.b1 { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.avatar.b2 { background: linear-gradient(135deg, #14A89A, #0F766E); }
.avatar.b3 { background: linear-gradient(135deg, #8FA68E, #5F7A5A); }
.quote-head .who { font-size: .85rem; color: var(--muted); }
.quote-head .who b { display: block; color: var(--ink); font-size: .92rem; }

/* --- section wave divider --- */
.wave { display: block; width: 100%; height: 60px; }
.wave path { fill: currentColor; }

/* --- illustrated steps path --- */
.steps { position: relative; }
.step .step-ic { width: 34px; height: 34px; color: var(--brand); margin-top: 6px; }
.step .step-ic svg { width: 100%; height: 100%; }

/* --- security "vault" illustration accents --- */
.sec-illus { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,52px); align-items: center; margin-bottom: clamp(30px,4vw,48px); }

/* small inline "sticker" badges for cards */
.sticker {
  position: absolute; top: -12px; right: -8px; transform: rotate(8deg);
  background: var(--amber); color: #fff; font-size: .7rem; font-weight: 800;
  padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}

/* responsive */
@media (max-width: 900px) {
  .featrow, .sec-illus { grid-template-columns: 1fr; }
  .featrow--flip .featrow__art { order: 0; }
  .featrow__art { max-width: 460px; margin-inline: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; padding: 32px 22px; }
  .stat:nth-child(3)::before, .stat:nth-child(4)::before { display: none; }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 560px) {
  .float-chip { display: none; }   /* declutter hero on small screens */
  .stats { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat + .stat { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
}

/* ==========================================================================
   HERO / CONTROL FIXES (post-review)
   ========================================================================== */

/* (1) mobile drawer must be hidden on desktop (base), only the media query turns it into a drawer */
.mobilenav { display: none; }

/* (2) ghost buttons on dark backgrounds (hero + final CTA) need light text/border */
.hero .btn--ghost,
.final .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.05);
}
.hero .btn--ghost:hover,
.final .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,.12);
}

/* (3) reposition floating accent chips so they sit at 3 distinct edges and never
       collide with each other or the bottom-left caption; show only on roomy desktop */
.chip-a { top: -3%;  left: 1%;   right: auto; bottom: auto; transform: rotate(-3deg); }
.chip-b { top: 27%;  right: -2%; left: auto;  bottom: auto; transform: rotate(3deg); }
.chip-c { top: auto; left: auto; right: 1%;   bottom: 7%;  transform: rotate(2deg); }
@media (max-width: 1024px) { .float-chip { display: none; } }

/* (4) refined, subtle brand motif replacing the old +/ring shapes */
.hero__motif {
  position: absolute; z-index: 1; pointer-events: none;
  width: 210px; height: auto; top: 92px; right: 5%;
  opacity: .16;
}
@media (max-width: 900px) { .hero__motif { display: none; } }

/* ==========================================================================
   REVISION FIXES (round 2)
   ========================================================================== */

/* #5 dashboard image was too tall — cap its height and show the top portion */
.window__shot { max-height: 560px; object-fit: cover; object-position: top center; }
@media (max-width: 720px) { .window__shot { max-height: 340px; } }

/* #12/#13 ROI removed — center the single pricing card */
.pricing-grid { grid-template-columns: minmax(0, 660px); justify-content: center; }

/* ==========================================================================
   REVISION FIXES (round 3)
   ========================================================================== */

/* #R3-1 pricing subcopy must not wrap on desktop; allow natural wrap on mobile */
.lead--nowrap { white-space: nowrap; max-width: none; }
@media (max-width: 640px) { .lead--nowrap { white-space: normal; } }

/* #R3-2 the single price card sat small in a wide band — enlarge & give it more
   presence so it reads as the primary "cost display" */
.pricing-grid { grid-template-columns: minmax(0, 760px); }
.price-card__top { padding: 38px 40px 30px; }
.price-card__body { padding: 30px 40px 36px; }
.price-amount .num { font-size: clamp(3rem, 6.4vw, 4.1rem); }
.price-amount .cur { font-size: 1.9rem; }
.price-amount .per { font-size: 1.2rem; }
.price-sub { font-size: 1rem; margin-top: 10px; }
.price-badge { font-size: .92rem; }
.price-list li { font-size: 1.02rem; }
@media (max-width: 720px) {
  .price-card__top { padding: 26px 22px 22px; }
  .price-card__body { padding: 24px 22px 28px; }
}

/* #R3-3 cost-display table below the card (referral / 実質月額) was too small —
   enlarge rows, figures and the "実質月額" column */
.rtable { font-size: 1.05rem; }
.rtable th, .rtable td { padding: 20px 26px; }
.rtable thead th { font-size: 1rem; }
.rtable td.res { font-size: 1.28rem; }
.rtable td.off { font-size: 1.06rem; }
.rtable .k { font-size: 1.1rem; }
@media (max-width: 720px) {
  .rtable th, .rtable td { padding: 12px 16px; }
  .rtable td.res { font-size: 1.15rem; }
}

/* #R3-4 main visual: relax the vertical rhythm so the hero breathes a little more
   and the dashboard isn't crowded against the text block */
.hero { padding-top: clamp(60px, 7.5vw, 96px); }
.hero h1 { margin-bottom: 22px; }
.hero__sub { margin-bottom: 20px; }
.hero__cta { margin: 34px 0 20px; }
.hero__badges { margin-top: 26px; }
.window { margin-top: clamp(52px, 6.5vw, 76px); }

/* ==========================================================================
   REVISION FIXES (round 4)
   ========================================================================== */

/* #R4-1 dashboard image removed from hero — hero is now text-only, so give it a
   proper bottom padding and drop the spacer that used to offset the app window */
.hero { padding-bottom: clamp(56px, 7vw, 92px); }
.hero__spacer { display: none; }

/* #R4-2 feature-row badges ("毎日の課題" / "放置するリスク") must stay on one line */
.featrow__badge { white-space: nowrap; }

/* ==========================================================================
   REVISION FIXES (round 5)
   ========================================================================== */

/* #R5-1 bulletproof single-line badges across browsers.
   the badge SVGs had no width/height (viewBox only) and could render at the
   browser default size on some browsers, breaking the badge layout — pin them. */
.featrow__badge { white-space: nowrap !important; flex-wrap: nowrap; }
.featrow__badge svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ==========================================================================
   REVISION FIXES (round 6)
   ========================================================================== */

/* #R6-1 ONE DASHBOARD section — place the screenshot on the right (text left).
   on mobile the existing rule keeps it stacked below the text. */
.demo-shot { order: 2; }

/* #R6-2 steps: more breathing room between the icon and the label/text */
.step .step-ic { margin-bottom: 8px; }
.step h3 { margin-top: 20px; }

/* #R5-2 hero pills removed — match the gap beneath the CTA to the gap above the
   eyebrow (i.e. hero padding-bottom == hero padding-top) */
.hero__cta { margin: 34px 0 0; }
.hero { padding-bottom: clamp(60px, 7.5vw, 96px); }

/* ==========================================================================
   REVISION FIXES (round 7)
   ========================================================================== */

/* #R7-1 steps: the icon was ballooning to fill the card.
   .step-ic is an inline <span>, so its width/height:34px was ignored and the
   inner <svg> (width/height:100%) resolved against the whole card. Pin the box
   with flex + give the svg an explicit pixel size (same pattern as the badge
   fix in R5-1). Also tidy the spacing between the icon and the heading. */
.step .step-ic {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 4px 0 12px;
}
.step .step-ic svg { width: 24px; height: 24px; flex-shrink: 0; }
.step h3 { margin-top: 0; }

/* #R7-2 mobile header: keep the hamburger flush to the right edge.
   the base mobile rule reset .header__cta to margin-left:0, which pinned the
   toggle next to the brand — restore auto so it sits at the far right. */
@media (max-width: 860px) {
  .header__cta { margin-left: auto; }
}

/* ==========================================================================
   REVISION FIXES (round 8)
   ========================================================================== */

/* #R8-1 CRITICAL — reveal-on-scroll must never leave text invisible.
   .reveal starts at opacity:0 and relies on JS to add .in. If JS fails to run
   (error, blocked, or the scroll observer skips an element on a fast flick),
   the content stayed hidden. Gate the hidden state behind html.js so that,
   without JS, every .reveal is shown immediately. The head sets html.js before
   paint, so there is no flash when JS is present. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   REVISION FIXES (round 9)
   ========================================================================== */

/* #R9-1 consent checkbox above the submit button.
   Custom-styled to match the brand; the "個人情報の取り扱い" link points to the
   privacy policy and opens in a new tab so form input isn't lost. */
.consent {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 16px; cursor: pointer;
  font-size: .9rem; line-height: 1.65; color: var(--ink-2);
}
.consent .consent__box {
  appearance: none; -webkit-appearance: none;
  position: relative; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--line-2); border-radius: 6px; background: #fff;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.consent .consent__box:hover { border-color: var(--brand); }
.consent .consent__box:checked { background: var(--brand); border-color: var(--brand); }
.consent .consent__box:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent .consent__box:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent .consent__text { user-select: none; padding-top: 1px; }
.consent .consent__text a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.consent .consent__text a:hover { color: var(--brand-600); }