/* Front door (BUILDING_BLOCKS P45, Sheetal 5 Nov 2026): the website hero shows the SAME template as the app's
   first screen, from ONE switch (GET /api/occasions -> first_screen). Colours from her business card / poster. */
.fd { --fd-green:#1E5E2F; --fd-yellow:#F2C230; --fd-cream:#FBF7EE; background: var(--fd-cream); }
.fd-panel { background: var(--fd-green); color:#fff; border-radius: 0 0 48px 48px; position: relative; overflow: hidden; padding: 120px 48px 56px; }
.fd-panel::after { content:""; position:absolute; right:-120px; top:-120px; width:460px; height:460px; border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none; }
.fd-grid { max-width: 1180px; margin: 0 auto; display:grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items:center; position:relative; z-index:1; }
.fd-copy { display:flex; flex-direction:column; gap: 22px; text-align:left; }
.fd-tag { margin:0; font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--fd-yellow); }
.fd h1 { margin:0; font-family: Inter, -apple-system, sans-serif; font-weight:800; font-size: clamp(40px, 5.6vw, 80px); line-height:1.03; letter-spacing:-.015em; color:#fff; }
.fd .y { color: var(--fd-yellow); }
.fd-sw { display:block; height:9px; width:200px; border-radius:9px; background:var(--fd-yellow); transform:rotate(-2deg); margin-top:14px; }
.fd-lead { margin:0; font-size: clamp(17px, 1.5vw, 21px); line-height:1.45; color:rgba(255,255,255,.92); max-width: 600px; }
.fd-lead b { color: var(--fd-yellow); font-weight:800; }
.fd-pills { display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.fd-pills li { border:2px solid rgba(255,255,255,.75); border-radius:999px; padding:7px 14px; font-weight:600; font-size:15px; }
.fd-cap { align-self:flex-start; display:flex; flex-direction:column; gap:3px; border:2px solid var(--fd-yellow); border-radius:22px; padding:12px 20px; font-weight:700; font-size:18px; margin:0; }
.fd-ask { align-self:flex-start; margin:0; background:rgba(255,255,255,.14); border-radius:22px 22px 22px 6px; padding:10px 18px; font-size:18px; }
.fd-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.fd-btn { border-radius:14px; padding:15px 22px; font-weight:700; font-size:16px; text-decoration:none; }
.fd-btn--pri { background:var(--fd-yellow); color:#111811; }
.fd-btn--sec { border:2px solid #fff; color:#fff; }
.fd-btn:focus-visible { outline:3px solid var(--fd-yellow); outline-offset:3px; }
.fd-phone { justify-self:center; width: min(300px, 80%); border-radius:44px; border:10px solid #0f2a16; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.fd-phone img { display:block; width:100%; height:auto; }
.fd-under { margin:0; padding: 30px 24px 10px; text-align:center; font-weight:800; font-size:22px; color:#173A1E; }
.fd-under small { display:block; font-size:13px; font-weight:500; color:#5F6B57; }
/* one template at a time; no JS = pocket */
.fd [data-tpl] { display:none; }
.fd[data-template="pocket"] [data-tpl="pocket"], .fd[data-template="knows"] [data-tpl="knows"], .fd[data-template="ask"] [data-tpl="ask"] { display:revert; }
.fd[data-template="pocket"] .fd-copy[data-tpl="pocket"], .fd[data-template="knows"] .fd-copy[data-tpl="knows"], .fd[data-template="ask"] .fd-copy[data-tpl="ask"] { display:flex; }
/* Tablets (iPad portrait 744-1024): keep two columns, smaller phone picture (Sheetal 5 Nov 2026: the
   one-column tablet view left an empty right half and stretched the buttons). */
@media (max-width: 1100px) {
  .fd-panel { padding: 104px 32px 44px; }
  .fd-grid { grid-template-columns: 1.35fr .65fr; gap: 28px; }
  .fd h1 { font-size: clamp(38px, 6.4vw, 64px); }
  .fd-phone { width: min(240px, 100%); border-width: 8px; border-radius: 34px; }
}
/* Phones: one column, no phone picture (the text says it), buttons stacked but not edge to edge. */
@media (max-width: 640px) {
  .fd-panel { padding: 96px 20px 36px; border-radius: 0 0 36px 36px; }
  .fd-grid { grid-template-columns: 1fr; }
  .fd .fd-phone[data-tpl] { display:none !important; }
  .fd-ctas { flex-direction:column; max-width: 420px; }
  .fd-btn { text-align:center; }
  .fd-under { font-size:18px; }
}
.fd-btn { display:inline-block; }
/* The chat demo right below the front door: ONE palette with it (Sheetal 5 Nov 2026: "colours completely
   different, the heroes don't fit, use a unified colour and include the hero in a smaller chat"). The old dark
   gold hero becomes a small chat card on the cream page, in the front door's green, gold and white. */
.fd + .hero { min-height: auto; background: var(--fd-cream, #FBF7EE); padding: 8px 20px 56px; display: block; color: #173A1E; }
.fd + .hero .hero-bg, .fd + .hero .scroll-hint { display: none; }
.fd + .hero .hero-inner {
  max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #E8E0CC; border-radius: 24px;
  padding: 22px 20px 20px; box-shadow: 0 10px 30px rgba(30, 94, 47, .08); text-align: left;
}
.fd + .hero .hero-thread { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.fd + .hero .hero-msg { font-family: Inter, -apple-system, sans-serif; font-style: normal; margin: 0; }
.fd + .hero .hero-msg--small {
  background: #1E5E2F; color: #fff; border: none; border-radius: 18px 18px 6px 18px; padding: 9px 14px; font-size: 15px;
}
.fd + .hero .hero-msg--big {
  background: #1E5E2F; border: none; box-shadow: none; border-radius: 22px 22px 6px 22px;
  padding: 14px 18px; font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; line-height: 1.15; max-width: 92%;
}
.fd + .hero .hero-msg--big a { color: #fff; }
.fd + .hero .hero-msg--big .g { color: #F2C230; font-style: normal; font-weight: 800; }
.fd + .hero .hero-answer {
  background: #EEF4EA; border-radius: 18px 18px 18px 6px; padding: 14px 16px; max-width: 92%; display: grid; gap: 10px;
}
.fd + .hero .hero-can { font-family: Inter, -apple-system, sans-serif; font-size: 18px; color: #173A1E; margin: 0; }
.fd + .hero .hero-can em { color: #1E5E2F; font-style: normal; font-weight: 800; }
.fd + .hero .hero-ways { justify-content: flex-start; margin: 0; gap: 6px; flex-wrap: wrap; }
.fd + .hero .hero-way {
  font-family: Inter, -apple-system, sans-serif; font-style: normal; font-size: 13px; font-weight: 600;
  color: #1E5E2F; background: #fff; border: 1.5px solid #1E5E2F; padding: 5px 11px;
}
.fd + .hero .hero-promise { font-family: Inter, -apple-system, sans-serif; font-size: 14px; color: #5F6B57; margin: 0; }
.fd + .hero .hero-promise em { color: #1E5E2F; font-style: normal; font-weight: 700; }
.fd + .hero .hero-watch { color: #1E5E2F; font-weight: 700; font-size: 14px; margin: 0; }
.fd + .hero .hero-stat { color: #5F6B57; border-bottom-color: rgba(30, 94, 47, .35); font-size: 12px; justify-self: start; }
.fd + .hero .hero-caret { background: #F2C230; }
/* One screen, clean (Sheetal 5 Nov 2026: keep the previous clean layout, make it fit one page with the ~32% line).
   Tighter panel, smaller headline and phone, a wider and flatter chat card under it. */
@media (min-width: 761px) {
  .fd-panel { padding: clamp(80px, 10.5vh, 100px) 48px clamp(20px, 3vh, 32px); }
  .fd h1 { font-size: clamp(34px, min(4.4vw, 6.8vh), 62px); }
  .fd-copy { gap: clamp(10px, 1.7vh, 18px); }
  .fd-lead { font-size: clamp(15px, 1.25vw, 18px); }
  .fd-pills li { padding: 5px 12px; font-size: 14px; }
  .fd-btn { padding: 12px 18px; font-size: 15px; }
  .fd-phone { width: min(190px, 100%); border-width: 7px; border-radius: 30px; }
  .fd-under { padding: 10px 24px 4px; font-size: 18px; }
  .fd + .hero { padding: 6px 20px 28px; }
  .fd + .hero .hero-inner { max-width: 680px; padding: 14px 16px 12px; }
  .fd + .hero .hero-thread { gap: 6px; margin-bottom: 8px; }
  .fd + .hero .hero-msg--small { padding: 6px 12px; font-size: 14px; }
  .fd + .hero .hero-msg--big { padding: 10px 14px; font-size: 21px; }
  .fd + .hero .hero-msg--big a { white-space: normal; }
  .fd + .hero .hero-answer { padding: 10px 14px; gap: 6px; }
  .fd + .hero .hero-can { font-size: 16px; }
  .fd + .hero .hero-promise { font-size: 13px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .fd-panel { padding-top: 72px; padding-bottom: 16px; }
  .fd h1 { font-size: clamp(32px, 6vh, 46px); }
  .fd-copy { gap: 9px; }
  .fd-tag { font-size: 11px; }
  .fd-sw { margin-top: 8px; height: 7px; width: 150px; }
  .fd-phone { width: 150px; border-width: 6px; border-radius: 24px; }
  .fd-under { padding: 6px 24px 2px; font-size: 16px; }
  .fd + .hero { padding: 4px 20px 16px; }
  .fd + .hero .hero-msg--big { font-size: 19px; padding: 8px 12px; }
  .fd + .hero .hero-answer { gap: 4px; padding: 8px 12px; }
}
/* The homepage's front door already offers "Try KitchenTalk for 24 hours" and "Request access"; the menu's "Try now"
   went to the same place right beside them (Sheetal 5 Nov 2026: "redundant"). Hidden on the homepage only. */
body:has(#front-door) .nav-start { display: none; }