/* /feed in the crayon language. Base tokens and the brand row come from kit/health.css, the drawing
   frames and Par's own UI from kit/kit.css (both copied from the illustration kit, 082238d0). Every
   picture is a generated drawing or a kit sticker; this file only lays out text, frames and the feeds.
   Omar's and Nora's feeds are their own apps, so each keeps its own theme; "Par asks first" is Par's
   UI and uses the kit. */

.fd-nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.fd-nav-links a { text-decoration: none; color: var(--text-muted); }
.fd-nav-links a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; }
.fd-nav-links .hp-btn { color: oklch(from var(--par-btn) 0.34 calc(c + 0.05) h); padding: 14px 20px; min-height: 44px; }

/* ── Opening ─────────────────────────────────────────── */
.fd-hero { padding-top: clamp(36px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.fd-hero h1 { max-width: 13ch; }
.fd-hero h1 .fd-not { display: block; margin-top: 10px; font-size: .52em; line-height: 1.12; color: var(--text-muted); max-width: 22ch; }
.fd-hero .hp-lead { max-width: 34ch; }
.fd-hero .hp-ctas { margin-top: 28px; }
.fd-hero .pil-art { margin: 0; }

/* ── The two devices of one person ───────────────────── */
.fd-pair { margin-top: clamp(36px, 5vw, 64px); display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.fd-desk { flex: 1 1 auto; min-width: 0; max-width: 820px; border: var(--pil-line) solid var(--pil-ink); border-radius: 22px; padding: 10px 10px 12px; background: #fdfbf5; box-shadow: var(--pil-shadow); }
.fd-desk-bar { display: flex; gap: 6px; padding: 2px 4px 10px; }
.fd-desk-bar i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pil-ink); }
.fd-phone { flex: none; width: 272px; margin: 0; border: var(--pil-line) solid var(--pil-ink); border-radius: 40px; padding: 9px; background: #fdfbf5; box-shadow: var(--pil-shadow); position: relative; z-index: 1; }
.fd-pair-cap { margin-top: 22px; font-size: 16px; color: var(--text-muted); }

/* A feed screen: the owner's name, the time, then the cards that matter now. */
.fd-feed { border-radius: 14px; padding: 18px 18px 20px; min-height: 100%; }
.fd-phone .fd-feed { border-radius: 31px; padding: 22px 14px 24px; min-height: 520px; }
.fd-feed-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 16px; }
.fd-feed-top b { font: 600 22px/1 "DM Sans", var(--font-body); letter-spacing: -0.02em; }
.fd-feed-top span { font-size: 13px; color: var(--text-muted); }
.fd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fd-col { display: grid; gap: 12px; }

/* Omar's feed: his own app, in his look (cream, ink, olive). One thing and one action per card. */
.fd-omar { --own: #5f6a3a; --own-soft: #e8ead9; background: #f1ece0; }
.fd-card { background: #fffdf8; border: 2px solid #1d1a16; border-radius: 18px; padding: 15px 15px 16px; }
.fd-card h4 { margin: 0; font: 400 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.fd-card .fd-from { display: block; margin-bottom: 6px; font: 500 13px/1 var(--font-body); color: var(--text-muted); }
.fd-card .fd-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.fd-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 14px/1 var(--font-body); padding: 10px 14px; border-radius: 999px; background: var(--own); color: #fff; border: 2px solid #1d1a16; }
.fd-go img { width: 16px; height: auto; }
.fd-done { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 14px/1 var(--font-body); }
.fd-done img { width: 26px; height: auto; }
.fd-card.is-done h4 { color: var(--text-muted); }

/* Nora's feed: her own app, another mechanic. One big card at a time, swipe for the next. */
.fd-nora { --own: #c8592f; background: #fbefd6; font-family: "DM Sans", var(--font-body); }
.fd-big { background: #fffaf0; border: 2px solid #1d1a16; border-radius: 26px; padding: 26px 22px 22px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.fd-big .pil-live { align-self: flex-start; margin-bottom: auto; }
.fd-big h4 { margin: 0; font: 600 30px/1.08 "DM Sans", var(--font-body); letter-spacing: -0.025em; }
.fd-big .fd-go { justify-content: center; margin-top: 18px; padding: 15px; border-radius: 16px; font-size: 16px; }
.fd-dots { display: flex; justify-content: center; gap: 6px; padding-top: 14px; }
.fd-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e1c493; border: 1.5px solid #1d1a16; }
.fd-dots i.on { width: 22px; border-radius: 5px; background: var(--own); }
.fd-one { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 16px; align-items: center; }
.fd-one .fd-big { min-height: 230px; }
.fd-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #1d1a16; background: #fffaf0; font: 600 18px/1 var(--font-body); }

/* ── Every card does something ───────────────────────── */
.fd-flow { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.fd-flow .fd-omar { border-radius: 24px; padding: 14px; border: var(--pil-line) solid var(--pil-ink); box-shadow: var(--pil-shadow); }
.fd-step-arrow { text-align: center; font: 600 22px/1 var(--font-body); color: var(--text-muted); }
.fd-ask { padding-bottom: 18px; }
.fd-ask .pil-ui-top img { width: 64px; height: auto; margin: -8px 0 -8px -6px; }
.fd-ask p { margin: 14px 18px 0; font: 400 21px/1.3 var(--font-display); }
.fd-ask .fd-ask-btns { display: flex; gap: 10px; margin: 16px 18px 0; }
.fd-ask .pil-btn--ghost { background: var(--pil-paper); }
.fd-line { margin-top: clamp(26px, 3vw, 36px); font: 400 clamp(24px, 2.6vw, 32px)/1.2 var(--font-display); }
.fd-done-art { display: flex; align-items: center; gap: 12px; }
.fd-done-art img { width: 86px; height: auto; flex: none; }

/* ── Yours works like you ────────────────────────────── */
.fd-two-caps { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font: 400 clamp(20px, 2vw, 25px)/1.25 var(--font-display); }
.fd-two-caps p:last-child { text-align: right; }

/* ── Close ───────────────────────────────────────────── */
.fd-start { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px 48px; align-items: center; }
.fd-start h2 { max-width: 16ch; }
.fd-start .fd-now { margin-top: 14px; max-width: 46ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; color: var(--text-muted); }
.fd-start .pil-spot { width: 240px; justify-self: end; }
.fd-faq { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; max-width: 980px; }
.fd-faq dt { font-weight: 500; font-size: 17px; }
.fd-faq dd { margin: 6px 0 0; color: var(--text-muted); }

@media (max-width: 960px) {
  .fd-nav-links a:not(.hp-btn) { display: none; }
  .fd-hero { grid-template-columns: 1fr; }
  .fd-hero .pil-art { margin-top: 8px; }
}
@media (max-width: 760px) {
  .fd-pair { flex-direction: column; align-items: center; }
  .fd-desk { width: 100%; padding: 6px 6px 8px; border-radius: 16px; }
  .fd-desk .fd-feed { padding: 10px; }
  .fd-desk .fd-feed-top b { font-size: 15px; }
  .fd-desk .fd-row { gap: 6px; }
  .fd-desk .fd-card { padding: 8px; border-radius: 11px; border-width: 1.5px; }
  .fd-desk .fd-card h4 { font-size: 12px; }
  .fd-desk .fd-card .fd-from, .fd-desk .fd-card .fd-meta { font-size: 9.5px; }
  .fd-desk .fd-go { font-size: 9.5px; padding: 6px 8px; margin-top: 7px; border-width: 1.5px; }
  .fd-desk .fd-go img { width: 10px; }
  .fd-desk .fd-one { grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 6px; }
  .fd-desk .fd-arrow { width: 26px; height: 26px; font-size: 12px; }
  .fd-desk .fd-big { min-height: 150px; padding: 12px; border-radius: 14px; }
  .fd-desk .fd-big h4 { font-size: 16px; }
  .fd-desk .fd-big .fd-go { padding: 8px; font-size: 11px; margin-top: 8px; }
  .fd-desk .pil-live { font-size: 9.5px; padding: 4px 6px; }
  .fd-phone { margin: 0; width: min(272px, 86%); }
  .fd-pair-cap { margin-top: 18px; }
  .fd-flow { grid-template-columns: 1fr; gap: 10px; }
  .fd-step-arrow { transform: rotate(90deg); }
  .fd-two-caps { grid-template-columns: 1fr; gap: 6px; }
  .fd-two-caps p:last-child { text-align: left; }
  .fd-start { grid-template-columns: 1fr; }
  .fd-start .pil-spot { justify-self: start; width: 200px; }
  .fd-faq { grid-template-columns: 1fr; }
}
/* On Nora's phone the one card fills the screen; the dots sit under it. */
.fd-phone .fd-nora { display: flex; flex-direction: column; }
.fd-phone .fd-nora .fd-big { flex: 1; }


    .feed-study .study-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
    .feed-study .study-name{display:flex;align-items:center;gap:12px;font:500 16px/1.3 var(--font-body);color:var(--text-muted)}
    .feed-study .study-name img{width:38px;height:38px;object-fit:contain}
    .feed-study .study-safety{font:400 13px/1.4 var(--font-body);color:var(--text-muted);border:1px solid var(--border-strong);padding:8px 13px;border-radius:99px}
    .feed-study .hp-story{width:100%;margin:0}
    .feed-study h2{font-size:clamp(40px,5.55vw,71px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
    .feed-study .study-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px}
    .feed-study .study-intro p{font-size:17px;color:var(--text-muted)}
    .feed-study .study-try{border-radius:99px;white-space:nowrap;min-height:46px;background:var(--pil-paper);box-shadow:3px 3px 0 var(--pil-ink)}
    .feed-study button{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
    .feed-study button:hover:not(:disabled){transform:translateY(-2px)}
    .feed-study button:active:not(:disabled){transform:translateY(1px)}
    .feed-study button:focus-visible{outline:3px solid var(--pil-cobalt);outline-offset:5px}
    .feed-study button:disabled{cursor:default}
    .feed-study .fd-flow{margin-top:28px;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);gap:14px;align-items:start}
    .feed-study .fd-stage{min-width:0;position:relative}
    .feed-study .stage-label{display:flex;align-items:center;gap:10px;margin-bottom:15px;font:500 14px/1.2 var(--font-body);color:var(--text-muted)}
    .feed-study .stage-label b{display:grid;place-items:center;width:27px;height:27px;border:1.5px solid var(--border-strong);border-radius:50%;font-size:12px;background:var(--surface)}
    .feed-study .fd-stage.is-current .stage-label{color:var(--text)}
    .feed-study .fd-stage.is-current .stage-label b{background:var(--pil-ink);border-color:var(--pil-ink);color:var(--pil-paper)}
    .feed-study .fd-stage.is-complete .stage-label b{background:var(--pil-green-soft);border-color:var(--pil-green)}
    .feed-study .fd-step-arrow{margin-top:116px;color:var(--text-muted);font-size:25px}
    .feed-study .stage-surface{transition:opacity .15s ease}
    .feed-study .fd-stage.is-future .stage-surface{opacity:.55}
    .feed-study .fd-card{padding:22px 21px 20px;min-height:180px}
    .feed-study .fd-card h4{font-size:29px;line-height:1.12;letter-spacing:-.025em}
    .feed-study .fd-go{font-size:15px;min-height:45px;padding:12px 20px;margin-top:23px}
    .feed-study .fd-go:disabled{background:#dddccf;color:#726f62}
    .feed-study .fd-ask{min-height:213px;padding-bottom:20px}
    .feed-study .pil-ui-top{padding:17px 18px 14px}
    .feed-study .pil-ui-top h3{font-size:28px}
    .feed-study .fd-ask p{margin:18px 18px 0;font-size:24px}
    .feed-study .fd-ask .fd-ask-btns{gap:12px;margin-top:18px}
    .feed-study .pil-btn{min-height:44px;font-size:15px}
    .feed-study .fd-done-art{display:block;position:relative;padding-right:0}
    .feed-study .fd-done-art .fd-omar{padding-right:49px}
    .feed-study .fd-done-art>.brain-done{position:absolute;width:98px;right:-18px;bottom:-29px}
    .feed-study .fd-done-art .fd-card{min-height:180px;padding-right:11px}
    .feed-study .fd-done-art .fd-card h4{font-size:26px}
    .feed-study .fd-done{font-size:16px;margin-top:23px;gap:9px}
    .feed-study .fd-done img{width:30px}
    .feed-study .study-bottom{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--border-strong);padding-top:17px}
    .feed-study .fd-line{font-size:31px;line-height:1.2;margin:0}
    .feed-study .study-status{font-size:13px;color:var(--text-muted);margin-top:7px;min-height:20px}
    .feed-study .study-replay{font:500 14px/1 var(--font-body);color:var(--text);background:transparent;padding:14px 18px;border:1.5px solid var(--border-strong);border-radius:99px;min-height:45px}
    @media(max-width:900px){
      .feed-study .fd-flow{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);gap:9px}
      .feed-study .fd-card{padding:17px 14px}
      .feed-study .fd-card h4,.feed-study .fd-done-art .fd-card h4{font-size:24px}
      .feed-study .pil-ui-top h3{font-size:24px}
      .feed-study .fd-ask .pil-ui-top img{width:49px}
      .feed-study .fd-done-art>.brain-done{width:74px;right:-13px}
      .feed-study .fd-done-art .fd-omar{padding-right:29px}
    }
    @media(max-width:760px){
      .feed-study .study-top,.feed-study .study-intro{align-items:flex-start;flex-direction:column;gap:14px}
      .feed-study .study-top{margin-bottom:30px}
      .feed-study h2{font-size:48px;max-width:11ch}
      .feed-study .study-intro{margin-top:20px}
      .feed-study .fd-flow{grid-template-columns:1fr;gap:22px;margin-top:30px}
      .feed-study .fd-step-arrow{display:none}
      .feed-study .fd-card{min-height:170px;padding:23px}
      .feed-study .fd-card h4,.feed-study .fd-done-art .fd-card h4{font-size:30px}
      .feed-study .pil-ui-top h3{font-size:30px}
      .feed-study .fd-ask .pil-ui-top img{width:64px}
      .feed-study .fd-done-art>.brain-done{width:99px;right:-3px;bottom:-16px}
      .feed-study .fd-done-art .fd-omar{padding-right:62px}
      .feed-study .study-bottom{margin-top:38px;align-items:flex-start}
      .feed-study .fd-line{font-size:27px;max-width:15ch}
    }
    @media(prefers-reduced-motion:reduce){.feed-study button,.feed-study .stage-surface{transition:none}.feed-study button:hover:not(:disabled),.feed-study button:active:not(:disabled){transform:none}}