/* Homepage only (pages/templates/pages/home.html and home/_*.html). Swiss style: a strict 12-column grid, very large
   grotesque type, facts as big numbers, hairline rules, the plans as one table, square corners. System fonts only.
   Colours follow --lv-accent, so the colour lab (staff, or /?lab=1) recolours everything live. */

.home {
  --lv-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-shadow-s: none;
  --wa-form-control-border-radius: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  font-family: var(--lv-grotesk);
  color: var(--lv-ink);
}
.home :is(h1, h2, h3, p, li, summary, td, th, label, small) { font-family: var(--lv-grotesk); }
.home p { color: var(--lv-graphite); }
.home li { margin: 0; }  /* Web Awesome indents list items */
.home .muted { color: var(--lv-graphite); }
.home .wa-button, .home button.wa-brand { border-radius: 0; }

/* ---------- hero */
.hm-hero { border-bottom: 1px solid var(--lv-ink); }
.hm-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--wa-space-l); padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 5rem); }
.hm-display { margin: 0; font-weight: 700; font-size: clamp(3rem, 10.2vw, 9.2rem); line-height: 0.9; letter-spacing: -0.045em;
  color: var(--lv-ink); }
.hm-grid .hm-display { grid-column: 1 / -1; }
.hm-hero-copy { grid-column: 7 / -1; display: grid; gap: var(--wa-space-l); align-content: start; }
@media (max-width: 56rem) { .hm-hero-copy { grid-column: 1 / -1; } }
.home .hm-lead { margin: 0; max-width: none; color: var(--lv-ink); font-size: 1.25rem; line-height: 1.4; }
.hm-actions { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); }
.hm-note { margin: 0; font-size: var(--wa-font-size-s); }

/* ---------- sections: a label column and a body column on the same 12-column grid */
.hm-section { border-bottom: 1px solid var(--lv-ink); }
.hm-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--wa-space-l);
  padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hm-label { grid-column: 1 / 4; margin: 0; padding-top: 0.5em; font-size: var(--wa-font-size-m); font-weight: 700; letter-spacing: 0;
  color: var(--lv-ink); }
.hm-label::before { content: ""; display: block; width: 1.5rem; height: 6px; margin-bottom: var(--wa-space-s); background: var(--lv-accent); }
.hm-body { grid-column: 4 / -1; min-width: 0; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 56rem) { .hm-label, .hm-body { grid-column: 1 / -1; } }
.home .hm-statement { margin: 0; max-width: 22ch; font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.03em; color: var(--lv-ink); text-wrap: balance; }
.hm-fine { margin: 0; font-size: var(--wa-font-size-s); }

/* ---------- trust: facts as big numbers, then proof tiles that link to where it is published */
.hm-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-l); }
.hm-facts li { display: grid; gap: 0.3rem; align-content: start; padding-top: var(--wa-space-s); border-top: 6px solid var(--lv-ink);
  color: var(--lv-ink); line-height: 1.25; }
.hm-big { font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--lv-accent); }
@media (max-width: 40rem) { .hm-facts { grid-template-columns: 1fr; } }
.hm-tiles, .hm-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wa-space-xl) var(--wa-space-l);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hm-tiles > li, .hm-points > li { border-top: 3px solid var(--lv-ink); padding-top: var(--wa-space-m); }
.hm-tiles a { display: block; color: inherit; text-decoration: none; }
.hm-tiles a:hover h3, .hm-tiles a:focus-visible h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.hm-tiles h3, .hm-points h3, .hm-claim h3 { margin: 0 0 var(--wa-space-2xs); font-size: var(--wa-font-size-l); font-weight: 700; color: var(--lv-ink); }
.hm-tiles p, .hm-points p, .hm-claim p { margin: 0; }
.hm-points > li > wa-icon { display: block; font-size: var(--wa-font-size-xl); color: var(--lv-accent); margin-bottom: var(--wa-space-s); }

/* ---------- plans: one table, Personal and Business grouped; scrolls sideways on a phone */
.hm-table-wrap { overflow-x: auto; }
.hm-plans { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hm-plans :is(th, td) { text-align: left; vertical-align: top; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--lv-rule); }
.hm-plans .biz { padding-left: 1rem; border-left: 1px solid var(--lv-rule); }
.hm-plans thead th { color: var(--lv-ink); font-weight: 700; }
.hm-plans .hm-groups th { padding-bottom: 0.3rem; border-bottom: 2px solid var(--lv-ink); font-size: var(--wa-font-size-s); color: var(--lv-graphite); font-weight: 600; }
.hm-plans .hm-groups td { border-bottom: 2px solid var(--lv-ink); }
.hm-plans tbody th { font-weight: 600; color: var(--lv-ink); position: sticky; left: 0; background: var(--lv-paper); padding-right: 1.25rem; }
.hm-plans td { color: var(--lv-graphite); }
.hm-price { display: inline-block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--lv-ink); }
.hm-price + small { display: block; font-size: var(--wa-font-size-s); }
.hm-cta-row td { border-bottom: 0; padding-top: var(--wa-space-m); }
.hm-plan-stack { display: none; }
/* a phone: one block per plan instead of a table that scrolls sideways */
@media (max-width: 44rem) {
  .hm-table-wrap { display: none; }
  .hm-plan-stack { display: grid; gap: var(--wa-space-xl); }
  .hm-plan { display: grid; gap: var(--wa-space-s); padding-top: var(--wa-space-s); border-top: 6px solid var(--lv-ink); }
  .hm-plan-group { margin: 0; font-size: var(--wa-font-size-s); font-weight: 600; }
  .hm-plan h3 { margin: 0; font-size: var(--wa-font-size-l); font-weight: 700; color: var(--lv-ink); }
  .hm-plan-price { margin: 0; }
  .hm-plan dl { margin: 0; }
  .hm-plan dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--wa-space-s); padding-block: 0.6rem; border-top: 1px solid var(--lv-rule); }
  .hm-plan dt { font-weight: 600; color: var(--lv-ink); }
  .hm-plan dd { margin: 0; color: var(--lv-graphite); }
  .hm-plan .wa-button { justify-self: start; }
}

/* ---------- inbox: .hm-app is an illustrative app window, never a real mailbox */
.hm-app { margin: 0; background: var(--lv-paper); border: 2px solid var(--lv-ink); }
.hm-app figcaption { padding: var(--wa-space-xs) var(--wa-space-m); font-size: var(--wa-font-size-xs); color: var(--lv-graphite);
  border-top: 1px solid var(--lv-rule); }
.hm-bar { display: flex; gap: 6px; align-items: center; padding: var(--wa-space-s) var(--wa-space-m); border-bottom: 1px solid var(--lv-rule); }
.hm-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--lv-rule); }
.hm-bar b { margin-left: var(--wa-space-s); font-size: var(--wa-font-size-s); color: var(--lv-ink); }
.hm-panes { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.25fr); min-height: 19rem; font-size: var(--wa-font-size-s); }
.hm-folders { list-style: none; margin: 0; padding: var(--wa-space-s); display: grid; align-content: start; gap: 2px;
  border-right: 1px solid var(--lv-rule); background: #fafaf8; }
.hm-folders li { display: flex; align-items: center; gap: var(--wa-space-xs); padding: 0.45rem 0.6rem; color: var(--lv-graphite); }
.hm-folders li b { margin-left: auto; color: var(--lv-ink); }
.hm-folders li.on { background: var(--wa-color-brand-90); color: var(--lv-ink); font-weight: 600; }
.hm-folders .sep { margin-top: var(--wa-space-s); padding-top: var(--wa-space-s); border-top: 1px solid var(--lv-rule); }
.hm-list { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--lv-rule); }
.hm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--wa-space-s); padding: 0.7rem var(--wa-space-m);
  border-bottom: 1px solid var(--lv-rule); color: var(--lv-graphite); }
.hm-list li b { color: var(--lv-ink); font-weight: 500; }
.hm-list li.unread b { font-weight: 700; }
.hm-list li span { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-list li > :is(wa-badge, wa-icon) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.hm-list li.on { background: var(--wa-color-brand-95); box-shadow: inset 3px 0 0 var(--lv-accent); }
.hm-read { padding: var(--wa-space-l); display: grid; align-content: start; gap: var(--wa-space-s); color: var(--lv-graphite); }
.hm-read b { color: var(--lv-ink); }
.home .hm-subject { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--lv-ink); }
.hm-read wa-callout { font-size: var(--wa-font-size-s); }
.ph { display: block; height: 0.55rem; border-radius: 4px; background: #eceae5; }
.ph.short { width: 55%; }
@media (max-width: 56rem) {
  .hm-panes { grid-template-columns: minmax(0, 1fr); }
  .hm-folders, .hm-read { display: none; }
  .hm-list { border-right: 0; }
}

/* ---------- sign-up: an address field with the domain attached, and the envelope that shows what is typed */
.hm-claim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-2xl); align-items: center;
  padding-top: var(--wa-space-xl); border-top: 6px solid var(--lv-ink); }
@media (max-width: 56rem) { .hm-claim { grid-template-columns: minmax(0, 1fr); } }
.hm-claim-copy { display: grid; gap: var(--wa-space-m); }
.hm-claim h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
.claim label { font-size: var(--wa-font-size-s); color: var(--lv-graphite); }
.claim-row { display: flex; align-items: stretch; max-width: 30rem; }
.claim-row input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: var(--wa-font-size-l); }
.claim-domain { display: flex; align-items: center; padding-inline: var(--wa-space-m); border: 1px solid var(--wa-form-control-border-color, var(--lv-rule));
  border-left: 0; background: #f7f7f5; color: var(--lv-graphite); }
.envelope { position: relative; margin: 0; aspect-ratio: 1.6; background: #fbfaf7; border: 1px solid #ddd8cd; overflow: hidden;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--lv-ink) 55%, transparent); }
.env-flap { position: absolute; inset: 0 0 auto 0; height: 46%;
  background: linear-gradient(to bottom right, transparent 49.6%, #e6e1d6 50%, transparent 50.4%),
    linear-gradient(to bottom left, transparent 49.6%, #e6e1d6 50%, transparent 50.4%); }
.env-seal { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--lv-accent); color: var(--lv-paper); font-weight: 700; font-size: 1.6rem;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--lv-accent) 40%, white); }
.env-stamp { position: absolute; top: 8%; right: 5%; width: 3rem; height: 3.6rem; display: grid; place-items: center;
  border: 2px dashed color-mix(in oklab, var(--lv-accent) 50%, white); color: var(--lv-accent); font-size: 1.3rem; }
.env-to { position: absolute; left: 38%; right: 8%; bottom: 14%; display: grid; gap: 0.6rem; }
.env-to .ph { background: #e2ddd2; height: 0.5rem; }
.env-from { position: absolute; left: 6%; top: 8%; max-width: 60%; overflow-wrap: anywhere; font-size: var(--wa-font-size-s); color: var(--lv-ink); }
.envelope small { display: block; font-size: var(--wa-font-size-2xs); color: var(--lv-graphite); }

/* ---------- FAQ: hairline rows, no boxes */
.hm-faq details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--lv-rule); border-radius: 0; background: none; }
.hm-faq details:last-child { border-bottom: 1px solid var(--lv-rule); }
.hm-faq summary { padding: var(--wa-space-m) 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--lv-ink); cursor: pointer; }
.hm-faq details > p { margin: 0 0 var(--wa-space-m); max-width: 40rem; line-height: 1.55; }

/* ---------- closing call to action */
.hm-final .wrap { display: grid; gap: var(--wa-space-l); justify-items: start; padding-block: clamp(3rem, 8vw, 6rem); }
.hm-final .hm-display { font-size: clamp(2.6rem, 8vw, 7rem); }

/* ---------- Colour lab (staff / ?lab=1 only) */
.lab { position: fixed; left: var(--wa-space-m); bottom: var(--wa-space-m); z-index: 50; font-size: var(--wa-font-size-s); }
.lab details[open] { width: min(22rem, calc(100vw - 2rem)); }
.lab details { background: var(--lv-paper); border: 1px solid var(--lv-rule); border-radius: 10px; margin: 0;
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--lv-ink) 50%, transparent); }
.lab summary { font-weight: 600; gap: var(--wa-space-s); }
.lab-body { max-height: min(70vh, 34rem); overflow: auto; padding: 0 var(--wa-space-m) var(--wa-space-m); }
.lab-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { gap: 6px; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--lv-ink); outline-offset: 1px; }
.swatch .dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; display: inline-block; }
.swatch-ink .dot { background: #1b2430; }
.swatch-navy .dot { background: #22385c; }
.swatch-lapis .dot { background: #24439a; }
.swatch-bordeaux .dot { background: #6e1f2c; }
.swatch-rose .dot { background: #8e3a55; }
.swatch-forest .dot { background: #1f4a3a; }
.swatch-bronze .dot { background: #6f5326; }
.swatch-cognac .dot { background: #6b4329; }
.swatch-plum .dot { background: #4a2d5c; }
.swatch-noir .dot { background: #000000; }
.swatch-signal .dot { background: #c4161c; }
.lab input[type="range"] { width: 100%; accent-color: var(--lv-accent); }