/* MyPrintBook — the shared brand layer: type and tokens.
 *
 * Every value here is measured off the iOS app rather than invented, so the
 * website and the phone are recognisably one product.
 *
 * TYPE. The app sets its headlines in Comfortaa (rounded) and its one serif
 * line in Playfair Display; body copy is the platform's own face. We do exactly
 * that. The TTFs are already on this server for the studio editor, so they cost
 * nothing new — but Inter is SIX separate files of ~340KB and the system stack
 * is indistinguishable from it at body sizes, so only the two faces that carry
 * the brand are downloaded. That is ~400KB instead of ~2MB.
 *
 * `swap`, not `block`: the words appear immediately in the fallback and settle
 * into Comfortaa when it lands. `block` leaves the hero blank while it loads.
 */
@font-face{
  font-family:"Comfortaa";
  src:url("/studio/fonts/Comfortaa-Variable.ttf") format("truetype");
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PlayfairDisplay";
  src:url("/studio/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
  font-weight:600 800;font-style:normal;font-display:swap;
}

:root{
  /* ---- colour (from Theme.swift / Tint.defaultHex) ---- */
  --ink:#112234;              /* headings, body */
  --ink-soft:#4a5a6b;         /* secondary copy */
  --ink-faint:#8a939c;        /* captions, meta */
  --accent:#E8718F;           /* the app's tint: primary actions, active states */
  --accent-deep:#dd5f80;      /* its hover */
  --accent-wash:#FCEFF3;      /* chips, secondary buttons, avatar ground */
  --pink:#FE96AF;
  --cyan:#5FDDEC;
  --cyan-wash:rgba(95,221,236,.18);   /* the hero eyebrow capsule */
  --paper:#FAF9F5;            /* marketing ground */
  --ground:#F7F6F5;           /* app-screen ground */
  --card:#ffffff;
  --line:#E8E4E4;                /* the app's rule (Theme.swift) */
  --line-soft:#EFEDEB;
  --grad:linear-gradient(120deg,#5FDDEC,#FE96AF);   /* splash + marketing CTA */

  /* ---- type ---- */
  --font-head:"Comfortaa", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-serif:"PlayfairDisplay", Georgia, "Times New Roman", serif;
  --font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Comfortaa runs small and wide for its point size — the app compensates
     with `size * 0.86` and -0.8 tracking. These mirror that. */
  --head-tracking:-0.02em;

  /* ---- shape (card radius 22, hero 24, pill 999) ---- */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:24px; --r-pill:999px;

  /* ---- elevation ---- */
  --shadow-card:0 1px 2px rgba(17,34,52,.04), 0 10px 28px rgba(17,34,52,.07);
  --shadow-pop:0 2px 6px rgba(17,34,52,.06), 0 18px 44px rgba(17,34,52,.16);
  --shadow-pill:0 2px 8px rgba(17,34,52,.07), 0 14px 34px rgba(17,34,52,.16);

  /* ---- status, previously inlined page by page ---- */
  --ok:#1A6A48;  --ok-bg:#F1FAF5;  --ok-line:#CDEADB;
  --err:#A8455D; --err-bg:#FDEDF1;
  --ink-45:rgba(17,34,52,.45);
  --accent-ring:rgba(232,113,143,.22);

  /* ---- rhythm ---- */
  --gap-xs:8px; --gap-sm:12px; --gap:20px; --gap-lg:32px; --gap-xl:56px;
  --wrap:1080px;
}

/* ---- primitives shared by every page ---------------------------------- */

.mpb-h1,.mpb-h2,.mpb-h3{
  font-family:var(--font-head);
  letter-spacing:var(--head-tracking);
  color:var(--ink);
  margin:0;
}
.mpb-h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1.08}
.mpb-h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.14}
.mpb-h3{font-size:17px;font-weight:700;line-height:1.25}

/* The one serif line the app uses for its price claim. */
.mpb-serif{font-family:var(--font-serif);font-weight:700;color:var(--ink)}

/* The eyebrow above a hero: small, tracked, in a pale capsule. */
.mpb-eyebrow{
  display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  background:var(--cyan-wash);padding:6px 13px;border-radius:var(--r-pill);
}
.mpb-eyebrow.rose{background:var(--accent-wash);color:var(--accent)}

/* Buttons. Solid rose is the in-app primary; the gradient is the marketing
   CTA. Both are pills, because nothing in this product has a square corner. */
.mpb-act{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-size:15px;font-weight:700;
  padding:12px 22px;border-radius:var(--r-pill);border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;line-height:1;
}
.mpb-act.primary{background:var(--accent);color:#fff}
.mpb-act.primary:hover{background:var(--accent-deep);color:#fff}
.mpb-act.brand{background:var(--grad);color:#fff}
.mpb-act.brand:hover{color:#fff;filter:saturate(1.08)}
.mpb-act.soft{background:var(--accent-wash);color:var(--accent)}
.mpb-act.soft:hover{background:#f8e2e9}
.mpb-act.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mpb-act.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* The card. No border — the app has none; the lift comes from shadow. */
.mpb-card{
  background:var(--card);border:0;border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:hidden;
}

/* A section heading with an optional action on the right. */
.mpb-sec{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 14px;
}
.mpb-sec a{
  font-size:14px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;
}
.mpb-sec a:hover{color:var(--accent-deep)}

.mpb-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

@media(max-width:760px){
  .mpb-wrap{padding:0 16px}
}