/* CalendHER — public marketing website.
   ------------------------------------------------------------------------
   Deliberately NOT the app's stylesheet. Only the brand tokens are shared
   (the pink, the serif/sans pairing, the soft blush neutrals) so the two read
   as one company; every layout decision here belongs to a business website —
   wide margins, generous vertical rhythm, quiet type. Nothing in this file
   recreates an app surface. */

:root{
  /* Brand, taken from the app so the colours match exactly. */
  --accent:#FF71A0;
  --accent-dark:#b84c76;
  --shade:#553140;

  /* Soft neutrals mixed from the same pink. */
  --ink:#2b2428;
  --body:#544a4f;
  --muted:#8a7e84;
  --blush:#fff6f9;
  --blush-deep:#fff0f5;
  --cream:#fffafb;
  --line:#f2e3ea;
  --line-strong:#e7c5d3;

  --serif:"DM Serif Display",Georgia,serif;
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:24px;
  --maxw:1080px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:#fff;
  color:var(--body);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

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

img{max-width:100%;height:auto}

/* --- Rhythm --------------------------------------------------------------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-tight{max-width:720px;margin:0 auto;padding:0 var(--gutter)}

/* Generous, even vertical rhythm is most of what makes this read as a
   brochure site rather than a tool. */
section{padding:clamp(64px,9vw,118px) 0}

.band{background:var(--blush);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-cream{background:var(--cream)}

.center{text-align:center}

/* --- Skip link ------------------------------------------------------------ */

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:#fff;
  padding:12px 18px;font-weight:800;z-index:60;
  border-radius:0 0 12px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}

/* --- Typography ----------------------------------------------------------- */

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.015em}

h1{
  font-size:clamp(40px,6.6vw,70px);
  line-height:1.08;
  margin:0 0 22px;
}

h2{
  font-size:clamp(29px,4vw,42px);
  line-height:1.18;
  margin:0 0 20px;
}

h3{
  font-size:21px;
  line-height:1.3;
  margin:0 0 9px;
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin:0 0 18px;
}

.lead{
  font-size:clamp(18px,1.9vw,21px);
  line-height:1.7;
  color:var(--body);
  max-width:58ch;
}
.center .lead{margin-left:auto;margin-right:auto}

.fine{font-size:15px;color:var(--muted)}

a{color:var(--accent-dark);text-decoration:none}
a:hover{color:var(--accent)}

/* --- Wordmark ------------------------------------------------------------- */

.wordmark{
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.1;
  display:block;
}
.wordmark .her{color:var(--accent)}

.lockup{display:inline-block}
.lockup .tag{
  display:block;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:1px;
}

/* --- Navigation ----------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px var(--gutter);
  max-width:var(--maxw);
  margin:0 auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.6vw,34px);
  font-size:15px;
  font-weight:700;
}
.nav-links a{
  color:var(--body);
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--accent-dark);border-bottom-color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

@media (max-width:640px){
  .nav-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .nav-links{flex-wrap:wrap;gap:18px;font-size:14.5px}
}

/* --- Buttons -------------------------------------------------------------- */

.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-family:var(--sans);
  font-weight:900;
  font-size:17px;
  letter-spacing:.01em;
  padding:17px 42px;
  border:0;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(255,113,160,.26);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--accent-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(184,76,118,.28);
}

.btn-outline{
  background:transparent;
  color:var(--accent-dark);
  border:1.5px solid var(--line-strong);
  box-shadow:none;
}
.btn-outline:hover,.btn-outline:focus-visible{
  background:#fff;color:var(--accent-dark);border-color:var(--accent);box-shadow:none;
}

/* The App Store line is text, not a control — there is nothing to click yet. */
.soon{
  margin:20px 0 0;
  font-size:14.5px;
  color:var(--muted);
  letter-spacing:.02em;
}

/* --- Hero ----------------------------------------------------------------- */

.hero{
  padding:clamp(70px,11vw,140px) 0 clamp(64px,9vw,118px);
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%,var(--blush-deep) 0%,transparent 72%),
    #fff;
  text-align:center;
}

.hero h1{max-width:19ch;margin-left:auto;margin-right:auto}

/* "life'ing?" is the joke — it gets the accent and the italic. */
.lifeing{color:var(--accent);font-style:italic;white-space:nowrap}

.hero .lead{margin:0 auto 38px}

/* A thin ornamental rule, the kind a brand site uses and an app never does. */
.rule{
  width:56px;height:2px;
  background:var(--accent);
  border:0;
  margin:0 auto 30px;
  opacity:.45;
}
.rule-left{margin-left:0}

/* --- How it works: three informational columns ---------------------------- */

.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,5vw,64px);
  margin-top:58px;
}

.col{text-align:center}

.col-ico{
  width:74px;height:74px;
  margin:0 auto 22px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(85,49,64,.07);
  display:grid;
  place-items:center;
  font-size:31px;
  line-height:1;
}

.col-step{
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 8px;
}

.col-name{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 12px;
}

.col p{font-size:16.5px;color:var(--muted);margin:0}

@media (max-width:800px){
  .cols{grid-template-columns:1fr;gap:46px;margin-top:44px;max-width:420px;margin-left:auto;margin-right:auto}
}

/* --- Why: benefit list ---------------------------------------------------- */

.benefits{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  margin-top:50px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}

.benefit{
  background:#fff;
  padding:clamp(26px,3.4vw,38px);
}
.benefit h3{margin-bottom:7px}
.benefit p{font-size:16px;color:var(--muted);margin:0}

.benefit-mark{
  display:block;
  font-size:22px;
  line-height:1;
  margin-bottom:14px;
  color:var(--accent);
}

@media (max-width:760px){
  .benefits{grid-template-columns:1fr;margin-top:38px}
}

/* --- About / editorial two-column ---------------------------------------- */

.split{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(34px,6vw,76px);
  align-items:center;
}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:30px}
}

/* A quiet list of the places dates hide. Text only — no interface. */
.scatter{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.scatter li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 18px;
  font-size:15px;
  font-weight:700;
  color:var(--body);
}

.quote{
  font-family:var(--serif);
  font-size:clamp(22px,2.9vw,31px);
  line-height:1.35;
  color:var(--shade);
  margin:30px 0 0;
}
.quote em{color:var(--accent);font-style:italic}

/* --- Closing -------------------------------------------------------------- */

.closing{
  background:
    radial-gradient(ellipse 65% 60% at 50% 0,var(--blush-deep) 0%,transparent 70%),
    var(--cream);
  border-top:1px solid var(--line);
  text-align:center;
}

/* --- Footer --------------------------------------------------------------- */

.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:44px 0 56px;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:28px;
  font-size:15px;
  font-weight:700;
}
.footer-links a{color:var(--muted)}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--accent-dark)}

.footer .copy{font-size:14.5px;color:var(--muted)}

@media (max-width:560px){
  .footer-inner{flex-direction:column;align-items:flex-start;gap:16px}
}

/* --- Prose pages (support, privacy) -------------------------------------- */

.prose{max-width:720px;margin:0 auto;padding:0 var(--gutter)}
.prose h1{font-size:clamp(33px,4.6vw,46px);margin-bottom:10px}
.prose h2{font-size:clamp(23px,2.7vw,29px);margin-top:52px}
.prose h2:first-of-type{margin-top:34px}
.prose h3{margin-top:30px;font-size:19.5px}
.prose ul{padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:9px}
.prose code{
  background:var(--blush-deep);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 7px;
  font-size:.9em;
}
.prose .updated{font-size:15px;color:var(--muted);margin-bottom:0}

.qa{border-top:1px solid var(--line);padding-top:26px;margin-top:26px}
.qa h3{margin-top:0}

/* Placeholder callout — marked loudly on purpose so no invented support
   address can quietly ship to the public. */
.placeholder{
  border:2px dashed var(--line-strong);
  background:var(--blush-deep);
  border-radius:18px;
  padding:24px 26px;
}
.placeholder .tag{
  display:inline-block;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:10px;
}

/* --- Inline icon sizing ---------------------------------------------------
   Line icons rather than emoji: they inherit the brand pink, stay crisp at
   any density, and keep the page feeling like a brand site. */

.col-ico svg{width:33px;height:33px;color:var(--accent);display:block}
.benefit-mark svg{width:21px;height:21px;color:var(--accent);display:block}