/* Mina — shared stylesheet. Palette pulled straight from Palette.swift and the app icon. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --sky-top:#4FA8E0;
  --sky-horizon:#CFE9F8;
  --sea:#1F6FB2;
  --sea-deep:#123655;
  --ink:#12283F;
  --ink-2:#3C5872;
  --ink-3:#6E869C;

  --coral:#E8604F;
  --coral-ink:#B8402F;
  --sun:#F3D160;
  --sun-ink:#8A6710;
  --teal:#4FB3A8;
  --teal-ink:#2C7D74;

  --paper:#FBF8F1;
  --surface:#FFFFFF;
  --surface-2:#F5F0E6;
  --rule:#E3DCC9;
  --rule-soft:#EEE9DC;

  --shadow:0 1px 2px rgba(18,40,63,.06), 0 10px 28px -16px rgba(18,40,63,.35);
  --shadow-lg:0 20px 60px -24px rgba(18,40,63,.45);

  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  color-scheme: light;
}

/* Mina is a bright, sunlit toy — it commits to one warm daylight world rather than
   inverting into a dark theme, the same way the app's own default view does. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--coral-ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.prose{max-width:68ch}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);margin:0 0 12px;font-weight:500;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(251,248,241,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.nav-brand img{width:32px;height:32px;border-radius:8px;box-shadow:var(--shadow)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--coral-ink)}
.nav-cta{
  font-family:var(--body);font-weight:600;font-size:14px;color:#fff!important;
  background:var(--coral);padding:9px 16px;border-radius:999px;box-shadow:var(--shadow);
}
.nav-cta:hover{background:var(--coral-ink)}

/* ---------- wave divider: land rising from the sea between every section ---------- */
.wave{
  display:block;width:100%;height:64px;margin-bottom:-1px;
}
.wave path{fill:var(--paper)}
.wave.sea path{fill:var(--sea)}
.wave.surface path{fill:var(--surface)}
.wave.deep path{fill:var(--sea-deep)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-horizon) 72%, var(--sea) 100%);
  padding:76px 0 0;
}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-bottom:64px;
}
.hero-eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sea-deep);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  display:inline-flex;padding:6px 12px;border-radius:999px;margin-bottom:20px;font-weight:500;
}
.hero h1{
  font-size:clamp(40px,5.4vw,60px);line-height:1.03;color:var(--sea-deep);
}
.hero h1 em{
  font-style:normal;color:var(--coral-ink);
}
.hero-dek{
  margin-top:20px;font-size:19px;line-height:1.6;color:var(--sea-deep);opacity:.86;max-width:46ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;align-items:center}
.btn{
  font-family:var(--body);font-weight:600;font-size:15.5px;text-decoration:none;
  padding:13px 22px;border-radius:12px;display:inline-flex;align-items:center;gap:9px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px -10px rgba(184,64,47,.55)}
.btn-primary:hover{background:var(--coral-ink)}
.btn-ghost{background:rgba(255,255,255,.65);color:var(--sea-deep);border:1px solid rgba(18,54,85,.18)}
.btn-ghost:hover{background:#fff}
.btn[aria-disabled="true"]{opacity:.62;pointer-events:none}
.hero-note{font-size:13.5px;color:var(--sea-deep);opacity:.7;margin-top:14px}

.hero-art{position:relative}
.hero-art img{
  border-radius:28px;box-shadow:var(--shadow-lg);
  border:6px solid rgba(255,255,255,.6);
}
.hero-gulls{position:absolute;inset:0;pointer-events:none}

/* ---------- palette strip ---------- */
.palette-strip{display:flex;height:10px;width:100%}
.palette-strip i{flex:1}

/* ---------- section rhythm ---------- */
.section{padding:88px 0}
.section-head{max-width:56ch;margin-bottom:52px}
.section-head h2{font-size:clamp(28px,3.4vw,38px);color:var(--ink)}
.section-head p{margin-top:14px;font-size:17px;color:var(--ink-2)}
.section--sea{background:var(--sea)}
.section--sea .section-head h2,.section--sea .section-head p{color:#fff}
.section--sea .section-head p{opacity:.85}
.section--surface{background:var(--surface)}

/* ---------- feature grid ---------- */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:18px;
  padding:28px;box-shadow:var(--shadow);
}
.card .icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.card h3{font-size:19px;margin-bottom:8px;color:var(--ink)}
.card p{color:var(--ink-2);font-size:15.5px;line-height:1.6}

.icon-coral{background:#FBE4E0;color:var(--coral-ink)}
.icon-sun{background:#FBF0D2;color:var(--sun-ink)}
.icon-teal{background:#DDF0ED;color:var(--teal-ink)}

/* ---------- tool chips (the actual seven tools) ---------- */
.tools{display:flex;flex-wrap:wrap;gap:12px}
.tool-chip{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 18px;color:#fff;
  flex:1 1 200px;
}
.tool-chip .n{font-family:var(--mono);font-size:11.5px;opacity:.65}
.tool-chip strong{display:block;font-family:var(--display);font-weight:600;font-size:16px}
.tool-chip span.d{display:block;font-size:13px;opacity:.78;margin-top:2px;line-height:1.4}

/* ---------- weather cycle ---------- */
.weather-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.weather-card{
  border-radius:18px;padding:24px 20px;color:#fff;position:relative;overflow:hidden;
  min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;
}
.weather-card h4{font-size:18px;margin-bottom:4px}
.weather-card p{font-size:13.5px;opacity:.9;line-height:1.5}
.w-clear{background:linear-gradient(160deg,#5EB6EA,#2E86C6)}
.w-rain{background:linear-gradient(160deg,#7C8CA0,#51637A)}
.w-autumn{background:linear-gradient(160deg,#E8A85C,#C97A3E)}
.w-snow{background:linear-gradient(160deg,#B9CBDB,#7E93A8)}

/* ---------- swatch showcase ---------- */
.swatch-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.swatch{border-radius:10px;aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(18,40,63,.08)}
.swatch-caption{margin-top:16px;font-size:14px;color:var(--ink-3)}

/* ---------- CTA band ---------- */
.cta{
  background:linear-gradient(135deg,var(--coral) 0%, #D8523F 100%);
  border-radius:28px;padding:56px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;
}
.cta h2{color:#fff;font-size:clamp(26px,3vw,34px)}
.cta p{color:rgba(255,255,255,.88);margin-top:12px;font-size:16.5px;max-width:46ch}
.cta .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.26)}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ---------- footer ---------- */
footer{background:var(--sea-deep);color:rgba(255,255,255,.72);padding:56px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:14px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-weight:500}
footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:15px}
footer a:hover{color:#fff}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand img{width:30px;height:30px;border-radius:8px}
.footer-brand span{font-family:var(--display);font-weight:700;font-size:19px;color:#fff}
.footer-note{font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:42ch}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:rgba(255,255,255,.5);
}

/* ---------- legal pages (privacy / terms) ---------- */
.legal-hero{
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-horizon) 100%);
  padding:64px 0 48px;
}
.legal-hero .wrap{max-width:760px}
.legal-hero h1{color:var(--sea-deep);font-size:clamp(32px,4.4vw,44px)}
.legal-hero p{margin-top:14px;color:var(--sea-deep);opacity:.82;font-size:16.5px}
.legal-body{padding:56px 0 96px}
.legal-body .wrap{max-width:760px}
.legal-body h2{font-size:22px;margin-top:44px;margin-bottom:14px;color:var(--ink)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin-bottom:14px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.legal-body ul{margin:0 0 14px;padding-left:22px}
.legal-body li{margin-bottom:8px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--coral-ink);font-weight:600}
.legal-toc{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:16px;
  padding:22px 26px;margin-bottom:8px;
}
.legal-toc h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-weight:500}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:24px}
.legal-toc li{font-size:14.5px;margin-bottom:8px;break-inside:avoid}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--coral-ink)}
.legal-meta{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:8px}
.callout{
  background:var(--surface-2);border-left:3px solid var(--teal);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:18px 0;
}
.callout p{margin:0;font-size:15px;color:var(--ink)}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{order:-1}
  .grid-3{grid-template-columns:1fr 1fr}
  .weather-row{grid-template-columns:1fr 1fr}
  .cta{grid-template-columns:1fr;padding:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .swatch-grid{grid-template-columns:repeat(6,1fr)}
  .legal-toc ol{columns:1}
}
@media (max-width:640px){
  .nav-links{display:none}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .weather-row{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:repeat(6,1fr)}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}