/* ===== Tokens (brand-guidelines.md) ===== */
:root{
  --paper:#FAF9F6;
  --ink:#221F1D;
  --secondary:#6E6A64;
  --hairline:#E7E4DD;
  --btn-outline:#D8D5CD;
  --dark-surface:#201E1A;
  --on-dark:#FAF9F6;
  --on-dark-muted:rgba(250,249,246,0.65);
  --petrol:#2C6B63;
  --petrol-light:#7FBDB4;

  --tag-shipped-bg:#E7F0E3; --tag-shipped-text:#4F6F52;
  --tag-leadership-bg:#E6EDF6; --tag-leadership-text:#3E5F80;
  --tag-growth-bg:#F5EEDB; --tag-growth-text:#7A6423;

  --sans:-apple-system,'SF Pro Text',system-ui,sans-serif;
  --serif:'Fraunces',-apple-system,serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
input::placeholder{ color:rgba(34,31,29,0.35); }

/* ===== Type scale ===== */
.ld-eyebrow{ font-size:14px; font-weight:500; color:var(--secondary); margin:0; }
.ld-eyebrow-dark{ font-size:14px; font-weight:500; color:var(--on-dark-muted); margin:0; }
.ld-display{ font-family:var(--serif); font-size:52px; font-weight:500; line-height:1.14; letter-spacing:-0.5px; margin:0; }
.ld-heading{ font-family:var(--serif); font-size:32px; font-weight:500; line-height:1.25; letter-spacing:-0.3px; margin:0; }
.ld-lead{ font-size:18px; line-height:1.6; color:var(--secondary); margin:0; }
.ld-body{ font-size:16px; line-height:1.6; color:var(--secondary); margin:0; }
.ld-small{ font-size:13px; margin:0; }
.ld-tag{ font-size:12px; font-weight:500; }
.ld-balance{ text-wrap:balance; }
.ld-measure{ max-width:600px; margin-left:auto; margin-right:auto; }
.ld-center{ text-align:center; }

/* ===== Containers & rhythm ===== */
.ld-container{ max-width:1120px; margin:0 auto; padding-left:40px; padding-right:40px; }
.ld-read{ max-width:720px; margin:0 auto; padding-left:40px; padding-right:40px; }
.ld-section{ padding-top:96px; padding-bottom:96px; }
.ld-section-tight{ padding-top:64px; padding-bottom:64px; }
.ld-white{ background:#FFFFFF; }
.ld-dark{ background:var(--dark-surface); }

/* ===== Buttons ===== */
.ld-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-size:16px; font-weight:500; cursor:pointer; border:none; text-decoration:none; white-space:nowrap; }
.ld-btn-primary{ background:var(--ink); color:var(--paper); padding:12px 24px; }
.ld-btn-invert{ background:var(--paper); color:var(--ink); padding:12px 24px; }
.ld-btn-ghost{ background:transparent; border:1px solid var(--btn-outline); color:var(--ink); padding:12px 24px; }
.ld-btn-sm{ padding:8px 16px; font-size:15px; border-radius:12px; }
.ld-btn:disabled{ opacity:0.6; cursor:default; }

/* ===== Nav ===== */
.ld-nav{ padding-top:26px; padding-bottom:26px; display:flex; align-items:center; justify-content:space-between; }
.ld-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.ld-logo-word{ font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:0.2px; color:var(--ink); }
.ld-nav-links{ display:flex; align-items:center; gap:24px; }
.ld-nav-links > a:not(.ld-btn){ font-size:15px; color:var(--secondary); text-decoration:none; }

/* ===== Hero ===== */
.ld-hero{ display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center; padding-top:24px; padding-bottom:56px; }
.ld-hero-copy{ display:flex; flex-direction:column; gap:20px; max-width:540px; }
.ld-hero-phone{ width:100%; max-width:340px; margin:0 auto; }

/* ===== Waitlist forms ===== */
.ld-waitlist-form{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:440px; }
.ld-form-row{ display:flex; gap:8px; }
.ld-form-row input{ flex:1; padding:12px 16px; font-size:16px; border-radius:12px; border:1px solid var(--btn-outline); background:#FFFFFF; color:var(--ink); outline:none; }
.ld-form-row input:focus{ border-color:var(--petrol); }
.ld-form-disclaimer{ color:rgba(34,31,29,0.4); }
.ld-form-disclaimer-dark{ color:rgba(250,249,246,0.4); text-align:center; }
.ld-form-error{ color:#B23A48; }
.ld-form-error-dark{ text-align:center; }
.ld-waitlist-form.is-submitted .ld-form-error{ display:none; }
.ld-form-success{ display:flex; align-items:center; gap:8px; background:rgba(44,107,99,0.10); border:1px solid rgba(44,107,99,0.30); border-radius:12px; padding:14px 18px; font-size:15px; font-weight:500; color:var(--petrol); max-width:440px; line-height:1.5; }
.ld-form-success-dark{ background:rgba(127,189,180,0.12); border-color:rgba(127,189,180,0.30); color:var(--petrol-light); text-align:center; justify-content:center; }
.ld-waitlist-form.is-submitted .ld-form-row,
.ld-waitlist-form.is-submitted .ld-form-disclaimer{ display:none; }
.ld-waitlist-form .ld-form-success{ display:none; }
.ld-waitlist-form.is-submitted .ld-form-success{ display:flex; }

/* ===== Audience band ===== */
.ld-audience-band{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.ld-audience{ padding-top:24px; padding-bottom:24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; justify-content:center; text-align:center; }
.ld-audience-roles{ font-size:16px; }

/* ===== Problem ===== */
.ld-problem{ display:flex; flex-direction:column; gap:16px; }
.ld-problem-closer{ font-size:16px; font-weight:500; color:var(--ink); text-align:center; margin-top:8px; }

/* ===== How it works ===== */
.ld-how-eyebrow{ margin-bottom:12px; }
.ld-how-heading{ margin-bottom:60px; }
.ld-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; }
.ld-step{ display:flex; flex-direction:column; gap:16px; }
.ld-step-phone{ width:100%; max-width:240px; margin:0 auto; }
.ld-step-copy{ display:flex; flex-direction:column; gap:8px; text-align:center; }
.ld-step-text{ max-width:280px; margin:0 auto; }

/* ===== Product detail ===== */
.ld-2col{ display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:center; }
.ld-product-copy{ display:flex; flex-direction:column; gap:16px; max-width:480px; }
.ld-capabilities{ color:var(--secondary); margin-top:4px; }
.ld-product-detail .ld-step-phone{ max-width:300px; }

/* ===== Final CTA / footer ===== */
.ld-cta{ padding-top:64px; padding-bottom:24px; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.ld-cta-belongs{ max-width:440px; margin-bottom:12px; }
.ld-cta-belongs-lead{ font-size:16px; font-weight:500; color:var(--on-dark); }
.ld-cta-belongs-sub{ color:var(--on-dark-muted); }
.ld-cta-heading{ color:var(--on-dark); max-width:520px; }
.ld-dark .ld-form-row input{ background:rgba(250,249,246,0.12); border-color:rgba(250,249,246,0.28); color:var(--on-dark); }
.ld-dark .ld-form-row input::placeholder{ color:rgba(250,249,246,0.4); }
.ld-footer-row{ margin-top:32px; padding-top:24px; border-top:0.5px solid rgba(250,249,246,0.15); width:100%; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.ld-footer-text{ color:rgba(250,249,246,0.55); text-decoration:none; }

/* ================================================================
   PHONE MOCKUPS — iOS device chrome + app screens
   Content is authored at native 402x874 and CSS-scaled down uniformly,
   so every pixel value below matches the real app's own layout.
   ================================================================ */
.ld-phone-outer{ position:relative; overflow:hidden; background:var(--paper); box-shadow:0 8px 28px rgba(34,31,29,0.07); margin:0 auto; width:100%; aspect-ratio:402/874; }
.ld-phone-inner{ width:402px; height:874px; position:absolute; top:0; left:0; transform-origin:top left; background:var(--paper); }

.ldapp{ height:100%; position:relative; background:var(--paper); font-family:var(--sans); color:var(--ink); overflow:hidden; }
.ldapp *{ box-sizing:border-box; }

/* device chrome */
.ldapp-island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:126px; height:37px; border-radius:24px; background:#000; z-index:50; }
.ldapp-statusbar{ position:absolute; top:0; left:0; right:0; z-index:20; display:flex; gap:154px; align-items:center; justify-content:center; padding:21px 24px 19px; }
.ldapp-statusbar .time{ flex:1; font-size:17px; font-weight:590; color:#000; text-align:center; }
.ldapp-statusbar .icons{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; }
.ldapp-home-indicator{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:139px; height:5px; border-radius:100px; background:rgba(34,31,29,0.25); z-index:60; }

/* screen content */
.ldapp-screen{ height:100%; }
.ldapp-serif{ font-family:var(--serif); }

@keyframes ldapp-micpulse{ 0%{ transform:scale(1); opacity:0.16 } 70%{ opacity:0 } 100%{ transform:scale(1.75); opacity:0 } }
@keyframes ldapp-wave{ 0%,100%{ height:8px; opacity:0.45 } 50%{ height:30px; opacity:1 } }
@keyframes ldapp-dotb{ 0%,100%{ transform:translateY(0); opacity:0.4 } 50%{ transform:translateY(-7px); opacity:1 } }
@keyframes ldapp-sheetup{ from{ transform:translateY(102%) } to{ transform:translateY(0) } }
@keyframes ldapp-scrimin{ from{ opacity:0 } to{ opacity:1 } }
@keyframes ldapp-toastin{ 0%{ opacity:0; transform:translate(-50%,10px) } 12%{ opacity:1; transform:translate(-50%,0) } 88%{ opacity:1; transform:translate(-50%,0) } 100%{ opacity:0; transform:translate(-50%,-6px) } }

.ldapp-home{ height:100%; display:flex; flex-direction:column; padding:74px 24px 96px; }
.ldapp-fade{ opacity:1; transition:opacity 0.4s ease; }
.ldapp-topcluster{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.ldapp-streak{ display:inline-flex; align-items:center; gap:6px; background:rgba(44,107,99,0.10); color:var(--petrol); padding:6px 12px; border-radius:999px; font-size:13px; font-weight:500; border:1px solid rgba(44,107,99,0.30); }
.ldapp-greeting{ font-size:26px; font-weight:500; text-align:center; white-space:nowrap; }
.ldapp-greeting-sub{ font-size:16px; color:var(--secondary); text-align:center; }
.ldapp-memory{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--hairline); }
.ldapp-memory .lbl{ font-size:13px; color:var(--secondary); }
.ldapp-memory .val{ font-size:13px; font-weight:500; color:var(--ink); }

.ldapp-midstage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.ldapp-mic-stage{ position:relative; width:236px; height:236px; display:flex; align-items:center; justify-content:center; touch-action:none; }
.ldapp-mic-pulse{ position:absolute; width:172px; height:172px; border-radius:50%; background:var(--ink); animation:ldapp-micpulse 2.6s ease-out infinite; }
.ldapp-mic-ring{ position:absolute; transform:rotate(-90deg); display:none; }
.ldapp-mic-ring circle.bg{ fill:none; stroke:rgba(34,31,29,0.16); stroke-width:6; }
.ldapp-mic-ring circle.fg{ fill:none; stroke:var(--ink); stroke-width:6; stroke-linecap:round; }
.ldapp-mic-btn{ width:172px; height:172px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transform:scale(1); transition:transform 0.18s ease, background 0.2s ease; user-select:none; touch-action:none; border:none; padding:0; }
.ldapp-mic-btn.rec{ transform:scale(1.07); }
.ldapp-mic-btn.proc{ background:#3A3632; }
.ldapp-mic-dots{ display:none; gap:9px; }
.ldapp-mic-dots div{ width:11px; height:11px; border-radius:50%; background:var(--paper); animation:ldapp-dotb 1s ease-in-out infinite; }
.ldapp-mic-dots div:nth-child(2){ animation-delay:0.16s; }
.ldapp-mic-dots div:nth-child(3){ animation-delay:0.32s; }

.ldapp-caption-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; min-height:70px; justify-content:flex-start; }
.ldapp-caption{ font-size:16px; color:var(--secondary); font-weight:500; text-align:center; min-height:22px; }
.ldapp-recinfo{ display:none; flex-direction:column; align-items:center; gap:10px; }
.ldapp-recinfo.show{ display:flex; }
.ldapp-waveform{ display:flex; gap:3px; align-items:center; height:34px; }
.ldapp-waveform div{ width:3px; border-radius:2px; background:var(--ink); animation:ldapp-wave 0.9s ease-in-out infinite; }
.ldapp-timer{ font-size:14px; color:var(--secondary); font-variant-numeric:tabular-nums; }
.ldapp-timer.near-limit{ color:#B23A48; }

.ldapp-tabbar{ position:absolute; left:0; right:0; bottom:0; height:84px; padding:9px 0 22px; display:flex; background:rgba(250,249,246,0.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--hairline); }
.ldapp-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:default; }
.ldapp-tab span{ font-size:11px; font-weight:500; letter-spacing:0.1px; color:var(--secondary); }
.ldapp-tab.active span{ color:var(--ink); }

/* mic-permission-style sheets, summary sheet */
.ldapp-scrim{ position:absolute; inset:0; background:rgba(34,31,29,0.35); animation:ldapp-scrimin 0.25s ease; z-index:80; }
.ldapp-sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--paper); border-radius:24px 24px 0 0; padding:10px 22px 30px; animation:ldapp-sheetup 0.32s cubic-bezier(0.22,1,0.36,1); max-height:88%; display:flex; flex-direction:column; z-index:81; }
.ldapp-sheet-handle{ width:40px; height:5px; border-radius:999px; background:var(--hairline); margin:6px auto 16px; }
.ldapp-sheet-title{ font-size:21px; font-weight:500; }
.ldapp-sheet-sub{ font-size:15px; color:var(--secondary); margin-top:4px; }
.ldapp-sheet-cards{ display:flex; flex-direction:column; gap:12px; overflow:auto; margin-top:18px; }
.ldapp-card{ background:var(--paper); border:0.5px solid var(--hairline); border-radius:16px; padding:15px 16px; display:flex; flex-direction:column; gap:7px; cursor:pointer; }
.ldapp-card-title{ font-size:16px; font-weight:500; }
.ldapp-card-desc{ font-size:14px; line-height:1.45; color:var(--secondary); }
.ldapp-pill{ padding:3px 9px; border-radius:7px; font-size:12px; font-weight:500; display:inline-block; width:fit-content; }
.ldapp-pill-shipped{ background:var(--tag-shipped-bg); color:var(--tag-shipped-text); }
.ldapp-pill-leadership{ background:var(--tag-leadership-bg); color:var(--tag-leadership-text); }
.ldapp-pill-growth{ background:var(--tag-growth-bg); color:var(--tag-growth-text); }
.ldapp-sheet-actions{ display:flex; gap:10px; margin-top:18px; }
.ldapp-btn-ghost{ flex:0 0 auto; padding:15px 24px; border:1px solid var(--btn-outline); border-radius:10px; background:transparent; color:var(--ink); font-size:16px; font-weight:500; cursor:pointer; }
.ldapp-btn-ink{ flex:1; padding:15px; border:none; border-radius:10px; background:var(--ink); color:var(--paper); font-size:16px; font-weight:500; cursor:pointer; }

.ldapp-toast{ position:absolute; bottom:102px; left:50%; z-index:90; display:none; align-items:center; gap:8px; background:rgba(44,107,99,0.10); border:1px solid rgba(44,107,99,0.30); color:var(--petrol); padding:11px 18px; border-radius:999px; font-size:15px; font-weight:500; white-space:nowrap; }
.ldapp-toast.show{ display:inline-flex; animation:ldapp-toastin 2.4s ease forwards; }

/* log screen */
.ldapp-log{ height:100%; overflow:hidden; padding:74px 20px 100px; }
.ldapp-log-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ldapp-log-title{ font-size:28px; font-weight:500; }
.ldapp-log-export{ padding:8px 14px; border:1px solid var(--btn-outline); border-radius:10px; background:transparent; color:var(--ink); font-size:14px; font-weight:500; }
.ldapp-log-stat{ font-size:15px; color:var(--secondary); margin-bottom:20px; }
.ldapp-yeargrid{ background:var(--paper); border:0.5px solid var(--hairline); border-radius:16px; padding:16px; margin-bottom:22px; }
.ldapp-yeargrid-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:13px; }
.ldapp-yeargrid-head .lbl{ font-weight:500; color:var(--secondary); }
.ldapp-yeargrid-head .val{ color:var(--secondary); }
.ldapp-dots{ display:flex; flex-wrap:wrap; gap:7px; }
.ldapp-dot{ width:16px; height:16px; border-radius:5px; }
.ldapp-weeks{ display:flex; flex-direction:column; gap:12px; }
.ldapp-week{ background:var(--paper); border:0.5px solid var(--hairline); border-radius:16px; padding:16px; }
.ldapp-week-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.ldapp-week-label{ font-size:15px; font-weight:500; }
.ldapp-week-range{ font-size:13px; color:var(--secondary); }
.ldapp-week-chevron{ display:flex; color:var(--secondary); transition:transform 0.2s ease; }
.ldapp-week.expanded .ldapp-week-chevron{ transform:rotate(90deg); }
.ldapp-week-achievements{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.ldapp-achievement{ display:flex; flex-direction:column; gap:6px; cursor:pointer; }
.ldapp-achievement-top{ display:flex; align-items:center; gap:9px; }
.ldapp-achievement-title{ font-size:15px; font-weight:500; flex:1; }
.ldapp-achievement-desc{ font-size:14px; line-height:1.45; color:var(--secondary); display:none; }
.ldapp-week.expanded .ldapp-achievement-desc{ display:block; }

/* edit screen */
.ldapp-edit{ height:100%; overflow:hidden; padding:62px 20px 40px; }
.ldapp-edit-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.ldapp-edit-back{ display:flex; align-items:center; gap:4px; color:var(--petrol); font-size:16px; }
.ldapp-edit-done{ padding:7px 16px; border:none; border-radius:10px; background:var(--ink); color:var(--paper); font-size:15px; font-weight:500; }
.ldapp-edit-title{ font-size:24px; font-weight:500; margin-bottom:18px; }
.ldapp-edit-transcript{ background:rgba(34,31,29,0.04); border-radius:14px; padding:14px 16px; margin-bottom:24px; }
.ldapp-edit-transcript .lbl{ font-size:12px; font-weight:500; color:var(--secondary); margin-bottom:8px; }
.ldapp-edit-transcript .val{ font-size:15px; line-height:1.55; color:var(--secondary); }
.ldapp-edit-fields{ display:flex; flex-direction:column; gap:18px; }
.ldapp-field{ display:flex; flex-direction:column; gap:7px; }
.ldapp-field .lbl{ font-size:13px; font-weight:500; color:var(--secondary); }
.ldapp-field input, .ldapp-field textarea{ width:100%; padding:13px 14px; border:1px solid var(--hairline); border-radius:12px; background:var(--paper); font-size:16px; color:var(--ink); outline:none; font-family:var(--sans); }
.ldapp-field textarea{ line-height:1.5; }
.ldapp-tagrow{ display:flex; gap:9px; }
.ldapp-tagpill{ padding:9px 16px; border-radius:999px; font-size:15px; font-weight:500; cursor:pointer; border:1px solid transparent; }
.ldapp-tagpill.selected{ border-color:var(--ink); }

/* ===== Mobile ===== */
@media (max-width:860px){
  .ld-hero{ grid-template-columns:1fr; }
  .ld-hero-phone{ order:-1; margin:0 auto 12px; max-width:280px; }
  .ld-3col{ grid-template-columns:1fr; }
  .ld-2col{ grid-template-columns:1fr; }
  .ld-display{ font-size:38px; }
  .ld-heading{ font-size:28px; }
  .ld-body{ font-size:16px; }
  .ld-section{ padding-top:64px; padding-bottom:64px; }
  .ld-section-tight{ padding-top:48px; padding-bottom:48px; }
  .ld-nav-links{ gap:14px; }
}
@media (max-width:520px){
  .ld-container, .ld-read{ padding-left:24px; padding-right:24px; }
  .ld-form-row{ flex-direction:column; }
  .ld-nav-links a:not(.ld-btn){ display:none; }
}