/*
 * My1on1 — the front door at /
 *
 * "An afternoon at the kitchen table." Warm ground, marker colours, a hand
 * that shows: the whiteboard's own visual language, because that is where the
 * teaching actually happens.
 *
 * ⚠️ THIS IS DELIBERATELY NOT app.css, AND THE TWO DO NOT MATCH.
 * app.css is the appointment book a teacher works in — Newsreader over Public
 * Sans, deep green, cool paper. This page is the door she has not opened yet.
 * The owner rejected the app's palette here as "too technical, not warm — this
 * is about working with people", and he was right for a page whose whole job is
 * to make somebody want to come in.
 *
 * ⚠️ THERE IS A SEAM. Press "Sign in" and the world changes from warm coral to
 * deep green. That is a real, undecided design question — see
 * design/homepage/README.md. It is not an accident, and it is not resolved.
 *
 * ⚠️ LIGHT ONLY, on purpose. The app has no dark theme, so a dark variant here
 * would promise something that does not exist. Reviewed once in a dark viewer,
 * this page rendered as near-black and read as cold — a theme that will never
 * ship was doing the arguing.
 */
/* ═══ An afternoon at the kitchen table ═══════════════════════════════════
   Warm ground, marker colours, a hand that shows. The whiteboard's own
   visual language — because that is where the teaching actually happens.
   ─────────────────────────────────────────────────────────────────────── */
:root{
  --ground:#fff9f3;  --ground-warm:#fdeee1;  --card:#ffffff;
  --ink:#2a1f1a;     --ink-soft:#7c6a5d;     --rule:#f2ddc9;
  /* The pens. Four, used as a set — warmth reads in plural, not one accent. */
  --coral:#c4462a;   --coral-soft:#fde5dd;
  --sun:#d4881a;     --sun-soft:#fdf0d9;
  --sky:#2e7d9a;     --sky-soft:#e2f0f5;
  --leaf:#44805a;    --leaf-soft:#e4f0e8;
  --shadow:0 2px 4px rgba(90,60,40,.06), 0 22px 44px -26px rgba(90,60,40,.42);
  /*
   * ⚠️⚠️ FRAUNCES AND NUNITO SANS ARE NAMED HERE AND NEVER LOADED.
   * THAT IS NOW DELIBERATE. DO NOT ADD AN @import.
   *
   * Nothing in this file or in index.html has ever imported them, so this page
   * has rendered in the FALLBACKS -- Georgia and the system sans -- since the
   * day it shipped. It was a genuine bug: a font the stylesheet has never heard
   * of does not error, it just renders as something else (L-45).
   *
   * ⭐ But it is the page the owner has been looking at, and the one he said he
   * liked. Shown both side by side on 9 September he chose to KEEP IT: the
   * homepage does not change, the app was matched to it instead (its own
   * webfont import was removed), nothing is downloaded, and one fewer company
   * touches a request.
   *
   * ⚠️ So adding the import would silently change the page he approved. The
   * names stay only as a record of the original intent. **D-077**, and L-53 --
   * a thing that looks stale and must not be tidied.
   */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1140px;
}
/* ⚠️ DELIBERATELY LIGHT ONLY.
   The app is light-only, so a dark variant here would show the owner a page
   that will never ship -- and it did: reviewed in a dark viewer, the warm
   paper rendered as near-black and read as "technical, not warm". Every
   colour below is painted explicitly so the page holds on any host ground. */

*{box-sizing:border-box;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 20px/1.62 var(--body); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px;}
h1,h2,h3{font-family:var(--display); font-variation-settings:'SOFT' 50,'WONK' 1;}

/* ── Two circles: the product name, made visible ────────────────────────── */
.pair{display:inline-flex; align-items:center;}
.pair span{
  width:var(--d,46px); height:var(--d,46px); border-radius:50%;
  display:grid; place-items:center; font:700 calc(var(--d,46px)*.4)/1 var(--body);
  border:2px solid var(--ground);
}
.pair span+span{margin-left:calc(var(--d,46px) * -.3);}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.mast{background:var(--ground); border-bottom:1px solid var(--rule);}
.mast__in{display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:18px 26px; max-width:var(--maxw); margin:0 auto;}
.word{font:700 28px/1 var(--display); text-decoration:none; letter-spacing:-.015em;
  font-variation-settings:'SOFT' 50,'WONK' 1;}
.word i{font-style:normal; color:var(--coral);}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:58px; padding:15px 28px; border-radius:999px; border:2px solid transparent;
  font:700 19px/1.2 var(--body); text-decoration:none; cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;}
.btn--go{background:var(--coral); color:#fff9f3; box-shadow:0 6px 0 -1px rgba(0,0,0,.12);}
.btn--go:hover{transform:translateY(-2px); box-shadow:0 9px 0 -1px rgba(0,0,0,.14);}
.btn--quiet{background:var(--card); border-color:var(--rule); color:var(--ink);}
.btn--quiet:hover{border-color:var(--ink-soft);}
.btn--sm{min-height:48px; padding:11px 22px; font-size:17px;}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:80px 0 90px;}
.hero__glow{position:absolute; inset:-30% -10% auto auto; width:62vw; height:62vw;
  max-width:760px; max-height:760px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, var(--sun-soft) 0%, transparent 68%);}
.hero__grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr;
  gap:60px; align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  font:700 14px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); background:var(--coral-soft); border-radius:999px; padding:10px 16px;}
h1{font:600 clamp(46px,6.6vw,82px)/1.02 var(--display); letter-spacing:-.026em;
  margin:0 0 22px; text-wrap:balance;}
.scribble{position:relative; white-space:nowrap;}
.scribble svg{position:absolute; left:-3%; bottom:-.2em; width:106%; height:.36em; overflow:visible;}
.scribble path{fill:none; stroke:var(--sun); stroke-width:6; stroke-linecap:round;}
.lede{font-size:22px; color:var(--ink-soft); margin:0 0 32px; max-width:31em;}
.lede b{color:var(--ink); font-weight:700;}
.cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:26px;}
.also{margin:0; font-size:17px; color:var(--ink-soft); max-width:34em;}
.also b{color:var(--ink); font-weight:700;}

/* ── The lesson vignette ────────────────────────────────────────────────── */
.scene{background:var(--card); border:1px solid var(--rule); border-radius:24px;
  box-shadow:var(--shadow); padding:26px; transform:rotate(-1.1deg);}
.scene__top{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.scene__who{font:700 19px/1.25 var(--body); margin:0;}
.scene__who small{display:block; font-weight:400; font-size:16px; color:var(--ink-soft);}
.board{background:var(--ground); border:1px solid var(--rule); border-radius:16px;
  height:196px; position:relative; overflow:hidden;}
.board svg{position:absolute; inset:0; width:100%; height:100%;}
.board__tag{position:absolute; left:14px; bottom:12px; font:700 13px/1 var(--body);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.scene__foot{display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:20px;}
.scene__time{font:700 18px/1 var(--body); color:var(--ink);}
.scene__time span{display:block; font-weight:400; font-size:15px; color:var(--ink-soft); margin-top:4px;}
.caption{margin:18px 4px 0; font-size:15px; color:var(--ink-soft); text-align:center;}

/* ── Sections ───────────────────────────────────────────────────────────── */
.sec{padding:88px 0;}
.sec--warm{background:var(--ground-warm);}
h2{font:600 clamp(32px,3.9vw,48px)/1.12 var(--display); letter-spacing:-.02em;
  margin:0 0 14px; text-wrap:balance;}
.sec__lede{font-size:21px; color:var(--ink-soft); margin:0 0 46px; max-width:33em;}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:0; padding:0;}
.cards li{list-style:none; background:var(--card); border:1px solid var(--rule);
  border-radius:20px; padding:28px;}
.chip{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:16px; margin-bottom:18px;}
.chip svg{width:26px; height:26px;}
.c-sky .chip{background:var(--sky-soft); color:var(--sky);}
.c-leaf .chip{background:var(--leaf-soft); color:var(--leaf);}
.c-sun .chip{background:var(--sun-soft); color:var(--sun);}
.cards h3{font:600 25px/1.22 var(--display); margin:0 0 10px;}
.cards p{margin:0; font-size:18px; color:var(--ink-soft);}

/* ── The link ───────────────────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.no{list-style:none; margin:0; padding:0; display:grid; gap:15px;}
.no li{display:flex; gap:13px; align-items:flex-start; font-size:19px;}
.no b{color:var(--coral); flex:none; font-size:22px; line-height:1.2;}
.linkcard{background:var(--card); border:1px solid var(--rule); border-radius:22px;
  padding:28px; box-shadow:var(--shadow); transform:rotate(.9deg);}
.linkcard__url{font:600 16px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--sky-soft); color:var(--sky); border-radius:12px;
  padding:14px 16px; word-break:break-all; margin:0 0 16px;}
.linkcard p{margin:0; font-size:18px; color:var(--ink-soft);}

/* ── Invitation ─────────────────────────────────────────────────────────── */
.invite{text-align:center;}
.invite .pair{margin-bottom:26px;}
.invite h2{margin-bottom:18px;}
.invite p{font-size:21px; color:var(--ink-soft); max-width:34em; margin:0 auto 16px;}
.invite p b{color:var(--ink); font-weight:700;}
.invite .cta{justify-content:center; margin:32px 0 0;}

/* ── Coming next ────────────────────────────────────────────────────────── */
.tag{display:inline-block; font:700 13px/1 var(--body); letter-spacing:.14em;
  text-transform:uppercase; color:var(--sun); background:var(--sun-soft);
  border:2px solid var(--sun); border-radius:999px; padding:9px 16px; margin-bottom:20px;}
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:38px 0 0; padding:0;}
.ladder li{list-style:none; background:var(--card); border:1px dashed var(--rule);
  border-radius:20px; padding:26px;}
.ladder h3{font:600 22px/1.2 var(--display); margin:0 0 8px;}
.ladder p{margin:0; font-size:17px; color:var(--ink-soft);}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ground-warm); border-top:1px solid var(--rule); padding:44px 0 58px;}
.door{background:var(--card); border:1px solid var(--rule); border-radius:20px;
  padding:24px 28px; margin-bottom:32px; display:flex; gap:20px; align-items:center;}
.door strong{display:block; font:600 22px/1.3 var(--display); margin-bottom:4px;}
.door p{margin:0; font-size:18px; color:var(--ink-soft);}
.foot__links{display:flex; flex-wrap:wrap; gap:12px 26px; margin:0 0 14px;
  padding:0; list-style:none; font-size:17px;}
.foot__links a{color:var(--ink-soft);}
.foot__note{margin:0; font-size:15px; color:var(--ink-soft);}

@media (prefers-reduced-motion:reduce){*{transition:none !important;}}
@media (max-width:900px){
  .hero__grid,.split{grid-template-columns:1fr; gap:44px;}
  .cards,.ladder{grid-template-columns:1fr;}
  .hero{padding:54px 0 60px;} .sec{padding:62px 0;}
  .scene,.linkcard{transform:none;}
  .door{flex-direction:column; align-items:flex-start; gap:12px;}
}