/* Shared styles for paddleready.app hosted policy pages.
 *
 * Linked from privacy.html, terms.html, support.html, delete-account.html.
 * Keeps the four pages visually consistent with the marketing site without
 * duplicating CSS in every file.
 */

:root {
  --navy:       #03045E;
  --deep-ocean: #0077B6;
  --teal:       #00B4D8;
  --light-blue: #CAF0F8;
  --amber:      #FFB703;
  --ink:        #1A1A2E;
  --muted:      #4A6FA5;
  --bg:         #F0F9FF;
  --border:     #E8F4FD;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: 'Syne', system-ui, sans-serif; letter-spacing: -0.5px; line-height: 1.2; color: var(--navy); }
a { color: var(--deep-ocean); }

/* Nav header */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 880px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Syne'; font-weight: 800; font-size: 20px; color: var(--navy); text-decoration: none; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--deep-ocean)); }
.back { font-size: 13px; color: var(--deep-ocean); text-decoration: none; font-weight: 600; }

/* Shared top menu (matches the marketing site.css nav) so policy pages and
 * marketing pages share one header. */
.nav .menu { display: flex; align-items: center; }
.nav .menu a { color: var(--ink); font-weight: 500; margin-left: 22px; font-size: 14px; text-decoration: none; }
.nav .menu a:hover { color: var(--deep-ocean); }
.nav .menu a.cta { background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 999px; }
.nav .menu a.cta:hover { color: #fff; opacity: 0.92; }
@media (max-width: 600px) { .nav .menu a:not(.cta) { display: none; } }

/* Layout */
main { max-width: 880px; margin: 0 auto; padding: 40px 24px 80px; }
.lede { background: linear-gradient(135deg, var(--navy), var(--deep-ocean)); color: #fff; border-radius: 18px; padding: 32px; margin-bottom: 32px; }
.lede h1 { color: #fff; font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; }
.lede p.dates { font-size: 13px; color: var(--light-blue); margin: 0; }
.lede p.desc { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 14px 0 0; }

.section { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; margin-bottom: 16px; }
.section h2 { font-size: 18px; margin: 0 0 12px; color: var(--navy); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.section h3 { font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
.section p { font-size: 14px; line-height: 1.6; color: #333; margin: 0 0 10px; }
.section ul { margin: 6px 0 12px 18px; padding: 0; }
.section li { font-size: 14px; line-height: 1.55; color: #333; margin-bottom: 4px; }
.caps { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.6; color: #333; }

.callout { background: #FFF9C4; border: 1px solid #F0E060; border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.55; color: #5D4037; margin: 12px 0; }
.callout.green { background: #E8F5E9; border-color: #2e7d32; color: #1b5e20; }
.callout.blue  { background: #E0F4FB; border-color: var(--teal); color: var(--deep-ocean); }

/* Form (delete-account.html) */
form { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
input, textarea { width: 100%; font-size: 15px; padding: 10px 12px; border: 1px solid #cdd; border-radius: 8px; font-family: inherit; margin-bottom: 14px; }
button[type="submit"] { background: var(--navy); color: #fff; font-weight: 800; font-size: 15px; padding: 14px 28px; border: none; border-radius: 12px; cursor: pointer; }
button[type="submit"]:hover { background: var(--deep-ocean); }
button[type="submit"].danger { background: #B71C1C; }

/* Footer */
footer { background: var(--navy); color: rgba(255,255,255,0.78); padding: 32px 24px; font-size: 13px; }
footer .inner { max-width: 880px; margin: 0 auto; }
footer a { color: var(--light-blue); }
footer p { margin: 6px 0; line-height: 1.55; }

@media (max-width: 600px) {
  main { padding: 24px 16px 56px; }
  .section { padding: 20px; }
}