/* FrankieGPT public site. Warm editorial system built around the horse mascot:
   chestnut and gold on cream, Fraunces display serif, soft depth, no template
   grays. Shared by the landing, auth, settings, and legal pages. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #FAF4E8;
  --cream-2: #F4EAD6;
  --paper: #FFFDF7;
  --ink: #2C2214;
  --mut: #6E5C44;
  --faint: #A5906F;
  --line: #E7DAC0;
  --amber: #A85F17;
  --amber-deep: #8A4C0E;
  --amber-soft: #F3E2C4;
  --gold: #E9BC5C;
  --gold-soft: #F6E7BF;
  --dark: #2E2417;
  --dark-2: #3B2F1E;
  --good: #4C7A3D;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(60, 42, 16, .06), 0 12px 32px rgba(60, 42, 16, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 244, 232, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 650; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo img { width: 38px; height: 38px; border-radius: 10px; }
.logo .gpt { color: var(--amber); }
.head-nav { display: flex; align-items: center; gap: 6px; }
.head-nav a.plain { padding: 9px 14px; border-radius: 999px; color: var(--mut); font-weight: 600; font-size: 15.5px; }
.head-nav a.plain:hover { background: var(--cream-2); color: var(--ink); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 16px;
  border: 1px solid transparent; cursor: pointer; text-align: center; font-family: var(--sans);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--amber); color: #FFF9EE; box-shadow: 0 2px 0 var(--amber-deep), 0 10px 24px rgba(168, 95, 23, .22); }
.btn.primary:hover { background: var(--amber-deep); }
.btn.outline { background: transparent; color: var(--amber-deep); border-color: #D9BE93; }
.btn.outline:hover { background: var(--amber-soft); }
.btn.big { padding: 15px 30px; font-size: 17.5px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.danger { background: transparent; color: #A3341F; border-color: #E4BCA6; }
.btn.danger:hover { background: #F9EAE0; }
.btn.small { padding: 8px 15px; font-size: 14px; }
.quiet-link { font-weight: 700; color: var(--amber-deep); font-size: 16.5px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -180px; top: -140px; width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(233, 188, 92, .38), rgba(233, 188, 92, 0));
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 76px; padding-bottom: 84px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 8px;
  font-size: 14.5px; font-weight: 700; color: var(--mut); margin-bottom: 22px;
}
.eyebrow img { width: 26px; height: 26px; }
.hero h1 { font-size: 54px; line-height: 1.06; margin-bottom: 20px; font-weight: 620; }
.hero h1 .uline { position: relative; white-space: nowrap; }
.hero h1 .uline svg { position: absolute; left: 0; right: 0; bottom: -6px; width: 100%; height: 14px; }
.hero .sub { font-size: 19px; color: var(--mut); margin-bottom: 30px; max-width: 32em; }
.cta-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 14.5px; color: var(--faint); margin-top: 14px; }

/* Phone mock */
.phone-scene { position: relative; display: flex; justify-content: center; }
.phone-scene .horse-peek { position: absolute; top: -34px; left: calc(50% + 92px); width: 92px; transform: rotate(8deg); filter: drop-shadow(0 6px 14px rgba(60, 42, 16, .18)); z-index: 2; }
.phone {
  width: 330px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 38px; padding: 18px 16px 22px; box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.phone .p-head { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 650; font-size: 18px; padding: 2px 6px 13px; border-bottom: 1px solid var(--line); }
.phone .p-head img { width: 30px; height: 30px; border-radius: 8px; }
.phone .p-chat { padding: 15px 4px 0; display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.bub.u { align-self: flex-end; background: var(--amber); color: #FFF7EA; border-bottom-right-radius: 5px; }
.bub.f { align-self: flex-start; background: var(--cream-2); border-bottom-left-radius: 5px; }
.p-mic {
  margin: 18px auto 0; width: 64px; height: 64px; border-radius: 50%; background: var(--amber);
  display: grid; place-items: center; color: #FFF7EA;
  box-shadow: 0 2px 0 var(--amber-deep), 0 10px 22px rgba(168, 95, 23, .35);
}

/* ---------- Ribbon ---------- */
.ribbon { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.ribbon .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; padding: 15px 24px; font-size: 15px; color: var(--mut); font-weight: 600; }
.ribbon span.dot { color: var(--gold); margin: 0 14px; font-size: 11px; }

/* ---------- Sections ---------- */
section.band { padding: 78px 0; }
.kicker { font-family: var(--sans); color: var(--amber); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; margin-bottom: 12px; }
h2.sec { font-size: 38px; margin-bottom: 14px; font-weight: 620; }
.sec-sub { color: var(--mut); max-width: 42em; margin-bottom: 40px; font-size: 18px; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.bcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; overflow: hidden; }
.bcard h3 { font-size: 21px; margin-bottom: 8px; font-weight: 620; }
.bcard p { color: var(--mut); font-size: 15.5px; }
.bcard .ico { color: var(--amber); margin-bottom: 14px; line-height: 0; }
.bcard.hero-card { grid-column: span 2; grid-row: span 2; background: linear-gradient(165deg, #FFF9EC, #F8E9CC); display: flex; flex-direction: column; }
.bcard.hero-card .mini-chat { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }
.bcard.hero-card .mini-chat .bub { font-size: 14px; box-shadow: 0 1px 2px rgba(60,42,16,.05); }
.bcard.hero-card .mini-chat .bub.f { background: var(--paper); }
.bcard.wide { grid-column: span 2; }
.bcard.tinted { background: var(--cream-2); }
.chip-addr { display: inline-block; background: var(--gold-soft); border: 1px solid #E2C98F; color: #6B4A12; font-weight: 700; border-radius: 10px; padding: 8px 13px; font-size: 14.5px; margin-top: 12px; }
.ru-note { font-family: var(--serif); color: var(--amber-deep); font-size: 19px; margin-top: 10px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.step { position: relative; }
.step .n { font-family: var(--serif); font-size: 52px; font-weight: 550; color: var(--gold); line-height: 1; margin-bottom: 14px; }
.step h3 { font-size: 21px; margin-bottom: 8px; font-weight: 620; }
.step p { color: var(--mut); font-size: 15.5px; }

/* Dark trust band */
.trust { background: var(--dark); color: #F4EAD6; }
.trust .kicker { color: var(--gold); }
.trust h2.sec { color: #FBF3DF; }
.trust .sec-sub { color: #C9B896; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.trust-item { border-top: 1px solid var(--dark-2); padding: 20px 0 6px; }
.trust-item b { display: block; font-family: var(--serif); font-weight: 600; font-size: 18.5px; color: #FBF3DF; margin-bottom: 6px; }
.trust-item b::before { content: "✓  "; color: var(--gold); }
.trust-item p { color: #C9B896; font-size: 15px; }

/* FAQ */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 19px; padding: 20px 44px 20px 2px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 10px; top: 16px; color: var(--faint); font-size: 26px; font-family: var(--sans); font-weight: 400; transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 2px 22px; color: var(--mut); max-width: 60em; }

/* CTA */
.cta-final { padding: 30px 0 90px; }
.cta-card {
  background: linear-gradient(150deg, #FCEBD2, #F0CD96); border: 1px solid #E5CB9B;
  border-radius: 28px; padding: 58px 40px; text-align: center; position: relative; overflow: hidden;
}
.cta-card img.horse { width: 108px; margin-bottom: 8px; }
.cta-card h2 { font-size: 36px; margin-bottom: 10px; font-weight: 620; }
.cta-card p { color: #7A6238; margin-bottom: 28px; font-size: 17.5px; }

/* ---------- Footer ---------- */
.site-foot { padding: 34px 0 46px; color: var(--faint); font-size: 14.5px; border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.site-foot a { color: var(--mut); margin-left: 18px; }
.foot-brand { display: flex; align-items: center; gap: 8px; }
.foot-brand img { width: 22px; height: 22px; border-radius: 6px; }

/* ---------- Auth + settings forms ---------- */
.auth-main { min-height: calc(100vh - 68px); display: grid; place-items: start center; padding: 52px 20px 72px; }
.auth-card {
  width: 100%; max-width: 460px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 22px; padding: 36px 32px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 30px; margin-bottom: 8px; font-weight: 620; }
.auth-card .lead { color: var(--mut); margin-bottom: 26px; font-size: 15.5px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--faint); font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid #D6C4A2; border-radius: 12px;
  background: #FFFEFA; color: var(--ink); font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-soft); border-color: var(--amber); }
.form-err { background: #FAEDE4; border: 1px solid #E8C4A8; color: #93401E; border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 16px; }
.form-ok { background: #EFF3E4; border: 1px solid #CBD9AC; color: var(--good); border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 16px; }
.auth-alt { text-align: center; margin-top: 20px; color: var(--mut); font-size: 15px; }
.legal-line { font-size: 13px; color: var(--faint); margin: 14px 0 18px; }

/* Settings */
.settings-main { max-width: 740px; margin: 0 auto; padding: 40px 20px 84px; }
.settings-main h1 { font-size: 34px; margin-bottom: 6px; font-weight: 620; }
.settings-main .lead { color: var(--mut); margin-bottom: 28px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 22px; }
.panel h2 { font-size: 22px; margin-bottom: 14px; font-weight: 620; }
.panel .note { color: var(--faint); font-size: 14px; margin-top: 10px; }
.inbox-chip { display: inline-block; background: var(--gold-soft); border: 1px solid #E2C98F; color: #6B4A12; font-weight: 700; border-radius: 10px; padding: 8px 13px; font-size: 15px; }
.contact-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 13px 0; }
.contact-row:first-of-type { border-top: 0; }
.contact-row .who b { display: block; }
.contact-row .who span { color: var(--mut); font-size: 14.5px; display: block; }
.row-btns { display: flex; gap: 8px; flex-shrink: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Legal pages */
.legal-main { max-width: 780px; margin: 0 auto; padding: 44px 20px 84px; }
.legal-main h1 { font-size: 36px; margin-bottom: 18px; font-weight: 620; }
.legal-main h2 { font-size: 23px; margin: 30px 0 10px; font-weight: 620; }
.legal-main p, .legal-main li { color: var(--mut); margin-bottom: 12px; }
.legal-main ul { padding-left: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; padding-bottom: 56px; }
  .hero h1 { font-size: 40px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bcard.hero-card { grid-column: span 2; grid-row: auto; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .trust-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  section.band { padding: 56px 0; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 33px; }
  .bento { grid-template-columns: 1fr; }
  .bcard.hero-card, .bcard.wide { grid-column: span 1; }
  .phone { width: 100%; max-width: 310px; transform: none; }
  .phone-scene .horse-peek { width: 74px; top: -26px; left: calc(50% + 72px); }
  .head-nav a.plain { display: none; }
  .site-head .wrap { height: 60px; }
  .logo { font-size: 19px; }
  .logo img { width: 32px; height: 32px; }
  .head-nav .btn { padding: 9px 16px; font-size: 14.5px; white-space: nowrap; }
  h2.sec { font-size: 30px; }
  .cta-card { padding: 44px 24px; }
  .cta-card h2 { font-size: 28px; }
}

/* ---------- Palm Springs life: photos, story, and motion ---------- */

/* Hero atmosphere: a slow-drifting sun glow and swaying palm silhouettes. */
.hero::before {
  animation: sunDrift 16s ease-in-out infinite alternate;
}
@keyframes sunDrift {
  0% { transform: translate(0, 0) scale(1); opacity: .9; }
  100% { transform: translate(-90px, 40px) scale(1.12); opacity: 1; }
}
.palm-sil { position: absolute; bottom: -6px; color: #8A6A33; opacity: .16; pointer-events: none; }
.palm-sil svg { display: block; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; }
.palm-sil.left { left: -30px; width: 190px; }
.palm-sil.right { right: -20px; width: 150px; }
.palm-sil.right svg { animation-duration: 8.5s; animation-delay: 1.2s; }
@keyframes sway {
  0% { transform: rotate(-2.2deg); }
  100% { transform: rotate(2.2deg); }
}

/* The phone feels live: bubbles arrive one by one, the mic breathes, the
   mascot bobs, and a small equalizer shows Frankie listening. */
/* Fill-mode both keeps bubbles hidden only DURING the entrance; a browser
   that never runs the animation simply shows them, so the phone is never empty. */
.p-chat .bub { animation: rise .55s ease-out both; }
.p-chat .bub:nth-child(1) { animation-delay: .2s; }
.p-chat .bub:nth-child(2) { animation-delay: .7s; }
.p-chat .bub:nth-child(3) { animation-delay: 1.2s; }
.p-chat .bub:nth-child(4) { animation-delay: 1.7s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.phone-scene .horse-peek { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-7px); }
}
.p-mic { position: relative; }
.p-mic::before, .p-mic::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(168, 95, 23, .45); animation: pulseRing 2.8s ease-out infinite;
}
.p-mic::after { animation-delay: 1.4s; }
@keyframes pulseRing {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: auto; }
.eq span { width: 4px; border-radius: 2px; background: var(--amber); animation: eqBar .8s ease-in-out infinite alternate; }
.eq span:nth-child(1) { height: 6px; animation-delay: 0s; }
.eq span:nth-child(2) { height: 13px; animation-delay: .15s; }
.eq span:nth-child(3) { height: 9px; animation-delay: .3s; }
.eq span:nth-child(4) { height: 15px; animation-delay: .45s; }
.eq span:nth-child(5) { height: 7px; animation-delay: .6s; }
@keyframes eqBar { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

/* Ribbon becomes a slow marquee. */
.ribbon { overflow: hidden; }
.ribbon .wrap { max-width: none; padding: 0; display: block; }
.ribbon .track { display: inline-flex; align-items: center; white-space: nowrap; padding: 15px 0; animation: marquee 36s linear infinite; will-change: transform; }
.ribbon .track > span { font-size: 15px; color: var(--mut); font-weight: 600; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The story: Palm Springs photos in warm frames beside the narrative. */
.story-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.collage { position: relative; min-height: 480px; }
.ph { position: absolute; background: #FFFDF7; border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 14px; box-shadow: 0 18px 44px rgba(60, 42, 16, .16); }
.ph img { display: block; border-radius: 8px; width: 100%; height: 100%; object-fit: cover; }
.ph.horse { width: 66%; left: 0; top: 24px; transform: rotate(-2.5deg); z-index: 2; }
.ph.horse img { aspect-ratio: 4 / 3.4; }
.ph.palms { width: 52%; right: 0; bottom: 0; transform: rotate(3deg); z-index: 3; }
.ph.palms img { aspect-ratio: 4 / 3; }
.ph .cap { font-size: 13px; color: var(--faint); padding: 9px 4px 0; font-weight: 600; }
.story-copy p { color: var(--mut); margin-bottom: 16px; font-size: 16.5px; }
.story-copy p b { color: var(--ink); }
.story-copy .hoof { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 22px; }
.story-copy .hoof img { width: 44px; height: 44px; }
.story-copy .hoof span { font-size: 15px; color: var(--mut); }

/* Closing card carries the owner's Palm Springs aerial. */
.cta-card.photo {
  background: linear-gradient(rgba(44, 30, 12, .5), rgba(44, 30, 12, .62)), url('/img/ps-aerial-1920.jpg') center 40% / cover no-repeat;
  border-color: #C9A76A;
}
.cta-card.photo h2 { color: #FFF6E4; }
.cta-card.photo p { color: #F1DFBC; }

@media (max-width: 960px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .collage { min-height: 420px; }
}
@media (max-width: 560px) {
  .collage { min-height: 330px; }
  .palm-sil.left { width: 120px; }
  .palm-sil.right { display: none; }
  .cta-card.photo { background-image: linear-gradient(rgba(44, 30, 12, .52), rgba(44, 30, 12, .64)), url('/img/ps-aerial-960.jpg'); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .palm-sil svg, .p-chat .bub, .horse-peek, .p-mic::before, .p-mic::after, .eq span, .ribbon .track { animation: none !important; }
  .p-chat .bub { opacity: 1; }
}