/* Home page, design "C · Editorial" (Ugur, 2026-10-18). Linked by Home.cshtml only, after
   site.css, whose tokens it uses: site.css is part of the calculator page shell (the freshness
   gate dates every calculator page by it), so the home page's rules live here, as the category
   page's live in category.css. The design's colours are the site's own tokens (--ink, --muted,
   --line, --accent, --brand-navy, --brand-teal); its fonts are the self-hosted Inter and Fraunces. */

body.home { background:var(--surface); }
.home main.hp { max-width:none; margin:0; padding:0; }
.hp-wrap { max-width:1080px; margin:0 auto; padding:0 22px; }
.hp-teal { color:var(--brand-teal); }
.hp-kicker { margin:0; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-teal); }
.hp-num { font-family:var(--font-display); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.hp-muted-link { color:var(--muted); }
.hp-muted-link:hover { color:var(--ink); text-decoration:underline; }
.hp-small { font-size:.82rem; }
.hp a:focus-visible, .hp button:focus-visible, .hp input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Hero: the claim and search, beside the featured calculator ---- */
.hp-hero-grid { display:flex; flex-wrap:wrap; align-items:center; gap:44px 52px; padding-top:64px; padding-bottom:72px; }
.hp-hero-text { flex:3 1 480px; min-width:0; }
.hp-hero h1 { margin:18px 0 0; font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.02; letter-spacing:-.025em; color:var(--ink); }
.hp-lede { margin:24px 0 0; max-width:36rem; font-size:1.15rem; line-height:1.6; color:#3f4757; }
.hp-search { margin:32px 0 0; max-width:36rem; }
.hp-search label { display:block; margin:0 0 10px; font-size:.88rem; font-weight:600; color:var(--ink); }
.hp-search-row { display:flex; flex-wrap:wrap; gap:10px; }
.hp-search-box { flex:1 1 260px; min-width:0; height:56px; display:flex; align-items:center; gap:10px; padding:0 16px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  color:var(--muted); }
.hp-search-box svg { flex:none; display:block; }
.hp-search-box input { flex:1 1 auto; min-width:0; height:100%; border:0; background:transparent; font:inherit; font-size:1.05rem; color:var(--ink); }
.hp-search-box:focus-within { border-color:var(--accent); }
.hp-search-box input:focus-visible { outline:0; }
.hp-search button { height:56px; padding:0 28px; border:0; border-radius:var(--radius-sm); background:var(--accent); color:#fff;
  font:inherit; font-size:1rem; font-weight:600; cursor:pointer; }
.hp-search button:hover { background:var(--accent-strong); }
.hp-try { margin:20px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hp-try-label { margin-right:4px; font-size:.8rem; font-weight:600; color:var(--muted); }
.hp-try ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.hp-try a { display:inline-block; padding:7px 13px; font-size:.88rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; }
.hp-try a:hover { border-color:var(--line-strong); background:var(--surface); }

/* The card itself is shared with the category pages: featured.css. Only its place in this hero is here. */
.hp-hero-grid .hp-featured { flex:2 1 340px; }

/* ---- Section heads: a rule, an eyebrow, the title, and a note on the right ---- */
.hp-section { padding-bottom:72px; }
.hp-head { border-top:2px solid var(--ink); padding-top:18px; margin-bottom:28px; display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between; gap:12px 40px; }
.hp-head > div { min-width:0; }
.hp-head h2 { margin:8px 0 0; font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4vw, 2.75rem);
  line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.hp-head-note { margin:0; max-width:27rem; font-size:1rem; line-height:1.55; color:var(--muted); }
.hp-more { margin:22px 0 0; }

/* ---- Explore by field ---- */
.hp-fields { display:flex; flex-direction:column; gap:20px; }
.hp-field { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); }
.hp-field svg { display:block; color:var(--brand-teal); }
.hp-field-wide { padding:clamp(20px, 3vw, 34px); display:flex; flex-wrap:wrap; align-items:flex-start; gap:26px 44px; }
.hp-field-id { flex:1 1 220px; min-width:0; }
.hp-field-name { margin:14px 0 0; font-family:var(--font-display); font-weight:600; font-size:2rem; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); }
.hp-field-count { margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:.94rem; color:var(--muted); }
.hp-field-count .hp-num { font-size:2.75rem; }
.hp-field-wide .hp-chips { flex:3 1 480px; }
.hp-fields-compact { display:flex; flex-wrap:wrap; gap:20px; }
.hp-field-small { flex:1 1 280px; padding:28px; }
.hp-field-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hp-field-top > div { min-width:0; }
.hp-field-small .hp-field-name { margin-top:12px; font-size:1.65rem; line-height:1.15; }
.hp-field-count-small { margin:0; display:block; text-align:right; font-size:.8rem; }
.hp-field-count-small .hp-num { display:block; font-size:2.5rem; }
.hp-field-small .hp-chips { margin-top:22px; }
.hp-chips { min-width:0; display:flex; flex-wrap:wrap; align-content:flex-start; gap:10px 8px; margin:0; padding:0; list-style:none; }
.hp-chip { display:inline-flex; align-items:baseline; gap:8px; max-width:100%; padding:8px 14px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:999px; color:var(--ink); font-size:.88rem; font-weight:500; line-height:1.4; }
.hp-chip:hover { border-color:var(--accent); color:var(--accent-strong); }
.hp-chip-count { color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- Starting points: an editorial table ---- */
.hp-table-wrap { overflow-x:auto; }
.hp-table { width:100%; min-width:520px; border-collapse:collapse; }
.hp-table thead th { padding:12px 24px 12px 0; text-align:left; font-size:.75rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--ink); }
.hp-table .hp-col-num { width:72px; }
.hp-table .hp-col-cat { width:34%; }
.hp-table tbody td, .hp-table tbody th { padding:14px 24px 14px 0; border-bottom:1px solid var(--line); vertical-align:middle; text-align:left; }
.hp-table tbody td.hp-num { font-size:1.75rem; }
.hp-table tbody th { font-size:1rem; font-weight:600; }
.hp-table tbody th a { color:var(--ink); }
.hp-table tbody th a:hover { color:var(--accent-strong); text-decoration:underline; }
.hp-table tbody td a { font-size:.94rem; }

/* ---- Just shipped: release groups ---- */
.hp-releases { display:flex; flex-wrap:wrap; gap:40px 0; margin:0; padding:0; list-style:none; }
.hp-release { flex:1 1 400px; min-width:0; position:relative; border-top:2px solid var(--line-strong); padding:28px 40px 0 0; }
.hp-release-dot { position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--surface);
  border:2px solid var(--muted); box-shadow:0 0 0 4px var(--surface); }
.hp-release-latest .hp-release-dot { background:var(--brand-teal); border-color:var(--brand-teal); }
.hp-release-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.hp-release-head h3 { margin:0; font-family:var(--font-display); font-weight:600; font-size:1.6rem; line-height:1.2;
  letter-spacing:-.01em; color:var(--ink); }
.hp-release-label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hp-release-latest .hp-release-label { color:var(--brand-teal); }
.hp-release-count { margin:6px 0 0; font-size:.88rem; color:var(--muted); }
.hp-release-list { margin:20px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.hp-release-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:14px 0; border-bottom:1px solid var(--line); }
.hp-release-name { flex:1 1 220px; min-width:0; font-size:1rem; font-weight:600; color:var(--ink); }
.hp-release-name:hover { color:var(--accent-strong); text-decoration:underline; }
.hp-badge { flex:none; display:inline-block; padding:5px 8px; border-radius:999px; background:var(--brand-teal); color:#fff;
  font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; }

/* ---- Draw it, then calculate: the dark band ---- */
.hp-dark { background:var(--brand-navy); color:#fff; padding-top:76px; padding-bottom:76px; }
.hp-dark .hp-head { border-top-color:#fff; }
.hp-dark .hp-kicker { color:#8fd0d0; }
.hp-dark .hp-head h2 { color:#fff; }
.hp-dark .hp-head-note { color:#c9d1dc; }
.hp-dark a:focus-visible { outline-color:#8fd0d0; }
.hp-draw { display:flex; flex-wrap:wrap; align-items:center; gap:40px 52px; }
.hp-canvas-art { flex:3 1 480px; min-width:0; background:#112539; border:1px solid #213a54; border-radius:var(--radius); padding:16px; }
.hp-canvas-tools { display:flex; gap:6px; margin:0 0 12px; }
.hp-canvas-tools span { width:32px; height:32px; border-radius:8px; border:1px solid #213a54; display:inline-flex;
  align-items:center; justify-content:center; color:#c9d1dc; }
.hp-canvas-tools span.on { background:#1d3550; border-color:#1d3550; color:#fff; }
.hp-canvas-tools svg { display:block; }
.hp-plan { display:block; height:auto; }
.hp-draw-text { flex:2 1 340px; min-width:0; }
.hp-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.hp-steps li { display:flex; align-items:baseline; gap:14px; font-size:1rem; line-height:1.5; color:#dfe5ec; }
.hp-step { flex:none; width:18px; font-family:var(--font-display); font-size:1.4rem; font-weight:600; line-height:1; color:#8fd0d0; }
.hp-mini-head { margin:34px 0 0; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8fd0d0; }
.hp-canvas-list { margin:12px 0 0; padding:0; list-style:none; border-bottom:1px solid #2a3f57; }
.hp-canvas-list li { border-top:1px solid #2a3f57; }
.hp-canvas-list a { display:flex; align-items:center; gap:16px; padding:18px 0; color:#fff; }
.hp-canvas-list a:hover .hp-canvas-name { text-decoration:underline; }
.hp-canvas-list svg { display:block; flex:none; color:#8fd0d0; }
.hp-canvas-text { flex:1 1 auto; min-width:0; }
.hp-canvas-name { display:block; font-size:1.06rem; font-weight:600; }
.hp-canvas-cat { display:block; margin-top:4px; font-size:.88rem; color:#c9d1dc; }
.hp-arrow { flex:none; font-size:1.25rem; color:#8fd0d0; }

/* ---- Watch how it works ---- */
.hp-watch { padding-top:76px; }
.hp-videos { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:32px 24px; }
.hp-video { display:block; min-width:0; color:var(--ink); }
.hp-video-frame { position:relative; display:block; aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden;
  background:var(--bg); border:1px solid var(--line); }
.hp-video-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.hp-play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:64px; height:64px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; }
.hp-play svg { display:block; margin-left:3px; fill:var(--accent); }
.hp-duration { position:absolute; right:12px; bottom:12px; padding:4px 8px; border-radius:6px; background:var(--brand-navy);
  color:#fff; font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }
.hp-video-kicker { display:block; margin:16px 0 0; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-teal); }
.hp-video-name { display:block; margin:6px 0 0; font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1.25;
  letter-spacing:-.01em; }
.hp-video:hover .hp-video-name { color:var(--accent-strong); text-decoration:underline; }
.hp-video-cat { display:block; margin:6px 0 0; font-size:.88rem; color:var(--muted); }

/* ---- Phone width: one column, a 16px gutter, nothing wider than the screen ---- */
@media (max-width:640px) {
  .hp-wrap { padding:0 16px; }
  .hp-hero-grid { padding-top:40px; padding-bottom:52px; }
  .hp-field-small { padding:22px; }
  .hp-release { padding-right:0; }
  .hp-section { padding-bottom:56px; }
  .hp-dark { padding-top:56px; padding-bottom:56px; }
  .hp-table { min-width:0; }
  .hp-table .hp-col-num { width:44px; }
  .hp-table tbody td, .hp-table tbody th, .hp-table thead th { padding-right:12px; }
}