/* The home page's own pieces: a check-in you can try, a garden that sprouts, the questions, and a denser
   layout at phone width. Loaded after site.css. Colors come from its variables. */

/* --- Hero ------------------------------------------------------------------------------------------------ */
.hero h1{text-wrap:balance}
.notify{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.notify .soon-line{color:var(--muted);font-weight:700;font-size:.95rem}

/* The phone in the hero is a real check-in: pick a face, pick what was in the day, press Done. */
.phone .p-mood,.phone .p-chip,.phone .p-btn,.phone .p-again{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone button.p-mood{background:none;border:0;padding:0;color:var(--muted);font-size:10px;font-weight:600}
.phone button.p-mood svg{transition:transform .25s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.phone .p-moods.picked button.p-mood:not(.sel) svg{opacity:.5}
.phone button.p-mood.sel svg{transform:scale(1.1)}
.phone button.p-chip{color:var(--ink);font-size:11.5px;line-height:inherit}
.phone button.p-btn{border:0;width:100%;font-size:13.5px;font-weight:700}
.phone button:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:10px}
/* A small flag over the phone, which sits at the right edge of the art and is 250 wide. */
.art .p-try{position:absolute;right:125px;top:2px;transform:translateX(50%);background:var(--leaf);color:var(--bg);font-weight:800;font-size:12.5px;border-radius:999px;padding:3px 13px;white-space:nowrap;z-index:3}
.p-result{display:none;flex-direction:column;gap:9px;flex:1;min-height:0}
.p-body.done > :not(.p-greet):not(.p-result){display:none}
.p-body.done > .p-result{display:flex}
.p-grow{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 11px}
.p-grow svg{width:44px;height:68px;transform-origin:50% 96%}
.p-grow b{font-size:13.5px;display:block}
.p-grow small{font-size:10.5px;color:var(--muted);font-weight:600}
.p-bar{display:block;height:7px;border-radius:99px;background:var(--surface2);overflow:hidden;margin:5px 0 4px}
.p-bar i{display:block;height:100%;width:71%;border-radius:99px;background:var(--leaf)}
.p-ex{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);align-self:flex-start;border:1px solid var(--line);border-radius:99px;padding:1px 7px}
.phone button.p-again{margin-top:auto;background:none;border:0;color:var(--muted);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:6px}

/* --- The garden sprouts ---------------------------------------------------------------------------------- */
.garden .plot .plant{transform-origin:50% 96%}
/* Sprout's line on the left, the button on the right, in the garden's own last row. */
.garden .garden-foot{align-items:center}
.garden .garden-foot > p{padding-bottom:0;flex:1 1 11em}
.grow-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 16px;margin-left:auto}
.garden-foot .grow-row p{color:var(--muted);font-weight:700;font-size:1rem;max-width:none;padding:0}
.grow-row .btn[disabled]{opacity:.55;cursor:default}

@media (prefers-reduced-motion: no-preference){
  /* Seeds come up when the garden scrolls into view. Until then they wait under the soil line. */
  .garden.waits .plot .plant{transform:scale(0)}
  .garden.grown .plot .plant{animation:sprout .9s cubic-bezier(.3,1.4,.5,1) both}
  .garden.grown .plot:nth-child(2) .plant{animation-delay:.12s}
  .garden.grown .plot:nth-child(3) .plant{animation-delay:.24s}
  .garden.grown .plot:nth-child(4) .plant{animation-delay:.36s}
  .garden.grown .plot:nth-child(5) .plant{animation-delay:.48s}
  .garden.grown .plot:nth-child(6) .plant{animation-delay:.6s}
  .garden .plot .plant.pop,.p-grow svg.pop{animation:pop .7s cubic-bezier(.3,1.5,.5,1) both}
  .p-body.done .p-bar i{animation:fill .8s .25s cubic-bezier(.2,.8,.2,1) both}
  .p-body.done .p-result > *{animation:rise .4s both}
  .p-body.done .p-result > :nth-child(2){animation-delay:.08s}
  .p-body.done .p-result > :nth-child(3){animation-delay:.16s}
  @keyframes sprout{from{transform:scale(0)}to{transform:none}}
  @keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}
  @keyframes fill{from{width:57%}}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* --- Not medical care: the claim on the left, the crisis line beside it ------------------------------------ */
.isnt{max-width:none;display:grid;grid-template-columns:1fr 1.15fr;column-gap:56px;align-items:center}
.isnt h2{align-self:end}
.isnt > p{align-self:start}
.isnt .crisis{grid-column:2;grid-row:1 / span 2;margin-top:0}

/* --- Questions ------------------------------------------------------------------------------------------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-top:28px;align-items:start}
.faq details{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:0 18px}
.faq summary{list-style:none;cursor:pointer;font-weight:800;padding:15px 28px 15px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:2.5px solid var(--focus);outline-offset:4px;border-radius:8px}
.faq p{color:var(--muted);padding:0 0 16px;max-width:60ch}

/* --- Phone width: fewer, denser rows --------------------------------------------------------------------- */
@media (max-width: 860px){
  /* Three short privacy lines sit side by side, each a small tile. Their sentences are in the policy. */
  .three{grid-template-columns:repeat(3,1fr);gap:8px}
  .three li{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 6px}
  .three li span{display:none}
  .three li b{font-size:.92rem;line-height:1.2}
  .acts{gap:8px}
  .acts .btn{padding:10px 14px;font-size:.95rem}
  /* Each step is one row: its number beside it, not above it. */
  .steps{gap:22px}
  .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:10px;row-gap:8px}
  .steps li::before{grid-row:1 / span 4;font-size:2.5rem;line-height:1}
  .steps li > *{grid-column:2}
  .foot{grid-template-columns:1fr}
  .foot ul{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr}
  .isnt{grid-template-columns:1fr}
  .isnt .crisis{grid-column:1;grid-row:auto;margin-top:24px}
  .garden-foot .grow-row{margin-left:0;width:100%;justify-content:space-between}
  .notify .btn{flex:1 1 auto;justify-content:center}
  .art .p-try{right:118px;top:-4px}
}