/* 版面：米色底、左字右圖。寬度跟著視窗長：兩側各留 5%，內容最寬 1600px。
   顏色、字型、圓角一律用 tokens.css。官網自己加的只有大標字級和 20px 說明句。 */
:root {
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --head-h: 60px;
  --foot-h: 73px;
}
* { box-sizing: border-box; }
html, body { background: var(--livo-main-bg); color: var(--livo-text); }
html { scroll-padding-top: calc(var(--head-h) + var(--livo-space-md)); }
body { margin: 0; font: var(--livo-font-callout); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; }
img { display: block; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--livo-primary); outline-offset: 3px; border-radius: 4px; }
.keep { word-break: keep-all; overflow-wrap: anywhere; }
.nb { display: inline-block; }

.site { container: site / inline-size; }
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.wrapx { width: min(100% - 2 * var(--gutter), 1600px); margin-inline: auto; }

/* header: stays on screen while the page scrolls. The line under it comes in once the page has moved, so the top of the page stays open; a browser that can't do that keeps the line. */
.s-head { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: var(--livo-main-bg); box-shadow: 0 1px 0 var(--livo-line); }
@keyframes s-head-line { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--livo-line); } }
@supports (animation-timeline: scroll()) {
  .s-head { box-shadow: none; animation: s-head-line linear both; animation-timeline: scroll(root); animation-range: 0 var(--livo-space-md); }
}
.s-head .wrapx { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); }
.s-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.s-logo .mark { height: 22px; width: auto; }
.s-logo .word { height: 15px; width: auto; }
.s-head .s-logo { gap: 12px; }
.s-head .s-logo .mark { height: 32px; }
.s-head .s-logo .word { height: 22px; }
/* the slogan is the brand's own line, so it sits with the logo. A phone has no room for it in the bar: there it sits right under the bar and scrolls away with the page */
.s-brand { display: flex; align-items: center; gap: var(--livo-space-md); }
.s-tag { font: italic 700 15px/1.3 var(--livo-font-sans); letter-spacing: -.005em; /* set like the LIVO wordmark: bold italic */ }
.s-head .s-tag { display: none; }
.s-tag-phone { margin-top: calc(-1 * var(--livo-space-xs)); }
.s-nav { display: flex; gap: var(--livo-space-lg); flex-shrink: 0; white-space: nowrap; }
.s-nav a { font: var(--livo-font-subheadline); text-decoration: none; }
.s-nav a:hover { text-decoration: underline; }

/* home */
.s-home { flex: 1; display: flex; flex-direction: column; }
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--livo-space-xxl); align-content: start; padding-block: var(--livo-space-xl) 72px; }
.s-hero-text { display: grid; gap: var(--livo-space-lg); }
.s-hero h1 { font: 600 clamp(34px, 11.5cqw, 44px)/1.2 var(--livo-font-sans); letter-spacing: -.02em; margin-left: -0.04em; /* optical: the big CJK glyphs start a little inside their box */ }
.s-hero h1 span { display: block; }
.s-lead { font: var(--livo-font-body); color: var(--livo-ink-soft); }
.s-lead br.d { display: none; }

/* the two apps, in phones. Each app's icon lives where people meet it: on a notification. The two notifications are one moment seen from both sides, coach and student. Every size inside a phone is in app points (--u), so a frame scales as one piece. */
.s-visual { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--livo-space-xxl); margin-top: var(--livo-space-sm); }
.s-app { --phone-w: min(78cqw, 320px); --u: calc(var(--phone-w) / 402); position: relative; flex: none; width: var(--phone-w); margin: 0; }
.s-phone { position: relative; width: 100%; aspect-ratio: 402 / 874; border-radius: calc(62 * var(--u)); box-shadow: 0 0 0 calc(6 * var(--u)) var(--livo-text), 0 calc(40 * var(--u)) calc(90 * var(--u)) calc(-10 * var(--u)) rgba(23, 20, 18, .28); }
.s-phone img { width: 100%; height: 100%; border-radius: inherit; }
.s-phone::after { content: ""; position: absolute; top: calc(11 * var(--u)); left: 50%; width: calc(122 * var(--u)); height: calc(36 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: var(--livo-text); }
.s-note { position: absolute; z-index: 1; top: calc(54 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(14 * var(--u)); width: calc(var(--phone-w) * 1.1); padding: calc(17 * var(--u)); background: var(--livo-surface); border-radius: calc(30 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(23, 20, 18, .16); }
.s-note img { flex: none; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 22.37%; /* iOS icon corner */ }
.s-note div { min-width: 0; }
.s-note p { font: 400 max(12px, calc(18 * var(--u)))/1.4 var(--livo-font-sans); color: var(--livo-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-note p:first-child { font-weight: 600; color: var(--livo-text); }
.s-note b { display: block; font: 600 max(13px, calc(21 * var(--u)))/1.35 var(--livo-font-sans); color: var(--livo-text); }

/* use cases: one per screen, running down the page. Each title is a question students really ask; the art alternates sides on wide screens. */
.s-uses { display: grid; gap: 64px; padding-block: var(--livo-space-xl) 72px; }
.s-use { display: grid; gap: var(--livo-space-lg); }
.s-use-text { display: grid; gap: var(--livo-space-sm-md); align-content: center; min-width: 0; }
.s-use h2 { font: 600 clamp(26px, 8cqw, 30px)/1.3 var(--livo-font-sans); letter-spacing: -.01em; margin-left: -.46em; /* the opening quote mark sits in the right half of its box */ }
.s-use p { font: var(--livo-font-body); color: var(--livo-ink-soft); }
.s-use-art { overflow: hidden; border-radius: var(--livo-radius-sheet-picker); background: var(--livo-primary-soft); }
.s-use-art img { display: block; width: 100%; height: auto; }

/* contact, privacy, terms: the title on the left, the words on the right, on the same row as the home page */
.s-content .wrapx { padding-block: var(--livo-space-xl) var(--livo-space-xxl); }
.s-split { display: grid; gap: var(--livo-space-xl); }
.s-split-head { display: grid; gap: var(--livo-space-md); align-content: start; }
.s-split-head h1 { font: 600 clamp(34px, 11.5cqw, 44px)/1.2 var(--livo-font-sans); letter-spacing: -.02em; margin-left: -0.04em; }
.s-split-head p { font: var(--livo-font-body); color: var(--livo-ink-soft); }
.s-mail { font: var(--livo-font-title3); text-decoration-color: var(--livo-primary); text-decoration-thickness: 2px; overflow-wrap: anywhere; width: max-content; max-width: 100%; margin-top: var(--livo-space-sm); }
.s-col { display: grid; gap: var(--livo-space-xl); max-width: 640px; }
.s-sec { display: grid; gap: var(--livo-space-sm-md); border-top: 1px solid var(--livo-line); padding-top: var(--livo-space-lg); }
.s-sec h2 { font: var(--livo-font-headline); }
.s-sec p, .s-sec li { font: var(--livo-font-callout); }
.s-sec ul { padding-left: 1.2em; display: grid; gap: var(--livo-space-xs); }
.s-sec a { text-decoration-color: var(--livo-primary); }
.s-doc { display: grid; gap: var(--livo-space-md); max-width: 680px; min-width: 0; }
.s-doc h2 { font: var(--livo-font-title2); margin-top: var(--livo-space-xl); }
.s-doc h2:first-child { margin-top: 0; }
.s-doc p, .s-doc li { font: var(--livo-font-callout); }
.s-doc ul, .s-doc ol { padding-left: 1.3em; display: grid; gap: var(--livo-space-sm); }
.s-doc strong { font-weight: 600; }
.s-doc a { text-decoration-color: var(--livo-primary); }
.s-doc .tbl { overflow-x: auto; border-top: 1px solid var(--livo-text); }
.s-doc table { border-collapse: collapse; width: 100%; min-width: 520px; font: var(--livo-font-subheadline); }
.s-doc th, .s-doc td { text-align: left; vertical-align: top; padding: var(--livo-space-sm-md) var(--livo-space-md) var(--livo-space-sm-md) 0; border-bottom: 1px solid var(--livo-line); }
.s-doc th { font-weight: 600; }
.s-doc code { font: var(--livo-font-subheadline); }


/* footer */
.s-foot { position: relative; z-index: 1; background: var(--livo-main-bg); margin-top: auto; }
.s-foot .foot-in { border-top: 1px solid var(--livo-line); display: flex; flex-wrap: wrap; gap: var(--livo-space-sm-md) var(--livo-space-lg); align-items: center; justify-content: space-between; padding-block: var(--livo-space-lg); min-height: var(--foot-h); }
.s-foot .s-logo .mark { height: 17px; }
.s-foot .s-logo .word { height: 12px; }
.s-foot nav { display: flex; flex-wrap: wrap; gap: var(--livo-space-xs) var(--livo-space-lg); }
.s-foot nav a { font: var(--livo-font-footnote); text-decoration: none; color: var(--livo-ink-soft); }
.s-foot nav a:hover { text-decoration: underline; }
.s-foot p { font: var(--livo-font-footnote); color: var(--livo-ink-soft); }

@media (pointer: coarse) {
  .s-nav a, .s-foot nav a { display: inline-block; padding-block: 12px; }
}

/* a phone turned sideways has no height to spare */
@media (max-height: 480px) {
  .s-head { position: static; }
}

@container site (min-width: 760px) {
  .wrapx { width: min(100% - 10cqw, 1600px); }
  .s-hero { padding-block-start: var(--livo-space-xxl); }
  .page { --head-h: 72px; }
  .s-head .s-tag { display: block; padding-left: var(--livo-space-md); border-left: 1px solid var(--livo-line); font-size: 16px; }
  .s-tag-phone { display: none; }
  .s-hero h1 { font-size: 52px; line-height: 1.16; }
  .s-lead { font: 400 20px/1.7 var(--livo-font-sans); }
  .s-lead br.d { display: inline; }
  .s-visual { flex-direction: row; justify-content: center; align-items: flex-start; gap: var(--livo-space-xl); }
  .s-app { --phone-w: min(calc((100cqw - var(--livo-space-xl)) / 2), 340px); }
  .s-app + .s-app { margin-top: calc(72 * var(--u)); }
  .s-app:first-child .s-note { transform: translateX(calc(-50% - 20 * var(--u))); }
  .s-app:last-child .s-note { transform: translateX(calc(-50% + 14 * var(--u))); }
  .s-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--livo-space-xxl); }
  .s-split-head { position: sticky; top: calc(var(--head-h) + var(--livo-space-xl)); align-self: start; }
  .s-nf { grid-template-columns: minmax(0, 1fr); }
  .s-nf .s-split-head { position: static; align-self: center; }
  .s-content .wrapx { padding-block: var(--livo-space-xxl) 72px; }
  .s-split-head h1 { font-size: clamp(44px, 3.8cqw, 64px); }
  .s-mail { font: var(--livo-font-title2); }
  .s-col, .s-doc { justify-self: start; }
  .s-doc p, .s-doc li { font: var(--livo-font-body); }
}

@container site (min-width: 960px) {
  .s-uses { gap: 96px; padding-block: 72px 96px; }
  .s-use { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 5cqw, 96px); align-items: center; }
  .s-use:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .s-use-art { order: -1; }
  .s-use:nth-child(even) .s-use-art, .s-nf .s-use-art { order: 0; }
  .s-nf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .s-use h2 { font-size: clamp(30px, 3cqw, 48px); line-height: 1.25; }
  .s-use p { font: 400 clamp(18px, 1.3cqw, 22px)/1.7 var(--livo-font-sans); }
  .s-hero { --hero-top: var(--livo-space-xl); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--livo-space-xl); align-items: center; align-content: center; padding-block-start: var(--hero-top); }
  .s-hero-text { padding-bottom: var(--livo-space-xxl); }
  .s-hero h1 { font-size: clamp(52px, 5.2cqw, 96px); }
  .s-lead { font-size: clamp(20px, 1.4cqw, 24px); }
  /* the phones never get taller than the window can show well */
  .s-app { --phone-w: min(calc((100cqw - var(--livo-space-xl)) / 2), calc((100vh - var(--head-h) - var(--hero-top)) * .46), 420px); }
}