/* Tandem website: shared styles.
   Most layout lives in inline styles copied 1:1 from the approved design (Claude Design canvas).
   This file holds the base, the responsive (phone) overrides and the "Talk to us" sheet.
   Brand tokens: see ../brand-kit/tokens/tokens.css */

html { scroll-behavior: smooth; }
body { margin: 0; background: #EDF1F0; }
a { color: #0E3B43; }
a:hover { color: #10242A; }
img { max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, label:focus-within {
  outline: 3px solid #F2B705; outline-offset: 2px;
}

/* torn receipt edge */
.zig { clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),97.5% 100%,95% calc(100% - 8px),92.5% 100%,90% calc(100% - 8px),87.5% 100%,85% calc(100% - 8px),82.5% 100%,80% calc(100% - 8px),77.5% 100%,75% calc(100% - 8px),72.5% 100%,70% calc(100% - 8px),67.5% 100%,65% calc(100% - 8px),62.5% 100%,60% calc(100% - 8px),57.5% 100%,55% calc(100% - 8px),52.5% 100%,50% calc(100% - 8px),47.5% 100%,45% calc(100% - 8px),42.5% 100%,40% calc(100% - 8px),37.5% 100%,35% calc(100% - 8px),32.5% 100%,30% calc(100% - 8px),27.5% 100%,25% calc(100% - 8px),22.5% 100%,20% calc(100% - 8px),17.5% 100%,15% calc(100% - 8px),12.5% 100%,10% calc(100% - 8px),7.5% 100%,5% calc(100% - 8px),2.5% 100%,0 calc(100% - 8px)); }

/* FAQ accordions */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }

/* calculator */
input[type=range] { width: 100%; accent-color: #0E3B43; height: 32px; margin: 0; }
.in-teal::placeholder { color: rgba(237,241,240,0.6); }
.chip { font-family: 'Figtree', Arial, sans-serif; font-weight: 600; font-size: 15px; min-height: 44px; padding: 8px 14px; cursor: pointer; border: 2px solid #CFDFDB; background: transparent; color: #10242A; }
.chip[aria-pressed="true"] { background: #0E3B43; border-color: #0E3B43; color: #EDF1F0; }

/* receipt page grid: questions + next step on the left, result on the right (laptop);
   questions → result → next step (phone) */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "q r" "n r"; grid-template-rows: auto 1fr; gap: 24px 28px; align-items: start; }
.calc-q { grid-area: q; } .calc-r { grid-area: r; position: sticky; top: 16px; } .calc-n { grid-area: n; }

/* ---------- phone-only bottom bar (hidden on laptop) ---------- */
.mbar { display: none; }

/* ---------- Talk to us sheet ---------- */
.talk { border: 0; padding: 0; margin: auto; width: min(480px, 100%); max-height: 100dvh; background: #FFFFFF; color: #10242A; font-family: 'Figtree', Arial, sans-serif; box-shadow: 0 10px 40px rgba(14,59,67,0.18); }
.talk::backdrop { background: rgba(16,36,42,0.55); }
.talk-inner { padding: 20px 24px 28px; overflow-y: auto; max-height: calc(100dvh - 32px); box-sizing: border-box; }
.talk input[type=text], .talk input[type=tel] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; font-family: 'Figtree', Arial, sans-serif; font-size: 16px; border: 1px solid #CFDFDB; background: #FFFFFF; color: #10242A; border-radius: 0; }
.talk .times { display: flex; gap: 8px; }
.talk .times label { flex: 1 1 0; position: relative; }
.talk .times input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.talk .times span { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; font-size: 14px; border: 2px solid #CFDFDB; cursor: pointer; }
.talk .times input:checked + span { background: #0E3B43; border-color: #0E3B43; color: #EDF1F0; }
.talk [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =================== PHONE (≤ 720px) =================== */
@media (max-width: 720px) {
  body { padding-bottom: 76px; }
  .site-header > div { padding: 14px 16px !important; }
  .site-header img { height: 28px !important; }
  .nav-text { display: none !important; }

  .hero { min-height: 640px !important; min-height: calc(100svh - 72px) !important; }
  .hero-img { object-position: 42% 50% !important; }
  .hero-inner { padding: 120px 16px 32px !important; }
  .hero h1 { font-size: 44px !important; margin-bottom: 24px !important; }
  .hero-btns { flex-direction: column; gap: 10px !important; }
  .hero-btns a { width: 100%; box-sizing: border-box; }

  .sec-inner { padding: 64px 16px !important; }
  .sec-inner h2 { font-size: 32px !important; }
  .what h2 { font-size: 26px !important; }
  .faq h2 { font-size: 44px !important; }
  .plate-card { flex-basis: 100% !important; padding: 22px !important; }
  .steps { gap: 28px !important; }
  .steps > li > div:first-child { font-size: 32px !important; }

  .found-text { flex: 1 1 100% !important; padding: 56px 16px 32px !important; }
  .found-text h2 { font-size: 32px !important; }
  .found-photo { flex: 1 1 100% !important; min-width: 0 !important; min-height: 460px !important; }
  .found-cta { left: 16px !important; right: 16px !important; bottom: 16px !important; }
  .found-cta a { display: flex !important; justify-content: center; }

  .faq { padding: 64px 16px !important; gap: 32px !important; }
  .faq-box { padding: 32px 24px !important; }
  .faq summary { font-size: 19px !important; }

  .close-sec { min-height: 0 !important; }
  .close-sec > div:first-child { padding: 80px 16px 64px !important; }
  .close-sec h2 { font-size: 48px !important; }
  .close-sec footer > div, .site-footer > div { flex-direction: column; align-items: flex-start !important; padding: 32px 16px !important; }

  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #FFFFFF; border-top: 1px solid #CFDFDB; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; box-shadow: 0 -6px 24px rgba(14,59,67,0.10); transform: translateY(110%); transition: transform 180ms ease-out; }
  .mbar.show { transform: none; }

  /* receipt page */
  .calc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "r" "n"; gap: 20px; }
  .calc-r { position: static; }
  .rc-main { padding: 28px 16px 40px !important; }
  .rc-main h1 { font-size: 36px !important; }
  .rc-box { padding: 20px !important; }
  .rc-how { padding: 28px 20px !important; }
  #gainBig { font-size: 38px !important; }
  #costBig { font-size: 48px !important; }

  /* the sheet slides up from the bottom on phones */
  .talk { margin: auto 0 0; width: 100%; max-width: 100%; }
  .talk-inner { padding: 12px 20px 28px; }
}