/* Hallmark · shape: Organiser (draw swapped from Marquee Hero: a hub of eight offers wants compartments) · genre: modern-minimal · theme: Dose system in the Profit Path School palette (deal 3/3, seed clean-trustworthy-calm-hub-ef56·6c51411b·2026-11-06·r0) · job: buy · draw: 64e5a1 · built: the project · redesign: polish
 * hero: Counter, headline and one photograph · nav: masthead · footer: letter close · imagery: one library photograph and six seller product covers · signature: the school shield as depth, behind the photo, on its corner and behind the aim · dose: white
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the trays are the only plastic and the page has no live element; kept calm on purpose */
/* Hallmark · reworded "$8.35" to "$9.97" · the before record caught the price counter mid-tick; $9.97 is the real lowest price */
/* Hallmark · waive 71 · h4 is the first line inside each compartment, 40px of padding above and the price row pushed to the foot below · the heading heads its own cell, not the text beneath it */
@import url("./tokens.css");
@import url("./base.css");

:root { --sc-canvas: #F6F8FD; }
body { background: var(--sc-canvas); }
section { padding-block: var(--section-gap-s); }

/* masthead */
.mast { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.mast .container { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.mast a:not(.wordmark) { font-size: var(--text-sm); color: var(--color-muted); }
.mast a:not(.wordmark):hover { color: var(--color-accent-deep); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); font: 500 var(--text-md) var(--font-body); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); background: var(--glint); color: var(--color-ink); }
.btn--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: 0 0 0 1px var(--color-accent-deep), 0 3px 0 var(--color-accent-deep); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); }
.btn--sm { height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.link { font-weight: 500; color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.2em; }

/* hero */
.hero { min-height: calc(100svh - 69px); display: flex; align-items: center; padding-block: var(--space-xl); }
.hero .container { width: 100%; }
.hero .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { max-width: 14ch; font-size: var(--text-display); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.hero__actions { display: flex; gap: var(--space-xl); flex-wrap: wrap; align-items: center; margin-top: var(--space-xl); }
.photo { margin: 0; }
.photo [data-slot] { width: 100%; aspect-ratio: 5 / 4; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.photo figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* organiser */
.organiser { background: transparent; }
.organiser h2 { max-width: 20ch; margin-bottom: var(--space-xl); }
.tray + .tray { margin-top: var(--space-2xl); }
.tray h3 { font-size: var(--text-xl); margin-bottom: var(--space-md); max-width: none; }
.tray ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.cell { --t: var(--p-thu); position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-height: 220px; padding: var(--space-lg); border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.cell:nth-child(1) { --t: var(--p-mon); }
.cell:nth-child(2) { --t: var(--p-tue); }
.cell:nth-child(3) { --t: var(--p-wed); }
.cell:nth-child(4) { --t: var(--p-thu); }
.tray--ai .cell:nth-child(1) { --t: var(--p-fri); }
.tray--ai .cell:nth-child(2) { --t: var(--p-sat); }
.tray--ai .cell:nth-child(3) { --t: var(--p-sun); }
.tray--ai .cell:nth-child(4) { --t: var(--p-mon); }
.cell__no { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink-2); }
.cell h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; min-width: 0; }
.cell__desc { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.cell__desc summary { cursor: pointer; font-weight: 500; color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.cell__desc p { margin-top: var(--space-xs); max-width: none; }
.cell__foot { margin: auto 0 0; display: flex; justify-content: space-between; gap: var(--space-sm); max-width: none; }
.cell__price { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink-2); }
.cell .btn { width: 100%; }

/* facts */
.facts .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.facts h2 { margin-bottom: var(--space-xl); max-width: 16ch; }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font-weight: 500; }
.rows dd { margin: 0; color: var(--color-ink-2); }

/* closing band */
.band { background: var(--color-paper); color: var(--color-ink); }
.band h2 { max-width: 20ch; font-size: var(--text-section); }
.band .btn { margin-top: var(--space-xl); }
.band :focus-visible { outline-color: var(--color-accent-soft); }

/* footer, a letter close */
.foot { padding-block: var(--space-2xl); }
.foot .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 64px); }
.foot h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); max-width: none; }
.foot p { color: var(--color-ink-2); }
.foot small { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.foot small + small { margin-top: var(--space-sm); }
.foot a { color: var(--color-accent-deep); }
.foot nav h3 { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin: 0 0 var(--space-xs); max-width: none; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }

@media (max-width: 70rem) { .tray ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60rem) {
  .hero .container, .facts .container, .foot .container { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--section-gap-s); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 40rem) {
  .tray ol { grid-template-columns: minmax(0, 1fr); }
  .cell { min-height: 0; }
  
}


/* scroll-craft moments */
.hero [data-slot] > img { top: -8%; height: 116%; }
.cell__desc { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.cell__desc summary { cursor: pointer; font-weight: 500; color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.cell__desc p { margin-top: var(--space-xs); max-width: none; }
.cell { min-height: 260px; }

/* brand: colours and type taken from the Profit Path School logo (shield blue, navy, indigo wordmark in a wide classical roman) */
:root {
  --color-paper: #F6F8FD; --color-paper-2: #E4ECFB; --color-paper-3: #D3E0F8;
  --color-ink: #1B2048; --color-ink-2: #2B3263; --color-muted: #55608A;
  --color-rule: #CCD5EC;
  --color-accent: #2E3192; --color-accent-deep: #232674; --color-accent-soft: #BFD3F7; --color-accent-ink: #FBFDFF;
  --color-brand-blue: #2D88EE;
  --color-focus: #2D88EE;
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --display-weight: 400; --tracking-display: -0.01em;
  --p-mon: #D4E3FB; --p-tue: #DAD9F6; --p-wed: #C6DEF8; --p-thu: #E2E0F8;
  --p-fri: #CDE7F7; --p-sat: #CFD5F3; --p-sun: #E6EDFB;
  --glint: #FBFDFF;
  --shadow-card: 0 1px 2px rgba(27,32,72,.08), 0 24px 48px -24px rgba(35,38,116,.35);
}
.mast { background: var(--glint); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.wordmark img { width: 39px; height: 40px; }
h1, h2, h3, h4 { font-weight: 400; }
.cell h4 { font-weight: 400; letter-spacing: -0.005em; }
.btn--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); }
.cell__desc summary, .link { color: var(--color-accent); }
.band h2 { color: var(--color-ink); }
.band p { color: var(--color-ink-2); }
.band :focus-visible { outline-color: var(--color-brand-blue); }
.hero h1 { color: var(--color-accent-deep); }
.cell h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }

/* offers: roomy horizontal tiles with the seller's own product images */
.tray ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.cell { flex-direction: row; align-items: stretch; gap: var(--space-lg); min-height: 0; padding: var(--space-lg); }
.cell__img { flex: 0 0 38%; max-width: 38%; margin: 0; align-self: center; aspect-ratio: 1 / 1; border-radius: 12px; background: color-mix(in oklab, var(--glint) 55%, transparent); display: grid; place-items: center; overflow: hidden; }
.cell__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cell__img--ph { background-color: var(--color-accent); align-content: center; gap: var(--space-xs); text-align: center; background: linear-gradient(160deg, var(--color-accent), var(--color-accent-deep)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-brand-blue) 55%, transparent); color: var(--glint); padding: var(--space-md); }
.cell__img--ph img { width: 62px; height: 63px; padding: 0; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }
.cell__img--ph span { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.1; }
.cell__img--ph small { font-size: var(--text-xs); opacity: 0.9; }
.cell__body { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; flex: 1; justify-content: center; }
.cell__no { margin: 0; display: flex; justify-content: space-between; gap: var(--space-sm); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }
.cell h4 { font-size: var(--text-title); line-height: 1.2; }
.cell__desc { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }
.cell .btn { width: auto; align-self: flex-start; margin-top: var(--space-xs); }
@media (max-width: 70rem) { .tray ol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 34rem) { .cell { flex-direction: column; } .cell__img { flex: none; max-width: 100%; width: 100%; aspect-ratio: 4 / 3; } }

/* hero depth: three planes with a shared contact point at the photograph's corner */
.hero__stage { position: relative; isolation: isolate; }
.hero__mark { position: absolute; z-index: -1; width: 64%; height: auto; right: -14%; top: -16%; opacity: 0.1; pointer-events: none; }
.hero__frame { position: relative; z-index: 1; }
.hero__frame [data-slot] { box-shadow: var(--shadow-card); }
.hero__badge { position: absolute; z-index: 2; width: 72px; height: auto; left: -28px; bottom: 56px; padding: var(--space-sm); border-radius: 999px; background: var(--glint); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-ink) 14%, transparent), 8px 18px 28px -14px color-mix(in oklab, var(--color-accent) 45%, transparent); pointer-events: none; }
.hero .photo [data-slot] { aspect-ratio: 5 / 4; }

/* offers: tiles lift once they have arrived */
.cell.sc-in { transition: opacity 620ms var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.cell.sc-in:hover { transform: translateY(-3px); }
.cell__img { transform-style: preserve-3d; }

/* closing band: the aim, set large, with a faint shield and a light that follows the pointer */
.band { position: relative; overflow: clip; padding-block: var(--section-gap); isolation: isolate; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px circle at calc(var(--sc-mx, 0.72) * 100%) calc(var(--sc-my, 0.3) * 100%), color-mix(in oklab, var(--color-brand-blue) 24%, transparent), transparent 62%); }
.band__mark { position: absolute; z-index: -1; right: 4%; top: 50%; translate: 0 -50%; width: min(34vw, 420px); height: auto; opacity: 0.09; filter: brightness(0); pointer-events: none; }
.band__inner { position: relative; }
.band h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1.02; max-width: 16ch; }
.band .btn { transition: background-color var(--dur-short); }
.band .btn:hover, .band .btn:active { transform: none; }

@media (max-width: 60rem) {
  .hero__mark { width: 52%; right: -6%; top: -10%; }
  .hero__badge { width: 60px; left: 12px; bottom: 44px; padding: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { .cell.sc-in:hover { transform: none; } }
.hero { overflow-x: clip; }

/* masthead: stays with the reader */
.mast { position: sticky; top: 0; z-index: 60; transition: box-shadow var(--dur-short) var(--ease-out); }
.mast.is-scrolled { box-shadow: 0 8px 24px -16px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.mast__nav { display: flex; gap: var(--space-xl); }
.mast__nav a { font-size: var(--text-sm); color: var(--color-muted); }
.mast__nav a:hover { color: var(--color-accent); }

/* hero facts, all taken from the page itself */
.stats { display: flex; gap: var(--space-2xl); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.stats > div { display: grid; gap: var(--space-2xs); }
.stats dt { order: 2; font-size: var(--text-sm); color: var(--color-muted); }
.stats dd { order: 1; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }

/* filter keys */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-xl); }
.chip { height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-sm) var(--font-body); color: var(--color-ink); background: var(--glint); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 2px 0 var(--color-rule); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro); }
.chip:hover { background: var(--color-paper-3); }
.chip:active { transform: translateY(2px); }
.chip.is-on { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: 0 0 0 1px var(--color-accent-deep), 0 2px 0 var(--color-accent-deep); }
.filter__count { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  .mast__nav a:first-child { display: none; }
  .stats { gap: var(--space-lg); }
  .stats dd { font-size: var(--text-xl); }
}

/* polish: engine faces follow the page's faces */
:root { --sc-font-display: var(--font-display); --sc-font-text: var(--font-body); --sc-font-mono: var(--font-outlier); }

/* polish: the caption no longer pulls the photo off the text's centre line */
.hero .photo { margin-bottom: var(--space-xl); }
.hero .photo figcaption { position: absolute; left: 0; top: calc(100% + var(--space-sm)); margin: 0; }

/* polish: the two trays read as one section, not two with a hole between */
#guides { padding-bottom: var(--space-2xl); }
.organiser--ai { padding-top: 0; }

/* polish: masthead holds one line at 320 */
.mast__nav a { white-space: nowrap; }
@media (max-width: 26rem) {
  .wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mast__nav { gap: var(--space-md); }
}

/* polish: the scroll engine reads the page's own colours */
:root { --sc-canvas: var(--color-paper); --sc-surface: var(--color-paper-2); --sc-ink: var(--color-ink); --sc-ink-soft: var(--color-muted); --sc-accent: var(--color-accent); --sc-accent-ink: var(--color-accent-ink); }


/* polish: a solid ground under the branded tiles, so their labels never read against the card behind */
.cell__img.cell__img--ph { background-color: var(--color-accent); }

/* finish review fixes */
.hero { min-height: min(calc(100svh - 69px), 700px); padding-block: var(--space-xl) var(--space-2xl); }
.cell { box-shadow: inset 0 1.5px 0 var(--glint), 0 1px 0 var(--color-rule), 0 14px 28px -20px color-mix(in oklab, var(--color-ink) 35%, transparent); }
.cell__body { justify-content: flex-start; }
.cell__img { background: var(--glint); }
.cell__img img { padding: 10%; object-fit: contain; }
@media (max-width: 34rem) { .cell__img { aspect-ratio: 1 / 1; max-width: 280px; } }
.cell__img.cell__img--ph img { padding: 0; width: 62px; height: 63px; }
#guides { padding-top: var(--space-3xl); }