/* Zenijob – styles (cleaned + deduped + responsive grouped)
   ==============================================================
   Goals:
   - Remove duplicates / conflicting blocks
   - Keep all original behaviors
   - Group responsive rules by viewport size
   - IMPORTANT: On mobile, presets must be stacked (1 column)
   ============================================================== */

/* =========================
   01 TOKENS
   ========================= */
:root{
  --content: 860px;
  --container: 920px;

  --brand: #24a8c6;
  --brand-dark: #1e96ad;

  /* Cool Calm ink */
  --ink1-rgb: 36,50,66;    /* #243242 */
  --ink2-rgb: 90,107,124;  /* #5a6b7c */

  --ink-primary: rgb(var(--ink1-rgb));
  --ink-secondary: rgb(var(--ink2-rgb));

  --ink-strong: rgba(var(--ink1-rgb), 0.92);
  --ink-mid: rgba(var(--ink1-rgb), 0.84);
  --ink-soft: rgba(var(--ink2-rgb), 0.92);
  --ink-faint: rgba(var(--ink2-rgb), 0.78);

  /* UI compatibility */
  --text: var(--ink-primary);
  --muted: var(--ink-secondary);
  --muted-light: rgba(var(--ink1-rgb), 0.62);

  --surface-a: rgba(255,255,255,0.82);
  --surface-b: rgba(255,255,255,0.66);
  --surface-soft: rgba(255,255,255,0.62);

  --border-soft: rgba(17,24,39,0.06);
  --border-input: rgba(17,24,39,0.14);

  --focus: rgba(36,168,198,0.20);

  --radius: 14px;

  --shadow-card:
    0 28px 70px rgba(17,24,39,0.11),
    0 2px 10px rgba(17,24,39,0.06);

  --shadow-button:
    0 18px 40px rgba(36,168,198,0.26);

  --shadow-logo:
    0 16px 40px rgba(17,24,39,0.16);
}

/* =========================
   02 BASE & RESET
   ========================= */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
  /* Keep header static; scroll only inside .page-main */
  overflow: hidden;
  min-width: 300px;          /* pick your minimum */
  overflow-y: hidden;        /* keep your current behavior */
  overflow-x: auto; 
}

body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-size-adjust: 0.52;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

/* Utility */
.desktop-only{ display:none; }
.is-hidden{ display: none !important; }

/* =========================
   03 LAYOUT (overlay / page / container)
   ========================= */
.overlay{
  position: relative;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.18);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  display: flex;
  flex-direction: column;
  padding-top: calc(23px + env(safe-area-inset-top));
  padding-right: clamp(14px, 2vw, 22px);
  padding-left:  clamp(14px, 2vw, 22px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.overlay::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(980px 440px at 50% -6%,
      rgba(160, 225, 246, 0.58),
      rgba(160, 225, 246, 0.00) 66%),
    radial-gradient(1200px 520px at 50% 108%,
      rgba(190, 225, 255, 0.30),
      rgba(190, 225, 255, 0.00) 62%),
    linear-gradient(180deg,
      #F1FAFF 0%,
      #FFFFFF 56%,
      #F6FBFF 100%);
  background-repeat: no-repeat;
}

.page{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-header{ flex: 0 0 auto; }

.page-main{
  flex: 1 1 auto;
/*  overflow-y: auto; */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-height: 0;
}

.container{
  width: min(var(--container), 100%);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  align-items: start;
}

/* constrain hero + cards */
.brand, .headline, .card{
  width: min(var(--content), 100%);
}

/* =========================
   04 HEADER (brand + trust badge + hero)
   ========================= */
.page-header .container{
  grid-template-columns: 1fr;
  row-gap: 10px;
}

.header-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
  position: relative;
}

.header-top .brand{
  flex: 1 1 auto;
  min-width: 0;
}

.trust-badges{
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 2px;
}

.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(172, 177, 179, 0.1);
  border: 1px solid rgba(36,168,198,0.07);
  box-shadow: none;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  line-height: 1.0;
  white-space: nowrap;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.brand__meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brand__tagline{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.brand__icon{
  height: 40px;
  filter: drop-shadow(0 6px 14px rgba(2,6,23,.10));
}

.brand__wordmark{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1;
}

.wm-zeni{ color: var(--ink-primary); }
.wm-job{ color: var(--brand); }

.headline{
  margin: 0 0 16px 0;
  font-size: clamp(21px, 1.65vw, 25px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-mid);
  max-width: 44ch;

  text-wrap: balance;
  overflow-wrap: anywhere;
}

.headline .hl-strong{ font-weight: 400; color: inherit; }
.headline .hl-regular{ font-weight: 400; }

/* =========================
   05 CARDS (landing + reflection + anchor)
   ========================= */
.card{
  margin: 0;

  /* base padding + safe areas */
  --pad: 16px;
  padding:
    calc(var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));

  background: linear-gradient(180deg, var(--surface-a), var(--surface-b));
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 42%);
  mix-blend-mode: overlay;
  opacity: .55;
}

/* =========================
   06 SCENARIOS (presets grid + states)
   ========================= */
.topbar{
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}

.privacy{
  font-size: 12.5px;
  color: var(--ink-faint);
}

.presets-title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-mid);
  margin: 2px 0 8px;
}

.presets-micro{
  font-size: 12.5px;
  color: rgba(17,24,39,0.62);
  margin: 0 0 10px;
}

.presets-hint{
  margin: 6px 0 1px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.presets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 46%, 240px), 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* items spanning full width */
.more-btn,
.pinned-scenario{
  grid-column: 1 / -1;
}

/* Web-only inline expansion container */
.more-inline{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.more-inline[hidden]{ display:none; }

.preset{
  position: relative;
  text-align: left;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 14px 14px 18px;
  min-height: 56px;

  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.72);
  color: var(--ink-mid);

  border-radius: 14px;

  font-size: 12.2px;
  font-weight: 550;
  letter-spacing: -0.01em;

  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .15s ease;

  /*
    Allow the tapped preset to grow vertically with its subtitle.
    Some mobile browsers/WebViews apply overflow clipping to <button>.
  */
  overflow: visible;
  height: auto;
}

.preset:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 12px 26px rgba(17,24,39,0.08);
}

.preset.is-active{
  border-color: rgba(36,168,198,0.48);
  background: rgba(36,168,198,0.12);
  box-shadow: 0 14px 28px rgba(36,168,198,0.10);
  padding-left: 22px;
}

.preset.is-active::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(36,168,198,0.75), rgba(36,168,198,0.25));
}

.preset:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(36,168,198,0.22);
}

/* Scenario layout (title + subtitle) */
.scenario.preset{
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.scenario-title{
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.scenario-title-text{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding-left: 1.8em;
  text-indent: -1.8em;
  overflow-wrap: anywhere;
}

#pinnedScenarioTitle{
  display: block;
  padding-left: 1.8em;
  text-indent: -1.8em;
  overflow-wrap: anywhere;
}

.scenario-subtitle{
  width: 100%;
  font-weight: 400;
  display: none;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  opacity: .78;
  white-space: normal;
}

.scenario.is-active .scenario-subtitle{ display:block; }

.scenario.is-active{
  justify-content: flex-start;
  outline: 2px solid rgba(var(--ink1-rgb), 0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Recommended badge + pinned scenario */
.rec-badge{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  background: rgba(36,168,198,0.12);
  color: rgba(36,50,66,0.92);
  white-space: nowrap;
}

.pinned-scenario{
  border: 1px solid rgba(36,168,198,0.30);
  background: rgba(255,255,255,0.78);
}

.pinned-scenario .rec-badge{ display:none !important; }

.pinned-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.change-affordance{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  opacity: .85;
}

/* =========================
   07 INPUTS & BUTTONS
   ========================= */
#pauseForm{
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.input-wrap{ position: relative; }

.input-icon{
  position: absolute;
  left: 14px;
  top: 16px;
  font-size: 16px;
  opacity: 0.72;
  z-index: 2;
  color: rgba(75,85,99,0.72);
  pointer-events: none;
}

.user-input{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 72px;
  padding: 16px 16px 16px 44px;

  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;

  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);

  resize: none;
  outline: none;
   margin-bottom: 9px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.user-input.is-scenario-selected{
  border-color: rgba(36,168,198,0.85);
  box-shadow: 0 0 0 4px var(--focus);
}

.user-input::placeholder{
  color: rgba(75,85,99,0.55);
  font-size: 14px;
  line-height: 1.25;
}

.user-input:focus{
  border-color: rgba(36,168,198,0.95);
  box-shadow: 0 0 0 4px var(--focus);
}

.start-area{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.start-area .cta{ margin: 0; width: 100%; }
.start-area .pills{
  margin-top: 0;
  flex-wrap: nowrap; /* never split the two pills under the CTA */
}

/* Let textarea grow smoothly */
#pauseForm .user-input{
  resize: none;
  overflow: hidden;
  transition: height 120ms ease;
}

.cta{
  margin: 10px auto 0;
  width: min(360px, 100%);
  padding: 15px 18px;

  border: none;
  border-radius: 14px;
  cursor: pointer;

  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: white;

  box-shadow: var(--shadow-button);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.cta--wide{ width: min(520px, 100%); }

.cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 50px rgba(36,168,198,.30);
}

.cta:active{ transform: translateY(0) scale(0.99); }

.cta:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.75);
  box-shadow: none;
}
.cta:disabled:hover,
.cta:disabled:active{
  transform: none;
  filter: saturate(0.75);
  box-shadow: none;
}

.cta:focus-visible{
  outline: none;
  box-shadow:
    0 22px 50px rgba(36,168,198,.30),
    0 0 0 4px rgba(36,168,198,.22);
}

.cta__main{ font-size: 19px; font-weight: 900; line-height: 1.2; }

.pills{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trust-pill{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,0.74);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  padding: 8px 10px;
  border-radius: 999px;
}

.ghost{
  border: 1px solid rgba(17,24,39,0.12);
  background: rgba(255,255,255,0.60);
  color: rgba(17,24,39,0.78);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .15s ease;
}
.ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.74); }
.ghost:active{ transform: translateY(0) scale(0.99); }
.ghost:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(36,168,198,0.22); }

/* =========================
   08 AI SESSION (reflection + exercise)
   ========================= */
.card--ai{ --pad: 18px; }

/* Session (reflection + exercise) should be able to pin the back link to the bottom of viewport */
#cardAI{
  display: flex;
  flex-direction: column;
  min-height: 82vh;
  position: relative;
}

.ai-bubble{
  position: relative;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(36,168,198,0.25);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(36,168,198,0.08));
  padding: 18px 18px 18px 26px;
  min-height: 110px;
  box-shadow:
    0 16px 40px rgba(17,24,39,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);

  /* allow the bubble to grow with content; when constrained it will scroll vertically */
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* When the viewport is short and the exercise panel must remain fully visible,
   allow the reflection bubble to scroll vertically. */
.ai-bubble.is-scroll{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-bubble::before{
  /* removed: no colored accent bar in reflection */
  content: none;
}

/* extra calm tint */
.ai-bubble::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 240px at 20% 0%, rgba(0, 191, 166, 0), transparent 55%),
    radial-gradient(900px 200px at 80% 20%, rgba(78, 167, 255, 0.045), transparent 60%);
    
  pointer-events: none;
}

.ai-text{
  position: relative;
  z-index: 1;

  font-size: 14.5px;
  letter-spacing: -0.025em;
  color: var(--ink-mid);

  white-space: pre-wrap;

  /* (7) readability: keep comfortable line length */
  margin: 0 auto;
  max-width: 34ch;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: break-word;
}

/* Allow slightly wider measure on larger screens */
@media (min-width: 520px){
  .ai-text,
  .exercise-intro{ max-width: 52ch; }
}

/* If the screen is short, keep grounding panel fully visible and allow horizontal scroll in AI text */
/* (Removed) Horizontal scroll mode — reflection scrolls vertically inside the bubble when needed. */

.exercise-footer{
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  z-index: 30;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(245,248,251,0.92) 40%, rgba(245,248,251,0.98));
}

.exercise-backlink{
  display: inline-block;
  font-size: 14px;
  /* (6) Less dominant backlink */
  font-weight: 600;
  color: rgba(17,24,39,0.62);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  opacity: 0.82;
}
.exercise-backlink:hover{ text-decoration: underline; }
.exercise-backlink:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(36,168,198,0.16); }

#aiBubble .ai-text{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease, transform 180ms ease;
  
}
#aiBubble.is-ready .ai-text{
  opacity: 1;
  transform: translateY(0);
}

.ai-typing{
  position: absolute;
  left: 26px;
  bottom: 16px;
  margin-top: 0;
  display: none;
  gap: 6px;
  align-items: center;
  opacity: 0.75;
}

.ai-typing span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(36,168,198,0.85);
  animation: dot 1s infinite ease-in-out;
}
.ai-typing span:nth-child(2){ animation-delay: .12s; }
.ai-typing span:nth-child(3){ animation-delay: .24s; }

@keyframes dot{
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.ai-actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Exercise slot + breath UI */
.exercise-intro{
  /* (7) Keep line-length readable on mobile */
  max-width: 34ch;
  margin: 16px auto 0;
  font-size: 19px;
  line-height: 1.45;
  opacity: 0.92;
}

/* (5) spacing rhythm */
.exercise-slot{ margin-top: 14px; }

.exercise-completion{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 14px;
  line-height: 1.4;
  display: none;
}

.exercise-stub{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.exercise-stub__title{ font-weight: 600; margin-bottom: 10px; }

.exercise-stub__params{
  margin: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  overflow-x: auto;
  font-size: 12px;
}

.exercise-stub__actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.breath-card{
  /* (2) Unify radius + soften borders/shadows */
  margin-top: 16px;
  padding: 18px 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.breath-circle-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* (5) spacing rhythm */
  padding: 6px 0 0;
}

.breath-phase{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,0.52);
  text-transform: none;
}

.breath-circle{
  /* (4) Calm, lower-noise visuals */
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(36,168,198,0.045), rgba(36,168,198,0.018) 55%, rgba(36,168,198,0.008));

  border: 1px solid rgba(36,168,198,0.22);
  box-shadow: 0 18px 54px rgba(36,168,198,0.09);
  transform: scale(0.82);
  will-change: transform;
}

.breath-timer{
  /* (5) spacing rhythm */
  margin-top: 8px;
  text-align: center;
  /* (4) less dominant timer */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(17,24,39,0.64);
}

.breath-actions{
  /* (5) spacing rhythm */
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.breath-actions-row{
  width: 100%;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.breath-btn{
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .12s ease;
}
.breath-btn:active{ transform: scale(0.99); }
.breath-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(36,168,198,0.20); }

.breath-btn--primary{
  border: 1px solid rgba(36,168,198,0.30);
  color: white;
  background: linear-gradient(180deg, rgba(36,168,198,0.95), rgba(28,145,170,0.95));
  box-shadow: 0 12px 30px rgba(36,168,198,0.22);
}
.breath-btn--primary:hover{ transform: translateY(-1px); }

.breath-btn--outline{
  border: 1px solid rgba(36,168,198,0.28);
  background: rgba(255,255,255,0.70);
  color: rgba(19,90,105,0.95);
}

.breath-btn--ghost{
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.55);
  color: rgba(17,24,39,0.75);
}

.breath-ico{
  display: inline-block;
  width: 18px;
  margin-right: 6px;
}

.breath-back{
  border: none;
  background: transparent;
  color: rgba(17,24,39,0.65);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.breath-back:hover{ text-decoration: underline; }
.breath-back:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(36,168,198,0.16); }

/* =========================
   08B GROUNDING ENGINE
   ========================= */

.grounding-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.grounding-panel{
  width: 100%;
  border-radius: 7px;
  border: 1px solid #24a8c6a1;*/
  /*slightly transparent so the hero image can gently show through when overlapped */
  background: rgba(255,255,255,0.70);
  box-shadow:
    0 18px 46px rgba(17,24,39,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);
  padding: 18px 18px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* removed top hairline to avoid looking like a progress bar */
.grounding-panel::before{ content: none; }

/* Exercise hero image: anchored to the bottom of the screen within the AI card.
   It must never cover the pinned "Zpět na úvod" link. */
.exercise-hero{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 56px);
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 18px 46px rgba(17,24,39,0.10);
}

.exercise-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  filter: saturate(0.95);
}

.grounding-head{ display: flex; flex-direction: column; gap: 6px; padding-top: 0px; }
.grounding-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
   text-align: center;
  color: #4b5c63;
  /* (7) keep nice line length on narrow screens */
  margin: 0 auto;
  max-width: 34ch;
}
.grounding-desc{
  color: rgba(17, 24, 39, 0.74);
  line-height: 1.45;
  font-size: 13.5px;
  text-align: center;
    padding-bottom: 8px;
  /* (7) readability */
  margin: 0 auto;
  max-width: 36ch;
}

.grounding-body{
  display: flex;
  flex-direction: column;
  /* (5) spacing rhythm — keep dots + prompt + CTA stable */
  gap: 14px;
}

.grounding-prompt {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  text-align: center;
  background: rgba(127, 150, 156, 0.06);
  border-radius: 10px;

  /* (8) gentle transition instead of layout jump */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Override global .is-hidden (display:none) so prompt keeps its reserved height. */
.grounding-prompt.is-hidden{
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}
.grounding-prompt__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}
.grounding-prompt__text{
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: #134e5e;

}

.grounding-note{ width: 100%; }
.grounding-input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.74);
  padding: 0 14px;
  font-size: 15px;
  color: rgba(17,24,39,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.grounding-input:focus{
  outline: none;
  border-color: rgba(36,168,198,0.30);
  box-shadow: 0 0 0 4px rgba(36,168,198,0.14);
}

.grounding-tasklist{ display: flex; flex-direction: column; gap: 10px; }
.grounding-task{
  width: 100%;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.86);
  padding: 12px 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .12s ease;
}
.grounding-task:hover{ transform: translateY(-1px); }
.grounding-task:active{ transform: scale(0.995); }
.grounding-task.is-done{
  border-color: #24a8c659;
  background: rgba(36,168,198,0.06);
}
.grounding-task__row{ display: flex; gap: 10px; align-items: flex-start; }
.grounding-task__check{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(17,24,39,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex: 0 0 auto;
  color: rgba(36,168,198,1);
  font-weight: 900;
}
.grounding-task.is-done .grounding-task__check{ border-color: rgba(36,168,198,0.45); }
.grounding-task__text{ flex: 1 1 auto; line-height: 1.35; }
.grounding-task__hint{ margin-top: 6px; color: rgba(17, 24, 39, 0.66); font-size: 14px; }

.grounding-step{
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.86);
  padding: 14px 14px;
  line-height: 1.45;
  font-size: 16px;
}

.grounding-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* (5) consistent spacing above CTA */
  margin-top: 2px;
}
.grounding-progress{
  color: rgba(17,24,39,0.60);
  font-size: 14px;
  /* keep progress aligned in the rhythm of the body gaps */
  margin-top: 0;
}

/* Dots progress (calm, low-pressure) */
.grounding-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    justify-content: center; /* centers the dots inside */
}

.grounding-dot{
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow:
    0 10px 24px rgba(17,24,39,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85);
  border: 1px solid rgba(17,24,39,0.08);
  transition: transform 160ms ease, background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.grounding-dot.is-active{
  background: rgba(36,168,198,0.22);
  border-color: rgba(36,168,198,0.18);
  box-shadow:
    0 14px 30px rgba(36,168,198,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);
  transform: translateY(-0.5px);
}

/* =========================
   09 BOTTOM SHEET (other scenarios)
   ========================= */
.more-btn{
  width: 100%;
  min-height: auto;
  padding: 10px 14px 10px 18px;

  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;

  justify-content: flex-start;
  gap: 10px;
  color: rgba(17,24,39,0.62);
  font-weight: 750;
}

.more-btn:hover,
.more-btn:active{
  transform: none;
  background: transparent;
  box-shadow: none;
}

.more-btn .more-icon{
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
}

.more-btn .more-text{
  text-decoration: none;
  text-underline-offset: 3px;
}

.more-btn:hover .more-text,
.more-btn:focus-visible .more-text{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(17,24,39,0.28);
}

.sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
}

.sheet{
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1001;

  width: min(calc(100vw - 32px), var(--sheet-width, 520px));
  max-height: 85svh;
  overflow: auto;

  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);

  opacity: 0;
  transform: translate(-50%, calc(-50% + 18px)) scale(0.98);
  transition: transform 220ms ease, opacity 220ms ease;

  pointer-events: none;
}

.sheet.open{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.sheet-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.98);
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.sheet-grabber{
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  margin: 4px auto 10px;
}

.sheet-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-title{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sheet-close{
  border: 0;
  background: transparent;
  font-size: 18px;
  padding: 8px 10px;
  border-radius: 10px;
}

.sheet-list{
  padding: 12px 14px 18px;
  display: grid;
  gap: 10px;
}

#scenarioSheet .scenario.is-active{
  border: 1px solid rgba(36,168,198,0.35);
}

.sheet-footer{
  position: sticky;
  bottom: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.sheet-choose-bottom{
  width: 100%;
  padding: 15px 18px;

  border: none;
  border-radius: 16px;
  cursor: pointer;

  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: white;
  box-shadow: var(--shadow-button);

  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.sheet-choose-bottom:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.75);
  box-shadow: none;
}

.sheet-choose-bottom:disabled:hover,
.sheet-choose-bottom:disabled:active{
  transform: none;
  filter: saturate(0.75);
  box-shadow: none;
}

.sheet-choose-bottom:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 50px rgba(36,168,198,.30);
}

.sheet-choose-bottom:active{ transform: translateY(0) scale(0.99); }

.sheet-choose-bottom:focus-visible{
  outline: none;
  box-shadow:
    0 22px 50px rgba(36,168,198,.30),
    0 0 0 4px rgba(36,168,198,.22);
}

/* hard-hide */
#sheetBackdrop[hidden]{ display:none !important; pointer-events:none !important; }
#scenarioSheet[hidden]{ display:none !important; pointer-events:none !important; }
#scenarioSheet{ pointer-events:none; }
#scenarioSheet.open{ pointer-events:auto; }

/* =========================
   10 ANCHOR (post-exercise)
   ========================= */
.card--anchor{ --pad: 18px; }

/*
  Anchor screen is intentionally "warm" and minimal:
  - no background image
  - clear success mark + hierarchy
  - affirmation rendered as a quote card
  - strong primary CTA
*/

.anchor-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Global vertical rhythm for anchor page */
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 0px;
}

.anchor-success{ margin-top: 6px; }

.anchor-success__circle{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(86,214,160,0.28), rgba(36,168,198,0.12) 58%, rgba(36,168,198,0.06) 100%);
  border: 1px solid rgba(36,168,198,0.16);
  box-shadow: 0 14px 36px rgba(17,24,39,0.10);
  position: relative;
}

.anchor-success__circle::after{
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: rotate(18deg);
}

.anchor-success__icon{
  color: rgba(36,168,198,0.88);
}

.anchor-intro{
  font-size: clamp(28px, 5.8vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(17,24,39,0.90);
  margin-top: 10px;
}

.anchor-validation{
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.55;
  color: rgba(17,24,39,0.74);
  max-width: 34ch;
}

.anchor-validation > div{ margin-top: 6px; }
.anchor-validation > div:first-child{ margin-top: 0; }

.anchor-highlight{
  width: 100%;
  max-width: 560px;
}

.anchor-highlight__pill{
  border-radius: 12px;
  /* Reduce visual height for one-line highlights; let content define height */
  position: relative;
  padding: 12px 18px 12px 46px;
  background: rgba(36,168,198,0.18);
  border: 1px solid rgba(36, 168, 198, 0.38);
  box-shadow: 0 14px 34px rgba(17,24,39,0.06);
  max-width: 36ch;
  margin: 0 auto;
  display: block;
}

.anchor-quote{
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 34px;
  line-height: 1;
  color: rgba(36,168,198,0.36);
}

.anchor-highlight__text{
  font-size: clamp(18px, 4.2vw, 30px);
  line-height: 1.25;
  color: rgba(17,24,39,0.86);
}

.anchor-highlight__strong{ font-weight: 800; }
.anchor-highlight__rest{ font-weight: 650; }

.anchor-tip{
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Space between label and tip text */
  gap: 14px;
  margin-top: 16px;
}

.anchor-closing-return{
  width: 100%;
  max-width: 560px;
  /* Extra breathing room before the closing/return paragraph */
  margin-top: 18px;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(17,24,39,0.74);
}

.anchor-feedback{
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.anchor-feedback__question{
  font-size: 14px;
  font-weight: 700;
  color: rgba(17,24,39,0.72);
}

.anchor-feedback__choices{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.anchor-feedback__btn{
  border: 1px solid rgba(17,24,39,0.20);
  background: rgba(255,255,255,0.78);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,24,39,0.72);
  cursor: pointer;
}

.anchor-feedback__btn:hover{
  border-color: rgba(17,24,39,0.28);
}

.anchor-feedback__btn.is-selected{
  border-color: rgba(36,168,198,0.34);
  background: rgba(36,168,198,0.10);
  color: rgba(17,24,39,0.82);
}

.anchor-feedback__btn:disabled{
  opacity: 0.6;
  cursor: default;
}

.anchor-feedback__response{
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: rgba(17,24,39,0.68);
  max-width: 44ch;
}

/* Warm pill label */
.anchor-tip__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(146,101,17,0.90);
  background: rgba(240,180,70,0.14);
  border: 1px solid rgba(240,180,70,0.18);
}

.anchor-return,
.anchor-micro,
.anchor-closing{
  font-size: clamp(15px, 3.0vw, 18px);
  line-height: 1.55;
  color: rgba(17,24,39,0.72);
  max-width: 36ch;
}

.anchor-return{ margin-top: 6px; }
.anchor-closing{ color: rgba(17,24,39,0.62); }

/* Anchor CTA (button look) */
#cardAnchor .exercise-footer{ margin-top: 22px; }

#cardAnchor .anchor-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  min-height: 58px;
  border-radius: 999px;
  padding: 16px 18px;
  border: 1px solid rgba(15,118,134,0.18);
  background: linear-gradient(180deg, rgba(36,168,198,0.92), rgba(15,118,134,0.94));
  color: rgba(255,255,255,0.96);
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 22px 56px rgba(36,168,198,0.28);
  cursor: pointer;
}

#cardAnchor .anchor-primary:hover{ transform: translateY(-1px); }
#cardAnchor .anchor-primary:active{ transform: translateY(0); }

#cardAnchor .anchor-primary:focus-visible{
  outline: none;
  box-shadow:
    0 22px 56px rgba(36,168,198,0.30),
    0 0 0 4px rgba(36,168,198,0.22);
}

/* =========================
   11 UTILITIES & ACCESSIBILITY
   ========================= */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   12 RESPONSIVE (grouped)
   ========================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .preset, .ghost, .cta{ transition: none !important; }
  .sheet{ transition: none !important; }
}

/* Low height tuning */
@media (max-height: 820px){
  .container{ row-gap: 8px; }
  .card{ --pad: 14px; }
}

@media (max-height: 640px){
  .preset{ min-height: 46px; padding: 11px 12px 11px 14px; }
  /*
    On short screens we must NOT clamp the active subtitle.
    The whole point is that the tapped preset can grow vertically to fit
    its subtitle (often 2 lines).

    Some Android WebViews also clip the last pixel when overflow:hidden is used
    together with fractional line-height — so keep it visible.
  */
  .scenario.is-active .scenario-subtitle{
    display: block;
    overflow: visible;
  }
  .scenario-subtitle{ font-size: 11.5px; margin-top: 2px; }
  .scenario.is-active{ padding-bottom: 12px; }
  .presets{ gap: 8px; }
}

/* MOBILE & TABLET: IMPORTANT — presets stacked */
@media (max-width: 640px){
  .presets{ grid-template-columns: 1fr; }
}

/* Small phones */
@media (max-width: 520px){
  .header-top{ gap: 10px; }
  .trust-badges{ margin-top: 3px; } /* fixed missing unit */
  .trust-badge{ padding: 3px 8px; font-size: 11.5px; }

  /* Mobile only: if trust badge would overlap the "Job" wordmark, it will be moved to the next line */
  .header-top.trust-wrap{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .header-top.trust-wrap .brand{ flex: 1 1 100%; }
  .header-top.trust-wrap .trust-badges{
    position: static;
    margin-left: 0;
    margin-top: 6px;
    justify-content: flex-start;
  }

  /* Mobile only: presets can scroll vertically if they don't fit */
  .presets{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*
      Keep overlay scrollbar off the cards AND prevent clipping of the
      active preset border/shadow when the first/last item touches the
      scroll container edge (Android WebView/Chrome tends to clip 1px).
    */
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 4px;
    padding-left: 2px;
    box-sizing: border-box;
    scrollbar-gutter: stable;
  }

  .brand{ margin-bottom: 6px; }
  .brand__icon{ height: 34px; }
  .brand__wordmark{ font-size: 28px; }
  .headline{ font-size: 15.2px; }

  .presets-hint__extra{ display: none; }

  /* Mobile session override (merged from mobile_override.css) */
  .unifiedPanel{
    min-height: calc(100vh - 180px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .exerciseZone{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .back-link{
    margin-top:32px;
    font-size:14px;
    opacity:0.55;
    text-align:center;
  }
  .back-link:hover{ opacity:0.7; }

  /* AI session – unified panel look */
  #cardAI.card{ --pad: 16px; display: flex; flex-direction: column; }

  #cardAI .ai-bubble{
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 10px 29px 12px 24px;
    min-height: unset;
  }

  /* no accent bar on mobile either */
  #cardAI .ai-bubble::before{ content: none; }

  /* typing indicator alignment */
  #cardAI .ai-typing{
    left: 16px;
    bottom: 10px;
  }

  #cardAI .exercise-slot{
    position: relative;
    margin-top: 0px;
    padding-top: 15px;
  }

  /* Global session footer (Back to landing) pinned to bottom */
  #cardAI .exercise-footer{
    margin-top: auto;
    padding-top: 18px;
    padding-bottom: 2px;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 10px;
  }
  #cardAI #exerciseBackBtn{
    border: 0;
    background: transparent;
    color: rgba(17,24,39,0.62);
    height: auto;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: color .12s ease, background .12s ease;
  }
  #cardAI #exerciseBackBtn:hover{ text-decoration: underline; color: rgba(17,24,39,0.76); }
  #cardAI #exerciseBackBtn:active{ color: rgba(17,24,39,0.86); }
  #cardAI #exerciseBackBtn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(36,168,198,0.14); }
  #cardAI .exercise-slot::before{
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.70));
    pointer-events: none;
    opacity: 0.95;
  }

  #cardAI .breath-card,
  #cardAI .exercise-stub{
    width: 100%;
  border-radius: 7px;
  border: 1px solid #24a8c6a1;*/
  /*slightly transparent so the hero image can gently show through when overlapped */
  background: rgba(255,255,255,0.70);
  box-shadow:
    0 18px 46px rgba(17,24,39,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);
  padding: 18px 18px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;
  z-index: 2;
}

  #cardAI .breath-circle-wrap::before{
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle,
      rgba(36,168,198,0.13) 0%,
      rgba(36,168,198,0.055) 35%,
      rgba(36,168,198,0.00) 72%
    );
    filter: blur(2px);
    opacity: 0.95;
    pointer-events: none;
  }

  #cardAI .breath-circle{
  /*  background: radial-gradient(circle at 50% 45%,
      rgba(36,168,198,0.18) 0%,
      rgba(255,255,255,0.92) 55%,
      rgba(255,255,255,0.98) 100%
    );*/
    box-shadow:
      0 0 0 1px rgba(36,168,198,0.04),
      0 24px 70px rgba(36,168,198,0.09);
  }

  /* Active preset must expand with its subtitle even when the presets list is scrollable */
  .scenario.preset{ height: auto; }
  .scenario.is-active{ height: auto; min-height: unset; }
}

/* Pills very narrow */
@media (max-width: 380px){
  .pills{ gap: 8px; }
  .trust-pill{ padding: 7px 9px; font-size: 11.5px; }
}
@media (max-width: 340px){
  /* Keep the two pills under the CTA always on one line */
  .pills{ flex-direction: row; align-items: center; flex-wrap: nowrap; }
}

/* Hide web-only inline tiles below desktop */
@media (max-width: 1023px){
  .more-inline{ display: none !important; }
}

/* Desktop: 2×2 primary scenarios + desktop layout */
@media (min-width: 1024px){
  :root{
    --hero-x: 48px;
    --hero-w: 420px;
    --hero-gap: 72px;
    --page-right: 48px;
  }

  body{ font-size: clamp(16px, 0.45vw + 10px, 20px); }
  body{
    background: #f6f8fb url("./assets/desk-illustration-hq.png") no-repeat;
    background-position: 50% 100%;
    background-size: cover;
  }

  .overlay{
    position: relative;
    min-height: 100vh;
    background: none;
  }
  .overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.88) 30%,
      rgba(255,255,255,0.62) 62%,
      rgba(255,255,255,0.35) 100%
    );
  }

  .page{
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding-left: calc(var(--hero-x) + var(--hero-w) + var(--hero-gap));
    padding-right: var(--page-right);
  }

  .page-header{
    position: fixed;
    top: 40px;
    left: var(--hero-x);
    width: var(--hero-w);
    z-index: 20;
  }

  .page-header .container{
    width: var(--hero-w);
    max-width: var(--hero-w);
    row-gap: 14px;
  }

  .trust-badges{
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 25;
  }

  .desktop-only{ display:block; }

  .hero-subtitle{
    margin: 0;
    max-width: 380px;
    color: var(--ink-faint);
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-benefits{
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--ink-faint);
    font-size: 14px;
  }

  .hero-benefit{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .page-main{
    overflow: visible;
    padding: 0;
  }

  .page-main .container{
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 48px 0 72px;
    display: grid;
    justify-items: stretch;
    align-items: start;
    row-gap: 16px;
  }

  .card{
    width: min(1500px, 100%);
    border-radius: 22px;
    margin: 0 auto;
  }

  .card--input{ --pad: 32px; padding-bottom: 26px; }

  .presets{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .privacy{ font-size: clamp(12.5px, 0.25vw + 10px, 15px); }
  .presets-title{ font-size: clamp(16px, 0.45vw + 12px, 22px); margin-bottom: 12px; }
  .presets-hint{ font-size: clamp(13px, 0.30vw + 11px, 16px); }

  .preset{
    font-size: clamp(14px, 0.30vw + 11px, 18px);
    min-height: 68px;
    padding: 18px 18px 18px 22px;
  }

  .scenario{ padding: 18px 18px; }
  .scenario-subtitle{ font-size: clamp(12px, 0.25vw + 10px, 16px); }

  .user-input{
    min-height: 96px;
    font-size: clamp(14px, 0.30vw + 11px, 18px);
  }

  .cta--wide{
    height: 72px;
    font-size: clamp(17px, 0.35vw + 14px, 22px);
  }

  .trust-pill{
    font-size: clamp(12px, 0.20vw + 10px, 14px);
    padding: 7px 12px;
  }

  .headline{
    font-size: clamp(26px, 1.05vw + 14px, 46px);
    line-height: 1.22;
  }

  .hero-subtitle{ font-size: clamp(15px, 0.4vw + 12px, 18px); }
  .hero-benefits{ font-size: clamp(14px, 0.35vw + 11px, 17px); }

  @media (max-width: 1200px){
    :root{ --hero-x: 24px; --hero-w: 360px; --hero-gap: 40px; --page-right: 24px; }
    .page-header{ left: var(--hero-x); width: var(--hero-w); }
    .page-header .container{ width: var(--hero-w); max-width: var(--hero-w); }
    .page-main .container{ padding-top: 56px; }
  }
}

/* Ensure session screen footer stays at the bottom on all breakpoints */
#cardAI.card{ display: flex; flex-direction: column; }
#cardAI .exercise-footer{ margin-top: auto; }

/* Ensure anchor screen stretches full height under the header and keeps backlink pinned */
#cardAnchor.card{ display: flex; flex-direction: column; }
#cardAnchor .anchor-inner{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Scroll area for anchor content (everything above the sticky footer) */
#cardAnchor .anchor-scroll{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

/* Blocks live inside the scroll area and are reorderable */
#cardAnchor .anchor-blocks{
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-bottom: 12px;
}

/* Sticky footer: feedback directly above CTA; CTA always visible */
#cardAnchor .anchor-footer{
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 6;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.86) 28%,
    rgba(255,255,255,1) 60%);
}

#cardAnchor .anchor-footer__inner{
  width: min(560px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Anchor CTA: ~20% shorter, slightly calmer shadow */
#cardAnchor #anchorFooter .cta{
  margin: 0;
  padding: 12px 18px;
  box-shadow: 0 18px 42px rgba(36,168,198,.22);
}

#cardAnchor #anchorFooter .cta:hover{
  box-shadow: 0 20px 46px rgba(36,168,198,.26);
}

/* Breath circle smaller on small phones */
@media (max-width: 520px){
  .breath-circle{ width: 170px; height: 170px; }
}

/* AI text justify only on wide screens */
@media (min-width: 900px){
  #cardAI .ai-text{
    text-align: justify;
    text-justify: inter-word;
  }
}
/* =========================
   container width to the page-main
   ========================= */
@media (max-width: 768px){

  /* page-main container fills remaining viewport height */
  .page-main{
    display: flex;
    flex-direction: column;
  }

  .page-main > .container{
    flex: 1 1 auto;
    /* Allow children to shrink so inner scroll areas (like anchor-scroll) can work */
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* landing card stretches and pushes pills (start-area) to bottom */
  #cardInput.card--input{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  #cardInput .start-area{
    margin-top: auto; /* pushes pills to bottom */
  }

  /* Anchor card should fill remaining height on mobile (under the header) */
  #cardAnchor.card{ flex: 1 1 auto; min-height: 0; height: 100%; }

}