/*
  Katun landing pages (/katun/, /katun/en/), on top of /assets/komovi.css.
  Paper by day, hearthlight by night (prefers-color-scheme), like the game.
  Art: rendered by the game's own scene code (Packages/KatunScene, `KatunScenePreview --web`).
  Contrast (WCAG): every text colour is >= 4.5:1 on the background it sits on.
*/
.katun {
  --bg: #F6F4EF;          /* paper */
  --surface: #FFFFFF;
  --surface-2: #ECE7DC;
  --ink: #16140F;
  --ink-2: #3A362D;
  --muted: #5E584C;
  --line: #DAD3C3;
  --accent: #A8380A;      /* the hut's rust roof */
  --on-accent: #FFFFFF;
  --accent-soft: #F6DECF;
  --accent-ink: #8E2F08;
  --bar-bg: rgba(246, 244, 239, .82);
}
@media (prefers-color-scheme: dark) {
  .katun {
    --bg: #0E1426;        /* the night over the peaks */
    --surface: #151C33;
    --surface-2: #121931;
    --ink: #F4E9C8;       /* hearthlight */
    --ink-2: #DCD2B6;
    --muted: #AAB1CC;
    --line: #26304F;
    --accent: #FFB45E;    /* the window at night */
    --on-accent: #1A1206;
    --accent-soft: #3A2A16;
    --accent-ink: #FFC98A;
    --bar-bg: rgba(14, 20, 38, .8);
  }
}

/* The valley under the hero text: day or night with the reader's appearance. */
.katun .valley { display: block; margin: clamp(28px, 5vw, 56px) 0 0; }
.katun .valley img {
  width: 100%; height: auto; aspect-ratio: 2120 / 1050; object-fit: cover;
  /* The sky melts into the page instead of starting at a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}
.katun .valley figcaption { max-width: var(--maxw); margin: 10px auto 0; padding: 0 var(--gutter); font-size: .85rem; color: var(--muted); }
.katun .soon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--ink-2);
}
.katun .soon svg { width: 18px; height: 18px; color: var(--accent); }

/* The six places. */
.katun .places { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.katun .places li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.katun .places h3 { margin: 10px 0 6px; font-size: 1.15rem; letter-spacing: -0.01em; }
.katun .places p { margin: 0; color: var(--ink-2); }
.katun .places svg { width: 30px; height: 30px; color: var(--accent); }

/* The herd. */
.katun .herd { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.katun .herd li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 18px; }
.katun .herd img { width: 100%; max-width: 220px; height: auto; margin: 0 auto 6px; }
.katun .herd h3 { margin: 4px 0 2px; font-size: 1.05rem; }
.katun .herd p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (prefers-color-scheme: dark) { .katun .herd img { background: #F6F4EF; border-radius: 14px; } }

/* Two up: text and a picture. */
.katun .two { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 860px) { .katun .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.katun .two img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.katun .promises { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.katun .promises li { padding-left: 30px; position: relative; color: var(--ink-2); }
.katun .promises li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent);
}

/* The Komovi strip carries the studio; the header carries Katun (frame.css, 30 Oct 2026). */
.brand-app { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 599px) { .site-nav a.wide { display: none; } }
.kf-also-wrap { padding-top: 40px; padding-bottom: 16px; }

/* Hero: one next step that exists today. */
.katun .hero-copy .actions { margin-top: 28px; }
.katun .hero-copy .soon { margin-top: 20px; }

/* Screenshots: phone frames in their own swiping container (no page overflow). */
.katun .shots { overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 4px 20px; outline-offset: 4px; }
.katun .shots ul, .katun .watches { list-style: none; margin: 0; padding: 0; }
.katun .shots ul { display: flex; gap: 22px; width: max-content; }
.katun .shots li { flex: 0 0 auto; width: clamp(190px, 62vw, 230px); }
.katun .shots figure, .katun .watches figure { margin: 0; }
.katun .shots img {
  display: block; width: 100%; height: auto; border-radius: 30px; border: 6px solid #1B1812;
  box-shadow: var(--shadow); background: var(--surface-2);
}
.katun .shots figcaption, .katun .watches figcaption { margin-top: 12px; font-size: .92rem; color: var(--ink-2); line-height: 1.4; }
@media (prefers-color-scheme: dark) { .katun .shots img, .katun .watches img { border-color: #2A3456; } }

/* How a day goes. */
.katun .day { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: d; }
.katun .day li { position: relative; padding: 20px 20px 18px; border-top: 3px solid var(--accent); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.katun .day svg { width: 28px; height: 28px; color: var(--accent); }
.katun .day h3 { margin: 8px 0 6px; font-size: 1.15rem; }
.katun .day p { margin: 0; color: var(--ink-2); }

/* A tale, set as a quote. */
.katun .tale { margin: 0; max-width: 40rem; padding: 26px 26px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.katun .tale-who { font-weight: 700; color: var(--ink); }
.katun .tale-who span { font-weight: 500; color: var(--muted); }
.katun .tale blockquote { margin: 14px 0 18px; padding: 0; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 1.12rem; line-height: 1.6; color: var(--ink); }
.katun .tale blockquote p { margin: 0 0 .8em; }
.katun .tale audio { display: block; width: 100%; max-width: 100%; }
.katun .tale .fine { margin: 8px 0 0; }

/* Apple Watch. */
.katun .watches { display: flex; flex-wrap: wrap; gap: 24px; }
.katun .watches li { width: min(100%, 200px); }
.katun .watches img { display: block; width: 100%; height: auto; border-radius: 34px; border: 5px solid #1B1812; background: #000; }
.katun .more { max-width: 46rem; font-size: 1.05rem; margin-top: 30px; }

/* Free and Pro. */
.katun .compare { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.katun .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 20px; }
.katun .plan-pro { border-color: var(--accent); }
.katun .plan h3 { margin: 0 0 4px; font-size: 1.3rem; }
.katun .plan h4 { margin: 22px 0 0; font-size: 1rem; }
.katun .plan .promises { margin-top: 14px; }
.katun .prices { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.katun .prices li { padding: 8px 12px; background: var(--surface-2); border-radius: 10px; }

/* Short FAQ (native details). */
.katun .faq { max-width: 46rem; }
.katun .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 0 0 10px; }
.katun .faq summary { cursor: pointer; font-weight: 700; }
.katun .faq summary::marker { color: var(--accent); }
.katun .faq details[open] summary { margin-bottom: 6px; }
.katun .faq ol, .katun .faq ul { padding-left: 1.3em; color: var(--ink-2); }
.katun .faq p { color: var(--ink-2); }
.katun .faq-more { margin-top: 16px; font-size: 1rem; }