/* Home page only. Loaded after tokens.css and app.css only on the home page (base.html "css" block). */
@layer pages {
/* ---- home ---- */
.hero { position: relative; z-index: 2; isolation: isolate; padding-block: var(--sp-10) var(--sp-12); background: var(--lilac-soft); }
.hero h1 { max-width: 15ch; font-size: var(--text-hero); line-height: 1.02; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { margin-top: var(--sp-4); max-width: 34rem; font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--muted-foreground); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--sp-8); align-items: center; }
.hero-art { display: none; }
.trust-line { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); font-size: var(--text-sm); font-weight: 600; color: var(--muted-foreground); }
.trust-line span { display: inline-flex; align-items: center; gap: var(--sp-1_5); }
.trust-line .i { color: var(--ok-solid); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--sp-16) var(--sp-16); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); }
  .hero-art { display: block; }
}
/* the floating search card */
.searchcard { position: relative; z-index: 5; margin-top: var(--sp-6); max-width: 40rem; padding: var(--sp-3); background: var(--card); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.searchcard-row { display: grid; gap: var(--sp-2); }
.searchcard .sc-where { position: relative; }
.searchcard label.sc-l, .sc-l { display: block; padding: var(--sp-1) var(--sp-4) 0; font-size: var(--text-label); font-weight: 700; color: var(--foreground); }
.searchcard input[type="search"] { min-height: 48px; border: 0; box-shadow: none; background: transparent; padding-left: var(--sp-10); font-size: 1.0625rem; border-radius: var(--radius-lg); }
.searchcard input[type="search"]:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.searchcard select { min-height: 48px; border: 0; box-shadow: none; background-color: transparent; border-radius: var(--radius-lg); }
.searchcard .btn { min-height: 52px; }
.sc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-4) var(--sp-1); border-top: 1px solid var(--border); margin-top: var(--sp-2); }
.sc-opts .check-row { min-height: 40px; padding: 0; align-items: center; font-size: var(--text-sm); font-weight: 600; }
.sc-opts select { width: auto; max-width: 100%; min-height: 40px; font-size: var(--text-sm); font-weight: 600; padding-left: var(--sp-2); }
@media (min-width: 640px) {
  .searchcard-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .searchcard .btn { padding: 0 var(--sp-8); }
}
/* hero illustration: a stack of real-looking nursery cards made of covers */
.hero-stack { position: relative; height: 34rem; max-width: 32rem; margin-left: auto; }
.hero-card { position: absolute; width: 15.5rem; overflow: hidden; background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.hero-card .cover { aspect-ratio: 16 / 9; }
.hero-card div + div { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.hero-card b { display: block; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-card span { display: block; font-size: var(--text-xs); color: var(--muted-foreground); }
.hero-card .badge { position: absolute; left: var(--sp-3); top: var(--sp-3); }
.hero-card:nth-child(1) { left: 0; top: .5rem; transform: rotate(-4deg); }
.hero-card:nth-child(2) { right: 0; top: 4rem; transform: rotate(3deg); z-index: 1; }
.hero-card:nth-child(3) { left: 3rem; top: 18.5rem; transform: rotate(-1.5deg); z-index: 2; }
.hero-card .price span { display: inline; margin-left: var(--sp-1); font-family: var(--font-sans); }
.hero-card .price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--foreground); margin-top: var(--sp-1); }

/* feature cards on tints */
.features3 { display: grid; gap: var(--sp-4); }
.fcard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--radius-2xl); background: var(--sky-soft); }
.fcard[data-tone="peach"] { background: var(--peach-soft); }
.fcard[data-tone="mint"] { background: var(--mint-soft); }
.fcard[data-tone="lilac"] { background: var(--lilac-soft); }
.fcard[data-tone="sun"] { background: var(--sun-soft); }
.fcard h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; font-weight: 600; }
.fcard p { color: var(--muted-foreground); }
.fcard > .itile { background: var(--card); }
.fcard .more { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; }
.fcard-demo { margin-top: auto; padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); font-size: var(--text-sm); }
@media (min-width: 900px) { .features3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the fees card's example price list (England averages, labelled) */
.fd-tag { font-size: var(--text-label); font-weight: 600; color: var(--muted-foreground); }
.mini-price li { display: grid; grid-template-columns: 1fr auto 3rem; align-items: baseline; gap: var(--sp-2); min-height: 30px; border-bottom: 1px solid var(--border); }
.mini-price b, .fd-est b { font-variant-numeric: tabular-nums; color: var(--foreground); }
.fd-est { display: grid; margin-top: var(--sp-2); color: var(--foreground); }
.fd-est .muted { font-size: var(--text-xs); }
/* the calculators band: a standard gap above it, tiles of equal height (item 14 b, c) */
.tools-band { margin-top: var(--section-gap); }
.tcards.even { align-items: stretch; }
.tcards.even > li, .tcards.even .tcard { height: 100%; }
.mini-chat { display: grid; gap: var(--sp-2); }
.mini-chat p { max-width: 88%; padding: var(--sp-2) var(--sp-3); border-radius: 14px; }
.mini-chat .q { justify-self: end; background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; }
.mini-chat .a { background: var(--muted); border-bottom-left-radius: 4px; }
.mini-rc li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: 28px; }

/* big numbers band */
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
.numbers b { display: block; font-family: var(--font-display); font-size: var(--text-stat); line-height: 1; font-weight: 600; color: var(--primary); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.numbers span { display: block; margin-top: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--muted-foreground); max-width: 22ch; }
@media (min-width: 768px) { .numbers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* for nurseries band with a dashboard mock built in HTML */
.nband { display: grid; gap: var(--sp-8); align-items: center; padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-2xl); background: var(--ink-band); color: var(--ink-band-fg); position: relative; isolation: isolate; }
.nband > :not(.deco-box) { position: relative; }
.nband h2 { color: var(--ink-band-fg); }
.nband p { color: var(--ink-band-muted); max-width: 44ch; }
.nband ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.nband li { display: flex; gap: var(--sp-2); align-items: center; color: var(--ink-band-fg); font-weight: 500; }
/* fixed yellow: --sun is a faint tint in dark mode, which made this button look disabled */
.nband li .i { color: var(--sun-solid); }
.nband .btn { background: var(--sun-solid); color: var(--sun-ink); }
.nband .btn:hover { background: color-mix(in oklab, var(--sun-solid) 80%, white); }
.dash-mock { padding: var(--sp-4); border-radius: var(--radius-xl); background: var(--background); color: var(--foreground); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.dash-mock .row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.dash-mock .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dash-mock .tiles div { padding: var(--sp-3); border-radius: var(--radius-md); background: var(--sky-soft); }
.dash-mock .tiles div:nth-child(2) { background: var(--mint-soft); }
.dash-mock .tiles div:nth-child(3) { background: var(--peach-soft); }
.dash-mock .tiles b { display: block; font-family: var(--font-display); font-size: var(--text-xl); }
.nband .dash-mock-h { display: flex; align-items: center; gap: var(--sp-2); max-width: none; margin-bottom: var(--sp-3); font-weight: 700; color: var(--foreground); }
.dash-mock-h .badge { margin-left: auto; }
@media (min-width: 900px) { .nband { grid-template-columns: 1fr 1fr; padding: var(--sp-12); } }

}
@layer pages {
/* search tabs: Search by area | Ask AI (no JS: both panels, stacked) */
.stabs { display: none; }
.js .stabs { display: inline-flex; gap: 2px; margin-top: var(--sp-6); padding: 4px; border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-md); }
.stabs [role=tab] { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--radius-full); background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.stabs [aria-selected=true] { background: var(--primary); color: var(--on-brand); }
.stabs [role=tab]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.js .stabs + .spanel .searchcard, .js .spanel-ai .searchcard { margin-top: var(--sp-3); }
.js .spanel-ai, .js.tab-ai .spanel:not(.spanel-ai) { display: none; }
.js.tab-ai .spanel-ai { display: block; }
.spanel-h { margin-top: var(--sp-6); font-size: var(--text-sm); font-weight: 600; }
.js .spanel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.askcard { padding: 0; box-shadow: var(--shadow-lg); }
/* a composer: the question on top, the count and the button on one row under it,
   so a one-line and a three-line question both sit right with the button */
.askcard .askbox { grid-template-columns: auto minmax(0, 1fr); align-items: start; border-color: transparent; border-radius: var(--radius-2xl); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); }
.askcard .askbox textarea { min-height: 62px; }
.askcard .askbox .btn { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
.askcard .askbox-count { grid-row: 2; align-self: center; }
.askchips { margin-top: var(--sp-4); max-width: 40rem; }
.askchips a { min-height: 36px; font-weight: 500; }
/* city cards: four across on desktop, an illustration where we have one */
.acard .cover { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .area-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* hero picture (ART_URL): one illustration with three floating labels */
.hero-pic { position: relative; max-width: 30rem; margin-left: auto; }
.hero-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.hero-chip .i { color: var(--primary); }
.hero-chip:nth-of-type(1) { left: -1.5rem; top: 12%; }
.hero-chip:nth-of-type(2) { right: -1rem; top: 46%; }
.hero-chip:nth-of-type(3) { left: 1.5rem; bottom: -1rem; }
/* guide cards: equal height, text held to three lines */
.gcards .gcard { height: 100%; }
.gcards .gcard p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* browse: the long lists stay folded */
.home-pc { margin-top: var(--sp-4); }
}