/* Layout only. Colours and fonts come from theme.css. Every rule here is COPIED from the .app's app/static/site.css
   (holisticbrain.app, app repo 9dd1613) — the founder control kit (vault STANDARDS/founder-control-kit.md) — or
   arranges those pieces for the public pages. Never one-off styles: a new piece comes from the .app's kit first. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: style; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; font-variant-numeric: lining-nums; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; }

/* NO BOLD OUTSIDE HEADINGS (the site's type rule, 2026-09-23): weight comes from Montserrat, size and colour. The
   header name is part of the logo — the .app's one exception. The browser may never fake a bold. */
body :not(h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *) { font-weight: 400; }
.topbar .brand { font-weight: 600; }
a { color: var(--color-link); }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
img { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buttons (the kit): 44 px pills. Main = navy, ONE per page. Second = white with a hairline border. Quiet = underlined. */
.kit-btn, a.kit-btn { min-height: var(--kit-target); padding: 0 18px; border-radius: 22px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); font: 400 15px var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-shadow: none; cursor: pointer; box-sizing: border-box; text-align: center; }
.kit-btn--main, a.kit-btn--main { background: var(--color-button-bg); color: var(--color-button-text); border-color: var(--color-button-bg); }
.kit-btn--quiet, a.kit-btn--quiet { background: transparent; border-color: transparent; text-decoration: underline; padding: 0 10px; }

/* Header: the .app's navy top bar with the turquoise line under it. On the navy bar the one main button keeps its navy
   with a white hairline so it reads as a button. Phone: logo + Start free, then the menu + Members log in. */
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand start" "nav login"; align-items: center; gap: 4px 12px; min-height: 64px; padding: 10px 16px; background: var(--color-header-bg); color: var(--color-header-text); border-bottom: 3px solid var(--color-accent); }
.topbar a { color: var(--color-header-text); }
.topbar .brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; min-height: var(--kit-target); font-family: var(--font-heading); text-decoration: none; min-width: 0; }
.topbar .brand img { width: 36px; height: 36px; border-radius: 6px; display: block; flex: none; }
.topnav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0 4px; min-width: 0; }
.topnav a { display: inline-flex; align-items: center; min-height: var(--kit-target); padding: 0 8px; text-decoration: none; border-bottom: 3px solid transparent; }
.topnav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.topnav a:hover { text-decoration: underline; }
.topbar-login { grid-area: login; justify-self: end; }
.topbar .kit-btn--quiet { color: var(--color-header-text); }
.topbar-start { grid-area: start; justify-self: end; }
.topbar .kit-btn--main { border-color: #FFFFFF; }
/* On /cart with items "Check out on Shopify" is the page's main button, so Start free is a second-style (white) pill there. */
.topbar a.kit-btn.topbar-start:not(.kit-btn--main) { color: var(--color-text); }
/* The cart icon (review 3): a 44 px target at the end of the menu, the kit's outline icon (24 px, 2 px stroke, round
   ends — the .app's email-page icons), the current-page line under it on /cart. Its count badge is navy with a white
   number and, on the navy bar, a white ring so it reads (as the bar's main button's white hairline); hidden at 0. */
.topnav .topnav-cart { position: relative; width: var(--kit-target); padding: 0; margin-left: 4px; justify-content: center; }
.cart-icon { display: block; width: 24px; height: 24px; }
.cart-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #FFFFFF; background: var(--navy); color: #FFFFFF; font: 400 11px/16px var(--font-heading); text-align: center; box-sizing: border-box; }
.cart-badge[hidden] { display: none; }
.topbar a:focus-visible { outline-color: var(--light-turquoise); }
@media (min-width: 760px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand nav login start"; gap: 8px 16px; }
  .topnav { margin-left: 16px; }
}

main { max-width: 960px; margin: 0 auto; padding: 24px 16px 40px; }
.page-head { margin: 8px 0 24px; }
.page-head h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.2; }
.lede { margin: 0; color: var(--color-muted); }
@media (max-width: 720px) { .page-head h1 { font-size: 26px; } }

/* THE SEGMENT CIRCLE — the .app's Explore / About circle (site.css "The Explore Circle"): the Lesson Circle's ring
   (THE ONE SEGMENT LOOK: stroke var(--seg-stroke) = radius × 26/168, square ends, nothing behind the segments), her
   picture in the centre, the open segment wider. The .co has no visit memory, so every segment shows its full colour. */
.explore { padding: 8px 0; }
.explore > h1, .explore > h2 { margin: 0 0 12px; }
.explore > h1 { font-size: 30px; line-height: 1.2; }
@media (max-width: 720px) { .explore > h1 { font-size: 26px; } }
.explore-circle { width: 100%; max-width: 440px; margin: 0 auto; }
.ring-circle { display: block; width: 100%; height: auto; overflow: visible; }
.centre-bg { fill: #FFFFFF; }
.arc-track { fill: none; stroke-width: var(--seg-stroke, 26px); stroke-linecap: butt; }
.arc-hit { fill: none; stroke: transparent; stroke-width: 54; pointer-events: stroke; }
.explore-seg { cursor: pointer; outline: none; }
.explore-seg.is-current .arc-track { stroke-width: calc(var(--seg-stroke) * 1.4); }
.explore-seg:focus-visible .arc-hit { stroke: var(--color-text); stroke-width: 2; stroke-dasharray: 4 4; }
.explore-label { font-family: var(--font-heading); font-size: 17px; fill: var(--color-text); }
.explore-centre { cursor: pointer; outline: none; }
.explore-centre:focus-visible .explore-tap-bg { stroke: var(--logo-turquoise); stroke-width: 3; }
.explore-tap-bg { fill: var(--navy); opacity: 0.9; }
.explore-tap { font-family: var(--font-heading); font-size: 15px; fill: #FFFFFF; }
.explore-panel { margin: 16px auto 0; max-width: 640px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; scroll-margin-top: 16px; }
.explore-panel > h2, .explore-panel > h3 { margin: 0 0 6px; font-size: 1.3rem; }
.explore-text { margin: 0 0 14px; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.under-circle { max-width: 640px; margin: 20px auto 0; }

/* Home: the About Dr. Danielle teaser under the circle. */
.about-teaser { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; max-width: 640px; margin: 32px auto 0; padding: 16px; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--kit-radius); }
.about-teaser img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.about-teaser > div { flex: 1 1 200px; min-width: 0; }
.about-teaser h2 { margin: 0 0 6px; font-size: 1.3rem; }
.about-teaser p { margin: 0 0 14px; }

/* Courses: THE COURSE CARDS — COPIED from the .app's home "Courses" shelf (.cards, .card, .course-card, its square
   .cover and .course-card-body; COURSE CARDS SQUARE, founder Q1a 2026-10-16; .co review 2026-10-30): a grid of
   minmax(260px, 1fr) with 16 px gaps (3 across in the 960 px page), radius 8 px, no shadow, phones one column. The
   .app's card title is an h3 under the shelf's h2; here it is an h2 under the page's h1, at the same size. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { display: block; padding: 20px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-decoration: none; min-height: 140px; }
.course-cards { list-style: none; margin: 0; padding: 0; }
.course-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.course-card .cover { position: relative; aspect-ratio: 1 / 1; }
.course-card .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A square cover (the Holistic Brain app image) shows whole, never cropped, on white (its corners are white). */
.course-card .cover.cover-whole { background: #FFFFFF; }
.course-card .cover.cover-whole img { object-fit: contain; }
.course-card-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-card-body h2 { margin: 0; font-size: 1.1rem; }
.course-card-body p { margin: 0; }
/* Subtitle in logo magenta (the .app's WALK FIXES Q2a): 4.79:1 on a card (warm grey). */
.course-card-body .course-subtitle { font-family: var(--font-heading); font-size: 0.95rem; color: var(--logo-magenta); }
.muted { color: var(--color-muted); }
.lesson-count { font-size: 0.9rem; }
/* The one button sits under the text, at the foot of the card, so the buttons line up across a row. */
.course-card-body .kit-btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
}

/* Shop: the course cards (same grid, breakpoints and card), a price in the subtitle's place, the pictures on white
   (two have see-through backgrounds), Add to cart at the foot of the card. */
.product-card { scroll-margin-top: 16px; }
.product-card .cover { background: #FFFFFF; }
.course-card-body form { margin: auto 0 0; }
.course-card-body form .kit-btn { margin-top: 0; }

/* The choice panel after Add to cart (review 3): a white kit panel — "✓ Added to cart" (the toast's ✓ mark), the
   product's name, Keep shopping (second) + Check out now (main), ✕ in the corner (the kit's 44 px icon button). Without
   JavaScript it sits at the top of /shop; opened in place it floats: a bottom sheet on a phone, a small panel at the
   lower right on a wider screen. */
.add-panel { position: relative; max-width: 640px; margin: 0 0 24px; padding: 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--kit-radius); box-sizing: border-box; scroll-margin-top: 16px; }
.add-panel-title { display: flex; align-items: center; gap: 10px; margin: 0 48px 4px 0; font-size: 1.1rem; }
.add-panel-name { margin: 0 48px 14px 0; }
.add-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.add-panel-close { position: absolute; top: 8px; right: 8px; }
.add-panel.is-floating { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: var(--kit-radius) var(--kit-radius) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(8, 51, 109, 0.18); }
@media (min-width: 761px) {
  .add-panel.is-floating { left: auto; right: 24px; bottom: 24px; width: 380px; border-radius: var(--kit-radius); padding-bottom: 16px; box-shadow: 0 8px 24px rgba(8, 51, 109, 0.25); }
}
/* The kit's 44 px round icon button (COPIED from the .app's .kit-icon-btn). */
.kit-icon-btn { width: var(--kit-target); height: var(--kit-target); border-radius: 22px; border: 1px solid transparent; background: transparent; color: var(--color-text); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; padding: 0; box-sizing: border-box; }
.kit-icon-btn:hover { background: var(--color-surface); }

/* The kit's switched-off button (the .app's button:disabled) and empty state. */
.kit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.kit-empty { border: 1px dashed var(--color-border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: var(--color-text); max-width: 640px; }

/* Cart (sample, preview only): one white row per product — picture, title, price each, then − N + · Remove · total. */
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 8px; }
.cart-line img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.cart-line-body h2 { margin: 0; font-size: 1.05rem; }
.cart-line-body p { margin: 2px 0 0; }
.cart-line-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cart-line-controls form { margin: 0; }
.kit-btn.kit-qty { width: var(--kit-target); padding: 0; }
.cart-qty { min-width: 28px; text-align: center; }
.cart-line-total { margin-left: auto; font-family: var(--font-heading); }
.cart-summary { max-width: 640px; margin-top: 16px; padding: 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--kit-radius); }
.cart-subtotal { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; font-family: var(--font-heading); font-size: 1.1rem; }
/* The checkout fills the row and its ⓘ sits at the row's right end at every width, so the tip opens leftwards. */
.cart-checkout { display: flex; align-items: center; gap: 8px; }
.cart-checkout .kit-btn { flex: 1 1 0; min-width: 0; padding: 6px 18px; }

/* The kit's ⓘ tip and toast — COPIED from the .app's site.css ("Toast, ⓘ tip, empty state, tabs"). */
.kit-tip { display: inline-block; position: relative; vertical-align: middle; }
.kit-tip > summary { list-style: none; width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); font: 400 13px var(--font-heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.kit-tip > summary::after { content: ""; position: absolute; inset: -9px; }  /* 44px tap target */
.kit-tip > summary::-webkit-details-marker { display: none; }
.kit-tip > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.kit-tip-text { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: min(280px, 80vw); background: var(--navy); color: #FFFFFF; font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Beside the checkout the ⓘ sits at the right end, so its text opens leftwards (as the .app's toggle tip). */
.cart-checkout .kit-tip-text { left: auto; right: 0; max-width: min(280px, 70vw); }
.kit-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: 24px; background: var(--navy); color: #FFFFFF; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; box-shadow: 0 8px 24px rgba(8, 51, 109, 0.25); max-width: calc(100% - 32px); animation: kit-toast 3.6s ease-out forwards; }
.kit-toast-mark { width: 22px; height: 22px; border-radius: 11px; background: var(--logo-turquoise); color: var(--navy-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 22px; }
@keyframes kit-toast { 0% { opacity: 0; } 8% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .kit-toast { animation: none; } }  /* stays until ✕ */
.kit-toast-close { background: none; border: 0; color: #FFFFFF; font-size: 15px; padding: 0; margin-left: 4px; min-width: 32px; min-height: 32px; cursor: pointer; box-shadow: none; position: relative; }
.kit-toast-close::after { content: ""; position: absolute; inset: -6px; }

/* The forms (the Newsletter row, the Work with Dr. Danielle request) — the .app's kit input, select and field (its
   .kit-input, .kit-select, .live-form / .live-field) and its .error line. The select is 16 px here (not the .app's
   15 px) so a phone does not zoom in when it is tapped. */
.kit-input { min-height: var(--kit-target); border: 1px solid var(--color-border); border-radius: 22px; padding: 0 18px; font: 400 16px var(--font-body); color: var(--color-text); background: var(--color-bg); box-sizing: border-box; }
textarea.kit-input { border-radius: 12px; padding: 10px 14px; min-height: 96px; resize: vertical; }
.kit-select { min-height: var(--kit-target); border: 1px solid var(--color-border); border-radius: 22px; padding: 0 14px; font: 400 16px var(--font-body); color: var(--color-text); background: #FFFFFF; max-width: 100%; }
.error { color: var(--color-error); }
.form-error { margin: 0; }
.request-form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 14px; }
.request-form > .kit-btn { align-self: flex-start; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.form-field .kit-input, .form-field .kit-select { width: 100%; }
.form-count { font-size: 0.9rem; }
.newsletter { max-width: 460px; margin: 0 auto 12px; text-align: left; scroll-margin-top: 16px; }
.newsletter-label { display: block; margin: 0 0 6px; }
.newsletter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter-row .kit-input { flex: 1 1 200px; min-width: 0; }
.newsletter-row .kit-btn { flex: 0 0 auto; }
.newsletter .form-error { margin: 6px 0 0; }

/* Footer */
.footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 16px; text-align: center; }
.footer-links { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; max-width: 960px; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--kit-target); padding: 0 8px; }
.footer-copy { margin: 4px 0 0; color: var(--color-muted); font-size: 0.9rem; }