/* Nomina. Night indigo and balloon yellow come from the app icon, coral from the app UI,
   and the paper from the tear-off wall calendars name days are traditionally read from. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --night-1: #19195a;
  --night-2: #3d1679;
  --night-ink: #f6efe3;
  --night-muted: #c9c0e6;
  --paper: #f7f1e7;
  --paper-2: #efe6d6;
  --card: #fffcf6;
  --ink: #1f1a45;
  --muted: #5d5878;
  --line: #e2d7c4;
  --coral: #e2574a;
  --coral-ink: #b83a2f;
  --balloon: #f7bb2c;
  --lavender: #c7b9f2;
  --sheet: #fffaf1;
  --sheet-ink: #241d48;
  --sheet-muted: #6c6584;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 22px;
  color-scheme: light;
}

/* An explicit data-theme wins over the system setting in either direction. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12102a;
    --paper-2: #1a1738;
    --card: #1f1c42;
    --ink: #f1ebfa;
    --muted: #b3aacb;
    --line: #322d5a;
    --coral-ink: #ff8a7c;
    --sheet: #f6eedf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12102a;
  --paper-2: #1a1738;
  --card: #1f1c42;
  --ink: #f1ebfa;
  --muted: #b3aacb;
  --line: #322d5a;
  --coral-ink: #ff8a7c;
  --sheet: #f6eedf;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section-lead { color: var(--muted); margin-top: 12px; max-width: 34em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--balloon); outline-offset: 3px; border-radius: 6px; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--night-1) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); color: var(--night-ink); }
.top__inner { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.3rem/1 var(--serif); letter-spacing: -0.01em; }
.brand img { border-radius: 9px; }
.top__nav { display: flex; gap: 22px; font-size: 0.95rem; }
.top__nav a, .langs a { text-decoration: none; color: var(--night-muted); }
.top__nav a:hover, .langs a:hover { color: var(--night-ink); }
.top__end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* Language menu: the current code opens a list of every language by its own name. */
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.22); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--night-ink); }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.langs[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.langs nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; border-radius: 16px; background: var(--night-1); border: 1px solid rgb(255 255 255 / 0.14); box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.6); }
.langs a { padding: 9px 12px; border-radius: 10px; font-size: 0.95rem; }
.langs a[aria-current] { color: var(--night-ink); background: rgb(255 255 255 / 0.1); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--balloon); color: #2a1e00; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.button:hover { background: #ffc943; transform: translateY(-1px); }
.button--small { min-height: 36px; padding: 0 16px; font-size: 0.92rem; }

/* Hero */
.hero { background: radial-gradient(120% 90% at 85% 10%, #4b1a8a 0%, transparent 60%), linear-gradient(180deg, var(--night-1), var(--night-2)); color: var(--night-ink); overflow: hidden; }
.hero__inner { max-width: 1120px; margin: 0 auto; padding: 72px 20px 96px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; }
.hero__lead { margin-top: 22px; max-width: 30em; font-size: 1.15rem; color: var(--night-muted); }
.hero__cta { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__note { font-size: 0.9rem; color: var(--night-muted); max-width: 18em; }
.store img { width: 150px; height: auto; }
.store:hover { opacity: 0.9; }

.hero__stage { position: relative; display: grid; justify-items: center; gap: 22px; }

/* The tear-off calendar */
.pad { position: relative; width: min(340px, 86vw); transform: rotate(-2.2deg); }
.pad::before, .pad::after { content: ""; position: absolute; inset: 14px 6px -10px; border-radius: 6px 6px 18px 18px; background: #e9dfcd; z-index: -1; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55); }
.pad::after { inset: 18px 12px -18px; background: #d8ccb7; z-index: -2; }
.leaf { position: relative; background: var(--sheet); color: var(--sheet-ink); border-radius: 6px 6px 18px 18px; overflow: hidden; text-align: center; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset; }
.leaf__head { position: relative; background: var(--coral); color: #fff6ea; padding: 26px 16px 14px; }
.leaf__ring { position: absolute; top: -8px; width: 12px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, #d9d2e8, #f4effa 50%, #c9c0dc); box-shadow: 0 2px 3px rgb(0 0 0 / 0.25); }
.leaf__ring:first-child { left: 26%; }
.leaf__ring:nth-child(2) { right: 26%; }
.leaf__month { font: 600 0.95rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.leaf__body { padding: 18px 24px 26px; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgb(36 29 72 / 0.04) 31px 32px); }
.leaf__weekday { font: 500 0.95rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sheet-muted); }
.leaf__day { font: 700 clamp(6.5rem, 18vw, 8.6rem)/0.9 var(--serif); color: var(--coral); letter-spacing: -0.05em; margin: 8px 0 10px; font-variant-numeric: lining-nums; }
.leaf__label { font: italic 400 1.05rem/1.2 var(--serif); color: var(--sheet-muted); }
.leaf__names { font: 600 clamp(1.6rem, 4.6vw, 2.1rem)/1.12 var(--serif); margin-top: 6px; min-height: 1.1em; text-wrap: balance; overflow-wrap: anywhere; }
.leaf__more { margin-top: 10px; font-size: 0.86rem; color: var(--sheet-muted); min-height: 1.3em; text-wrap: balance; }
.leaf--torn { position: absolute; inset: 0; transform-origin: 20% 0; animation: tear 1.1s cubic-bezier(0.55, 0, 0.75, 0.3) 0.7s forwards; z-index: 2; }
@keyframes tear {
  0% { transform: rotate(0); opacity: 1; }
  25% { transform: rotate(-4deg) translateY(4px); }
  100% { transform: rotate(18deg) translate(60px, 520px); opacity: 0; }
}

/* The stacked sheets hang below the pad, so the controls need room to clear them. */
.pad__foot { display: grid; gap: 8px; justify-items: center; text-align: center; margin-top: 26px; }
.picker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--night-muted); }
.picker select { appearance: none; -webkit-appearance: none; font: 600 0.95rem var(--sans); color: var(--night-ink); background: rgb(255 255 255 / 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f6efe3' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; padding: 9px 38px 9px 16px; min-height: 40px; }
.picker select option { color: #1f1a45; }
.next { font-size: 0.95rem; color: var(--night-muted); }
.next b { color: var(--night-ink); font-weight: 600; }
.next span { display: inline-block; min-width: 4.5em; text-align: right; margin-right: 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }

.confetti i { position: absolute; width: 12px; height: 12px; border-radius: 3px; animation: drift 9s ease-in-out infinite alternate; }
.confetti i:nth-child(1) { top: 4%; left: 6%; background: var(--coral); transform: rotate(20deg); }
.confetti i:nth-child(2) { top: 18%; right: 4%; background: var(--lavender); border-radius: 50% 50% 0 50%; animation-delay: -2s; }
.confetti i:nth-child(3) { top: 52%; left: 0; background: var(--night-ink); width: 10px; height: 10px; animation-delay: -4s; }
.confetti i:nth-child(4) { top: 64%; right: 2%; background: var(--balloon); border-radius: 50%; width: 9px; height: 9px; animation-delay: -1s; }
.confetti i:nth-child(5) { top: 2%; right: 26%; background: var(--balloon); width: 8px; height: 14px; animation-delay: -3s; }
.confetti i:nth-child(6) { bottom: 20%; left: 10%; background: var(--lavender); width: 14px; height: 8px; border-radius: 8px; animation-delay: -5s; }
@keyframes drift { to { translate: 0 14px; rotate: 30deg; } }
@media (prefers-reduced-motion: reduce) { .confetti i { animation: none; } }

/* Lookup */
.lookup { padding: 88px 0 72px; }
.lookup__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.search { margin-top: 26px; }
.search input { width: 100%; font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--serif); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 22px; transition: border-color 0.15s ease; }
.search input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-style: italic; }
.search input:focus { outline: none; border-color: var(--coral); }
.results { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.results li { font-size: 1.1rem; padding: 4px 2px; }
.results b { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-right: 6px; }
.results__empty { color: var(--muted); }
.week { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 18px; }
.week h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; display: flex; justify-content: space-between; gap: 12px; }
.week__country { color: var(--muted); font-weight: 500; }
.week ol { list-style: none; margin: 14px 0 0; padding: 0; }
.week li { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: baseline; }
.week__names { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.week__day { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.week__day b { color: var(--coral-ink); font-weight: 600; }
.week__primary { font: 600 1.15rem/1.25 var(--serif); }
.week__rest { font-size: 0.88rem; line-height: 1.45; color: var(--muted); }

/* Features */
.features { padding: 40px 0 40px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature--flip .feature__copy { order: 2; }
.feature__copy { max-width: 28em; }
.feature h3 { font-size: clamp(2rem, 4vw, 2.8rem); }
.feature__copy p:last-child { margin-top: 16px; font-size: 1.12rem; color: var(--muted); }
.phone { margin: 0; justify-self: center; width: min(300px, 74vw); border-radius: 48px; padding: 10px; background: #0f0d1c; box-shadow: 0 0 0 1.5px #3a3550, 0 40px 80px -30px rgb(25 20 70 / 0.45); }
.phone img { border-radius: 38px; aspect-ratio: 720 / 1565; object-fit: cover; }

/* Countries */
.countries { padding: 64px 0; background: var(--paper-2); }
.countries__grid { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.countries__grid button { display: inline-flex; gap: 8px; align-items: center; font: inherit; font-weight: 600; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 10px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.countries__grid button:hover { border-color: var(--coral); transform: translateY(-1px); }
.flag { font-size: 1.25rem; line-height: 1; }

/* Price */
.price { padding: 96px 0 88px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.plan header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3 { font-size: 1.9rem; }
.tag { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; background: var(--paper-2); color: var(--muted); }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 28px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border-left: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(-45deg); }
.plan--premium { background: linear-gradient(160deg, var(--night-1), var(--night-2)); color: var(--night-ink); border-color: transparent; }
.plan--premium .tag { background: var(--balloon); color: #2a1e00; }
.plan--premium li::before { border-color: var(--balloon); }
.price__note { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }

/* Privacy */
.privacy { padding: 0 0 88px; }
.privacy__inner { border-top: 1px solid var(--line); padding-top: 72px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px 56px; }
.privacy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; grid-row: span 2; }
.privacy li { padding-left: 20px; border-left: 3px solid var(--lavender); color: var(--muted); }
.arrow-link { align-self: end; font-weight: 600; color: var(--coral-ink); text-decoration: none; }
.arrow-link::after { content: " →"; }
.arrow-link--back::after { content: none; }
.arrow-link--back::before { content: "← "; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* FAQ */
.faq { padding: 88px 0; background: var(--paper-2); }
.faq__inner { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 56px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 600 1.25rem/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font: 400 1.6rem/1 var(--sans); color: var(--coral-ink); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 40em; }
.faq a { color: var(--coral-ink); }

/* Closer and footer */
.closer { padding: 96px 0; text-align: center; }
.closer__inner { display: grid; justify-items: center; gap: 22px; }
.closer img { border-radius: 22px; box-shadow: 0 20px 40px -18px rgb(40 20 110 / 0.5); }
.foot { border-top: 1px solid var(--line); padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); }
.foot__inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; font-size: 0.92rem; color: var(--muted); }
.brand--quiet { font-size: 1.05rem; color: var(--ink); }
.brand--quiet img { border-radius: 7px; }
.foot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--ink); }
.foot__by { margin-left: auto; }
.foot__langs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.85rem; }
.foot__langs a { text-decoration: none; }
.foot__langs a:hover, .foot__langs a[aria-current] { color: var(--ink); }

/* Legal and 404 */
.legal { padding: 56px 0 88px; }
.legal__inner { max-width: 760px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 18px 0 28px; }
.legal__note { margin: -14px 0 28px; font-size: 0.9rem; font-style: italic; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.15rem; margin-bottom: 8px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--coral-ink); }
.last-updated { font-size: 0.92rem; color: var(--muted); }
.good-news, .info-box, .highlight, .warning-box, .contact { margin: 20px 0; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.good-news, .highlight { border-left: 4px solid var(--lavender); }
.warning-box { border-left: 4px solid var(--balloon); }
.notfound { text-align: center; display: grid; justify-items: center; gap: 16px; padding: 40px 20px; }
.notfound .leaf__day { margin: 0; }

/* Narrow screens */
@media (max-width: 900px) {
  .top__nav { display: none; }
  .hero__inner, .lookup__inner, .feature, .privacy__inner, .faq__inner, .plans { grid-template-columns: 1fr; }
  .hero__inner { padding: 44px 20px 72px; gap: 52px; }
  .feature { gap: 36px; padding: 44px 0; }
  .feature--flip .feature__copy { order: 0; }
  .privacy ul { grid-row: auto; }
  .faq__inner { gap: 24px; }
  .lookup__inner { gap: 36px; }
  .foot__by { margin-left: 0; }
}
@media (max-width: 520px) {
  .top__inner { gap: 12px; padding: 10px 16px; }
  .wrap { padding: 0 16px; }
  .brand span { display: none; }
  .top__end { gap: 8px; }
  /* The menu spans the sticky header instead of hanging off the narrow language button. */
  .langs { position: static; }
  .langs nav { left: 16px; right: 16px; top: calc(100% + 4px); width: auto; }
  .hero__inner { padding: 36px 16px 64px; }
  .lookup, .countries, .faq, .price { padding: 64px 0; }
  .plan { padding: 24px; }
  .week { padding: 20px 18px 12px; }
  .pad { width: min(300px, 82vw); }
  .leaf__day { font-size: 6rem; }
  .hero__cta { margin-top: 26px; }
}