/* Sunup's pages on kindlymadeapps.com (/sunup/...). Loaded after /assets/site.css, on these pages
   only, so the other apps' pages never see it.
   The site's own structure, fonts and pieces, dressed in Sunup's colours (the Sunup look in
   C:\Claude\games-alarm\design\mockups.html, and the launcher icon): a dawn board by day and the
   night sky after dark, deep night-blue ink, and the sun's amber used sparingly. Every text colour
   here keeps at least 4.5:1 on the surfaces it sits on (checked 2 November 2026).
   Static CSS only: the site's CSP allows no scripts, no inline styles and nothing from other hosts. */

:root {
  --bg: #F7F0EA;
  --bg-deep: #EFE5DD;
  --surface: #FFFAF6;
  --surface-hero: #FFFBF8;
  --surface-line: #E9DCD3;
  --hairline: #E4D5CB;
  --sunken: #EEE2D9;
  --control: #847A93;
  --text: #1E1A38;
  --text-2: #4A4463;
  --text-3: #6B6482;
  --accent: #3B2C77;
  --accent-hi: #5B49A6;
  --accent-pressed: #2F2363;
  --accent-edge: #1B1442;
  --accent-ink: #8A2F5C;
  --accent-tint: #E8E2F6;
  --on-accent: #FFFFFF;
  --raised: #FFFCF9;
  --raised-hi: #FFFFFF;
  --raised-edge: #D6C5BA;
  --piece-line: #E2D2C7;
  --focus: #1E1A38;
  --sun-ink: #6E4300;
  --sun-tint: #FCE9C8;
  --glyph-tint: #ECE6F7;
  --glyph-ink: #3B2C77;
  /* Dawn: lavender sky to a peach horizon, ending in the board. */
  --sky: linear-gradient(180deg, #E6E1F3 0%, #F1E7EE 46%, #F8E5D8 82%, var(--bg) 100%);
  --sun-band: linear-gradient(180deg, #FFD58A, #FFB061);
  --shadow-card: 0 1px 2px rgba(40, 30, 70, 0.06), 0 8px 24px -12px rgba(40, 30, 70, 0.2);
  --shadow-shot: 0 0 0 1.5px var(--hairline), 0 18px 40px -18px rgba(40, 30, 70, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100F2A;
    --bg-deep: #0B0A20;
    --surface: #191838;
    --surface-hero: #1C1B3F;
    --surface-line: #2D2B57;
    --hairline: #2A2850;
    --sunken: #0B0A1F;
    --control: #9A92B4;
    --text: #FFF3E6;
    --text-2: #D8CCDA;
    --text-3: #A9A0BF;
    --accent: #FFC56E;
    --accent-hi: #FFDA9C;
    --accent-pressed: #F0B456;
    --accent-edge: #8A5A14;
    --accent-ink: #FFC56E;
    --accent-tint: #2F2752;
    --on-accent: #1D1636;
    --raised: #24224A;
    --raised-hi: #2D2A58;
    --raised-edge: #07061A;
    --piece-line: #36335F;
    --focus: #FFC56E;
    --sun-ink: #FFD58A;
    --sun-tint: #3A2D14;
    --glyph-tint: #2A2650;
    --glyph-ink: #FFC56E;
    /* Night: the Sunup look's sky, from midnight blue to the first plum of dawn. */
    --sky: linear-gradient(180deg, #0C1130 0%, #1A1A45 42%, #2E2257 78%, var(--bg) 100%);
    --shadow-card: 0 0 0 1px var(--surface-line), 0 14px 28px -18px rgba(0, 0, 0, 0.8);
    --shadow-shot: 0 0 0 1.5px var(--surface-line), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --grain-opacity: 0.035;
  }
}

/* ---- Pieces in Sunup's inks ----------------------------------------------------------------- */

.faq summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4463' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8CCDA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  }
}
.faq details[open] { box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--piece-line); }

/* Ticks: the site's grid version splits an item with bold words into separate cells, so these
   pages place the tick beside a normal text block instead (as Site Diary's do). */
.ticks li { display: block; position: relative; padding-left: 44px; min-height: 30px; }
.ticks li::before { position: absolute; left: 0; top: 0.08em; }

/* "Free" and "Premium" labels on the games and settings. */
.tier { display: inline-flex; align-items: center; align-self: center; justify-self: start; min-height: 32px; margin: 0; padding: 2px 14px; border-radius: 999px; background: var(--accent-tint); color: var(--text); font-weight: 700; font-size: 1.0625rem; }
.tier-free { background: var(--success-tint); color: var(--success-ink); }
.tier-premium { background: var(--sun-tint); color: var(--sun-ink); }
/* The same, inline at the end of a setting's description: what the free version allows, or Premium. */
.tag-free, .tag-premium { display: inline-block; margin-left: 4px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 1.0625rem; line-height: 1.65; }
.tag-free { background: var(--success-tint); color: var(--success-ink); }
.tag-premium { background: var(--sun-tint); color: var(--sun-ink); }

/* ---- The product page ------------------------------------------------------------------------ */

.su-hero { background: var(--sky); }
.su-hero h1 { max-width: 16ch; }
.su-hero .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-inline: auto; width: 100%; }
.su-hero .shots li:nth-child(2) { margin-top: 36px; }
.shots img { aspect-ratio: 300 / 647; }
.get .note { max-width: 30rem; }

/* How a game stops the alarm: four numbered steps. */
.su-steps { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.su-steps > li { margin: 0; counter-increment: step; display: grid; gap: 8px; align-content: start; }
.su-steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sun-tint);
  color: var(--sun-ink);
  font: 800 1.4rem/1 var(--font-display);
}
.su-steps h3 { margin: 4px 0 0; font-size: 1.35rem; }
.su-steps p { margin: 0; color: var(--text-2); }
.su-fair { margin-top: 22px; display: grid; gap: 10px; }
.su-fair h3 { margin: 0; }
.su-fair p { margin: 0; color: var(--text-2); }

/* The "Will it ring?" card. */
.su-check { display: grid; gap: 12px; align-content: start; align-self: start; }
.su-check h3 { margin: 0; }
.su-check p { margin: 0; color: var(--text-2); }
.su-honest { margin-top: 22px; color: var(--text-2); font-size: 1.125rem; max-width: var(--measure); }

/* The games: the site's game cards, with Sunup's glyph tiles and a Free or Premium label. */
.su-glyph { background: var(--glyph-tint); color: var(--glyph-ink); }

/* Feature rows: a phone and its story (as on Site Diary's page). */
.feat { display: grid; gap: 22px; align-items: center; }
.feat figure { margin: 0; justify-self: center; width: min(72%, 280px); }
.feat figure img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-shot); background: var(--bg-deep); aspect-ratio: 300 / 647; }
.feat h2 { margin-bottom: 0.4em; }
.feat p { color: var(--text-2); }
.feat strong { color: var(--text); }

/* Per-alarm settings: a list of settings and their choices, two columns on wide screens. */
.su-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; margin: 36px 0 0; }
.su-settings > div { padding: 16px 0; border-top: 1.5px solid var(--hairline); }
.su-settings dt { font-weight: 800; margin: 0 0 4px; }
.su-settings dd { margin: 0; color: var(--text-2); font-size: 1.125rem; }

/* The three looks: a phone and its words. Side by side on phones, in a row on wide screens. */
.su-looks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; list-style: none; padding: 0; margin: 0; }
.su-looks li { margin: 0; }
.su-looks figure { margin: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: center; }
.su-looks img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-shot); background: var(--bg-deep); aspect-ratio: 300 / 647; }
.su-looks figcaption { color: var(--text-2); font-size: 1.125rem; line-height: 1.45; }
.su-looks figcaption b { display: block; margin-bottom: 4px; color: var(--text); font: 700 1.45rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.su-note { margin: 26px 0 0; color: var(--text-2); font-size: 1.0625rem; max-width: var(--measure); }

/* Mornings. */
.su-mornings { display: grid; gap: 12px; align-content: start; align-self: start; }
.su-mornings h3 { margin: 0; }
.su-mornings p { margin: 0; color: var(--text-2); }

/* Price (as on Site Diary's page), with a band of morning sun on the free trial. */
.plans { display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.plans > li { margin: 0; }
.plan { position: relative; height: 100%; display: grid; gap: 10px; align-content: start; }
.plan h3 { margin: 0; font-size: 1.6rem; }
.plan p { margin: 0; color: var(--text-2); }
.plan .ticks { margin: 6px 0 0; gap: 10px; }
.plan .ticks li { font-size: 1.125rem; }
.plan-free { padding-left: calc(clamp(20px, 4vw, 32px) + 10px); }
.plan-free::before { content: ''; position: absolute; left: 14px; top: 22px; bottom: 22px; width: 8px; border-radius: 4px; background: var(--sun-band); }
.plan-premium { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--accent-edge); }
.plan-always { background: var(--success-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--success-ink) 35%, transparent); }
.plan-always p, .plan-always li { color: var(--text); }
.plan .big, .big { margin: 0; font: 800 clamp(2rem, 1.6rem + 1.6vw, 2.6rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.price-note { margin-top: 18px; color: var(--text-2); font-size: 1.125rem; max-width: var(--measure); }

@media (min-width: 640px) {
  .su-hero .shots { gap: 22px; }
}
@media (min-width: 760px) {
  .su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-fair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; }
  .su-fair h3 { grid-column: 1 / -1; }
  .su-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .su-looks figure { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .su-looks img { width: min(100%, 260px); border-radius: 22px; }
  .su-looks figcaption { max-width: 21rem; text-align: center; }
}
@media (min-width: 820px) {
  .feat { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
  .feat figure { width: 100%; }
  .su-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .su-hero .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---- Text pages (privacy, terms, help) ---------------------------------------------------------- */

.page h2 { scroll-margin-top: 16px; }
.page .note { background: var(--sunken); border-radius: 16px; padding: 14px 18px; font-size: 1.125rem; }
.page .note > :last-child { margin-bottom: 0; }
.faq-group { margin-top: 2.2em; }
.faq-group > p { color: var(--text-2); }
.faq .answer ol, .faq .answer ul { padding-left: 1.4em; }
.faq .answer ol li::marker { color: var(--accent-ink); font-weight: 800; }
.checklist { margin-top: 12px; }
.checklist ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.checklist li { margin: 0; }
.checklist li::marker { color: var(--accent-ink); font-weight: 800; }
.perm-list { padding-left: 1.3em; }
.perm-list li { margin-bottom: 0.8em; }
.perm-list code { font-size: 1.0625rem; overflow-wrap: anywhere; color: var(--text-2); }
.also-pages { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
.also-pages li { margin: 0; }
.also-pages a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--raised); color: var(--text); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--piece-line), 0 4px 0 var(--raised-edge); }
.also-pages a:hover { background: var(--raised-hi); }
.also-pages a:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--piece-line), 0 1px 0 var(--raised-edge); }