/* The masthead inherits Nixie's existing type and palette. Studio work moves
   through an open composition, from separate requests to a shared rhythm. */
.hero-top { margin-bottom: 32px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 68px); line-height: 1.04; max-width: none; }
.hero-side { padding-bottom: 0; }
.hero-side p, .studio-flow p, .studio-flow span, .studio-flow b { hyphens: none; word-break: normal; }
.hero-side .sandbox-note { margin-top: 12px; font-size: 13px; line-height: 1.5; max-width: 47ch; color: var(--muted); }
.studio-flow { margin: 0; border-block: 1px solid var(--line); }
.process-board { position: relative; height: 380px; isolation: isolate; }
.process-lines { position: absolute; inset: 10px 0; width: 100%; height: 360px; overflow: visible; z-index: -1; fill: none; }
.process-lines-narrow { display: none; }
.thread-bed { stroke: var(--line); stroke-width: 1.5; }
.thread-run { stroke: var(--rose-deep); stroke-width: 2; stroke-linecap: round; }
.thread-run use { stroke-dasharray: 9 420; animation: studio-thread 8s linear infinite; }
.thread-run use:nth-child(2) { animation-delay: -2s; stroke: var(--sage-deep); }
.thread-run use:nth-child(3) { animation-delay: -4s; stroke: #94723e; }
.thread-run use:nth-child(4) { animation-delay: -6s; stroke: #74718a; }
.thread-run use:last-child { stroke: var(--sage-deep); stroke-dasharray: 9 58; animation-duration: 3s; }
@keyframes studio-thread { to { stroke-dashoffset: -429; } }
.process-inbox { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 auto 0 0; width: 29%; }
.process-note { position: absolute; padding: 11px 15px; background: var(--linen); width: max-content; max-width: 100%; border-radius: 4px; transform: rotate(var(--turn)); }
.process-note > span { display: block; font-size: 11px; line-height: 1.4; color: var(--ink-soft); margin-bottom: 3px; }
.process-note p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-strong); }
.note-class { top: 22px; left: 5%; --turn: -3deg; background: #f4e7e9; }
.note-room { top: 112px; left: 12%; --turn: 2deg; background: #eaf0eb; }
.note-fees { top: 205px; left: 0; --turn: -2deg; background: #f5edde; }
.note-family { top: 297px; left: 10%; --turn: 3deg; background: #edeaf1; }
.process-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: var(--cream); padding: 16px 12px; }
.process-centre b { display: block; color: var(--rose-deep); font: 500 42px/1.1 var(--serif); letter-spacing: -.025em; }
.process-centre span { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 7px; white-space: nowrap; }
.process-day { position: absolute; top: 25px; right: 0; width: 33%; background: var(--cream); padding: 0 0 0 24px; }
.process-day-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.process-day h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.process-day-head > span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
/* A checklist table: tick, item, detail. Rows align on a shared grid so the
   list reads as a record of what is settled, not as handwritten notes.
   The caption names the table for screen readers; the visible heading above
   it carries the same meaning, so it is not shown twice. */
.process-outcomes caption.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.process-outcomes { width: 100%; margin: 0; border-collapse: collapse; table-layout: auto; }
.process-outcomes tr { border-bottom: 1px solid var(--line); }
.process-outcomes tr:last-child { border-bottom: 0; }
.process-outcomes th, .process-outcomes td { padding: 12px 0; text-align: left; vertical-align: baseline; }
.process-tick { width: 21px; padding-right: 12px !important; }
.process-outcomes th[scope="row"] { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-strong); padding-right: 14px; width: 48%; }
.process-detail { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.process-check { display: block; flex: none; width: 11px; height: 6px; border-left: 1.6px solid var(--sage-deep); border-bottom: 1.6px solid var(--sage-deep); transform: rotate(-45deg); margin-top: -4px; }
.studio-flow figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.process-pause { flex: none; font: inherit; color: var(--ink-soft); background: none; border: 0; border-radius: 4px; padding: 8px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.process-pause:hover { color: var(--ink-strong); background: var(--linen); }
.process-pause:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
.studio-flow.is-paused .thread-run, .studio-flow.is-paused .thread-run use { animation-play-state: paused; }
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .process-note { padding-inline: 11px; }
  .process-note p { font-size: 13px; }
  .process-day { width: 35%; padding-left: 16px; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(44px, 7vw, 62px); }
  .process-board { height: 365px; }
  .process-note { padding: 10px; }
  .process-note p { font-size: 12px; }
  .process-note > span { font-size: 10px; }
  .process-centre b { font-size: 34px; }
  .process-centre span { font-size: 10px; }
  .process-day { width: 37%; padding-left: 16px; }
  .process-day h2 { font-size: 24px; }
  .process-outcomes th[scope="row"] { font-size: 13px; }
  .process-detail { font-size: 11px; }
}
@media (max-width: 600px) {
  .hero-top { gap: 20px; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .process-board { height: auto; display: grid; grid-template-rows: 180px 138px auto; }
  .process-lines-wide { display: none; }
  .process-lines-narrow { display: block; inset: 125px 0 auto; height: 190px; }
  .process-lines-narrow .thread-run { stroke-dasharray: 8 170; animation: studio-thread 8s linear infinite; }
  .process-inbox { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 28px 3px 0; align-items: start; }
  .process-note { position: static; width: 100%; max-width: none; padding: 10px 9px; }
  .process-note p { font-size: 12px; line-height: 1.45; }
  .note-room { margin-top: 9px; }
  .note-family { margin-top: 9px; }
  .process-centre { position: relative; top: auto; left: auto; transform: none; align-self: center; justify-self: center; padding: 10px 16px; }
  .process-centre b { font-size: 38px; }
  .process-centre span { font-size: 11px; }
  .process-day { position: static; width: 100%; padding: 14px 6px 16px; }
  .process-day h2 { font-size: 26px; }
  .process-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .process-day-head > span { font-size: 11px; white-space: nowrap; }
  .process-outcomes th[scope="row"] { font-size: 14px; }
  .process-detail { font-size: 12px; }
  .studio-flow figcaption { align-items: flex-start; font-size: 11px; }
  .studio-flow figcaption > span { max-width: 25ch; }
  .process-pause { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-run, .thread-run use { animation: none !important; stroke-dasharray: none !important; opacity: .5; }
  .process-pause { display: none; }
}
/* Studio notebook refinement: the heading remains in the first view while
   the three loose pieces of work gather into one studio rhythm. */
.hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 24px; }
.hero-side .lede { font-size: 17px; line-height: 1.6; }
.process-note { border: 1px solid #e6d9d4; }
.note-class { top: 34px; }
.note-fees { top: 158px; left: 3%; }
.note-family { top: 278px; left: 8%; }
.process-day-head > span { max-width: 100%; }
.payment-notebook { background: #fffefd; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 100%; }
.payment-notebook-head { padding: 17px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--linen); border-bottom: 1px solid var(--line); font-size: 13px; }
.payment-notebook-head > span { font-weight: 600; }
.payment-notebook-head a { margin-left: auto; color: var(--rose-deep); text-underline-offset: 3px; }
.payment-notebook-body { padding: clamp(24px,4vw,48px); }
.payment-notebook-intro h4 { font: 500 clamp(25px,3vw,38px)/1.2 var(--serif); letter-spacing: -.025em; margin: 0 0 12px; }
.payment-notebook-intro p { max-width: 60ch; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.payment-methods { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: 30px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.payment-methods > div { flex: 0 1 auto; width: fit-content; max-width: 100%; }
.payment-methods strong { display: block; font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.payment-methods span { display: block; font-size: 13px; color: var(--ink-soft); }
.payment-notebook-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.payment-notebook-footer p { max-width: 64ch; font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.payment-notebook-footer .btn { flex: none; }
.payment-notebook--compact .payment-notebook-head a { display: none; }
@media(max-width:900px) { .hero-top { grid-template-columns: 1fr; }.hero-side .lede { font-size: 16px; }.process-day-head > span { font-size: 11px; } }
@media(max-width:600px) {
 .hero { padding-top: 24px; }.hero-top { gap: 18px; }.hero-side .lede { margin-bottom: 16px; }
 .process-board { grid-template-rows: auto 130px auto; }.process-inbox { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 3px 0; }
 .process-note { width: fit-content; max-width: 100%; flex: 0 1 auto; padding: 10px 12px; }.process-note p { font-size: 12px; }.process-note > span { font-size: 11px; }
 .note-family { margin-top: 0; }.note-class,.note-fees,.note-family { transform: rotate(var(--turn)); }
 .process-lines-narrow { inset: 165px 0 auto; height: 170px; }.process-day-head { display: block; }.process-day-head > span { white-space: normal; margin-top: 6px; }
 .payment-notebook-head { padding: 15px 18px; }.payment-notebook-head a { margin-left: 0; }.payment-notebook-body { padding: 24px 20px; }.payment-methods { gap: 18px 26px; margin: 24px 0; }
}
/* The resolved studio work sits on a real notebook-like paper surface. */
.process-day { top: 12px; width: 35%; padding: 22px 20px 14px 39px; background: #fffefa; border: 1px solid #e1d7cf; border-radius: 3px 10px 10px 3px; box-shadow: 0 5px 14px #58423b0a; }
.process-day::before { content: ''; position: absolute; inset: 0 auto 0 27px; border-left: 1px solid #ddbfc1; }
.process-day::after { content: ''; position: absolute; top: 32px; left: 8px; width: 7px; height: 7px; border: 1px solid #ddd0c7; border-radius: 50%; background: var(--cream); box-shadow: 0 86px 0 var(--cream),0 172px 0 var(--cream),0 258px 0 var(--cream); }
.process-day h2 { font-size: 25px; }.process-day-head { padding-bottom: 12px; }.process-day-head p { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }.process-day-head > span { font-size: 11px; }
.process-outcomes th, .process-outcomes td { padding: 10px 0; }.process-outcomes th[scope="row"] { font-size: 13px; }.process-detail { font-size: 11px; }
.process-check { display: block; border: 0; transform: none; width: 21px; min-width: 21px; height: 23px; flex: none; margin-top: -1px; overflow: visible; }.process-check path { fill: none; stroke: #59715c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plane-sec.pad { padding-top: 22px; }.plane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 20px; }.plane-head h2 { font-size: clamp(25px,3vw,34px); }.plane-head p { font-size: 14px; margin: 0; max-width: 55ch; }
.seq-join { height: 36px; }.seq-description { max-width: 65ch; font-size: 15px; color: var(--ink-soft); margin: -4px 0 20px; }
.pay-layout { display: flex; align-items: flex-start; gap: 44px; flex-wrap: wrap; }.studio-invoice { background: #fffefd; color: var(--ink); width: 540px; max-width: 100%; padding: 32px; border: 1px solid #e1d7cf; border-radius: 3px; }.studio-invoice header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }.studio-invoice header img { display: block; }.studio-invoice header p { font-size: 12px; margin: 9px 0 0; }.studio-invoice header strong,.studio-invoice header span { display: block; text-align: right; }.studio-invoice header strong { font-size: 18px; }.studio-invoice header span { font-size: 12px; margin-top: 5px; color: var(--muted); }.invoice-meta { display: flex; flex-wrap: wrap; gap: 24px 44px; padding: 24px 0; }.invoice-meta p { margin: 0; }.invoice-meta span,.invoice-meta strong { display: block; font-size: 13px; }.invoice-meta span { color: var(--muted); margin-bottom: 4px; }.studio-invoice table { width: 100%; border-collapse: collapse; font-size: 13px; }.studio-invoice caption { text-align: left; margin-bottom: 10px; font-weight: 600; }.studio-invoice th,.studio-invoice td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; }.studio-invoice th:last-child,.studio-invoice td:last-child { text-align: right; white-space: nowrap; padding-left: 18px; font-variant-numeric: tabular-nums; }.studio-invoice thead th { font-size: 11px; color: var(--muted); font-weight: 500; }.studio-invoice tfoot th,.studio-invoice tfoot td { font-size: 17px; font-weight: 650; }.invoice-state { margin-top: 24px; color: var(--sage-deep); background: #e7efe9; padding: 12px 14px; border-radius: 4px; }.invoice-state strong,.invoice-state span { display: block; font-size: 12px; line-height: 1.6; }.invoice-state span { font-size: 11px; }
.pay-context { flex: 0 1 480px; max-width: 100%; }.pay-context h4 { font: 500 clamp(25px,3vw,36px)/1.2 var(--serif); letter-spacing: -.025em; margin: 8px 0 18px; }.pay-context>p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }.surcharge-guidance { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 28px; }.surcharge-guidance h5 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }.surcharge-guidance p,.surcharge-guidance a { font-size: 13px; line-height: 1.65; }.surcharge-guidance a { color: var(--rose-deep); text-underline-offset: 3px; }.pay-context .pay-collection-note { margin-top: 20px; font-size: 12px; color: var(--muted); }
@media(min-width:601px) and (max-width:900px) { .process-day { width: 39%; padding-left: 32px; padding-right: 12px; }.process-day::before { left: 23px; }.process-day::after { left: 6px; }.process-day h2 { font-size: 22px; }.process-outcomes th[scope="row"] { font-size: 12px; }.process-check { flex-basis: 17px; width: 17px; }.process-outcomes th, .process-outcomes td { padding: 9px 0; } }
@media(max-width:600px) { .process-day { width: 100%; padding: 23px 22px 20px 42px; margin-bottom: 16px; }.process-day h2 { font-size: 27px; }.process-outcomes th, .process-outcomes td { padding: 12px 0; }.process-outcomes th[scope="row"] { font-size: 14px; }.process-detail { font-size: 12px; }.plane-sec.pad { padding-top: 18px; }.plane-head { margin-bottom: 20px; }.plane-head p { font-size: 13px; }.pay-layout { gap: 28px; }.studio-invoice { padding: 22px; }.studio-invoice table { font-size: 12px; }.studio-invoice th:last-child,.studio-invoice td:last-child { padding-left: 10px; }.invoice-meta { gap: 20px; }.pay-context h4 { margin-top: 0; } }

@media(max-width:600px) { .process-day { position: relative; top: auto; right: auto; } }

/* Narrow compositions share one centre line. Intrinsic notes occupy three
   centred rows; the SVG is measured from their edges rather than a fixed top. */
@media (max-width: 760px) {
  .process-board { height: auto; display: grid; grid-template-rows: auto 124px auto; }
  .process-lines-wide { display: none; }
  .process-lines-narrow { display: block; inset: auto; }
  .process-inbox { position: relative; inset: auto; width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-items: center; align-items: start; gap: 18px 12px; padding: 26px 8px 0; }
  .process-note { position: relative; inset: auto; flex: none; width: fit-content; max-width: 100%; margin: 0; padding: 10px 14px; transform: rotate(var(--turn)); }
  .process-inbox .note-class { grid-column: 1 / -1; }
  .process-note p { font-size: 12px; line-height: 1.45; }
  .process-note > span { font-size: 11px; }
  .process-centre { position: relative; inset: auto; transform: none; align-self: center; justify-self: center; padding: 12px 16px; }
  .process-centre b { font-size: 38px; }
  .process-centre span { font-size: 11px; }
  .process-day { position: relative; inset: auto; width: 100%; margin: 0 0 16px; padding: 23px 22px 20px 42px; }
  .process-day h2 { font-size: 27px; }
  .process-day-head { display: block; }
  .process-day-head > span { white-space: normal; margin-top: 6px; }
  .process-outcomes th, .process-outcomes td { padding: 12px 0; }
  .process-outcomes th[scope="row"] { font-size: 14px; }
  .process-detail { font-size: 12px; }
}
/* A responsive, text-based timetable. Calendar columns intentionally align;
   classes use the current fictional sandbox roster, not a scaled screenshot. */
.home-schedule { border: 1px solid #ded8cf; border-radius: 10px; background: #fffefa; color: #403c38; overflow: hidden; }
.home-schedule-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 20px 24px; border-bottom: 1px solid #e3ddd3; }
.home-schedule-header > span { font-size: 13px; font-weight: 600; }
.home-schedule-header > a { margin-left: auto; font-size: 13px; color: var(--rose-deep); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-underline-offset: 4px; }
.home-schedule-body { padding: 26px 24px; }
.home-schedule-title h4 { font: 600 25px/1.25 var(--sans); letter-spacing: -.02em; margin: 0 0 8px; }
.home-schedule-title p { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; }
.home-day-label,.home-schedule-pick { display: none; }
.home-schedule-days { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.home-schedule-day { min-width: 0; }
.home-schedule-day h5 { font: 600 13px/1.4 var(--sans); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e3ddd3; }
.home-schedule-day ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.home-lesson { padding: 12px; border-radius: 4px; background: #f2e4e6; }
.home-lesson.sage { background: #e7efe9; }.home-lesson.gold { background: #f5edde; }.home-lesson.blue { background: #e9eef3; }
.home-lesson-time { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 12px; margin-bottom: 8px; }
.home-lesson-time time { font-weight: 600; }.home-lesson-time span { font-size: 11px; }
.home-lesson-detail { display: grid; gap: 5px; }.home-lesson-detail strong { font-size: 13px; font-weight: 600; line-height: 1.4; }.home-lesson-detail span { font-size: 11px; line-height: 1.5; }
.home-schedule-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 16px 24px; background: var(--sage-wash,#e7efe9); color: #4a6553; font-size: 12px; }.home-schedule-footer strong { font-weight: 600; }
@media (max-width: 1100px) {
 .home-schedule-days { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
 .home-schedule.is-ready .home-week-label { display: none; }.home-schedule.is-ready .home-day-label { display: inline; }
 .home-schedule.is-ready .home-schedule-pick { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; border-bottom: 1px solid #e3ddd3; margin: 0 0 24px; }
 .home-schedule-pick button { min-height: 44px; padding: 8px 0; font: 600 13px var(--sans); border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); background: transparent; cursor: pointer; }
 .home-schedule-pick button[aria-pressed=true] { border-color: var(--rose-deep); color: var(--rose-deep); background: #f5eceb; }
 .home-schedule-pick button:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: -3px; }
 .home-schedule.is-ready .home-schedule-days { display: block; }
 .home-schedule.is-ready .home-schedule-day:not(.is-selected),.home-schedule.is-ready .home-schedule-day h5 { display: none; }
 .home-schedule.is-ready .home-schedule-day ol { gap: 0; }
 .home-schedule.is-ready .home-lesson { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 16px; border-radius: 0; padding: 18px 12px; border-bottom: 1px solid #fffefa; }
 .home-lesson-time { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
 .home-lesson-detail strong { font-size: 15px; }.home-lesson-detail span { font-size: 13px; }
}
@media (max-width: 600px) {
 .home-schedule-header { padding: 16px; gap: 8px 12px; }.home-schedule-header > a { margin-left: 0; }.home-schedule-header > span { font-size: 12px; }
 .home-schedule-body { padding: 22px 16px; }.home-schedule-title h4 { font-size: 23px; }.home-schedule-title p { font-size: 13px; }
 .home-schedule-footer { padding: 16px; }.home-schedule-days { grid-template-columns: 1fr; }
 .home-schedule.is-ready .home-lesson { grid-template-columns: 54px minmax(0,1fr); gap: 12px; padding-inline: 10px; }
 .home-lesson-detail strong { font-size: 14px; }.home-lesson-detail span { font-size: 12px; }
}
@media (max-width: 380px) { #manage .seq { margin-inline-end: 0; }.home-schedule.is-ready .home-schedule-pick { grid-template-columns: repeat(3,minmax(0,1fr)); } }