/* Shared look for every page: the home page, the sub-pages, the legal pages, the questionnaire.
   Rules for using these tokens live in docs/DESIGN.md. Colors are Apple's calm
   structure tinted toward Kalon's teal, with ONE action color; every text pair
   below was measured for contrast (2026-10-19 research, w1-type-color-apple-style). */
@font-face { font-family:"Hanken Grotesk"; src:url(/fonts/hanken-latin.woff2) format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url(/fonts/hanken-italic-latin.woff2) format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Hanken Fallback"; src:local("Arial"); size-adjust:100.94%; ascent-override:99.07%; descent-override:30.02%; line-gap-override:0%; }

:root {
  /* ---- The palette (light) ---- */
  --canvas:#FFFFFF; --canvas-alt:#F4F8F7; --canvas-pearl:#FAFBFB;
  --ink:#19201F; --text-2:#636B6B; --text-3:#7A8282;
  --hairline:#DBDFDF; --field-border:#8A9292;
  --action:#017272; --action-hover:#005F5F; --link:#006262;
  /* Dark sections: the brand's deep teal, never black. */
  --night:#082D2C; --night-2:#104342; --on-night:#F0F4F4; --on-night-2:#B6E1E0;
  --action-night:#72D0D0; --forest:#274E4B;

  /* ---- Older names the legal pages and questionnaire use, mapped onto the palette ---- */
  --teal-50:#EEF7F6; --teal-100:#DDF2F1; --teal-200:#B6E1E0; --teal-300:#85C5C3;
  --teal-400:#50A2A0; --teal-600:#017272; --teal-700:#005F5F; --teal-800:#104342;
  --teal-900:#082D2C; --kalon-forest:#274E4B; --linen:var(--canvas-alt);
  --n-0:#FFFFFF; --n-50:#F4F8F7; --n-100:#ECF1F1; --n-200:#DBDFDF; --n-300:#C9D0CF;
  --n-500:#8A9292; --n-600:#636B6B; --n-700:#3E4746; --n-900:#19201F; --n-950:#0E1514;
  color-scheme: light dark;
  --bg:var(--canvas); --surface:#FFFFFF; --surface-quiet:var(--canvas-alt);
  --text:var(--ink); --text-body:var(--n-700); --text-muted:var(--text-2);
  --accent:var(--action); --on-accent:#FFFFFF; --focus:var(--action);
  --border:var(--n-300); --border-input:var(--field-border);
  --warn-bg:#FFF4E0; --warn-text:#6B4300; --error:#A4262C;
  --band:var(--night); --on-band:var(--on-night); --on-band-muted:var(--on-night-2);

  /* ---- Type: one headline weight, an Apple-shaped ladder tuned for Hanken ---- */
  --font:"Hanken Grotesk","Hanken Fallback","Helvetica Neue",Arial,sans-serif;
  --t-hero:clamp(3rem, 1.9rem + 4.6vw, 6rem);          /* 48 -> 96 */
  --t-section:clamp(2rem, 1.45rem + 2.3vw, 3.5rem);    /* 32 -> 56 */
  --t-eyebrow:clamp(1.3125rem, 1.15rem + .7vw, 1.75rem);/* 21 -> 28 */
  --t-intro:clamp(1.1875rem, 1.07rem + .5vw, 1.5rem);  /* 19 -> 24 */
  --t-body:1.125rem; --t-button:1.0625rem; --t-small:.9375rem;
  --text-small:var(--t-small); --text-base:var(--t-body); --text-lead:1.3125rem; --text-h3:1.5rem;
  --text-h2:clamp(1.75rem,1.3rem + 1.6vw,2.5rem); --text-h1:clamp(2.25rem,1.5rem + 3vw,4rem);
  /* Sub-page headlines: big, "but not like too much" (Josh). 44 -> 80. */
  --t-page:clamp(2.75rem, 1.85rem + 3.6vw, 5rem);

  /* ---- Space and shape: corners are a hierarchy, pills only on buttons ---- */
  --gutter:max(20px, 6.25vw);
  --content:min(100% - 2 * var(--gutter), 1260px);
  --sp-section:clamp(6rem, 4.6rem + 3.7vw, 9rem);      /* 96 -> 144 */
  --r-tile:28px; --r-card:18px; --r-field:12px; --r-pill:980px;
  --radius:var(--r-card);

  /* ---- Shared chrome (header, phone menu, footer) ---- */
  --hdr-h:52px;
  --hdr-bg:rgba(255,255,255,.86); --hdr-line:rgba(25,32,31,.08); --hdr-ink:var(--ink);
  --pill-bg:rgba(255,255,255,.86); --pill-line:rgba(25,32,31,.1);
  --line:var(--hairline);
  /* Mostly black and white (Josh, 10-19): the one dark band per page is near-black, and
     teal stays in small doses. on-dark-2 on k-dark measures 8.7:1, on k-dark-2 7.7:1. */
  --k-dark:#0F1413; --k-dark-2:#1A2120; --on-dark:#EEF2F1; --on-dark-2:#A9B4B2; --dark-line:rgba(238,242,241,.14);
  /* The pale air you pass through between pages. */
  --haze:#EDF1F1;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:var(--night); --surface:#0D3836; --surface-quiet:var(--night-2);
  --text:var(--on-night); --text-body:#D7E4E3; --text-muted:var(--on-night-2);
  --accent:var(--action-night); --on-accent:var(--night); --focus:var(--action-night);
  --border:#2F5856; --border-input:#7FA3A1; --n-200:#2F5856; --teal-50:#123F3D;
  --warn-bg:#3A2A10; --warn-text:#FFD999; --error:#FF9C9C;
  --band:var(--forest);
  --hdr-bg:rgba(8,45,44,.78); --hdr-line:rgba(240,244,244,.1); --hdr-ink:var(--on-night);
  --pill-bg:rgba(16,67,66,.9); --pill-line:rgba(240,244,244,.16); --line:#2F5856; --haze:#0B3433;
}}
:root[data-theme="dark"] {
  --bg:var(--night); --surface:#0D3836; --surface-quiet:var(--night-2);
  --text:var(--on-night); --text-body:#D7E4E3; --text-muted:var(--on-night-2);
  --accent:var(--action-night); --on-accent:var(--night); --focus:var(--action-night);
  --border:#2F5856; --border-input:#7FA3A1; --n-200:#2F5856; --teal-50:#123F3D;
  --warn-bg:#3A2A10; --warn-text:#FFD999; --error:#FF9C9C;
  --band:var(--forest);
  --hdr-bg:rgba(8,45,44,.78); --hdr-line:rgba(240,244,244,.1); --hdr-ink:var(--on-night);
  --pill-bg:rgba(16,67,66,.9); --pill-line:rgba(240,244,244,.16); --line:#2F5856; --haze:#0B3433;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 16px); }
body { margin:0; background:var(--bg); color:var(--text-body); font-family:var(--font); font-size:var(--text-base); line-height:1.5; }
h1, h2, h3 { color:var(--text); line-height:1.1; letter-spacing:-0.01em; font-weight:600; text-wrap:balance; margin:0 0 .5em; }
h1 { letter-spacing:-0.015em; font-size:var(--text-h1); }
h2 { font-size:var(--text-h2); }
p, li { max-width:65ch; text-wrap:pretty; }
a { color:var(--accent); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
/* Headings get focus on a new screen so screen readers announce it; no ring needed. */
h1[tabindex="-1"]:focus { outline:none; }
/* "hidden" must win over any display rule below it. */
[hidden] { display:none !important; }
input, select, textarea, button { font:inherit; font-size:max(16px,1em); }
.wrap { max-width:760px; margin:0 auto; padding:0 16px; }

/* Buttons: pills are for calls to action only. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--r-pill); border:1.5px solid var(--accent); background:var(--accent); color:var(--on-accent); font-weight:500; font-size:var(--t-button); line-height:1.2; cursor:pointer; text-decoration:none; transition:background-color .2s ease, border-color .2s ease; }
.btn:hover { background:var(--action-hover); border-color:var(--action-hover); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.ghost:hover { background:var(--teal-50); }
.btn:disabled { opacity:.55; cursor:wait; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { background:#8ADADA; border-color:#8ADADA; } }

.site-head { display:flex; align-items:center; justify-content:space-between; padding:18px 16px; max-width:1100px; margin:0 auto; }
.site-head .brand { font-weight:700; font-size:1.35rem; color:var(--text); text-decoration:none; letter-spacing:-0.02em; }
.site-foot { border-top:1px solid var(--border); margin-top:64px; padding:28px 16px 40px; font-size:var(--text-small); color:var(--text-muted); }
.site-foot .wrap { max-width:1100px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; }
.site-foot nav { display:flex; flex-wrap:wrap; gap:8px 18px; }
.site-foot a { color:var(--text-muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Long reading pages (legal, accessibility). */
.prose { max-width:720px; margin:0 auto; padding:24px 16px 0; }
.prose h1 { font-size:var(--text-h2); margin-bottom:.3em; }
.prose h2 { font-size:var(--text-h3); margin:2em 0 .5em; }
.prose h3 { font-size:1.125rem; margin:1.4em 0 .4em; }
.prose p, .prose li { color:var(--text-body); }
.prose ul { padding-left:1.25em; }
.prose li { margin:.35em 0; }
.prose .dates { color:var(--text-muted); font-size:var(--text-small); margin:0 0 1.5em; }
.prose table { width:100%; border-collapse:collapse; font-size:var(--text-small); margin:1em 0; }
.prose th, .prose td { text-align:left; vertical-align:top; padding:10px 8px; border-bottom:1px solid var(--border); }
.prose th { color:var(--text); }
.table-scroll { overflow-x:auto; }
/* Sample text messages, shown the way a phone would show them. */
.samples { list-style:none; padding:0 !important; display:grid; gap:10px; }
.samples li { margin:0; padding:12px 16px; border-radius:16px 16px 16px 4px; background:var(--surface-quiet); color:var(--text); font-size:var(--text-small); max-width:46ch; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--surface); color:var(--accent); padding:10px 16px; border-radius:var(--r-field); z-index:100; font-weight:500; }
.skip:focus { left:16px; }


/* ==========================================================================
   Shared site chrome: header, phone menu, footer.
   A page opts in with <body class="kalon">. Everything here is scoped to that class, so the
   home page (site/index.html keeps its own inline header styles) is never changed by it.
   ========================================================================== */
.kalon { padding-top:calc(var(--hdr-h) + env(safe-area-inset-top)); -webkit-font-smoothing:antialiased; }
.kalon .skip { z-index:120; }

/* Frosted header. The blur sits on the header itself: on a pseudo-element it stops working
   once the header has a view-transition name (Chromium treats it as a backdrop root). A blur
   on the header also traps fixed children inside it, which is why the phone menu is a
   sibling of the header, not a child. */
.kalon .hdr { position:fixed; z-index:50; top:0; left:0; right:0; display:flex; align-items:center; gap:16px;
  height:calc(var(--hdr-h) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--gutter) 0;
  color:var(--hdr-ink); background:var(--hdr-bg); box-shadow:inset 0 -1px 0 var(--hdr-line);
  -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); }
.kalon .logo { margin-right:auto; padding:8px 0; color:inherit; font-size:1.375rem; font-weight:700; letter-spacing:-0.02em; text-decoration:none; }
.kalon .hdr-nav { display:flex; align-items:center; gap:2px; }
.kalon .hdr-nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 10px; border-radius:8px; color:inherit; font-size:.9375rem; text-decoration:none; white-space:nowrap; }
.kalon .hdr-nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.kalon .hdr-nav a[aria-current="page"] { font-weight:600; }
.kalon .hdr > .btn { min-height:36px; padding:0 16px; font-size:.9375rem; white-space:nowrap; }
/* The questionnaire's "Saved" note rides in the header. */
.kalon .hdr .saved { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Phone menu: a button at the bottom of the screen, where a thumb already is, that opens a
   sheet of pages from the bottom. Works without a script (<details>); kalon.js adds closing
   on a tap outside or Escape, and tucks the button away while you read down a page. */
.kalon .menu { display:none; }
.kalon .menu > summary { position:fixed; z-index:62; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); display:block; translate:-50% 0;
  list-style:none; cursor:pointer; border-radius:var(--r-pill); -webkit-tap-highlight-color:transparent; view-transition-name:site-menu;
  transition:translate .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.kalon .menu > summary::-webkit-details-marker { display:none; }
/* The color sits on a child, not on the fixed element: iOS 26 Safari tints its own toolbar
   from fixed elements near the screen edge (2026-10-19 research, w1-mobile). */
.kalon .pill { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px 0 22px; border-radius:inherit;
  background:var(--pill-bg); color:var(--hdr-ink); font-size:1rem; font-weight:600; line-height:1;
  box-shadow:0 0 0 1px var(--pill-line), 0 10px 30px -14px rgba(14,21,20,.45);
  -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); }
.kalon .pill::after { content:""; width:7px; height:7px; border-left:1.75px solid currentColor; border-top:1.75px solid currentColor; rotate:45deg; translate:0 2px; transition:rotate .25s ease, translate .25s ease; }
.kalon .menu[open] .pill::after { rotate:225deg; translate:0 -2px; }
.kalon .menu .m-close, .kalon .menu[open] .m-open { display:none; }
.kalon .menu[open] .m-close { display:inline; }
html.menu-tuck .kalon .menu:not([open]) > summary:not(:focus-visible),
html.menu-typing .kalon .menu:not([open]) > summary:not(:focus-visible) { translate:-50% calc(100% + 28px); opacity:0; pointer-events:none; }
html.menu-open { overflow:hidden; }
.kalon .menu-panel { position:fixed; z-index:61; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--hdr-h) + env(safe-area-inset-top) + 12px) 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(14,21,20,.38); overscroll-behavior:contain; }
.kalon .menu-panel > nav { max-height:100%; overflow-y:auto; overscroll-behavior:contain; padding:18px 12px 80px; border-radius:30px;
  background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--line); }
.kalon .menu-title { margin:0 6px 12px; color:var(--text-muted); font-size:var(--t-small); font-weight:600; }
.kalon .places { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.kalon .places li { margin:0; max-width:none; }
.kalon .places a { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; padding:12px 14px 14px;
  overflow:hidden; border-radius:22px; background:var(--surface-quiet); color:var(--text); text-decoration:none; }
/* Each page is a place in the town; its little model sits in the corner of its tile. They are
   backgrounds, not <img>s: Safari draws a broken-picture icon for a missing <img> even with
   empty alt text, while a missing background just leaves the corner empty. They load once
   the page has settled (kalon.js adds .k-idle) or when the sheet opens, never ahead of the
   page's own content. */
.kalon .places .p-pic { position:absolute; top:4px; right:-2px; width:72%; aspect-ratio:4 / 3; background:no-repeat 50% 50% / contain; pointer-events:none; }
:is(html.k-idle .kalon, .kalon .menu[open]) .places a[href="/how-it-works/"] .p-pic { background-image:url(/img/mini/kit_salon_interior.webp); }
:is(html.k-idle .kalon, .kalon .menu[open]) .places a[href="/numbers/"] .p-pic { background-image:url(/img/mini/kit_fig_caller_standing.webp); }
:is(html.k-idle .kalon, .kalon .menu[open]) .places a[href="/pricing/"] .p-pic { background-image:url(/img/mini/kit_salon_a.webp); }
:is(html.k-idle .kalon, .kalon .menu[open]) .places a[href="/about/"] .p-pic { background-image:url(/img/mini/kit_civic.webp); }
.kalon .places .p-name { position:relative; font-size:1.125rem; font-weight:600; line-height:1.2; }
.kalon .places .p-line { position:relative; margin-top:3px; color:var(--text-muted); font-size:var(--t-small); line-height:1.3; }
.kalon .places a[aria-current="page"] { box-shadow:inset 0 0 0 2px var(--accent); }
.kalon .menu-more { display:flex; flex-wrap:wrap; margin:10px 0 0; }
.kalon .menu-more a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:12px; color:var(--text); font-size:1rem; font-weight:500; text-decoration:none; }
.kalon .menu-more a[aria-current="page"] { font-weight:700; }
.kalon .menu-panel .btn { width:100%; margin-top:10px; }
@media (max-width: 900px) {
  .kalon .hdr-nav a:not(.keep), .kalon .hdr > .btn { display:none; }
  .kalon .menu { display:block; }
  /* On the questionnaire, "Saved on this device only" needs every word on a phone; the
     Kalon Alerts link is still one tap away in the menu. */
  .kalon .hdr:has(> .saved) .hdr-nav { display:none; }
}
@media (prefers-reduced-motion: no-preference) {
  .kalon .menu[open] .menu-panel { animation:k-fade .2s ease-out; }
  .kalon .menu[open] .menu-panel > nav { animation:k-sheet .4s cubic-bezier(.2,.8,.2,1); }
}
@media (prefers-reduced-motion: reduce) { .kalon .menu > summary, .kalon .pill::after { transition:none; } }
@keyframes k-fade { from { opacity:0; } }
@keyframes k-sheet { from { opacity:0; transform:translateY(28px); } }

/* Footer: the company line carriers look for, every legal page once, and the site's pages. */
.kalon .site-foot { margin-top:0; padding:clamp(48px, 6vw, 80px) 0 calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg); color:var(--text-muted); font-size:var(--t-small); }
.kalon .site-foot .wrap { display:block; width:var(--content); max-width:none; margin-inline:auto; padding:0; }
.kalon .foot-top { display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap:32px 24px; padding-bottom:36px; }
.kalon .foot-logo { color:var(--text); font-size:1.375rem; font-weight:700; letter-spacing:-0.02em; text-decoration:none; }
.kalon .foot-brand p { margin:6px 0 0; max-width:28ch; }
.kalon .site-foot nav { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.kalon .foot-h { margin:0 0 6px; color:var(--text); font-size:var(--t-small); font-weight:600; }
.kalon .site-foot nav a { display:inline-flex; align-items:center; min-height:34px; text-decoration:none; }
.kalon .site-foot nav a:hover { color:var(--text); text-decoration:underline; }
.kalon .foot-line { max-width:none; margin:0; padding-top:22px; border-top:1px solid var(--line); line-height:1.6; }
@media (max-width: 900px) {
  /* Room under the last line for the menu button. */
  .kalon .site-foot { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  .kalon .foot-top { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kalon .foot-brand { grid-column:1 / -1; }
}
/* Legal and questionnaire pages: a little more air under the fixed header, and side margins
   that line up with the header's on phones. The column keeps its old text width (688px and
   728px) because the max-width grows by exactly the extra padding. */
.kalon > main.prose { max-width:calc(688px + 2 * var(--gutter)); padding:36px var(--gutter) 0; }
.kalon > main.wrap { max-width:calc(728px + 2 * var(--gutter)); padding-top:28px; padding-inline:var(--gutter); }


/* ==========================================================================
   Moving between pages: a short flight over the town.
   Cross-document view transitions: the page you leave rises away into a pale haze and the
   next one settles in, while the header and the phone menu button stay where they are.
   Browsers without support, and anyone who asked for less motion, just change pages.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.hdr { view-transition-name:site-header; }
::view-transition { background:var(--haze); }
::view-transition-old(root) { animation:k-rise .36s cubic-bezier(.4, 0, .7, .3) both; transform-origin:50% 35%; }
::view-transition-new(root) { animation:k-descend .6s cubic-bezier(.16, .84, .3, 1) .1s both; transform-origin:50% 35%; }
@keyframes k-rise { to { opacity:0; transform:translateY(2%) scale(.94); } }
@keyframes k-descend { from { opacity:0; transform:translateY(-2.5%) scale(.965); } }
/* On bigger screens a touch of haze sells the height; phones skip the blur to stay smooth. */
@media (min-width: 901px) {
  @keyframes k-rise { to { opacity:0; transform:translateY(2%) scale(.94); filter:blur(3px); } }
  @keyframes k-descend { from { opacity:0; transform:translateY(-2.5%) scale(.965); filter:blur(3px); } }
}


/* ==========================================================================
   Page building blocks for the sub-pages (How it works, Numbers, Pricing, About, Sources).
   All prefixed k- so they never collide with the home page's own class names.
   ========================================================================== */
.k-wrap { width:var(--content); margin-inline:auto; }
.k-main { display:block; color:var(--ink); }
.k-sec { padding-block:var(--sp-section); }
.k-sec--alt { background:var(--canvas-alt); }
.k-sec--tight { padding-block:clamp(4rem, 3rem + 3vw, 6rem); }
.k-sec--dark { background:var(--k-dark); color:var(--on-dark); }

/* Page opening: words on the left, one small model on the right. */
.k-hero { padding:clamp(40px, 5vw, 88px) 0 clamp(64px, 7vw, 120px); }
.k-hero-grid { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.k-hero--text .k-hero-grid { grid-template-columns:minmax(0, 1fr); }
.k-eyebrow { margin:0 0 .5em; color:var(--text-2); font-size:var(--t-eyebrow); font-weight:600; line-height:1.14; letter-spacing:-0.005em; max-width:none; }
.k-h1 { margin:0 0 .32em; color:var(--ink); font-size:var(--t-page); line-height:1.04; letter-spacing:-0.015em; max-width:12ch; }
.k-h2 { margin:0 0 .4em; color:var(--ink); font-size:var(--t-section); line-height:1.07; letter-spacing:-0.01em; max-width:16ch; }
.k-h3 { margin:0 0 .4em; color:var(--ink); font-size:var(--t-eyebrow); line-height:1.14; letter-spacing:-0.005em; }
.k-intro { margin:0; max-width:34ch; color:var(--text-2); font-size:var(--t-intro); font-weight:600; line-height:1.35; }
.k-intro b { color:var(--ink); font-weight:600; }
.k-head { margin-bottom:clamp(40px, 5vw, 72px); }
.k-head .k-intro { max-width:40ch; }
.k-body { color:var(--text-2); font-size:1.0625rem; }
.k-after { margin:clamp(28px, 3vw, 40px) 0 0; max-width:62ch; }
.k-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:30px; }
/* A quiet second choice next to the main button: plain text, no pill. */
.k-more { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--link); font-size:var(--t-button); font-weight:500; text-decoration:none; }
.k-more::after { content:""; width:7px; height:7px; border-right:1.75px solid currentColor; border-top:1.75px solid currentColor; rotate:45deg; }
.k-more:hover { text-decoration:underline; }

/* Dark band text. */
.k-sec--dark .k-h2, .k-sec--dark .k-h3, .k-sec--dark h3 { color:var(--on-dark); }
.k-sec--dark .k-eyebrow, .k-sec--dark .k-intro, .k-sec--dark .k-body { color:var(--on-dark-2); }
.k-sec--dark .k-intro b { color:var(--on-dark); }
.k-sec--dark a:not(.btn) { color:var(--on-dark); }
.k-sec--dark :focus-visible { outline-color:var(--action-night); }

/* Source lines under every number, with a footnote mark that opens the Sources page. */
.k-src { margin:10px 0 0; max-width:60ch; color:var(--text-2); font-size:var(--t-small); line-height:1.45; }
.k-fn { display:inline-grid; place-items:center; min-width:24px; height:24px; margin-left:3px; padding:0 6px; border-radius:6px;
  background:rgba(1,114,114,.1); color:var(--link); font-size:.8125rem; font-weight:600; line-height:1; text-decoration:none; vertical-align:1px; }
.k-fn:hover { background:rgba(1,114,114,.18); }
.k-sec--dark .k-src { color:var(--on-dark-2); }
.k-sec--dark .k-fn { background:rgba(114,208,208,.16); color:var(--on-dark); }
.k-sec--dark .k-fn:hover { background:rgba(114,208,208,.26); }

/* Closing ask on every page. */
.k-cta { text-align:center; }
.k-cta .k-h2, .k-cta .k-intro { margin-inline:auto; }
.k-cta .k-intro { max-width:32ch; }
.k-cta .k-actions { justify-content:center; }

/* ---------- Small 3D moments ----------
   <div class="mini3d" data-asset="kit_spa" data-motion="turn"><img ...></div> plus the
   home page builder's /js/town/mini.js turn one model from the town into a small live scene.
   The picture is the still fallback, and the soft stage behind both keeps the page looking
   finished if either one is missing. mini.js adds .is-live once its canvas is drawing. */
.mini3d { position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--r-tile); isolation:isolate;
  background:radial-gradient(120% 95% at 50% 12%, #FFFFFF 0%, #F7F9F9 42%, #E8EDEC 100%); }
.mini3d::after { content:""; position:absolute; z-index:-1; left:24%; right:24%; bottom:14%; height:8%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(25,32,31,.13), rgba(25,32,31,0)); }
.mini3d img, .mini3d canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.mini3d img { object-fit:contain; padding:5%; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mini3d canvas { z-index:1; }
.mini3d.is-live img, .mini3d.no-img img { opacity:0; }
.mini3d.is-live::after { opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  /* It settles into place as the page arrives, and lifts a little when you point at it. */
  .mini3d img { animation:k-mini-in .9s cubic-bezier(.2,.7,.2,1) .12s backwards; }
  @media (hover: hover) { .mini3d:hover img { transform:translateY(-8px) rotate(-1deg); } }
}
@keyframes k-mini-in { from { opacity:0; transform:translateY(-18px) scale(1.02); } }

/* ---------- Rows: a title and a sentence, divided by hairlines (no boxes) ---------- */
.k-rows { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(32px, 4vw, 64px); margin:0; padding:0; list-style:none; }
.k-rows > li { max-width:none; margin:0; padding:22px 0 24px; border-top:1px solid var(--line); }
.k-rows h3 { margin:0 0 6px; font-size:1.1875rem; line-height:1.3; letter-spacing:0; }
.k-rows p { margin:0; color:var(--text-2); font-size:1.0625rem; max-width:46ch; }
.k-rows--one { grid-template-columns:minmax(0, 1fr); }
.k-sec--dark .k-rows > li { border-top-color:var(--dark-line); }
.k-sec--dark .k-rows p { color:var(--on-dark-2); }

/* ---------- How it works: the five steps ---------- */
.k-steps { position:relative; margin:0; padding:0; list-style:none; }
/* A thin path runs past every step. Where the browser can, it fills in teal as you scroll. */
.k-steps::before, .k-steps::after { content:""; position:absolute; left:7px; top:34px; bottom:40px; width:2px; border-radius:2px; background:var(--line); }
.k-steps::after { background:var(--action); transform-origin:50% 0; transform:scaleY(0); }
.k-step { position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:12px clamp(32px, 5vw, 80px); max-width:none; margin:0; padding:28px 0 36px 48px; }
.k-step::before { content:""; position:absolute; z-index:1; left:0; top:38px; width:16px; height:16px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 2px var(--ink); }
.k-step + .k-step { border-top:1px solid var(--line); }
.k-step-name { margin:0; font-size:var(--t-section); line-height:1.07; letter-spacing:-0.01em; }
.k-step-body p { margin:0 0 14px; color:var(--text-2); font-size:var(--t-body); max-width:52ch; }
.k-step-body p:last-child { margin-bottom:0; }
.k-step-body .k-you { color:var(--ink); font-size:1.0625rem; }
.k-step-body .k-you b { font-weight:600; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .k-steps { view-timeline:--k-steps block; }
    .k-steps::after { animation:k-path linear both; animation-timeline:--k-steps; animation-range:entry 60% exit 40%; }
  }
}
@keyframes k-path { from { transform:scaleY(0); } to { transform:scaleY(1); } }

/* ---------- You / us split ---------- */
.k-split { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.k-panel { padding:clamp(26px, 3.4vw, 44px); border-radius:var(--r-tile); background:var(--canvas); }
.k-sec:not(.k-sec--alt) .k-panel { background:var(--canvas-alt); }
.k-panel h3 { margin:0 0 6px; font-size:var(--t-eyebrow); line-height:1.14; }
.k-panel > p { margin:0 0 18px; color:var(--text-2); font-size:1.0625rem; }
.k-ticks { margin:0; padding:0; list-style:none; }
.k-ticks li { position:relative; max-width:none; margin:0; padding:13px 0 13px 30px; border-top:1px solid var(--line); color:var(--ink); font-size:1.0625rem; }
.k-ticks li::before { content:""; position:absolute; left:2px; top:19px; width:12px; height:7px; border-left:2px solid var(--action); border-bottom:2px solid var(--action); rotate:-45deg; }

/* ---------- Works with ---------- */
.k-works { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:24px clamp(32px, 5vw, 80px); align-items:start; }
.k-works dl { margin:0; }
.k-works dl > div { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 7fr); gap:6px 24px; padding:20px 0; border-top:1px solid var(--line); }
.k-works dt { color:var(--ink); font-size:1.1875rem; font-weight:600; }
.k-works dd { margin:0; color:var(--text-2); font-size:1.0625rem; }

/* ---------- Numbers: topic groups ---------- */
.k-jump { display:flex; flex-wrap:wrap; gap:4px 6px; margin:34px 0 0; padding:0; list-style:none; }
.k-jump li { margin:0; }
.k-jump a { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:var(--r-field); background:var(--canvas-alt); color:var(--ink); font-size:var(--t-small); font-weight:500; text-decoration:none; }
.k-jump a:hover { background:#E9F0EE; }
.k-group { scroll-margin-top:calc(var(--hdr-h) + 8px); }
.k-group + .k-group { border-top:1px solid var(--line); }
.k-group-grid { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:28px clamp(32px, 5vw, 88px); align-items:start; }
.k-group-head { position:sticky; top:calc(var(--hdr-h) + 32px); }
.k-group-head .k-h2 { font-size:clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); max-width:12ch; }
.k-group-head p { margin:0; color:var(--text-2); font-size:1.0625rem; max-width:32ch; }
/* The topic's headline number, then the rest as quiet rows. */
.k-lead { padding:clamp(26px, 3.4vw, 44px); border-radius:var(--r-tile); background:var(--canvas-alt); }
.k-lead-num { margin:0; color:var(--ink); font-size:clamp(3.5rem, 2.5rem + 4.4vw, 6.5rem); font-weight:600; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.k-lead-text { margin:14px 0 0; color:var(--ink); font-size:var(--t-intro); font-weight:600; line-height:1.3; max-width:30ch; }
.k-facts { margin:8px 0 0; padding:0; list-style:none; }
.k-fact { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 7fr); gap:4px 24px; max-width:none; margin:0; padding:22px 0; border-bottom:1px solid var(--line); }
.k-fact:last-child { border-bottom:0; }
.k-fact-num { margin:0; color:var(--ink); font-size:clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); font-weight:600; line-height:1.05; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.k-fact-text { margin:0; color:var(--ink); font-size:1.0625rem; line-height:1.45; }
.k-fact .k-src { margin-top:6px; }
.k-quote { margin:0; color:var(--ink); font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight:600; line-height:1.35; }

/* ---------- Numbers: Kalon's own, on the dark band ---------- */
.k-own-lead { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:16px clamp(32px, 5vw, 80px); align-items:end; padding-bottom:clamp(40px, 5vw, 64px); margin-bottom:clamp(40px, 5vw, 64px); border-bottom:1px solid var(--dark-line); }
.k-own-num { margin:0; color:var(--on-dark); font-size:clamp(4rem, 2.6rem + 6.4vw, 8.5rem); font-weight:600; line-height:.95; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; }
.k-own-text { margin:12px 0 0; color:var(--on-dark); font-size:var(--t-intro); font-weight:600; line-height:1.3; max-width:30ch; }
.k-honest { margin:0; padding:22px 24px; border-radius:var(--r-card); background:var(--k-dark-2); color:var(--on-dark); font-size:1.0625rem; max-width:none; }
.k-honest b { font-weight:600; }
.k-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.k-tile { display:flex; flex-direction:column; min-width:0; padding:clamp(24px, 3vw, 36px); border-radius:var(--r-tile); background:var(--k-dark-2); }
.k-tile--wide { grid-column:1 / -1; }
.k-tile h3 { margin:0 0 14px; color:var(--on-dark-2); font-size:var(--t-small); font-weight:600; letter-spacing:0; line-height:1.3; }
.k-tile-num { margin:0; color:var(--on-dark); font-size:clamp(2.75rem, 2.1rem + 2.4vw, 4.25rem); font-weight:600; line-height:1; letter-spacing:-0.015em; font-variant-numeric:tabular-nums; }
.k-tile-text { margin:10px 0 0; color:var(--on-dark); font-size:1.0625rem; line-height:1.45; max-width:44ch; }
.k-tile .k-src { margin-top:auto; padding-top:18px; }
.k-tile dl { margin:16px 0 0; }
.k-tile dl > div { display:flex; align-items:baseline; gap:14px; padding:10px 0; border-top:1px solid var(--dark-line); }
.k-tile dt { min-width:4.5ch; color:var(--on-dark); font-size:1.375rem; font-weight:600; font-variant-numeric:tabular-nums; }
.k-tile dd { margin:0; color:var(--on-dark-2); font-size:1.0625rem; }
/* Charts only where a real day-by-day or week-by-week count exists. */
.k-chart { margin:22px 0 0; }
.k-chart figcaption { margin:0 0 12px; color:var(--on-dark); font-size:1.0625rem; font-weight:600; }
.k-chart-box { position:relative; padding-left:38px; }
.k-chart svg { display:block; width:100%; height:150px; overflow:visible; }
.k-chart .grid { stroke:var(--dark-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.k-chart .area { fill:rgba(114,208,208,.12); }
.k-chart .line { fill:none; stroke:var(--action-night); stroke-width:2.25; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.k-chart .ylab { position:absolute; left:0; color:var(--on-dark-2); font-size:13px; font-variant-numeric:tabular-nums; }
.k-chart .xlab { display:flex; justify-content:space-between; margin-top:8px; color:var(--on-dark-2); font-size:13px; }
.k-chart-note { margin:12px 0 0; color:var(--on-dark-2); font-size:var(--t-small); }
.k-chart details { margin-top:10px; font-size:var(--t-small); }
.k-chart summary { display:inline-flex; align-items:center; min-height:32px; color:var(--on-dark); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.k-series { margin:8px 0 0; color:var(--on-dark-2); font-size:var(--t-small); line-height:1.7; font-variant-numeric:tabular-nums; }

/* ---------- Pricing ---------- */
.k-pricing { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.k-calc, .k-included { padding:clamp(28px, 3.4vw, 44px); border-radius:var(--r-tile); background:var(--canvas); }
.k-calc label { display:block; margin-bottom:14px; color:var(--ink); font-size:1.1875rem; font-weight:600; }
/* One slider look in every browser: a thin track with a teal fill up to a white thumb.
   The page script sets --p (0 to 1); the fill math keeps it centered under the 28px thumb. */
.k-calc input[type="range"] { --p:.05; -webkit-appearance:none; appearance:none; display:block; width:100%; height:32px; margin:0; background:transparent; accent-color:var(--action); cursor:pointer; }
.k-calc input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--action) calc(14px + (100% - 28px) * var(--p)), rgba(25,32,31,.12) 0); }
.k-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.18); }
.k-calc input[type="range"]::-moz-range-track { height:6px; border-radius:999px; background:rgba(25,32,31,.12); }
.k-calc input[type="range"]::-moz-range-progress { height:6px; border-radius:999px; background:var(--action); }
.k-calc input[type="range"]::-moz-range-thumb { width:28px; height:28px; border:0; border-radius:50%;
  background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.18); }
.k-calc output { display:block; margin-top:6px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.k-price { margin:28px 0 0; color:var(--ink); font-size:var(--t-hero); font-weight:600; line-height:1; letter-spacing:-0.015em; font-variant-numeric:tabular-nums; }
.k-price .k-per { color:var(--text-2); font-size:.32em; font-weight:600; letter-spacing:0; }
.k-price-line { margin:12px 0 0; color:var(--text-2); }
/* Start from your calls (and how many Kalon answers) or from a budget; kalon.js fills in the plan. */
.k-calc-live { display:grid; gap:28px; }
.k-tabs { justify-self:start; display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:24px; background:var(--canvas-alt); }
.k-tab { min-height:44px; padding:0 18px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--text-2); font:inherit; font-size:1rem; font-weight:600; cursor:pointer; }
.k-tab[aria-pressed="true"] { background:var(--action); color:#fff; }
.k-calc-fields { display:grid; gap:28px; }
.k-quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.k-quick button { min-height:40px; padding:0 14px; border:0; border-radius:var(--r-pill); background:transparent; box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink); font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; }
.k-quick button[aria-pressed="true"] { background:rgba(1,114,114,.08); box-shadow:inset 0 0 0 1.5px var(--action); color:var(--action); }
.k-calc-out { padding-top:24px; border-top:1px solid var(--line); }
.k-calc-out .k-price { margin-top:10px; }
.k-calc-lead { margin:0; color:var(--ink); font-size:1.0625rem; font-weight:600; }
.k-calc-plan { margin:12px 0 0; color:var(--ink); font-weight:600; }
.k-calc-plan + .k-price-line { margin-top:4px; }
/* Without a script the slider can't answer, so the full plan list below does the job. */
html:not(.k-js) .k-calc-live { display:none; }
.k-calc-static { display:none; }
html:not(.k-js) .k-calc-static { display:block; }
.k-included dl { margin:0; }
.k-included dl > div { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line); font-size:1.0625rem; }
.k-included dl > div:first-child { border-top:0; padding-top:0; }
.k-included dt { color:var(--ink); }
.k-included dd { margin:0; color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; }
.k-plans-wrap { overflow-x:auto; }
.k-plans { width:100%; border-collapse:collapse; font-size:1.0625rem; font-variant-numeric:tabular-nums; }
.k-plans th, .k-plans td { padding:15px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:baseline; }
.k-plans thead th { padding-top:0; color:var(--text-2); font-size:var(--t-small); font-weight:600; }
.k-plans tbody th { color:var(--ink); font-weight:600; }
.k-plans td { color:var(--text-2); }
.k-plans td.k-amt { color:var(--ink); font-weight:600; }
.k-plans tr.is-current th, .k-plans tr.is-current td { background:rgba(1,114,114,.07); }
.k-plans tr.is-current th { box-shadow:inset 3px 0 0 var(--action); }
.k-plans-note { margin:18px 0 0; color:var(--text-2); font-size:1.0625rem; }
dl.k-faq { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px clamp(32px, 5vw, 72px); margin:0; }
dl.k-faq dt { margin:0 0 6px; color:var(--ink); font-size:1.1875rem; font-weight:600; line-height:1.3; }
dl.k-faq dd { margin:0; color:var(--text-2); font-size:1.0625rem; max-width:52ch; }
dl.k-faq dd p { margin:0 0 10px; }
dl.k-faq dd p:last-child { margin:0; }

/* ---------- About ---------- */
.k-statement { margin:0; color:var(--ink); font-size:clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem); font-weight:600; line-height:1.2; letter-spacing:-0.01em; max-width:26ch; }
.k-statement span { color:var(--text-2); }
.k-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.k-stats > li { display:flex; flex-direction:column; max-width:none; margin:0; padding:clamp(22px, 2.6vw, 32px); border-radius:var(--r-tile); background:var(--k-dark-2); }
.k-stats .k-tile-num { font-size:clamp(2.5rem, 2rem + 1.8vw, 3.5rem); }
.k-stats .k-src { margin-top:auto; padding-top:16px; }
dl.k-facts-list { margin:0; }
dl.k-facts-list > div { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 9fr); gap:4px 32px; padding:20px 0; border-top:1px solid var(--line); }
dl.k-facts-list > div:last-child { border-bottom:1px solid var(--line); }
dl.k-facts-list dt { color:var(--text-2); font-size:1.0625rem; }
dl.k-facts-list dd { margin:0; color:var(--ink); font-size:1.0625rem; max-width:60ch; }

/* ---------- Sources ---------- */
.k-src-list { margin:0; padding:0; list-style:none; }
.k-src-list > li { position:relative; display:grid; grid-template-columns:48px minmax(0, 1fr); gap:4px 16px; max-width:none; margin:0; padding:24px 0;
  border-top:1px solid var(--line); scroll-margin-top:calc(var(--hdr-h) + 20px); }
.k-src-list > li:last-child { border-bottom:1px solid var(--line); }
.k-src-n { color:var(--ink); font-size:1.1875rem; font-weight:600; font-variant-numeric:tabular-nums; }
.k-src-list p { margin:0; color:var(--text-2); font-size:1.0625rem; max-width:72ch; }
.k-src-list b { color:var(--ink); font-weight:600; }
.k-src-list a { overflow-wrap:anywhere; }
.k-src-list .k-used { margin-top:10px; color:var(--ink); font-size:var(--t-small); }
/* Old links (#src-1 ... #src-14) land on a tiny marker inside each entry. */
.k-alias { position:absolute; top:0; scroll-margin-top:calc(var(--hdr-h) + 20px); }
.k-src-list > li:target, .k-src-list > li:has(.k-alias:target) { background:linear-gradient(90deg, rgba(1,114,114,.07), rgba(1,114,114,0) 70%); box-shadow:inset 3px 0 0 var(--action); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .k-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .k-hero-grid, .k-group-grid, .k-works, .k-pricing, .k-own-lead { grid-template-columns:minmax(0, 1fr); }
  .k-group-head { position:static; }
  .k-step { grid-template-columns:minmax(0, 1fr); padding-left:40px; }
}
@media (max-width: 720px) {
  .k-rows, .k-split, .k-tiles, dl.k-faq { grid-template-columns:minmax(0, 1fr); }
  .k-fact { grid-template-columns:minmax(0, 1fr); }
  .k-works dl > div, dl.k-facts-list > div { grid-template-columns:minmax(0, 1fr); }
  .k-plans th, .k-plans td { padding:13px 8px; font-size:var(--t-small); }
  /* The left padding leaves room for the highlighted plan's teal bar; one line per plan reads
     faster than "Up to / 1,000" broken in two. */
  .k-plans th:first-child, .k-plans td:first-child { padding-left:12px; }
  .k-plans tbody th { white-space:nowrap; }
  .k-src-list > li { grid-template-columns:32px minmax(0, 1fr); gap:4px 10px; }
  .k-jump { flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none; }
  .k-jump::-webkit-scrollbar { display:none; }
  .k-jump a { white-space:nowrap; }
}
@media (max-width: 520px) {
  .k-stats { grid-template-columns:minmax(0, 1fr); }
}
/* The smallest phones (320 to 380px wide): tighter cells so the whole plan table still fits. */
@media (max-width: 380px) {
  .k-plans th, .k-plans td { padding:12px 6px; }
  .k-plans th:first-child, .k-plans td:first-child { padding-left:10px; }
}