/* Homepage-only styling; dashboard, public templates and setup keep their own styles. */
body.home-restyle {
  --home-ink: #111b2b;
  --home-muted: #4e5767;
  --home-rose: #a8675f;
  --home-display: "Fraunces", Georgia, serif;
  --home-sans: "Plus Jakarta Sans", Arial, sans-serif;
  margin: 0;
  /* The rooftop photo lives here as the page's own backdrop, not as foreground photography -
     a semi-transparent cream wash sits on top of it (first layer paints over the second),
     leaving only a faint, fixed watermark visible wherever a section has no opaque background
     of its own (the hero, the reality section, and the gaps between later sections).
     !important is required here: styles.css has a legacy `body { background: ... !important }`
     rule (a shared decorative background meant for other pages) that otherwise silently wins
     over this more-specific body.home-restyle selector and replaces the watermark outright -
     found live when adjusting the wash opacity had zero visible effect. */
  background-color: #fffcfc !important;
  background-image: linear-gradient(180deg, rgba(255, 252, 252, .78) 0%, rgba(255, 252, 252, .86) 100%), url("assets/homepage-dance-studio.png?v=20260930-watermark") !important;
  background-position: center, top center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, fixed !important;
  color: var(--home-ink);
  font-family: var(--home-sans);
}
.home-restyle *, .home-restyle *::before, .home-restyle *::after { box-sizing: border-box; letter-spacing: 0; }
.home-restyle main { width: 100%; max-width: none; margin: 0; overflow: clip; padding: 0; }
.home-restyle .site-header {
  /* The real cause of the "not blended" seam (confirmed by bisecting with an unstyled div,
     then diffing against every legacy .site-header rule in styles.css): five older, lower-
     specificity `.site-header` rules elsewhere in styles.css set backdrop-filter and
     box-shadow on the bare class name. This rule's higher specificity (.home-restyle
     .site-header) only overrides properties it actually declares - it never declared
     backdrop-filter or box-shadow at all, so those legacy declarations kept applying
     regardless of anything else changed here, quietly blurring/shadowing a strip of the
     watermark right at the header's edge. Explicit `none` resets below fix it for real -
     position is normal flow, not absolute/overlaid, matching every other section on the page
     that already blends with zero special-casing. position: relative only anchors the mobile
     nav dropdown, which is positioned relative to this element. */
  position: relative; width: 100%;
  max-width: none; height: 86px; margin: 0; padding: 0 max(20px, calc((100% - 1180px)/2 + 20px)); display: flex; align-items: center;
  gap: 36px; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none;
}
.home-restyle .brand { flex-shrink: 0; gap: 6px; }
.home-restyle .brand-mark { width: 60px; height: 46px; margin: 0; padding: 0; background: none; box-shadow: none; }
.home-restyle .brand-mark img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.home-restyle .brand-lockup { display: grid; gap: 2px; }
.home-restyle .brand-name { color: #111b2b; font-family: var(--home-display); font-size: 27px; line-height: 1.1; font-weight: 600; }
.home-restyle .brand-name span { color: var(--home-rose); background: none; -webkit-text-fill-color: currentColor; }
.home-restyle .brand-tagline { color: #27313e; font-size: 9px; text-transform: uppercase; }
.home-restyle .header-login {
  font: 500 13px var(--home-sans); color: var(--home-ink); white-space: nowrap; text-decoration: none;
  background: none; border: 0; padding: 10px 0; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.home-restyle .header-login:hover { color: var(--home-rose); }
.home-restyle .header-account { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.home-restyle .header-account[hidden] { display: none; }
/* display: inline-flex is required, not cosmetic - a legacy, unscoped `@media (max-width:
   920px) { .header-cta { display: none; } }` rule in styles.css otherwise leaks through
   below 920px, since this higher-specificity rule never previously declared its own
   `display` for that property to override. */
.home-restyle .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 24px; border: 0; border-radius: 3px; background: var(--home-rose); color: white; box-shadow: none; font: 600 13px var(--home-sans); }
.home-restyle a:focus-visible, .home-restyle button:focus-visible { outline: 3px solid var(--home-rose); outline-offset: 4px; }
.ed-eyebrow { margin: 0 0 10px; font: 500 12px/1.5 var(--home-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--home-muted); }
.ed-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; min-width: 210px; max-width: 100%; padding: 13px 26px; background: var(--home-rose); color: white; border: 1px solid var(--home-rose); border-radius: 4px; font: 500 15px/1.3 var(--home-sans); text-decoration: none; transition: background .18s, transform .18s; }
.ed-button:hover { background: #8f5851; color: white; transform: translateY(-2px); }
.ed-button-outline { background: transparent; color: var(--home-rose); }
.ed-button-outline:hover { background: rgba(168, 103, 95, .08); color: #8f5851; transform: translateY(-2px); }
.ed-section-heading { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.ed-section-heading h2 { margin: 0; color: var(--home-ink); font: 400 clamp(1.7rem, 2.9vw, 2.3rem)/1.2 var(--home-display); text-wrap: balance; }
.ed-section-heading em { color: var(--home-rose); font-style: italic; }
.ed-section-subtext { margin: 10px 0 0; color: var(--home-muted); font-size: 15px; }

.ed-reveal { opacity: 0; transition: opacity .7s ease; }
.ed-reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ed-reveal { opacity: 1; transition: none; } }
/* A quieter variant for the "pain -> solution" pivot: the same .is-in toggle from the
   IntersectionObserver in script.js, but also rising ~26px into place rather than just fading,
   per explicit direction ("gently rising into view... no dramatic animation"). Combine with
   .ed-reveal on the same element (the observer only looks for .ed-reveal) and optionally a
   data-reveal-delay to stagger it after a sibling. */
.ed-reveal-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.84,.44,1); }
.ed-reveal-rise.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ed-reveal-rise { opacity: 1; transform: none; transition: none; } }

/* 01 — Hero: no photography, no product-panel visual - a dark, confident type statement
   centered on its own, letting the body's watermark photo carry the visual weight. */
.ed-hero { position: relative; padding: clamp(56px, 7vw, 88px) clamp(24px, 6vw, 88px) clamp(64px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ed-hero-copy { max-width: 1000px; margin: 0 auto; color: var(--home-ink); }
/* Real bug found live: styles.css has a bare `h1 { max-width: 840px; letter-spacing:
   -0.045em; }` rule (unscoped "Creative typography pass") that silently capped this
   headline's width and tightened its tracking - this rule's higher specificity only
   overrides properties it actually declares, so those two properties kept leaking through
   until explicitly reset here, the same way the header's backdrop-filter/box-shadow leaked
   earlier in this redesign. */
.ed-hero-copy h1 { margin: 0; max-width: none; letter-spacing: normal; font: 400 clamp(2.6rem, 5.6vw, 4.4rem)/1.02 var(--home-display); color: var(--home-ink); }
.ed-hero-copy h1 em { color: var(--home-rose); font-style: italic; font-weight: 400; }
.ed-hero-sub { max-width: 620px; margin: 18px auto 26px; font-size: 16px; line-height: 1.55; color: var(--home-muted); white-space: nowrap; }
/* white-space: nowrap keeps this on one line down to 640px, where the line (~505px) still
   comfortably clears the hero's own side padding. Below that it has to wrap again (reset in
   the @media (max-width: 640px) block) or it would get silently clipped by body's legacy
   overflow-x: hidden rule - the same failure mode as the header CTA bug. */

/* 02 — The reality: editorial, scattered "chaos" UI fragments on the same light watermark
   backdrop as the hero - compact, makes its point quickly rather than becoming its own
   standalone experience. */
/* Real bug found live: every other section (.site-header, .ed-business, .ed-pricing,
   .ed-steps) caps its content to the same ~1080-1180px column and centers it with margin:
   auto - this section never did, just a clamp()'d side padding with no max-width. At wide
   viewports that left its text flush against the browser edge (inset only by the clamp's
   88px ceiling) while the header/hero content above it sat centered in the narrower column,
   so "RIGHT NOW, WITHOUT BEYONDEIGHT" started well left of the logo above it. */
/* Creative pass, per explicit direction: the text sat in its own left column fighting the card
   cluster for attention in a side-by-side split. Centered instead, stacked above the cards -
   the same single-focal-point composition the hero above it already uses, so the two sections
   read as one deliberate visual language rather than the hero being centered and this one
   being an asymmetric two-column split right under it. The card grid itself stays a plain
   aligned grid (not scattered/tilted) - only the overall section's layout changed, not the
   individual cards, which an earlier explicit direction already settled. */
.ed-reality { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(24px, 6vw, 88px); color: var(--home-ink); display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 640px left "Then you piece everything else together yourself." within ~6px of the h2's own
   wrap width at the clamp's max font-size - fine in this environment's headless rendering, but
   font-hinting/zoom differences in a real browser tip it onto a second line. Widened with real
   margin so it reliably stays one line per sentence, matching the rest of the section. */
.ed-reality-text { max-width: 760px; }
.ed-reality-text h2 { margin: 0; color: inherit; font: 400 clamp(1.35rem, 2.6vw, 2rem)/1.32 var(--home-display); text-wrap: pretty; }
.ed-reality-detail { margin: 10px 0 0; color: var(--home-muted); font-size: 15px; line-height: 1.6; }
/* Sized up significantly from the original 1.05rem subtitle scale, per explicit direction -
   this line is its own dramatic beat ("it works, but...") building tension before "Put it all
   in one place" resolves it, not a quiet aside, so it needs to read as a near-headline moment
   in its own right rather than body-copy-sized text. Font switched from the sans to the same
   serif display face/weight as .ed-reality-meet ("Put it all in one place") below it, per
   explicit direction - the two beats should feel like the same voice, not two different fonts. */
.ed-reality-bridge { margin: 0; font: 400 clamp(1.9rem, 3.8vw, 2.7rem)/1.3 var(--home-display); color: var(--home-rose); }
/* Lets the "pain" visual breathe as the reader reaches the pivot, per explicit direction - not
   a hard cut, the cluster softens in place while "Put it all in one place" and the dashboard
   shot take over as the focal point. script.js toggles this both ways as .ed-reality-pivot
   enters/leaves the viewport, so scrolling back up restores the cluster rather than leaving it
   permanently faded (real bug found live with an earlier one-shot version). */
.ed-chaos { width: 100%; transition: opacity 1.1s ease; }
/* Real bug found live: a first pass added `filter: saturate(.75) blur(.5px)` alongside the
   opacity drop, which produced a sharp rectangular seam at the cluster's own bounding box - the
   body's fixed-attachment watermark rendered visibly different in brightness inside vs. outside
   that box while the filter transition ran. Confirmed by removing just the filter property and
   re-screenshotting: the seam disappeared completely, isolating it to `filter` specifically
   (not `opacity`, which is used all over this page against the same fixed background with no
   such issue). This is a known Chromium compositing quirk - `filter` forces the element onto
   its own layer, which doesn't sample a `background-attachment: fixed` ancestor the same way
   as normal paint does. Opacity alone still reads as "soften," just without the extra blur. */
.ed-chaos.is-settling { opacity: .42; }
@media (prefers-reduced-motion: reduce) { .ed-chaos.is-settling { opacity: 1; transition: none; } }
/* Creative pass, per reference image supplied live: the card cluster goes back to an
   overlapping, gently tilted "messy desk" arrangement with hand-drawn-style annotations
   calling out specific pain points, rather than the plain aligned grid an earlier explicit
   direction had settled on. That earlier direction is deliberately being reversed here on
   fresh, explicit creative direction (a reference screenshot), not forgotten - documented so
   future passes don't "fix" this back into a grid thinking it's an oversight. Absolute
   positioning within a relative canvas (rather than CSS Grid) is what makes the controlled
   overlap/rotation per card practical to tune by eye. Collapses to a plain stacked column with
   no overlap/rotation on narrower viewports (see the max-width: 800px block below) - this kind
   of composition only reads as "cluttered desk" at a size where several cards are visible at
   once side by side, not stacked full-width on a phone. */
.ed-chaos-cluster { position: relative; width: min(1260px, 100%); height: 470px; margin: 28px auto 0; text-align: left; }
.ed-chaos-item { position: absolute; padding: 14px 16px; overflow: hidden; background: rgba(255,255,255,.97); border: 1px solid rgba(225,214,210,.72); border-radius: 8px; box-shadow: 0 16px 32px rgba(48,37,34,.14); color: #151515; font: 500 12px/1.35 var(--home-sans); }
.ed-chaos-dm { left: 10%; top: 50px; width: 285px; transform: rotate(-7deg); }
.ed-chaos-dm .ed-chaos-app { display: grid; grid-template-columns: auto 1fr; }
.ed-chaos-dm .ed-chaos-app > span:last-child { grid-column: 2; margin: -5px 0 0; color: #999; }
.ed-chaos-venmo { left: 39%; top: 66px; width: 300px; transform: rotate(5deg); }
.ed-chaos-messages { right: 8%; top: 44px; width: 270px; transform: rotate(5deg); }
.ed-chaos-sheet { left: 29%; top: 230px; width: 430px; padding: 12px 14px; transform: rotate(.5deg); }
.ed-chaos-todo { right: 15%; top: 285px; width: 240px; background: #fff8dc; transform: rotate(5deg); }
.ed-chaos-todo .ed-chaos-app { padding-bottom: 7px; border-bottom: 1px solid #eedfa9; }
.ed-chaos-app { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: #454545; font: 600 10px var(--home-sans); }
.ed-chaos-app > span:last-child { margin-left: auto; color: #8f8f8f; font-weight: 400; }
.ed-chaos-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.ed-chaos-icon svg { width: 100%; height: 100%; }
.ed-chaos-icon-messages { align-items: center; justify-content: center; border-radius: 5px; background: #20c966; color: white; font-size: 11px; }
.ed-chaos-icon-ig { color: #c13584; }
.ed-chaos-icon-sheet { color: #0f9d58; }
.ed-chaos-avatar { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex-shrink: 0; border-radius: 50%; background: #e8f3ff; color: #008cff; font: 700 12px var(--home-sans); }
.ed-chaos-avatar-ig { background: #27211f; color: white; }
.ed-chaos-dm-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ed-chaos-dm-row p { margin: 0; padding: 8px 10px; background: #f2f1f0; border-radius: 13px 13px 13px 3px; }
.ed-chaos-logo-venmo { display: block; height: 18px; width: auto; color: #008cff; }
.ed-chaos-venmo-row { display: flex; align-items: center; gap: 10px; }
.ed-chaos-venmo strong { display: block; font-size: 14px; }
/* Scoped to the "Class - Sat 4pm" detail line specifically, not a blanket `.ed-chaos-venmo span`
   - that broader selector also matched .ed-chaos-avatar (also a span, also a descendant of
   .ed-chaos-venmo), and at equal specificity its `display: block` silently beat the avatar's
   own `display: inline-flex`, breaking its centered "M" initial without changing anything
   visibly obviously wrong - confirmed via computed-style check, not just by eye. */
.ed-chaos-venmo-row > div > span { display: block; color: #333; }
.ed-chaos-detail { display: block; margin: 10px 0 0 41px; color: #008cff; font-weight: 700; }
.ed-chaos-messages ul, .ed-chaos-todo ul { list-style: none; margin: 0; padding: 0; }
.ed-chaos-messages li { display: grid; grid-template-columns: 1fr; padding: 6px 0; border-top: 1px solid #ece8e6; }
.ed-chaos-messages li span { color: #555; font-size: 10px; }
.ed-chaos-sheet table { width: 100%; border-collapse: collapse; font-size: 9px; }
.ed-chaos-sheet th, .ed-chaos-sheet td { padding: 4px 6px; border: 1px solid #e8e5e2; text-align: left; white-space: nowrap; }
.ed-chaos-sheet th { background: #f8f8f7; font-weight: 600; }
.ed-chaos-sheet td.is-paid { color: #0a8a5f; font-weight: 700; background: #dff4df; }
.ed-chaos-sheet td.is-pending { color: #a84141; font-weight: 700; background: #ffe2e2; }
.ed-chaos-todo li { position: relative; padding: 5px 0 5px 22px; }
.ed-chaos-todo li::before { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border: 1px solid #b8b19f; border-radius: 50%; background: rgba(255,255,255,.55); }
/* Hand-drawn-style callouts, per the reference: short handwritten asides naming the specific
   pain point each nearby card represents, rather than leaving the cards to speak for
   themselves. One per card (five total), positioned by eye against the cluster's fixed layout
   above, using the real margin space around the pile so no callout overlaps a card's actual
   content. Like the cluster itself, hidden on narrower viewports (see max-width: 1050px below)
   rather than attempting to reposition them against a reflowed stack. No arrow glyph pointing
   at the card anymore (removed per explicit direction) - each callout's own position next to
   its card is what ties it to that card instead. */
.ed-chaos-callout { position: absolute; z-index: 3; width: 150px; margin: 0; color: #24201e; font: 600 20px/1.16 "Caveat", cursive; }
.ed-callout-dm { left: 15px; top: 15px; width: 230px; transform: rotate(-8deg); }
/* Codex's own original position for this callout (top: 0, default 150px width) overlaps the
   Venmo card's logo directly - confirmed via zoomed screenshot, the callout's own two-line
   wrapped text runs past the point where the card begins. Widening it to 210px lets "Tracking
   payments (and who still hasn't)" wrap at a natural break instead of a tighter 3-line stack,
   and raising it 10px clears the card below - verified via re-measurement that both the detail
   paragraph above and the Venmo card below stay clear. */
.ed-callout-payments { left: 46%; top: -10px; width: 210px; text-align: center; transform: translateX(-50%) rotate(-3deg); }
/* Codex's own original position for this callout (top: 130px, default 150px width) overlaps
   the Messages card's own contact rows directly - confirmed via zoomed screenshot, "Priya -
   Will there be parking?" sat underneath the callout's wrapped text. Widening it so the first
   two words share a line, and raising it to sit just above the card (clearing its "Messages"
   header, the one row it still grazes, rather than its actual message content) fixes the
   collision - verified via re-screenshot. */
.ed-callout-messages { right: 0; top: -8px; width: 240px; text-align: right; transform: rotate(4deg); }
.ed-callout-roster { left: 17%; top: 305px; transform: rotate(-5deg); }
.ed-callout-todo { right: 2%; top: 340px; transform: rotate(5deg); }
/* The "It works, but..." payoff used to sit inside .ed-reality-text, immediately after the
   headline/detail. It's now its own block below the full card cluster instead, with the new
   "what if it didn't have to be" pivot straight into the BeyondEight name - the reference's
   own flow builds through the whole messy-desk visual before turning the corner, rather than
   resolving the tension before the visual proof of it even appears. */
/* Per explicit direction (live screenshot showed the faded cards still crowding "It works..."):
   the opacity fade on the cluster happens quickly, so physical distance is what actually
   separates the two "scenes" - the cards need to feel like a different moment, not a stack
   bleeding straight into the text below it. */
.ed-reality-pivot { max-width: 640px; margin-top: 220px; }
/* More separation between the two staggered beats (the bridge line, then this resolution
   group) than the 16px that was just enough for two lines sitting inside one single block -
   per explicit direction, now that they're already timed apart they need visible space apart
   too, not just a brief pause. */
.ed-reality-resolve { margin-top: 90px; }
.ed-reality-pivot .ed-eyebrow { margin-top: 0; }
.ed-reality-meet { margin: 8px 0 0; font: 400 clamp(1.8rem, 3.4vw, 2.4rem)/1.15 var(--home-display); color: var(--home-ink); }
.ed-reality-meet em { color: var(--home-rose); font-style: italic; }
.ed-reality-tagline { margin: 10px 0 0; color: var(--home-muted); font-size: 15px; }

/* The "Put it all in one place" pivot line is a promise - this is its visual proof, a realistic
   dashboard screenshot sitting right after it (same "say it, then show it" pattern as the
   chaos cluster above), rather than making the reader wait for the "How it works" steps further
   down the page to see what the product actually looks like. Reuses the real browser-chrome
   bar styling from the site-preview mock and the same icon/stat-card conventions used
   elsewhere, scaled up into a standalone product shot instead of a small step-list card. */
.ed-dash-shot-wrap { width: 100%; max-width: 1040px; margin: 56px auto 0; text-align: left; }
.ed-dash-shot { border-radius: 10px; overflow: hidden; background: white; box-shadow: 0 24px 56px rgba(48,37,34,.16); border: 1px solid #efe6e1; }
.ed-dash-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f2e9e6; }
.ed-dash-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #d9c4bf; }
.ed-dash-browser-bar em { margin-left: 10px; font: 400 11px var(--home-sans); font-style: normal; color: #756a68; }
.ed-dash-body { display: flex; min-height: 420px; font-family: Inter, Arial, sans-serif; }
.ed-dash-nav { flex-shrink: 0; width: 180px; padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; background: #faf6f3; border-right: 1px solid #ece6e1; }
.ed-dash-nav-brand { display: block; margin: 0 6px 18px; font: 600 14px var(--home-display); color: var(--home-ink); }
.ed-dash-nav-brand b { color: var(--home-rose); font-weight: 600; }
.ed-dash-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: #766d68; font: 600 12px Inter, Arial, sans-serif; }
.ed-dash-nav a svg { width: 15px; height: 15px; flex-shrink: 0; }
.ed-dash-nav a.is-active { background: #f4e6e2; color: #7d372c; }
.ed-dash-main { flex: 1; min-width: 0; padding: 24px 28px; }
.ed-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ed-dash-eyebrow { margin: 0; color: #8b4d45; font: 700 10px Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.ed-dash-head h3 { margin: 2px 0 0; font: 400 20px var(--home-display); color: var(--home-ink); }
.ed-dash-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #ecddd8; color: #7d372c; font: 700 13px Inter, Arial, sans-serif; }
.ed-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ed-dash-stat { display: grid; gap: 4px; min-width: 0; border: 1px solid #ece6e1; border-radius: 8px; padding: 12px; background: #fff; }
.ed-dash-stat-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #ecddd8; color: #8b4d45; }
.ed-dash-stat-icon svg { width: 14px; height: 14px; }
.ed-dash-stat b { font: 600 20px Inter, Arial, sans-serif; color: #201d1b; }
.ed-dash-stat small { display: block; color: #766d68; font-size: 10px; }
.ed-dash-stat.is-flag { border-color: #e3cbc5; background: #f8efec; }
.ed-dash-stat.is-flag .ed-dash-stat-icon { background: #e9cec6; color: #7d372c; }
.ed-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ed-dash-panel { border: 1px solid #ece6e1; border-radius: 8px; padding: 16px; background: #fff; }
.ed-dash-panel > strong { display: block; margin-bottom: 12px; font: 600 13px Inter, Arial, sans-serif; color: #201d1b; }
.ed-dash-class-row, .ed-dash-reg-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f1ece8; }
.ed-dash-class-row:first-of-type, .ed-dash-reg-row:first-of-type { padding-top: 0; border-top: 0; }
.ed-dash-class-row img { width: 44px; height: 34px; flex-shrink: 0; border-radius: 5px; object-fit: cover; }
.ed-dash-class-row b, .ed-dash-reg-row b { display: block; font: 600 12px Inter, Arial, sans-serif; color: #201d1b; }
.ed-dash-class-row small, .ed-dash-reg-row small { color: #766d68; font-size: 10px; }
.ed-dash-reg-row > div { flex: 1; min-width: 0; }
.ed-dash-initial { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: #ecddd8; color: #8b4d45; font: 700 11px Inter, Arial, sans-serif; }
.ed-dash-pill { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font: 700 10px Inter, Arial, sans-serif; }
.ed-dash-pill.is-paid { color: #0a8a5f; background: #dff4df; }
.ed-dash-pill.is-pending { color: #a84141; background: #ffe2e2; }

/* 02.5 — Build your site: folded into the "How it works" step grid as the first (and
   most important) step, rather than its own standalone section - reuses the real browser-
   chrome + hero-block visual language so it still reads as the actual product, just sized
   to match the other step mocks. */
.ed-mock-site { padding: 0; overflow: hidden; }
.ed-site-browser-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f2e9e6; }
.ed-site-browser-bar span { width: 6px; height: 6px; border-radius: 50%; background: #d9c4bf; }
.ed-site-browser-bar em { margin-left: 8px; font: 400 9px var(--home-sans); font-style: normal; color: #756a68; }
/* The published site's real "Editorial" theme (public-site.css: .public-editorial-hero) is a
   full-bleed photo with a dark scrim, an uppercase letter-spaced serif wordmark, and a solid
   dark "Book a Class" button - reused here (same photo already loaded for the page's own
   watermark, so no extra asset) instead of the earlier flat gradient block, which didn't read
   as an actual website. */
.ed-site-hero { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; background-image: linear-gradient(180deg, rgba(20,18,17,.55) 0%, rgba(20,18,17,.15) 45%, rgba(20,18,17,.55) 100%), url("assets/homepage-dance-studio.png?v=20260930-watermark"); background-size: cover; background-position: center 30%; }
.ed-site-wordmark { align-self: flex-start; color: #fff; font: 500 10px var(--home-display); letter-spacing: .14em; text-transform: uppercase; }
.ed-site-hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ed-site-hero-foot span { color: #fff; font: 400 16px var(--home-display); line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.ed-site-cta { flex-shrink: 0; padding: 6px 10px; border-radius: 2px; background: #24211f; color: #fff; font: 600 8px var(--home-sans); white-space: nowrap; }

/* 03/04 — How it works: ONE compact 3-across row (not stacked large sections) + a short
   payoff image break. */
.ed-story { padding: clamp(40px, 6vw, 64px) clamp(24px, 6vw, 88px); scroll-margin-top: 20px; }
.ed-steps { list-style: none; margin: 0 0 28px; padding: 0; max-width: 1080px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ed-step { display: flex; flex-direction: column; gap: 14px; }
.ed-step-text h3 { margin: 0 0 4px; font: 400 1.15rem/1.25 var(--home-display); color: var(--home-ink); }
.ed-step-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--home-muted); }
/* Fixed height (not min-height) so all six step mocks read as one consistent set rather than
   each sizing to its own content - the tallest (the class-details form) sets the height, and
   every other mock's content fills or centers within it via the per-mock rules below. */
.ed-mock { height: 280px; display: flex; flex-direction: column; border-radius: 6px; background: white; box-shadow: 0 14px 34px rgba(79,40,48,.1); padding: 16px; font-size: 12px; }
.ed-mock > strong { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; }

/* These four mocks represent real dashboard/booking screens, so - per explicit direction to
   make them "look more like the actual tool" - their colors, icons and copy are pulled
   directly from product-ui.css's --product-* tokens and dashboard.js's real markup/icon set,
   not approximated in the homepage's own rose palette. Inter is the dashboard's actual body
   font (loaded in index.html's <head> alongside Fraunces/Plus Jakarta Sans for this reason);
   Georgia is its actual serif, needing no extra font load. */
.ed-mock-dashboard, .ed-mock-form, .ed-mock-payment, .ed-mock-confirm, .ed-mock-roster { font-family: Inter, Arial, sans-serif; }
.ed-mock-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
/* Real bug found live: grid items default to min-width: auto, which floors their width at
   their content's min-content size - here, the width of "Registrations" as one unbreakable
   word. At the 128px mobile mock width (see the 420px breakpoint below) that min-content
   comfortably exceeds each 1fr track's actual share, so the grid overflowed its own box
   instead of shrinking the cards to fit, spilling the second stat card out past the mock's
   right edge and directly into the step text sitting next to it. min-width: 0 lets the grid
   item actually shrink to its track's width, same fix as the classic flex min-width:auto
   overflow trap elsewhere on this page. */
.ed-mock-stat-card { display: grid; gap: 4px; min-width: 0; border: 1px solid #ece6e1; border-radius: 8px; padding: 10px; background: rgba(255, 253, 251, .78); }
.ed-mock-stat-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #ecddd8; color: #8b4d45; }
.ed-mock-stat-icon svg { width: 12px; height: 12px; }
.ed-mock-stat-card b { font: 600 16px Inter, Arial, sans-serif; color: #201d1b; }
.ed-mock-stat-card small { display: block; color: #766d68; font-size: 9px; }
.ed-mock-stat-flag { display: flex; align-items: center; gap: 8px; border: 1px solid #e3cbc5; border-radius: 8px; padding: 8px 10px; background: #f4e6e2; }
.ed-mock-stat-flag .ed-mock-stat-icon { background: #e9cec6; color: #7d372c; }
.ed-mock-stat-flag b { font: 600 13px Inter, Arial, sans-serif; color: #201d1b; }
.ed-mock-stat-flag small { color: #766d68; font-size: 9px; }
/* The real Overview page's "Upcoming Classes" list shows an actual class photo thumbnail
   per row (.owner-overview-class img) - reusing the page's own watermark photo here for the
   same reason the site mock does, rather than leaving this an all-text/icon mock. */
.ed-mock-class-row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid #ece6e1; }
.ed-mock-class-thumb { width: 36px; height: 28px; flex-shrink: 0; border-radius: 4px; object-fit: cover; }
.ed-mock-class-row b { display: block; font: 600 11px Inter, Arial, sans-serif; color: #201d1b; }
.ed-mock-class-row small { color: #766d68; font-size: 9px; }

.ed-mock-eyebrow { margin: 0 0 3px; color: #8b4d45; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
/* The real Classes page shows "Import from Instagram" as a secondary button next to "+ Add
   Class" (dashboard.js's classView) - picking a recent post pre-fills this very form's
   Description and Class Image fields. Shown here alongside the form's own heading since this
   mock represents the Add Class form itself, not the classes list the real button lives on. */
.ed-mock-form-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 8px; margin-bottom: 10px; }
.ed-mock-form-head strong { display: block; font: 400 15px Georgia, serif; }
/* Both spans here also match `.ed-mock-form span` below (field-label styling: display:block,
   margin, color, font-weight) since they're descendants of .ed-mock-form too - that rule's
   higher specificity (class+type vs. this rule's single class) wins for every property it
   declares, which silently turned this badge into two stacked block rows. Scoped under
   .ed-mock-form to outrank it explicitly rather than leaving the win to chance. */
.ed-mock-form .ed-mock-ig-import { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin: 2px 0 0; padding: 4px 7px; border: 1px solid #ded7d1; border-radius: 4px; color: #8b4d45; font: 600 8px Inter, Arial, sans-serif; white-space: nowrap; }
.ed-mock-form .ed-mock-ig-import svg { display: block; width: 10px; height: 10px; flex-shrink: 0; }
.ed-mock-form .ed-mock-ig-import-label { display: inline; margin: 0; font: inherit; color: inherit; }
.ed-mock-fieldset { margin-top: 10px; border: 1px solid #ded7d1; border-radius: 4px; padding: 12px 10px 10px; }
.ed-mock-legend { display: block; margin: -19px 0 8px; padding: 0 5px; width: fit-content; background: white; color: #8b4d45; font: 600 9px Inter, Arial, sans-serif; letter-spacing: .02em; }
.ed-mock-form span { display: block; font-size: 9px; line-height: 1.2; margin: 7px 0 3px; color: #514641; font-weight: 600; }
.ed-mock-field { border: 1px solid #d8d0ca; background: rgba(255, 253, 251, .9); border-radius: 3px; padding: 6px 8px; font-size: 11px; line-height: 1.3; color: #2e2927; white-space: nowrap; }
/* The real form's "Class Image" field (.owner-image-field img) shows an actual upload
   preview, not a text input. Full 16:9 width (the field's real size) made this card
   noticeably taller than its row siblings, visibly misaligning the step labels below it -
   sized down to a thumbnail instead, still the real photo and still clearly a photo field. */
.ed-mock-photo { display: block; width: 72px; height: 48px; margin-top: 2px; border-radius: 4px; object-fit: cover; }

.ed-mock-payment > strong { font: 400 13px Georgia, serif; }
.ed-mock-payment-options { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; margin-top: 8px; }
.ed-mock-payment-option { position: relative; display: grid; gap: 4px; border: 1px solid #ded7d1; border-radius: 8px; padding: 24px 10px 10px 32px; background: rgba(255, 253, 251, .78); }
.ed-mock-payment-option.is-selected { border-color: #b5746a; background: #ecddd8; }
.ed-mock-radio { position: absolute; top: 26px; left: 10px; display: inline-block; width: 12px; height: 12px; border: 1.5px solid #c7b8b3; border-radius: 50%; background: white; }
.ed-mock-payment-option.is-selected .ed-mock-radio { border-color: #b5746a; background: radial-gradient(circle, #b5746a 0 40%, white 42%); }
.ed-mock-payment-badge { position: absolute; top: 8px; right: 8px; border-radius: 999px; padding: 2px 7px; background: #ecddd8; color: #8b4d45; font: 700 8px Inter, Arial, sans-serif; }
.ed-mock-payment-option b { display: flex; align-items: center; gap: 6px; color: #2e2927; font: 400 12px Georgia, serif; }
.ed-mock-payment-icon { display: inline-flex; color: #8b4d45; }
.ed-mock-payment-icon svg { width: 13px; height: 13px; }
.ed-mock-payment-option p { margin: 0; color: #766d68; font-size: 9px; line-height: 1.4; }

.ed-mock-confirm { justify-content: center; align-items: center; text-align: center; padding: 18px 12px; }
.ed-mock-check { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 50%; color: #78473f; background: #eadbd6; font-size: 20px; }
.ed-mock-confirm strong { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 400; font-family: Georgia, serif; }
.ed-mock-confirm-detail { margin: 0 0 10px; color: #766d68; font-size: 10px; line-height: 1.4; }
/* Shows the actual amount charged rather than repeating "confirmed," which the step text
   ("Card, confirmed automatically") and the payment-method step already say. */
.ed-mock-confirm-receipt { display: flex; align-items: center; gap: 8px; border: 1px solid #ded7d1; border-radius: 6px; padding: 8px 16px; }
.ed-mock-confirm-receipt span { color: #766d68; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ed-mock-confirm-receipt b { color: #201d1b; font: 600 15px Inter, Arial, sans-serif; }

.ed-mock-roster-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ed-mock-roster-list > div { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.ed-mock-initial { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ecddd8; color: #8b4d45; flex-shrink: 0; font: 700 10px Inter, Arial, sans-serif; }
.ed-mock-roster small { margin-left: auto; padding: 3px 7px; border-radius: 999px; font: 700 9px Inter, Arial, sans-serif; color: #47765c; background: #edf4ef; }
/* 06 — Your business: one compact mini-dashboard, not a features list. Per explicit direction
   to make this "realistic" and "actually helpful" like the other step mocks, it now uses the
   same real product tokens/fonts (Inter, the --product-* palette) instead of the homepage's
   own rose styling, and adds two things it was missing: a month-over-month trend (the core
   thing "analytics" actually means - not just a snapshot) and a "most requested class" line,
   which closes a gap this section's own copy already promised ("...and what to teach again")
   but the visual never actually showed. Still framed as representative, not live data - see
   the HTML comment above this section; the real Analytics tab remains unbuilt. */
/* The photo watermark behind the page is a single fixed body background shared by every
   section (see the comment at the top of this file), so it reads at the same faint intensity
   everywhere by default. From here through pricing, a local wash on top of it deepens
   section-by-section, per explicit direction - "running your classes" recedes further into the
   background as "understanding your business" (this section) and then pricing take over, and
   .ed-launch below ramps the same wash back down to the page's baseline, reintroducing the
   dancers behind the closing line as a callback to the hero. .ed-business and .ed-pricing are
   centered, width-capped columns, so the wash needs its own full-bleed ::before (the standard
   "break out of a centered container" trick: left/right 50% + negative 50vw margins) rather
   than a plain background-color on the section itself, which would only paint within that
   narrow column and leave bare photo showing on either side. Safe because html/body already
   carry `overflow-x: hidden` (styles.css) to clip the intentional overflow this trick causes. */
.ed-business { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 56px); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 6vw, 40px); }
.ed-business::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: linear-gradient(180deg, rgba(255,252,252,0) 0%, rgba(255,252,252,.55) 100%); }
.ed-business-text h2 { margin: 8px 0 10px; font: 400 clamp(1.7rem, 2.9vw, 2.3rem)/1.2 var(--home-display); color: var(--home-ink); text-wrap: balance; }
.ed-business-text p { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.55; color: var(--home-muted); }
/* Shadow deepened slightly (was 0 20px 50px / .12) so the card reads as the sharpest element
   on the page once the background behind it recedes further via .ed-business::before above -
   the photo stays visible, just further back, per explicit direction. */
.ed-business-card { padding: 22px 24px; background: white; border-radius: 10px; box-shadow: 0 26px 64px rgba(79,40,48,.18); font-family: Inter, Arial, sans-serif; }
.ed-business-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ed-business-month { margin: 0; font: 700 10px Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #766d68; }
.ed-business-trend { display: inline-flex; align-items: center; gap: 3px; color: #47765c; font: 700 11px Inter, Arial, sans-serif; }
.ed-business-days { display: flex; align-items: flex-end; gap: 8px; height: 72px; margin-bottom: 12px; }
.ed-business-days > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.ed-business-days i { display: block; width: 100%; height: var(--h); border-radius: 2px 2px 0 0; background: #ecddd8; font-style: normal; }
.ed-business-days > div:nth-child(6) i { background: #b5746a; }
.ed-business-days small { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: #766d68; }
.ed-business-next { margin: 0 0 14px; padding-top: 12px; border-top: 1px solid #ece6e1; font-size: 12px; color: #766d68; }
.ed-business-stats { display: flex; gap: 28px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #ece6e1; }
.ed-business-stats span { display: block; font: 600 1.4rem/1 Inter, Arial, sans-serif; color: #201d1b; }
.ed-business-stats small { display: block; margin-top: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #766d68; }
.ed-business-popular { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-business-popular small { color: #766d68; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ed-business-popular strong { color: #201d1b; font: 400 13px Georgia, serif; }

/* 08 — Pricing: easy to scan, no unnecessary vertical space. */
.ed-pricing { position: relative; z-index: 0; padding: clamp(40px, 5vw, 64px) clamp(24px, 6vw, 40px); max-width: 1080px; margin: 0 auto; }
/* Continues the wash ramp from .ed-business::before above - by the end of pricing the photo is
   "very faint," per explicit direction, before .ed-launch below fades it back toward the
   page's baseline. Same full-bleed ::before trick as .ed-business, for the same reason (this
   is also a centered, width-capped column). */
.ed-pricing::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: linear-gradient(180deg, rgba(255,252,252,.55) 0%, rgba(255,252,252,.82) 100%); }
.ed-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ed-pricing-tier { padding: 22px 20px; border: 1px solid #eee1e5; border-radius: 6px; background: #fffefd; display: flex; flex-direction: column; }
.ed-pricing-name { margin: 0 0 4px; font: 600 12px var(--home-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--home-muted); }
.ed-pricing-price { margin: 0 0 10px; font: 400 2.1rem/1 var(--home-display); color: var(--home-ink); }
.ed-pricing-price span { font-size: .9rem; color: var(--home-muted); }
.ed-pricing-detail { flex: 1; margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--home-muted); }
.ed-pricing-tier .ed-button { min-width: 0; width: 100%; min-height: 44px; }
.ed-pricing-compare { display: block; margin: 20px auto 0; background: none; border: 0; padding: 0; font: 600 13px var(--home-sans); color: var(--home-rose); cursor: pointer; }

/* 09 — Final CTA */
/* The narrative payoff of the wash ramp started at .ed-business::before: fades the extra
   cream wash from pricing's "very faint" level back down to nothing by the bottom of this
   section, letting the dancers in the body's own fixed watermark become visible again behind
   "We handle everything beyond" - a deliberate callback to the hero, which carries no extra
   wash of its own (the page's baseline). .ed-launch has no max-width of its own (unlike
   .ed-business/.ed-pricing above), so it's already full-bleed - a direct gradient background
   works here without the ::before trick those two needed. */
.ed-launch { position: relative; text-align: center; padding: clamp(48px, 6vw, 72px) 24px clamp(56px, 7vw, 84px); background: linear-gradient(180deg, rgba(255,252,252,.82) 0%, rgba(255,252,252,0) 100%); }
/* Real bug found live: styles.css has a bare `h2 { max-width: 1320px; }` rule (unscoped,
   meant for other pages) that silently capped this h2's own box width without an auto margin
   to re-center it - the box sat flush-left within the section, so text-align: center on
   .ed-launch only centered the text WITHIN that off-center box, not against the full section.
   Confirmed live: computed max-width was exactly 1320px, margin-left/right both 0px. Same
   specificity-leak pattern as the hero h1 bug earlier in this redesign - this rule's higher
   specificity only overrides properties it actually declares, so a property it never mentions
   (max-width) keeps leaking through. Fixed with an explicit reset. */
.ed-launch h2 { margin: 12px 0 22px; max-width: none; font: 400 clamp(2rem, 4.2vw, 3rem)/1.08 var(--home-display); color: var(--home-ink); }
/* Real bug, confirmed twice: Fraunces' own "8" has roughly equal-sized top and bottom bowls,
   instead of the bottom-heavy taper every other serif (Georgia, Times, Playfair, Lora,
   Merriweather - checked all five side by side) uses for visual stability - that's what reads
   as "upside-down" here, not a one-off rendering glitch. A first attempt swapped it into the
   homepage's sans face, which fixed the bowl shape but created a worse problem: a visibly
   different TYPEFACE sitting mid-sentence in an all-serif headline. Georgia is the right fix -
   it's already Fraunces' own fallback in --home-display, so it reads as "the same serif, just
   rendered" rather than a foreign font, while its numeral has the normal bottom-heavy shape. */
.ed-launch-digit { font-family: Georgia, serif; }
.ed-launch h2 em { color: var(--home-rose); font-style: italic; }
.restyle-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding: 20px max(24px, calc((100% - 1180px)/2)); border-top: 1px solid #eee1e5; color: #667080; font-size: 11px; }
.restyle-footer nav { display: flex; gap: 24px; }
.restyle-footer a { color: inherit; text-decoration: none; }

@media (max-width: 1050px) {
  .home-restyle .site-header { gap: 22px; }
  .home-restyle .header-account { gap: 15px; }
  .home-restyle .brand-name { font-size: 24px; }
  .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-business { grid-template-columns: 1fr; }
  /* The cluster's cards use fixed-percentage/pixel positions tuned for its full-width canvas.
     Scaling the whole canvas down (rather than reflowing it early) keeps the collage's layout
     and the callouts' arrow positions intact down to tablet width. */
  .ed-chaos-cluster { width: 1120px; left: 50%; margin-left: -560px; margin-bottom: -56px; transform: scale(.88); transform-origin: top center; }
}
@media (max-width: 800px) {
  .home-restyle .site-header { height: 76px; gap: 14px; }
  .ed-pricing-grid { grid-template-columns: 1fr; }
  /* Below tablet width even the scaled-down canvas runs out of room. Switches to a plain 2-up
     grid instead (same treatment as every other mock elsewhere on this page at narrow widths)
     rather than trying to maintain a scaled-down version of a layout that only reads as "a
     messy desk" when several cards are visible side by side at near-full size. The hand-drawn
     callouts are dropped here too - "pointing near a card" stops meaning anything once the
     cards reflow into a grid/stack. */
  /* No fixed height here (Codex's own version used height: 600px) - each card has
     overflow: hidden from its absolute-positioned-canvas styling above, and a fixed-height
     grid container combined with overflow: hidden children lets CSS grid's stretch sizing
     shrink cards below their actual content height instead of growing the section to fit,
     silently clipping rows (confirmed: the Messages card's real content needs 226px but was
     being squeezed to 142px). Letting the grid auto-size avoids it. */
  .ed-chaos-cluster { left: auto; width: 100%; height: auto; margin: 30px auto 0; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .ed-chaos-item { position: relative; inset: auto; width: auto; transform: none; }
  .ed-chaos-dm, .ed-chaos-sheet { grid-column: 1 / -1; }
  .ed-chaos-sheet { order: 4; }
  .ed-chaos-todo { order: 5; }
  .ed-chaos-callout { display: none; }
  .ed-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-restyle .brand { gap: 4px; }
  .home-restyle .brand-name { font-size: 21px; }
  .home-restyle .brand-tagline { font-size: 8px; }
  .home-restyle .brand-mark { width: 46px; height: 35px; }
  .home-restyle .header-login { font-size: 12px; }
  .home-restyle .header-avatar { display: none; }
  .home-restyle .header-account { gap: 9px; }
  /* Real bug found live: with only "Log In" + "Get Started" left in the header (the nav links
     and hamburger toggle were removed), there's nothing left to collapse at narrow phone
     widths - and body has a legacy overflow-x: hidden rule, so once the button's min-content
     width (even wrapped to two lines) outgrows the remaining space next to the brand mark, it
     doesn't scroll or wrap the row, it gets silently clipped off the right edge. Tightening
     the header's side padding and the CTA's own padding/font-size below 420px buys back enough
     room that the button stays fully on-screen down to a 320px viewport. */
  .ed-hero-sub { white-space: normal; max-width: 460px; text-wrap: pretty; }
  /* The sidebar nav is the first thing to go below tablet width - a 180px column of app
     navigation eats too much of a narrow viewport's width to stay a sidebar, and it's not
     load-bearing for what this visual is actually proving (that the dashboard brings
     everything into one screen), unlike the stats/classes/registrations content next to it. */
  .ed-dash-nav { display: none; }
  .ed-dash-main { padding: 20px; }
}
@media (max-width: 420px) {
  .home-restyle .site-header { padding: 0 14px; gap: 10px; }
  .home-restyle .header-account { gap: 7px; }
  .home-restyle .header-cta { padding: 8px 13px; font-size: 11px; }
  .ed-hero { padding: 108px 20px 40px; }
  .ed-hero-copy { max-width: none; }
  .ed-hero-sub { max-width: none; }
  .ed-reality { padding: 40px 20px; }
  .ed-chaos-cluster { height: auto; grid-template-columns: 1fr; }
  .ed-chaos-dm, .ed-chaos-sheet { grid-column: auto; }
  .ed-chaos-messages { order: 3; }
  .ed-chaos-sheet { order: 4; }
  .ed-chaos-todo { order: 5; }
  .ed-story { padding: 40px 20px; }
  .ed-steps { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  /* Per explicit direction, mobile steps go back to the mock sitting above its text (the same
     column layout every wider breakpoint already uses), not beside it. That previous row
     layout was also the source of a real bug: squeezing every mock down to a fixed 128px width
     left the dashboard mock's stat cards too narrow for their own labels and overflowing into
     the text next to them. Full-width mocks at their natural size don't have that problem. */
  .ed-business-stats { gap: 24px; }
  .restyle-footer { font-size: 10px; }
  .ed-dash-stats { grid-template-columns: 1fr 1fr; }
  .ed-dash-head h3 { font-size: 17px; }
}

/* The auth modal (Log In / Create Account) and the comparison/pricing modal aren't part of the
   redesign's own markup, but they're only ever reached from this homepage, so their colors are
   scoped here rather than touching styles.css's shared --accent/--coral tokens (which other,
   unrelated pages still rely on). Both previously fell straight through to the old bright
   magenta palette since nothing overrode them. */
.home-restyle .auth-modal .brand-name span {
  background: var(--home-rose);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.home-restyle .auth-modal .primary-button {
  background: var(--home-rose);
  box-shadow: 0 18px 38px rgba(168, 103, 95, 0.24);
}
.home-restyle .comparison-panel { border-color: rgba(168, 103, 95, 0.2); }
/* Real bug found live: the comparison modal's table header and eyebrow still fell through to
   the legacy palette (dark plum header, hot-magenta eyebrow/accent) - visibly clashing with
   every other reworked surface on this page. Lines above this comment were an earlier, partial
   pass (just the table body's accent color and the group-row background); these finish the
   job: the header background, the eyebrow, the heading weight (this page's own h2s are a
   lighter 400, not the site-wide bold 700), and the pink-tinted borders. */
.home-restyle .comparison-header .eyebrow { color: var(--home-muted); font-family: var(--home-sans); }
.home-restyle .comparison-header h2 { font-family: var(--home-display); font-weight: 400; color: var(--home-ink); }
.home-restyle .comparison-table thead th { background: var(--home-rose); }
.home-restyle .comparison-table thead span { color: #f3e2dd; }
.home-restyle .comparison-table th, .home-restyle .comparison-table td { border-color: rgba(168, 103, 95, 0.16); }
.home-restyle .comparison-table tbody td:first-child { color: var(--home-muted); }
.home-restyle .comparison-table tbody td:not(:first-child) { color: var(--home-rose); }
.home-restyle .compare-group th { background: #f3e8e4; color: var(--home-ink); }
.home-restyle .comparison-modal .modal-close { color: var(--home-ink); border-color: rgba(168, 103, 95, 0.22); }
.home-restyle .demo-section { background: radial-gradient(circle at 80% 0%, rgba(168, 103, 95, 0.1), transparent 22rem), transparent; }
.home-restyle .demo-form input:focus,
.home-restyle .demo-form select:focus {
  border-color: var(--home-rose);
  outline: 3px solid rgba(168, 103, 95, 0.16);
}
.home-restyle .demo-form button { background: var(--home-rose); box-shadow: 0 18px 38px rgba(168, 103, 95, 0.24); }
.home-restyle .form-message { color: #8f5851; }
/* The per-plan "Request a demo" modal (opened by the pricing tiers' "Book a demo" buttons)
   is the same story - it previously fell through to the old orange-glow panel background,
   magenta/orange gradient button, and pink focus ring since nothing scoped it to this page. */
.home-restyle .plan-demo-panel { background: radial-gradient(circle at 100% 0%, rgba(168, 103, 95, 0.14), transparent 14rem), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 248, 0.94)); }
.home-restyle .plan-demo-form input:focus { border-color: var(--home-rose); outline: 3px solid rgba(168, 103, 95, 0.16); }
.home-restyle .plan-demo-form button { background: var(--home-rose); box-shadow: 0 18px 38px rgba(168, 103, 95, 0.24); }
.home-restyle .plan-demo-message { color: #8f5851 !important; }

/* Flatten the auth modal / pricing modal buttons to match the redesign's flat corner language
   used everywhere else (dashboard buttons are 4px, onboarding buttons are 2px, the homepage's
   own .restyle-button/.header-cta are already flat) - these were still the old full-pill shape. */
.home-restyle .primary-button,
.home-restyle .secondary-button,
.home-restyle .compare-button,
.home-restyle .modal-close,
.home-restyle .price-card a,
.home-restyle .demo-form button,
.home-restyle .plan-demo-form button,
.home-restyle .auth-google {
  border-radius: 4px;
}
.home-restyle .secondary-button { border-color: rgba(168, 103, 95, 0.22); }
@media (prefers-reduced-motion: reduce) { .ed-button { transition: none; } }