/* Phone app — Say hello / questionnaire (owner: lead). Every rule must sit inside @media (max-width:760px).
   Spec: ../docs/superpowers/specs/2026-10-16-phone-app-design.md
   The form's own first screen (its four category cards) becomes the photo tiles, so the form's Back always
   lands on them. While a question is on screen app.js sets body.app-q: the team header, the call/email line
   and the tab bar step aside and the questionnaire fills the screen. */
@media (max-width:760px){
  .say-head{padding-top:2px}
  .say-team{margin:2px var(--app-gut) 0;padding:18px 16px;border-radius:var(--app-r);background:var(--paper);border:1px solid var(--line);text-align:center}
  .say-faces{display:flex;justify-content:center;margin:0 0 12px}
  .say-faces .face,.say-faces .say-carlie{width:46px;height:46px;margin:0 -5px;border-radius:50%;border:3px solid var(--paper);flex:none}
  .say-faces .say-carlie{object-fit:cover;object-position:center 28%}
  .say-team p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
  .say-team b{display:block;margin-bottom:4px;font:400 22px/1.2 var(--display);color:var(--ink)}
  .say-alt{margin:4px var(--app-gut) 0;text-align:center;font-size:14px;color:var(--ink-soft)}
  .say-alt a{display:inline-block;min-height:44px;line-height:44px;color:var(--app-ink-blush)}

  /* the form on a phone: no desktop-size spacing */
  #sc-inquiry .stage{padding:6px var(--app-gut) 24px}

  /* ---- the category screen = "What are we celebrating?" photo tiles ---- */
  #sc-inquiry .fork-head{text-align:left;margin:22px 0 12px}
  #sc-inquiry .fork-head .eyebrow{display:none}
  #sc-inquiry .fork-head h1{font-size:23px;line-height:1.15}
  #sc-inquiry .fork-head h1 .accent{font-family:var(--accent);font-style:italic;color:var(--blush-deep)}
  #sc-inquiry .fork-head .help{margin:6px 0 0;text-align:left;font-size:15px}
  #sc-inquiry .cards.four{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:auto;margin:0;transform:none}
  #sc-inquiry .cards.four .card{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    min-height:160px;padding:14px;border:0;border-radius:16px;overflow:hidden;text-align:left;color:#fff;
    background:var(--ink) center/cover no-repeat;box-shadow:none;
  }
  #sc-inquiry .cards.four .card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,21,.05) 20%,rgba(28,24,21,.82));z-index:0}
  #sc-inquiry .cards.four .card > *{position:relative;z-index:1}
  #sc-inquiry .cards.four .card:hover{transform:none;box-shadow:none}
  #sc-inquiry .cards.four .card:active{transform:scale(.98)}
  #sc-inquiry .cards.four .card .tag{position:absolute;top:12px;left:12px;margin:0;padding:6px 10px;border-radius:100px;background:rgba(255,253,251,.9);color:var(--ink);font-size:.58rem;letter-spacing:.16em}
  #sc-inquiry .cards.four .card h2{margin:0 0 3px;font-size:21px;line-height:1.1;color:#fff}
  #sc-inquiry .cards.four .card p{margin:0;flex:0;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.92)}
  #sc-inquiry .cards.four .card .go{display:none}
  #sc-inquiry .cards.four .card[data-go="wedding"]{order:-1;grid-column:span 2;min-height:200px;background-image:url(/uploads/2026/07/DSC_8809c.jpg);background-position:center 62%}
  #sc-inquiry .cards.four .card[data-go="portrait"]{background-image:url(/uploads/2026/07/SCP01838.jpg)}
  #sc-inquiry .cards.four .card[data-go="quince"]{background-image:url(https://gallery.simplycaptivating.com/img/s/v-10/p1549580190-4.jpg);background-position:center 25%}
  #sc-inquiry .cards.four .card[data-go="event"]{grid-column:span 2;order:3;min-height:150px;background-image:url(https://gallery.simplycaptivating.com/img/s/v-10/p1256354366-4.jpg);background-position:center 40%}

  /* ---- a question on screen: the questionnaire fills the screen ---- */
  body.app-q .say-head,body.app-q .say-alt{display:none}
  body.app-q .app-tabs,body.app-q .app-hello,body.app-q .app-toast{display:none}
  body.app-q{padding-bottom:0}
  body.app-q .app-top-title{opacity:1;transform:none}
  body.app-q #sc-inquiry .stage{padding:14px var(--app-gut) 120px}
  body.app-q #sc-inquiry .step > .stepmeta,
  body.app-q #sc-inquiry .step > .eyebrow,
  body.app-q #sc-inquiry .step > .q,
  body.app-q #sc-inquiry .step > .help{text-align:left}
  body.app-q #sc-inquiry .progress{margin-bottom:22px}
  /* app forms read left to right: labels, chips and notes start at the left edge (thank-you stays centered) */
  body.app-q #sc-inquiry .field,body.app-q #sc-inquiry .err,body.app-q #sc-inquiry .consent,
  body.app-q #sc-inquiry .single-wrap .qsection{text-align:left}
  body.app-q #sc-inquiry .chips,body.app-q #sc-inquiry .chk{justify-content:flex-start}
  body.app-q #sc-inquiry .step > .help,body.app-q #sc-inquiry .consent,
  body.app-q #sc-inquiry .field > .daterow{margin-left:0;margin-right:0}
  body.app-q #sc-inquiry .money{margin:0}
  /* Continue / Back pinned to the bottom like an app */
  body.app-q #sc-inquiry .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1400;display:flex;gap:10px;justify-content:space-between;
    padding:14px var(--app-gut) calc(env(safe-area-inset-bottom) + 18px);margin:0;
    background:linear-gradient(180deg,rgba(247,242,236,0),var(--cream) 34%);
  }
  body.app-q #sc-inquiry .nav .btn{flex:1;min-height:50px;border-radius:100px}
  body.app-q #sc-inquiry .nav .back{min-height:50px;padding:0 18px}
}