/* SingCompare design system.
 *
 * The brief for this palette is unusual: most people reach this site at the
 * worst hour of their life, and many of them at 3am on a phone. So it is built
 * to be calm and legible rather than persuasive. No urgency, no promotional
 * colour, nothing that reads as a deals site.
 *
 * Evergreen was chosen because it carries remembrance and continuity without
 * the heaviness of black or purple, and because it doubles as the "verified"
 * colour, which is what this site is actually selling. Clay is the only warm
 * accent and is reserved for things a reader must not miss. The base is warm
 * paper, not white — white on a phone at 3am is a torch.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
/*
 * Register: a data product, not a funeral home and not a deals site.
 * Cool near-neutral surfaces, one confident accent, soft diffuse depth, and
 * nothing that shouts. The "wow" is meant to come from how settled it looks,
 * not from contrast.
 *
 * Teal rather than the evergreen it replaces: it keeps the calm and the
 * "verified" reading, but sits in the register of an analysis tool rather than
 * a memorial. Every value below was checked against its surface rather than
 * chosen by eye — accent 6.75:1 on light, ink 16.9:1, muted 4.78:1, and the
 * dark-mode accent 9.14:1 on the dark surface.
 */
:root {
  --paper:      #f7f9f9;
  --surface:    #ffffff;
  --raised:     #ffffff;
  --ink:        #0f1a1c;
  --ink-soft:   #43524f;
  --muted:      #657270;
  --faint:      #949e9c;
  --line:       #e4eaea;
  --line-soft:  #eff3f3;

  --green:      #14635c;   /* accent: analysis, verified, calm */
  --green-deep: #0e4a45;
  --green-tint: #ecf4f3;
  --clay:       #8a5a2b;   /* the one warm note: attention, never alarm */
  --clay-tint:  #fbf4ec;

  /* Depth is carried by very soft, wide shadows rather than borders. */
  --shadow-sm: 0 1px 2px rgba(15,26,28,.04);
  --shadow:    0 1px 2px rgba(15,26,28,.04), 0 12px 32px -12px rgba(15,26,28,.12);
  --shadow-lg: 0 2px 4px rgba(15,26,28,.04), 0 24px 56px -20px rgba(15,26,28,.16);
  --radius:    16px;
  --radius-sm: 10px;

  --step: clamp(.94rem, .6rem + .85vw, 1.06rem);
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#0d1214; --surface:#131a1d; --raised:#172024; --ink:#e9eeed;
  --ink-soft:#bcc7c5; --muted:#8d9997; --faint:#687371;
  --line:#222d31; --line-soft:#1b2427;
  --green:#6fc3b8; --green-deep:#8fd6cc; --green-tint:#122b29;
  --clay:#cf9a62; --clay-tint:#241c13;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 28px 64px -24px rgba(0,0,0,.7);
} }
:root[data-theme="dark"] {
  --paper:#0d1214; --surface:#131a1d; --raised:#172024; --ink:#e9eeed;
  --ink-soft:#bcc7c5; --muted:#8d9997; --faint:#687371;
  --line:#222d31; --line-soft:#1b2427;
  --green:#6fc3b8; --green-deep:#8fd6cc; --green-tint:#122b29;
  --clay:#cf9a62; --clay-tint:#241c13;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 28px 64px -24px rgba(0,0,0,.7);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--step)/1.68 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap { max-width:66rem; margin:0 auto; padding:0 20px; }
.narrow { max-width:44rem; }
a { color:var(--green); text-underline-offset:.18em; }
a:hover { color:var(--green-deep); }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:3px; }
img, svg { max-width:100%; }

/* Headings carry a serif. It reads as considered and human rather than as a
   product launch, which is the whole difference in register here. */
h1,h2,h3,.serif {
  font-family:"Source Serif 4",ui-serif,Georgia,"Songti SC","Noto Serif SC",serif;
  font-weight:600; letter-spacing:-.012em; color:var(--ink);
}
h1 { font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem); line-height:1.12; margin:0; text-wrap:balance; }
h2 { font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem); line-height:1.25; margin:0 0 .4rem; }
h3 { font-size:1.08rem; line-height:1.35; margin:0; }
p  { margin:0 0 1rem; } p:last-child { margin-bottom:0; }
.lede { font-size:clamp(1.03rem,.95rem + .4vw,1.2rem); color:var(--ink-soft);
        margin:1.1rem 0 0; max-width:36rem; line-height:1.6; }
.hint { color:var(--muted); font-size:.93rem; margin:0 0 1.2rem; max-width:44rem; }
.eyebrow { font-family:ui-sans-serif,system-ui,sans-serif; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--muted);
  font-weight:600; margin:0 0 .75rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(150%) blur(10px); position:sticky; top:0; z-index:30; }
.site-header .wrap { display:flex; align-items:center; gap:1.75rem; min-height:4rem; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--ink); min-height:44px; }
.brand svg { width:27px; height:27px; color:var(--green); flex:none; }
.brand b { font-family:inherit; font-weight:650;
  font-size:1.18rem; letter-spacing:-.02em; }
.brand b span { color:var(--green); }
.site-nav { display:flex; gap:1.4rem; margin-left:auto; flex-wrap:wrap; }
.site-nav a { font-size:.95rem; text-decoration:none; color:var(--muted);
  display:inline-flex; align-items:center; min-height:44px; padding:0 .15rem;
  border-bottom:2px solid transparent; transition:color .15s; }
.site-nav a:hover { color:var(--ink); }
.site-nav a[aria-current="page"] { color:var(--ink); font-weight:600; border-bottom-color:var(--green); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
header.page { padding:4rem 0 2rem; }
section.band { padding:2.75rem 0; border-top:1px solid var(--line-soft); }
section.band:first-of-type { border-top:0; }
.band-head { margin-bottom:1.5rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.45rem; background:var(--green);
  color:var(--paper); text-decoration:none; padding:.8rem 1.4rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.97rem; border:1px solid var(--green);
  transition:background .15s, transform .08s; }
.btn:hover { background:var(--green-deep); border-color:var(--green-deep); color:var(--paper); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:transparent; color:var(--green); border-color:var(--line); }
.btn.ghost:hover { background:var(--green-tint); color:var(--green-deep); border-color:var(--green); }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:2.25rem 0 0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.grid > .card, .grid-2 > .card { margin-bottom:0; }
.card { background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.35rem 1.45rem; margin-bottom:.9rem; box-shadow:var(--shadow-sm); }
.card .meta { color:var(--muted); font-size:.87rem; margin:.35rem 0 .9rem; }
a.card, .card a.block { text-decoration:none; color:inherit; display:block; }
a.card { transition:border-color .15s, box-shadow .15s, transform .12s; }
a.card:hover { border-color:color-mix(in srgb,var(--green) 35%,transparent); box-shadow:var(--shadow); transform:translateY(-2px); }

/* Explicit column counts, not auto-fit. auto-fit decides by width and happily
   leaves a fourth card alone on its own row, which is most of what makes a
   comparison homepage look cluttered. These break 4 -> 2 -> 1 and 2 -> 1, so a
   row is always full. */
.grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:600px) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .grid { grid-template-columns:repeat(4,1fr); } }

.grid-2 { grid-template-columns:1fr; }
@media (min-width:760px) { .grid-2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .grid-2 { grid-template-columns:repeat(2,1fr); } }

/* Route cards: the four ways into the site, by situation rather than by
   product. A grieving family is not browsing a catalogue. */
.route { display:flex; flex-direction:column; gap:.5rem; background:var(--raised);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.45rem;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .15s, transform .12s; }
.route:hover { border-color:color-mix(in srgb,var(--green) 35%,transparent); box-shadow:var(--shadow); transform:translateY(-3px); color:inherit; }
.route .ic { width:34px; height:34px; color:var(--green); margin-bottom:.35rem; }
.route h3 { font-size:1.06rem; }
.route p { font-size:.91rem; color:var(--muted); margin:0; line-height:1.55; }
.route .go { font-size:.88rem; color:var(--green); font-weight:600; margin-top:.3rem; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stat { background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.2rem 1.3rem; }
.stat .n { font-family:inherit; font-size:2rem; font-variant-numeric:tabular-nums;
  font-weight:600; letter-spacing:-.02em; display:block; line-height:1.15; color:var(--green); }
.stat .k { color:var(--muted); font-size:.88rem; display:block; margin-top:.2rem; }

/* ── Facts ──────────────────────────────────────────────────────────────── */
.facts { display:flex; flex-wrap:wrap; gap:.4rem; }
.fact { font-size:.82rem; padding:.26rem .6rem; border-radius:7px; border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-soft); }
.fact.yes { background:var(--green-tint); border-color:color-mix(in srgb,var(--green) 28%,transparent);
  color:var(--green); font-weight:560; }
.fact.unknown { color:var(--faint); border-style:dashed; }
.fact a { color:inherit; text-decoration:underline; text-decoration-style:dotted; }

/* ── Notices ────────────────────────────────────────────────────────────── */
.banner { background:var(--clay-tint); border:1px solid color-mix(in srgb,var(--clay) 26%,transparent);
  border-left:3px solid var(--clay); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; margin:1.75rem 0 0; font-size:.93rem; line-height:1.6; }
.banner strong { color:var(--clay); }
.pill { display:inline-block; font-size:.79rem; font-weight:650; letter-spacing:.04em;
  text-transform:uppercase; padding:.22rem .55rem; border-radius:6px; background:var(--clay-tint);
  color:var(--clay); border:1px solid color-mix(in srgb,var(--clay) 28%,transparent); }
.dupe { margin-top:.85rem; font-size:.85rem; color:var(--clay); line-height:1.55;
  padding-left:.8rem; border-left:2px solid color-mix(in srgb,var(--clay) 35%,transparent); }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:.55rem 1rem; font-size:.93rem; cursor:pointer;
  font-family:inherit; transition:all .14s; }
.chip:hover { border-color:var(--green); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--green); border-color:var(--green);
  color:var(--paper); font-weight:560; }

details.why { margin-top:.9rem; }
details.why summary { font-size:.86rem; color:var(--green); cursor:pointer; font-weight:550; }
details.why p { font-size:.86rem; color:var(--muted); margin:.55rem 0 0; }

code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.85em;
  background:var(--green-tint); color:var(--green); padding:.12rem .38rem; border-radius:5px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.facts-table { width:100%; border-collapse:collapse; font-size:.94rem; }
.facts-table th, .facts-table td { text-align:left; padding:.85rem .7rem;
  border-bottom:1px solid var(--line-soft); vertical-align:top; }
.facts-table thead th { font-family:ui-sans-serif,system-ui,sans-serif; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:650;
  border-bottom:1px solid var(--line); }
.facts-table tbody th { font-weight:550; width:36%; color:var(--ink-soft); }
.facts-table .k { color:var(--faint); font-size:.82rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { padding:3rem 0 4.5rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.88rem; margin-top:3rem; background:var(--surface); }
.site-footer a { color:var(--muted); display:inline-block; min-height:28px; line-height:28px; }
.site-footer a:hover { color:var(--green); }
.site-footer strong { color:var(--ink); }

/* Pointer-coarse rather than a width breakpoint: a tablet in landscape is
   1024px wide and still touched with a finger. */
@media (pointer:coarse) {
  .site-nav { gap:1.6rem; }
  .site-nav a { min-width:44px; justify-content:center; }
  .site-footer a { min-height:44px; min-width:44px; line-height:44px; margin-right:.4rem;
    text-align:center; }
  /* A chip is the main control on /compare and must be comfortably hittable. */
  .chip { min-height:44px; padding:.6rem 1.1rem; }
  /* Source links sit inside a .fact pill; the pill grows so the link does. */
  .fact { padding:.45rem .75rem; }
  /* Chunkier than it would be on a mouse, deliberately: these are the links a
     reader taps to check a citation, and a missed tap is a reader who stops
     checking. */
  .fact { padding:.2rem .75rem; }
  .fact a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
  details.why summary { min-height:44px; display:flex; align-items:center; }
}

@media (max-width:620px) {
  .site-header .wrap { min-height:auto; padding-top:.5rem; padding-bottom:.5rem; gap:.4rem; }
  .site-nav { margin-left:0; width:100%; gap:1.1rem; }
  header.page { padding:2.5rem 0 1.5rem; }
  section.band { padding:2rem 0; }
  .facts-table thead { display:none; }
  .facts-table tr { display:block; border-bottom:1px solid var(--line); padding:.6rem 0; }
  .facts-table th, .facts-table td { display:block; border:0; padding:.18rem 0; width:auto; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ── Map ────────────────────────────────────────────────────────────────── */
.map-figure { margin:0; }
.map-wrap { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.5rem; overflow:hidden; }
.map-wrap svg { display:block; width:100%; height:auto; }
.map-dot { stroke:var(--surface); stroke-width:1; cursor:pointer; transition:stroke .12s; }
.map-dot:hover { stroke:var(--ink); stroke-width:2; }
.map-label { font-size:12px; fill:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif;
  pointer-events:none; }
/* Under this width the SVG is scaled down far enough that a direct label is
   illegible whatever size it is set at. The busiest-address list below the map
   carries the same information in body text. */
@media (max-width:860px) { .map-label { display:none; } }
.map-top { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.map-top .fact { font-size:.84rem; }
.map-grid { stroke:var(--line); stroke-width:.5; stroke-dasharray:3 4; }
.map-tip { position:absolute; pointer-events:none; background:var(--ink); color:var(--paper);
  padding:.5rem .7rem; border-radius:8px; font-size:.82rem; line-height:1.45; max-width:17rem;
  opacity:0; transition:opacity .12s; z-index:5; box-shadow:var(--shadow); }
.map-tip.on { opacity:1; }
.map-tip b { display:block; margin-bottom:.15rem; }
.map-legend { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.84rem; color:var(--muted); margin-top:.9rem; }
.map-legend .sw { display:inline-flex; align-items:center; gap:.35rem; }
.map-legend i { width:13px; height:13px; border-radius:50%; display:inline-block;
  border:1px solid var(--surface); outline:1px solid var(--line); }
figcaption { font-size:.86rem; color:var(--muted); margin-top:.85rem; line-height:1.6; }

/* ── Map interaction ────────────────────────────────────────────────────── */
.map-land { fill:var(--green-tint); stroke:color-mix(in srgb,var(--green) 30%,transparent);
  stroke-width:.7; vector-effect:non-scaling-stroke; }
.map-wrap { position:relative; }
.map-wrap svg { touch-action:none; }
.map-controls { position:absolute; right:.7rem; top:.7rem; display:flex; gap:.3rem;
  align-items:center; background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:10px; padding:.25rem; }
.map-controls button { min-width:34px; min-height:34px; border:0; background:transparent;
  color:var(--ink-soft); font:inherit; font-size:.92rem; border-radius:7px; cursor:pointer; }
.map-controls button:hover { background:var(--green-tint); color:var(--green); }
.map-zoom { font-size:.8rem; color:var(--muted); min-width:2.2rem; text-align:center;
  font-variant-numeric:tabular-nums; }
.map-credit { position:absolute; left:.8rem; bottom:.6rem; font-size:.75rem; color:var(--faint); }
.map-credit a { color:inherit; }
@media (pointer:coarse) { .map-controls button { min-width:44px; min-height:44px; } }