/* ============================================================================
   Deep Current — sign up / terms / privacy (shared, calm skeleton)

   Loaded only by signup.html, terms.html and privacy.html. Design tokens
   come from css/deep.css; nothing new is introduced here — this file only
   adds the few components those three pages need that no other page has
   (a plan picker, form fields, a callout note, a text+photo row) so that
   css/deep.css itself never has to change for them.

   MOTION-CHARTER.md §3: these three pages get NO signature effect — calm,
   ambient backdrop only. Nothing in this file animates on a clock; reveals
   use the site-wide [data-reveal] system already governed by js/motion.js.
   ========================================================================== */

/* ---------------------------------------------------------- honest note --- */
.fp-honest{
  margin-top:28px; max-width:66ch; padding:18px 22px 18px 20px;
  border-left:3px solid var(--accent); border-radius:0 12px 12px 0;
  background: rgba(var(--accent-rgb), .08);
  font-size:15px; line-height:1.6; color:#d6e8f2;
}
.fp-honest p{ margin:0; }
.fp-honest strong{ color: var(--accent); font-weight:700; }
.sec--light .fp-honest, .sec--tintlight .fp-honest{
  border-left-color: var(--primary); background: rgba(var(--primary-rgb), .06); color: var(--text);
}
.sec--light .fp-honest strong, .sec--tintlight .fp-honest strong{ color: var(--primary); }

/* --------------------------------------------------------------- form ----- */
.fp-field{ margin-bottom:22px; }
.fp-field label{
  display:block; font-size:13px; font-weight:700; letter-spacing:.02em;
  margin-bottom:8px; color: var(--text); font-family: var(--font-body);
}
.fp-field input{
  width:100%; font:16px/1.4 var(--font-body); padding:14px 15px;
  border:1.5px solid var(--border); background:#fff; color: var(--text);
  border-radius:8px;
}
.fp-field input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.fp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
@media (max-width:700px){ .fp-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- plan picker --- */
.fp-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:8px; }
.fp-plan{
  position:relative; display:block; cursor:pointer;
  border:1.5px solid var(--border); border-radius:14px; padding:24px 44px 24px 22px;
  background:#fff; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.fp-plan:has(input:checked){
  border-color: var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14);
}
.fp-plan:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:3px; }
.fp-plan input[type=radio]{ position:absolute; top:24px; right:22px; width:18px; height:18px; accent-color: var(--primary); margin:0; }
.fp-plan-rank{ font-size:12.5px; font-weight:600; color: var(--text-muted); margin-bottom:6px; }
.fp-plan-name{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; }
.fp-plan-for{ font-size:14px; line-height:1.4; color: var(--text-muted); min-height:40px; margin:0 0 16px; }
.fp-plan-price{ display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.fp-plan-price .amt{ font-size:32px; font-weight:800; letter-spacing:-.02em; color: var(--text); }
.fp-plan-price .per{ font-family:var(--font-body); font-size:13px; font-weight:400; color: var(--text-muted); }
.fp-plan--pick{ border-color: rgba(var(--primary-rgb),.45); }
.fp-plan--pick::before{
  content:attr(data-flag); position:absolute; top:-11px; left:20px;
  background: var(--primary); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 10px; border-radius:100px;
}
@media (max-width:820px){ .fp-plans{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ text + photo */
.fp-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center; }
.fp-row--flip .fp-row-copy{ order:2; }
.fp-row--flip .fp-row-photo{ order:1; }
@media (max-width:820px){
  .fp-row{ grid-template-columns:1fr; gap:28px; }
  .fp-row--flip .fp-row-copy, .fp-row--flip .fp-row-photo{ order:initial; }
}

/* a legal-page photo: contained, not full-bleed — the warm-paper design used
   an edge-to-edge strip, but deep.css has no such treatment anywhere else,
   so this uses the same tilt-plate card every other page already uses. */
.fp-figure{ max-width:640px; margin:34px auto 0; }