/* Flowe — shared web theme for the App Store support site.
   Tokens are LIFTED VERBATIM from the marketing site (flowe-web/index.html) so the
   two properties are siblings, not cousins: flowe-web's footer links straight here.
   Ground #F6E8DF is the logomark's own baked background; bronze/rose are the F and
   the P. Type trio matches the iOS app (Flowe/DesignSystem/FlowTypography.swift). */

:root{
  --ground:#F6E8DF; --ground-deep:#EEDCD0; --paper:#FFFBF7;
  --ink:#2D1520;    --muted:#86586A;
  --plum:#B23E63;   --on-plum:#FFFBF7;
  --rose:#DBA298;   --rose-pale:#F0D5CD;
  --bronze:#98724B; --bronze-lit:#AD8557;
  --hair:rgba(45,21,32,.15); --hair-soft:rgba(45,21,32,.07);
  --r-md:14px; --r-lg:22px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#1B1016; --ground-deep:#140B10; --paper:#251821;
    --ink:#F3E3D9;    --muted:#BE9BA2;
    --plum:#EF87A9;   --on-plum:#23111A;
    --rose:#DBA298;   --rose-pale:#4A3029;
    --bronze:#C79A6C; --bronze-lit:#DBB187;
    --hair:rgba(243,227,217,.17); --hair-soft:rgba(243,227,217,.08);
  }
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:16px/1.65 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--plum); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:680px; }
.wrap--doc{ max-width:720px; padding-bottom:64px; }

/* ---- brand mark: the transparent monogram cutout, same asset as flowe-web ---- */
.mark{ display:block; width:auto; height:76px; margin:0 auto; }
.mark--sm{ height:62px; }

/* ---- headings: Fraunces, italic accent words, DM Mono meta labels ---- */
h1{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400; font-size:clamp(28px,5vw,36px); line-height:1.2;
  letter-spacing:-.015em; margin:20px 0 10px;
}
h1 em{ font-style:italic; color:var(--plum); }

h2{
  font-family:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); margin:44px 0 14px;
}

h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400; font-size:17px; line-height:1.35; margin:0 0 5px;
}

p{ margin:0 0 12px; }
ul{ margin:0 0 12px; padding-left:20px; }
li{ margin:5px 0; }

.lede{ color:var(--muted); font-size:17px; margin:0; }
.updated{ font-family:"DM Mono", monospace; font-size:12px; color:var(--muted);
          letter-spacing:.06em; margin-top:6px; }

/* ---- surfaces ---- */
.card{
  background:var(--paper); border:1px solid var(--hair-soft);
  border-radius:var(--r-md); padding:18px 20px; margin:12px 0;
}
.card p{ margin:0; color:var(--muted); font-size:15px; }
.card--tint{ background:var(--ground-deep); border-color:var(--hair-soft); }

.grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
.grid .card{ margin:0; }

.hero{ text-align:center; padding:60px 20px 40px; }
.hero .tag{ font-size:18px; color:var(--muted); max-width:540px; margin:0 auto; }

header.doc{ text-align:center; margin:0 0 34px; padding-top:40px; }
header.doc h1{ font-size:clamp(24px,4vw,30px); }

.badge{
  display:inline-block; margin-top:22px;
  font-family:"DM Mono", monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--plum); background:var(--rose-pale);
  padding:9px 16px; border-radius:999px;
}

.cta{
  display:inline-block; margin-top:28px;
  font-size:16px; font-weight:500; color:var(--on-plum); background:var(--plum);
  padding:15px 30px; border-radius:999px;
}
.cta:hover{ text-decoration:none; background:var(--ink); }

.contact{
  text-align:center; background:var(--ground-deep); border:1px solid var(--hair-soft);
  border-radius:var(--r-md); padding:22px; margin:8px 0 4px;
}
.contact .email{ font-family:"Fraunces", Georgia, serif; font-size:20px; margin-top:4px; }

.note{ margin-top:18px; font-size:13px; color:var(--muted); }

footer{
  text-align:center; color:var(--muted); font-size:13px;
  margin:56px 0 48px; padding-top:24px; border-top:1px solid var(--hair-soft);
}
footer a{ color:var(--muted); }