/* Card Maker — site styles.
   One small stylesheet, no framework: four static pages that App Review and
   users need to load quickly and reliably.

   Class names are shared with the legal pages, so restyling here restyles
   privacy, terms and support without touching a word of their content. */

/* Display face is a printed-stationery reference — this app makes cards people
   hand over. Body face stays a neutral workhorse so the serif carries the
   personality alone. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Light only, matching the app, which ships with
     UIUserInterfaceStyle = Light. */
  color-scheme: light;

  /* The app's own accent, so the site and the product agree. */
  --accent: #FF002E;
  --accent-ink: #FFFFFF;
  /* Text-safe variant of the same hue: 5.4:1 on white. */
  --accent-text: #D60027;
  /* A tint for washes, where the full red would shout. */
  --accent-soft: #FFF1F3;

  --ink: #14151A;
  --ink-2: #3A3D47;
  /* Cool-leaning neutrals: the accent is warm, and a cool grey grounds it
     rather than competing. */
  --muted: #6B7280;
  --line: #E6E8EC;
  --bg: #FFFFFF;
  --surface: #F6F7F9;

  --radius: 14px;
  --radius-sm: 10px;
  --measure: 760px;
  --wide: 1080px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}



* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

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

/* ---------------------------------------------------------------- header - */

header.site {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  z-index: 10;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* A miniature of the product itself, rather than a generic dot. */
.brand::before {
  content: "";
  width: 26px; height: 16px;
  border-radius: 3px;
  background: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
  flex: none;
}
/* Gap rather than a margin on each link: when the header wraps on a narrow
   screen the nav then lines up with the brand instead of sitting indented. */
nav { display: flex; gap: 20px; flex-wrap: wrap; }
nav a {
  font-size: 15px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
}
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------------ hero - */

.hero { padding: 72px 0 8px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 48px; }
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p.lead {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 32em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text);
  margin-bottom: 20px;
}

/* ------------------------------------------------------- the card fan ---- */
/* Three real templates from the catalogue, drawn as inline SVG: no image
   assets to ship, sharp at any size, and they cannot drift out of date the
   way a screenshot does. */

.cardfan {
  position: relative;
  padding: 8px 4px;
  display: grid;
  place-items: center;
  min-height: 350px;
}
.cardfan svg {
  position: absolute;
  width: 68%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(10, 12, 20, 0.28),
              0 2px 6px rgba(10, 12, 20, 0.08);
}
.cardfan svg:nth-child(1) { transform: translate(-26%, -33%) rotate(-10deg); }
.cardfan svg:nth-child(2) { transform: translate(0, 0) rotate(-1deg); z-index: 2; }
.cardfan svg:nth-child(3) { transform: translate(26%, 33%) rotate(8deg); }
/* Responsive fan rules must follow the base ones: same specificity, so source
   order decides, and above them they were silently overridden. */
@media (max-width: 860px) {
  /* Stacked, the fan's column is much wider, so the desktop offsets would push
     the outer cards past the page edge. */
  .cardfan svg { width: 56%; }
  .cardfan svg:nth-child(1) { transform: translate(-18%, -27%) rotate(-9deg); }
  .cardfan svg:nth-child(3) { transform: translate(18%, 27%) rotate(7deg); }
}
@media (max-width: 520px) {
  .cardfan { min-height: 290px; }
  .cardfan svg { width: 72%; }
  .cardfan svg:nth-child(1) { transform: translate(-13%, -26%) rotate(-8deg); }
  .cardfan svg:nth-child(2) { transform: translate(0, 0) rotate(-1deg); }
  .cardfan svg:nth-child(3) { transform: translate(13%, 26%) rotate(7deg); }
}

/* ---------------------------------------------------------------- blocks - */

main { padding: 44px 0 20px; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 34px);
  letter-spacing: -0.01em;
  margin: 56px 0 6px;
  line-height: 1.15;
}
h2:first-child { margin-top: 0; }
.section-note { color: var(--muted); margin: 0 0 26px; font-size: 16px; }

main h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 46px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 8px;
}
main h3 { font-size: 17px; margin: 24px 0 6px; font-weight: 600; }
/* The container may be wide for grids and card art, but running text still
   wants ~65 characters or it becomes hard to track line to line. */
main > p, .section-note, main > ul { max-width: 68ch; }
main p, main li { color: var(--ink-2); }
main ul { padding-left: 20px; }
main li { margin: 7px 0; }
.updated { color: var(--muted); font-size: 15px; margin: 0 0 30px; }

/* Features: no boxes. A hairline and an accent tick carry the grouping, which
   reads lighter than eight identical bordered rectangles. */
.grid {
  display: grid;
  gap: 30px 34px;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  margin: 30px 0 8px;
}
.card {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 28px; height: 2px;
  background: var(--accent);
}
.card h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* ----------------------------------------------------------------- table - */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 22px 0 10px;
  font-size: 15.5px;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th, tr:first-child th {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--ink);
}
/* The paid column is the one being read most closely — give it a ground. */
td:last-child, th:last-child { background: var(--surface); font-weight: 500; }
tr:last-child td { border-bottom: none; }
td:first-child { color: var(--ink); }

.note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 15px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 22px 0;
}
.note p { margin: 0; }

/* --------------------------------------------------------------- buttons - */

.btn-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 11px;
  background: var(--accent-text);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { opacity: .9; transform: translateY(-1px); }
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.secondary:hover { border-color: var(--ink); opacity: 1; }

/* ------------------------------------------------------------ app cards - */

.apps-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 24px 0 10px;
}
.app-card {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.app-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
/* Real App Store artwork. The hairline stops a light icon dissolving into the
   card behind it, which is why Apple draws one too. */
.app-ic {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: var(--surface);
}
.app-meta strong { display: block; font-size: 14.5px; line-height: 1.3; font-weight: 600; }
.app-meta span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.all-apps { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 500; }

/* ---------------------------------------------------------------- footer - */

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 30px 0 52px;
  color: var(--muted);
  font-size: 15px;
}
footer.site a { margin-right: 18px; color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  justify-content: space-between;
  align-items: center;
}