/* Ink & Ash product page. Every rule is scoped under .p-ink.
   Brand (from the app's support site): near-black to burnt brown, white at reduced
   opacity, one ember orange, the ember-dot wordmark, system type, a 640px column.
   Structure: one column; a locked note, then sections stamped with the time left,
   the ink cooling to ash, ending at 0 m with the note erased. */
.p-ink {
  --ia-ember: #ff7333;
  --ia-text: rgba(255, 255, 255, 0.86);
  --ia-muted: rgba(255, 255, 255, 0.64);
  --ia-faint: rgba(255, 255, 255, 0.42);
  --ia-rule: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #0a0a0a 0, #120906 55%, #1a0a05 100%);
  color: var(--ia-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
.p-ink .ia-col { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) 96px; }
.p-ink h1, .p-ink h2, .p-ink h3 { font-family: inherit; color: #ffffff; letter-spacing: -0.01em; }
.p-ink a { color: var(--ia-ember); text-decoration: none; border-bottom: 1px solid rgba(255, 115, 51, 0.4); }
.p-ink a:hover { color: #ffffff; border-color: #ffffff; }
.p-ink :focus-visible { outline: 2px solid var(--ia-ember); outline-offset: 3px; }
.p-ink b { color: #ffffff; font-weight: 600; }
.p-ink p { margin: 0 0 14px; }

.p-ink .ia-top { padding: 56px 0 0; }
.p-ink .ia-mark { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.5rem; font-weight: 600; color: #ffffff; letter-spacing: -0.01em; }
.p-ink .ia-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ia-ember); box-shadow: 0 0 14px 2px rgba(255, 115, 51, 0.55); }
.p-ink .ia-eyebrow { margin: 0; font-size: 0.9375rem; color: var(--ia-faint); }

/* ---------------------------------------------------------------- the locked note */
.p-ink .ia-hero { padding: 56px 0 24px; }
.p-ink h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 20px; }
.p-ink h1 em { font-style: normal; color: var(--ia-ember); }
.p-ink .ia-lede { font-size: 1.125rem; border-left: 2px solid var(--ia-ember); padding-left: 16px; margin: 0 0 44px; }

.p-ink .ia-demo { position: relative; }
.p-ink .ia-toggle { position: absolute; left: 24px; bottom: 70px; margin: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p-ink .ia-note { position: relative; padding: 22px 24px 26px; border-radius: 22px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px -40px rgba(255, 115, 51, 0.45); overflow: hidden; }
.p-ink .ia-note-top { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ia-rule); font-size: 0.875rem; font-weight: 600; color: var(--ia-ember); }
.p-ink .ia-ink p { margin: 0 0 8px; color: #ffffff; font-size: 1.125rem; line-height: 1.5; }
.p-ink .ia-ink { filter: blur(7px); opacity: 0.55; user-select: none; }
.p-ink .ia-lockmsg { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ia-muted); }
.p-ink .ia-toggle:checked ~ .ia-note .ia-ink { filter: none; opacity: 1; user-select: text; }
.p-ink .ia-toggle:checked ~ .ia-note .ia-lockmsg { opacity: 0; visibility: hidden; }
.p-ink .ia-face { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ia-ember); clip-path: polygon(0 0, 30% 0, 30% 14%, 70% 14%, 70% 0, 100% 0, 100% 30%, 86% 30%, 86% 70%, 100% 70%, 100% 100%, 70% 100%, 70% 86%, 30% 86%, 30% 100%, 0 100%, 0 70%, 14% 70%, 14% 30%, 0 30%); }
.p-ink .ia-face::before { content: ""; position: absolute; left: 9px; top: 9px; width: 2px; height: 5px; background: var(--ia-ember); box-shadow: 10px 0 0 var(--ia-ember); }
.p-ink .ia-face::after { content: ""; position: absolute; left: 9px; bottom: 7px; width: 12px; height: 5px; border-bottom: 2px solid var(--ia-ember); border-radius: 0 0 8px 8px; }
.p-ink .ia-btn { display: inline-block; margin-top: 16px; padding: 10px 20px; border-radius: 999px; background: var(--ia-ember); color: #1a0a05; font-weight: 600; font-size: 0.9375rem; cursor: pointer; user-select: none; }
.p-ink .ia-btn:hover { background: #ff8a52; }
.p-ink .ia-btn .l { display: none; }
.p-ink .ia-toggle:checked ~ .ia-btn { background: transparent; color: var(--ia-ember); box-shadow: inset 0 0 0 1px var(--ia-ember); }
.p-ink .ia-toggle:checked ~ .ia-btn .u { display: none; }
.p-ink .ia-toggle:checked ~ .ia-btn .l { display: inline; }
.p-ink .ia-toggle:focus-visible ~ .ia-btn { outline: 2px solid #ffffff; outline-offset: 3px; }
.p-ink .ia-cap { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ia-faint); }

/* the ember ring: how much of the note's time is left */
.p-ink .ia-ring { --p: 100%; flex: none; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--ia-ember) 0 var(--p), rgba(255, 255, 255, 0.16) var(--p) 100%); -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px); }
.p-ink .ia-ring.r75 { --p: 75%; }
.p-ink .ia-ring.r50 { --p: 50%; }
.p-ink .ia-ring.r25 { --p: 25%; }
.p-ink .ia-ring.r5 { --p: 5%; }
.p-ink .ia-ring.r1 { --p: 1.5%; }
.p-ink .ia-ring.r0 { --p: 0%; }

/* ---------------------------------------------------------------- the countdown */
.p-ink .ia-step { position: relative; padding: 64px 0 8px; }
.p-ink .ia-stamp { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ia-ember); }
.p-ink .ia-stamp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 115, 51, 0.5), transparent); }
.p-ink .ia-step h2 { font-size: 1.625rem; font-weight: 600; line-height: 1.2; margin: 0 0 16px; }
/* the ink cools as the time runs down */
.p-ink .s3 h2, .p-ink .s4 h2 { color: rgba(255, 255, 255, 0.9); }
.p-ink .s4 p, .p-ink .s5 p { color: var(--ia-muted); }
.p-ink .s5 h2 { color: rgba(255, 255, 255, 0.78); }
.p-ink .s4 .ia-stamp, .p-ink .s5 .ia-stamp { color: rgba(255, 115, 51, 0.8); }

.p-ink .ia-code { display: flex; gap: 5px; margin: 18px 0 22px; }
.p-ink .ia-code span { flex: 1 1 0; max-width: 2.3em; display: grid; place-items: center; height: 2.6em; border-radius: 8px; background: rgba(255, 115, 51, 0.12); border: 1px solid rgba(255, 115, 51, 0.4); color: #ffffff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.125rem; font-weight: 600; }

.p-ink .ia-q { margin: 26px 0 6px; font-size: 1rem; font-weight: 600; color: var(--ia-ember); letter-spacing: 0; }
.p-ink .ia-more { margin-top: 28px; font-size: 0.9375rem; }

/* ---------------------------------------------------------------- 0 m */
.p-ink .ia-end { padding: 64px 0 0; }
.p-ink .ia-end .ia-stamp { color: var(--ia-faint); }
.p-ink .ia-end .ia-stamp::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent); }
.p-ink .ia-gone { padding: 56px 24px; border-radius: 22px; border: 1px dashed rgba(255, 255, 255, 0.18); text-align: center; }
.p-ink .ia-gone h2 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 500; color: var(--ia-muted); letter-spacing: 0; }
.p-ink .ia-gone p { margin: 0; color: var(--ia-faint); font-size: 0.9375rem; }

@media (min-width: 720px) {
  .p-ink .ia-top { padding-top: 88px; }
  .p-ink .ia-hero { padding-top: 72px; }
  .p-ink .ia-step, .p-ink .ia-end { padding-top: 88px; }
}

@media (prefers-reduced-motion: no-preference) {
  .p-ink .ia-ink, .p-ink .ia-lockmsg { transition: filter 0.4s ease, opacity 0.4s ease, visibility 0.4s; }
  .p-ink .ia-dot { animation: ia-flicker 3.2s ease-in-out infinite; }
  .p-ink .ia-gone h2 { animation: ia-ash 6s ease-in-out infinite alternate; }
  @keyframes ia-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.7; } 55% { opacity: 0.95; } }
  @keyframes ia-ash { from { opacity: 1; } to { opacity: 0.6; } }
}