/* ============================================================
   solutions/schools.html — AvoLingo for K–12 schools & academies.
   Rebuilt 2026-10-01 to bar-k12-simple.md: one headline, one line and
   one large photo per section (Klarna / Monzo simplicity), Sana's
   image-led story, the product only as one small floating card on a
   photo. Colour, type, radii, buttons and form controls are the
   homepage's (tokens.css / styles.css / site.css); this file only lays
   them out. Every class is .ks-*.

   Round 4–5: the product is one small HTML chip per story photo, set from
   the real app screens; splits on the §5.2 ratio; both tinted panels on
   §5.3 `.box` geometry; the outro panel sand (§5.3 row 11); the Speaking
   pill in the Speaking family (§3.4).
   ============================================================ */

.ks-section { scroll-margin-top: calc(var(--nav-h) + var(--sp-8)); }
.ks-nowrap { white-space: nowrap; }

/* Photos are imagery (§9.4 R4): a §7 radius, no elevation. */
.ks-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius--2xl); }
.ks-wide { position: relative; aspect-ratio: 9 / 5; }
.ks-split__media,
.ks-panel__media { position: relative; aspect-ratio: 4 / 5; }

/* Section pill (§5.4 opener) without an arrow: it labels, it doesn't link. */
.ks-pill { padding: 0.4em 1.2em; border-radius: 1rem; font-size: max(var(--fs-body-xs), 12px); }   /* §7 tag radius; same floor as the chips */
.ks-pill--speaking {
  --_theme---pills--pill-background: var(--color--blue-100);
  --_theme---pills--pill-text: var(--color--blue-1000);
}

/* Shared line under a section heading. */
.ks-hero__line,
.ks-split__text p,
.ks-panel__text p,
.ks-wideblock__line,
.ks-demo__line {
  margin-top: var(--sp-20);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.ks-hero__title,
.ks-hero__line,
.ks-wideblock__title,
.ks-wideblock__line,
.ks-demo__title,
.ks-demo__line { margin-inline: auto; }

/* ---- Product chips: §9.4 content cards inside a photo ----------------
   Small (18rem) like Sana's floating UI: white, --radius--l, 0.4rem
   padding, resting at --shadow--card. UI text at the pill's size
   (body-xs, floored at 12px on phones per §4.1.1), card copy in grey-800
   (§9.4), so each story section keeps three type sizes. */
.ks-card {
  position: absolute;
  z-index: 2;
  left: 4%;
  bottom: 5%;
  width: min(18rem, 84%);
  margin: 0;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  border-radius: var(--radius--l);
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  font-size: max(var(--fs-body-xs), 12px);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.ks-card p { margin: 0; }
.ks-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8) 0;
  font-weight: 400;   /* §4.1: body-xs pairs with 400 */
  color: var(--color--grey-800);
}
.ks-card__head img { width: 1.5rem; height: 1.5rem; border-radius: var(--radius--circle); }

.ks-chat__me,
.ks-chat__avo { padding: var(--sp-4) var(--sp-8); border-radius: var(--radius--m); }
.ks-chat__me { justify-self: end; max-width: 86%; background: var(--color--brand-100); color: var(--color--brand-1000); }
.ks-chat__avo { max-width: 92%; background: var(--color--grey-50); }

.ks-fix__note { padding: 0 var(--sp-8) var(--sp-4); }
.ks-card--fix { width: max-content; max-width: min(22rem, 84%); }
.ks-split__media .ks-photo { object-position: 50% 25%; }
.ks-fix__note mark { padding-inline: 0.1em; border-radius: var(--radius--xs); background: var(--color--lime-100); color: var(--color--lime-1000); }


/* ---- 1. Hero: centred, then one wide photo (§9.3.1) ----------------- */

.ks-hero { padding-block: var(--sp-40); text-align: center; }
.ks-hero__cta { margin-top: var(--sp-32); }
.ks-hero__photo { margin-top: var(--sp-40); }
.ks-wide picture { display: block; height: 100%; }

/* ---- 1b. Phone and four cards (bar-k12-agents.md) --------------------
   Sana's AI agents composition in the light system: a plain white section
   (§5.3 — between the plain hero and the blue #speaking panel, so panels
   still alternate), the §5.4 opener centred, then one stage.

   Hierarchy: the phone stays focal through its dark frame and the moving
   recording. The four cards are real crops of the app's own screens (user
   ruling 2026-10-01), each set as a §9.4 card (white, 1.2rem, card shadow).

   Geometry: the phone is in flow and centred; the four cards are placed
   from the phone's edges with a clear gap (none touches the frame),
   staggered unevenly, inside the 1.6rem page gutter, each with a slight
   flat rotation (left cards one way, right cards the other; no 3D, user
   ruling 2026-10-01). The toggle sits below the frame, clear of every
   card. */

.ks-agents { padding-block: var(--sp-40); text-align: center; overflow: clip; }
.ks-agents__title,
.ks-agents__line { margin-inline: auto; }
.ks-agents__title > span { display: block; }   /* one sentence per line */
.ks-agents__line {
  margin-top: var(--sp-20);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

.ks-stage {
  --phone-w: max(19rem, 240px);   /* ≈ 343 × 693px at 1440: Sana's presence (≈ 75–80% of a 900px viewport) */
  position: relative;
  margin-top: var(--sp-40);
  padding-block: var(--sp-16) calc(var(--sp-20) + var(--sp-8));   /* bottom = the toggle below the frame */
  text-align: left;
}

/* ---- The phone: dark bezel, a pale rim, dark side buttons, a status bar
   and the recording filling the screen. The frame is the video's parent,
   so the scene toggle can sit on the frame, outside the screen. */
.ks-phone {
  --screen-r: calc(var(--radius--2xl) - var(--sp-4));   /* concentric: frame radius − bezel */
  position: relative;
  z-index: 4;
  width: var(--phone-w);
  margin-inline: auto;
  padding: var(--sp-4);
  border-radius: var(--radius--2xl);
  background: var(--color--grey-1000);
  box-shadow: 0 0 0 0.12rem var(--color--grey-200), var(--shadow--card-large);   /* metal rim + lift */
}
.ks-phone::before,
.ks-phone::after {   /* side buttons, in the frame's ink */
  content: '';
  position: absolute;
  width: 0.2rem;
  background: var(--color--grey-1000);
}
.ks-phone::before {   /* action + volume (two copies via box-shadow) */
  left: -0.3rem;
  top: 16%;
  height: 1.6rem;
  border-radius: var(--radius--xs) 0 0 var(--radius--xs);
  box-shadow: 0 2.8rem 0 0 var(--color--grey-1000), 0 5.6rem 0 0 var(--color--grey-1000);
}
.ks-phone::after {    /* power */
  right: -0.3rem;
  top: 24%;
  height: 4rem;
  border-radius: 0 var(--radius--xs) var(--radius--xs) 0;
}
.ks-phone__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.4rem;   /* ≥ the screen radius, so the corner curve stays inside the bar */
  padding-inline: 1.6rem 1.4rem;
  border-radius: var(--screen-r) var(--screen-r) 0 0;
  /* = the recording's own app grey (#f7f7f7, sampled from the video's top
     rows), so the bar meets it seamlessly; grey-50 was a shade darker. */
  background: #f7f7f7;
  font-size: max(var(--fs-label), 11px);
  font-weight: 500;
  color: var(--color--grey-1000);
}
.ks-phone__status { width: 2.6rem; height: auto; }
.ks-phone__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 1268;
  border-radius: 0 0 var(--screen-r) var(--screen-r);
}
/* The site's scene toggle, fully outside the phone: just below the frame,
   right-aligned with its edge, 0.8rem gap. It never touches the screen or reads
   as app UI. States exactly as index #curriculum: hidden at rest on hover
   devices, revealed on hover, focus or the reader's own pause; always shown
   on touch (site.css). The stage reserves room for it below the frame. */
.ks-phone .scene__toggle {
  top: calc(100% + var(--sp-8));
  right: 0;
  bottom: auto;
}
.ks-phone:hover .scene__toggle,
.ks-phone .scene__toggle.is-user-paused { --_toggle-reveal: 1; }
.ks-phone:focus-within .scene__toggle { --_toggle-reveal: 1; transition-duration: 0s; }
.ks-phone .scene__toggle:focus-visible { outline: 2px solid var(--color--accent); outline-offset: 3px; }

/* ---- The cards: real crops of the supplied screenshots (user ruling
   2026-10-01), text untouched — imagery, so their internal colours and type
   are the app's own. Each crop is set as the §9.4 card itself: white (the
   crops' own white), 1.2rem radius, card shadow, flat ±2–3° rotation only
   (no 3D, crops undistorted).

   Cluster: every card is placed from the phone's edge with a clear --gap
   (no card touches the frame, user ruling 2026-10-01), at staggered
   heights. Depth comes from size, shadow and stagger only. Sources are
   ≥ 2× their displayed width. */
.ks-stage { --gap: 2.4rem; }
.ks-agent {
  --tilt: -3deg;
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  border-radius: var(--radius--l);
  background: var(--_theme---cards--background);
  box-shadow: var(--shadow--card);
  transform: rotate(var(--tilt));
}
.ks-agent--l1,
.ks-agent--l2 { right: calc(50% + var(--phone-w) / 2 + var(--gap)); }
.ks-agent--r1,
.ks-agent--r2 { left: calc(50% + var(--phone-w) / 2 + var(--gap)); }

.ks-agent--l1 { width: 22%;   top: 4rem; }                 /* streak  ≈ 273px at 1440 */
.ks-agent--l2 { width: 27%;   top: 20.4rem; --tilt: -2deg; } /* roadmap ≈ 335px */
.ks-agent--r1 { width: 25.4%; top: 7.6rem;  --tilt: 3deg; }  /* study   ≈ 315px */
.ks-agent--r2 { width: 20%;   top: 17.4rem; --tilt: 2deg; }  /* gauge   ≈ 248px */

/* Tablet: the phone takes a third of the column; the cards shrink with the
   space beside it and keep their gap. */
@media (max-width: 960px) {
  .ks-stage { --phone-w: max(15rem, 240px); --gap: 1.8rem; }
  .ks-agent--l1 { width: 26%; top: 2.4rem; }
  .ks-agent--l2 { width: 29%; top: 17rem; }
  .ks-agent--r1 { width: 28%; top: 5rem; }
  .ks-agent--r2 { width: 24%; top: 14.6rem; }
}

/* Phones: two cards — the streak and the writing evaluation — sit side by
   side below the phone, clear of it and of the toggle under its frame. The
   stage reserves the rotated corners' overhang (≈ ½ · width · sin 2°) at
   the bottom, so the gap to the next panel is exactly the section's 4rem. */
@media (max-width: 640px) {
  .ks-agents__title > span { display: inline; }
  .ks-stage {
    --phone-w: clamp(220px, 62%, 18rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-12);
    row-gap: var(--sp-40);   /* clears the toggle below the frame */
    align-items: start;
    padding-block: var(--sp-8) 0.2rem;   /* ≈ the rotated corners' overhang (½ · 11rem · sin 2°) */
  }
  .ks-phone { grid-row: 1; grid-column: 1 / -1; }
  .ks-agent--r1,
  .ks-agent--l2 { display: none; }
  .ks-agent.ks-agent--l1,
  .ks-agent.ks-agent--r2 { position: relative; inset: auto; width: min(94%, 11rem); }   /* 94%: the rotated corners stay inside the gutter */
  .ks-agent--l1 { grid-row: 2; grid-column: 1; justify-self: end; --tilt: -2deg; }
  .ks-agent--r2 { grid-row: 2; grid-column: 2; justify-self: start; --tilt: 2deg; margin-top: var(--sp-16); }
}

/* KO #in-class (§4.1.2; headings and body already set by the :lang(ko)
   .ks-section rules below): each sentence of the line moves as a whole
   (it breaks inside only when it is wider than the column), and the
   headline keeps one clause per line on phones too. */
:lang(ko) .ks-agents__line .ks-sent { display: inline-block; }
@media (max-width: 640px) {
  :lang(ko) .ks-agents__title > span { display: block; }
}

/* ---- 2. Speaking: photo | text, on the plain page --------------------
   2026-10-11 (user): the blue-50 panel read as an odd box under the
   full-bleed desk photo, so this is a plain section like #feedback. */

.ks-panel { padding-block: var(--sp-40); }
.ks-panel__grid {
  display: grid;
  grid-template-columns: 54fr 46fr;   /* §5.2 home-grid, mirrored: the visual is the larger half */
  gap: var(--sp-20);
  align-items: center;
}

/* ---- 3. Feedback: text | photo -------------------------------------- */

.ks-split { padding-block: var(--sp-40); }
.ks-split__grid {
  display: grid;
  grid-template-columns: 46fr 54fr;   /* §5.2 home-grid */
  gap: var(--sp-20);
  align-items: center;
}

/* ---- 4. Centred headline over a wide photo -------------------------- */

.ks-wideblock { padding-block: var(--sp-40); text-align: center; }
.ks-wideblock__photo { margin-top: var(--sp-40); text-align: left; }

/* ---- 5. Demo request: the §5.3 outro panel (sand-100, its own ink) --- */

.ks-demo {
  margin: 0 var(--sp-8);
  padding-block: var(--sp-64);
  border-radius: var(--radius--2xl);
  background: var(--color--sand-100);
  color: var(--color--grey-1000);
  text-align: center;
}
/* Client 2026-10-01: no brown (sand-1000) type — headings take the page ink,
   lines the site's body grey (grey-800, 7.1:1 on sand-100). */
.ks-demo__title { color: var(--color--grey-1000); }
.ks-demo__line { color: var(--color--grey-800); }
.ks-demo__card {
  max-width: 40rem;
  margin: var(--sp-40) auto 0;
  padding: var(--card-pad);
  border-radius: var(--radius--l);
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  text-align: left;
}
/* Labels, fields and the submit keep the site's shared form style
   (contact.html: body-xs fields, labels 500, a btn--lg submit). Card copy
   is grey-800 (§9.4), not the sand panel's ink. */
.ks-demo__card { color: var(--color--grey-800); }
/* §10.1: the ring on every focusable element, never outline: none. */
.ks-demo__card .input::placeholder { color: var(--color--grey-600); }   /* grey-400 is 3.1:1 on white */
.ks-demo__card .input:focus-visible { outline: 2px solid var(--color--accent); outline-offset: 3px; }
.ks-demo__card .btn { margin-top: var(--sp-24); }
.ks-demo__msg { margin-top: var(--sp-16); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius--m); font-size: var(--fs-body-s); }
.ks-demo__msg--ok  { background: var(--color--brand-100); color: var(--color--brand-1000); }
.ks-demo__msg--err { background: var(--color--red-50);   color: var(--color--red-1000); }
.ks-demo__msg[hidden] { display: none; }

/* ---- Korean setting (§4.1.2) ---------------------------------------- */

:lang(ko) .ks-section h1,
:lang(ko) .ks-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .ks-section p { line-height: var(--lh-ko-body); word-break: keep-all; }

/* ---- Responsive (§10.3) ---------------------------------------------- */

@media (max-width: 860px) {
  .ks-panel__grid,
  .ks-split__grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .ks-panel__text { order: -1; }           /* heading before its picture */
  .ks-hero__photo { aspect-ratio: 4 / 5; }
  .ks-card { left: 4%; bottom: 4%; width: min(18rem, 88%); }
}

@media (max-width: 640px) {
  .ks-section h2 br { display: none; }
  .ks-hero__cta { width: 100%; }
  .ks-demo { padding-block: var(--sp-56); }
  .ks-demo__card { padding: max(var(--card-pad), 20px); }   /* §10.3 floor */
  .ks-demo__card .form-grid { grid-template-columns: 1fr; }
}

/* 2026-10-11 (user): the #tutor section (AI tutor, waving AVO) was removed;
   the old rules are in _archive/schools-tutor-2026-10-11/schools.css. */

/* 2026-10-11 (user): #in-class went back to the original streak / study-time cards. */

/* ---- 2026-10-10: #lesson-flow — one lesson followed through. A plain
   section between the sand #teach panel and the FAQ; the step cards are the
   #teach card (.ks-ops__card in css/schools-ops.css), two per assignment. */
.ks-flow { padding-block: var(--sp-64); text-align: center; }
.ks-flow__title, .ks-flow__line { margin-inline: auto; }
.ks-flow__line { max-width: 40rem; }
.ks-flow__tracks { display: grid; gap: var(--sp-40); margin-top: var(--sp-40); text-align: left; }
.ks-flow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-12); margin-bottom: var(--sp-16); }
.ks-flow__name { font-size: var(--fs-h5); font-weight: 500; line-height: var(--lh-heading); color: var(--color--grey-1000); }
.ks-flow__type { font-size: var(--fs-body-sm); color: var(--color--grey-800); }
.ks-flow__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); margin: 0; padding: 0; list-style: none; }
/* Capability cards: keep assignment-name fields outside the image frame.
   These classes are used by the revised Korean section only. */
.ks-flow__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); margin: var(--sp-40) 0 0; padding: 0; list-style: none; text-align: left; }
.ks-flow__crop {
  position: absolute;
  left: 11%;
  top: 50%;
  width: 78%;
  aspect-ratio: var(--flow-crop-ratio);
  transform: translateY(-50%);
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius--m);
  box-shadow: var(--shadow--card-large);
}
/* The screenshot is out of flow, so the frame's height comes from
   aspect-ratio alone. In flow, Safari grew the frame to the whole image and
   the upward shift left an empty band at the bottom (user, 2026-10-14). */
.ks-flow__crop img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; transform: translateY(var(--flow-crop-offset)); }
.ks-flow__crop--speaking { --flow-crop-ratio: 1100 / 460; --flow-crop-offset: -30.6%; }
.ks-flow__crop--writing { --flow-crop-ratio: 1100 / 688; --flow-crop-offset: -26.88%; }
@media (max-width: 760px) {
  .ks-flow { padding-block: var(--sp-56); }
  .ks-flow__steps { grid-template-columns: minmax(0, 1fr); }
  .ks-flow__features { grid-template-columns: minmax(0, 1fr); }
}
.ks-faq { padding-top: 0; }

/* ---- 2026-10-11: #curriculum — the desk monitor shows the dashboard
   (bar-schools-desk.md; sanalabs.com "Sana Learn" stage). The client's desk
   photo with the real Classroom Insights screen (01_insights_overview)
   filling the monitor edge to edge. A still image (client 2026-10-11: no
   screen-recording scroll). The screenshot is only cropped to the screen's
   aspect (2880 × 1493 from the top: header, KPI row, charts) and resized;
   its pixels are untouched.

   Geometry, measured on desk-monitor.webp (1672 × 941) by subpixel edge fits
   along each side (threshold halfway between bezel and screen grey). The
   inner screen is a slight keystone with square corners:
     TL 458.66, 184.06   TR 1213.90, 184.72
     BL 456.64, 577.52   BR 1215.80, 577.52
   The screen box is its bounding box as a share of the photo; clip-path
   trims it to the measured quad, so the UI meets the bezel on every side
   (no grey rim, no overlap). The photo's 1px bright halo inside the bezel is
   covered.

   The photo sits in a stage with its own aspect, so every % holds at every
   width. Desktop: the full-bleed 9:5 block shows source x 96–1576,
   y 100–922, so the screen takes 51% of the viewport like Sana's laptop. Phones (≤ 860): the 4:5 block of the page's
   other wide photos. The photo is too wide for a 4:5 crop to hold the
   monitor, so desk-tall-*.webp is source x 365–1306 with 117px of wall and
   desk extended above and below (Nano Banana 2 Lite, 2026-10-11); the
   original pixels sit unchanged in the middle, screen included. */
.ks-desk {
  overflow: hidden;
  isolation: isolate;
  background: var(--color--sand-100);
}
/* Full bleed, like Sana's stage (client 2026-10-11: "박스 안이 아니라 꽉 차게"):
   the photo spans the viewport edge to edge with no radius; main's
   overflow: clip absorbs a classic scrollbar's width. */
.ks-wideblock__photo.ks-desk {
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}
.ks-desk__stage {
  position: absolute;
  left: -6.486%;      /* −96 / 1480 */
  top: -12.162%;      /* −100 / 822.2 */
  width: 112.973%;    /* 1672 / 1480 */
  aspect-ratio: 1672 / 941;
}
.ks-desk picture { display: block; height: 100%; }
.ks-desk__photo { display: block; width: 100%; height: 100%; }

.ks-desk__screen {
  position: absolute;
  left: 27.311%;     /* 456.64 / 1672 */
  top: 19.560%;      /* 184.06 / 941 */
  width: 45.404%;    /* 759.16 / 1672 */
  height: 41.813%;   /* 393.46 / 941 */
  overflow: hidden;
  clip-path: polygon(0.266% 0, 99.750% 0.168%, 100% 100%, 0 100%);
  background: #f7f9fd;   /* the dashboard's own page grey, under the image while it loads */
}
/* 759.16 / 393.46 = 1.929, the crop's own aspect; cover only absorbs the
   files' 1px rounding, it never squashes. */
.ks-desk__ui { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Lit, not stuck on. ::before multiplies a faint warm tint with an edge
   falloff, so the dashboard's white lands at ≈ 235 like the paper on the wall
   (≈ 214–232) instead of glowing at 255; ::after is a soft sheen from the
   window side (top left, where the photo's light comes from) and a hairline
   shade under the bezel. Both are display layers; the image is untouched. */
.ks-desk__screen::before,
.ks-desk__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ks-desk__screen::before {
  background: radial-gradient(125% 125% at 42% 38%, #edebe9 52%, #dedcda 100%);
  mix-blend-mode: multiply;
}
.ks-desk__screen::after {
  background: linear-gradient(118deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.04) 28%, rgb(255 255 255 / 0) 46%);
  box-shadow: inset 0 0.06rem 0.12rem rgb(0 31 31 / 0.18), inset 0 0 0.6rem rgb(0 31 31 / 0.06);
}

@media (max-width: 860px) {
  .ks-wideblock__photo.ks-desk { aspect-ratio: 4 / 5; }
  .ks-desk__stage { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: 941 / 1176; }
  .ks-desk__screen {
    left: 9.738%;    /* (456.64 − 365) / 941 */
    top: 25.600%;    /* (117 + 184.06) / 1176 */
    width: 80.676%;  /* 759.16 / 941 */
    height: 33.457%; /* 393.46 / 1176 */
  }
}

/* Hero: demo request + teacher self sign-up side by side */
.ks-hero__ctas { justify-content: center; margin-top: var(--sp-32); }
.ks-hero__ctas .ks-hero__cta { margin-top: 0; }