/* zettai.app — the app's own dark palette (src/ui/tokens.ts) and type (Inter + Instrument Serif). */

/* ---- Fonts, self-hosted (SIL OFL 1.1, licences beside the files in /fonts). Latin + Latin Extended: the Turkish
   letters ş ğ ı İ are in latin-ext, ö ü ç in latin. Inter is one variable file per subset (400-600 used). ---- */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Metric-matched stand-ins, used only until the real faces arrive, so the swap moves nothing: widths measured against the
   real fonts (Inter/Arial 1.073, Instrument Serif italic/Georgia 0.795, regular/Georgia 0.76). */
@font-face { font-family: "Inter Fallback"; src: local(Arial), local(Helvetica); size-adjust: 107.3%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: normal; src: local(Georgia), local("Times New Roman"); size-adjust: 76%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local(Georgia-Italic); size-adjust: 79.5%; }

:root {
  --bg: #0B0B0C;
  --surface: #141416;
  --hairline: #2A2A2D;
  --text: #EDE8E1;
  --muted: #878581;
  --accent: #D9362B;
  --text-hover: #F5F1EB;   /* button hover: the ink one step lighter, never pure white */
}

* { box-sizing: border-box; }

html { background: var(--bg); color-scheme: dark; accent-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 75%, var(--bg)); color: var(--text-hover); }   /* vermilion, one step into the page ink so the text keeps >= 4.5:1 */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 16px 64px;
}

a { color: var(--text); text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { width: 48px; height: 48px; border-radius: 12px; display: block; }
.wordmark { font-weight: 600; font-size: 20px; letter-spacing: 0.32em; }
.wordmark small { font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); margin-left: 4px; }

.rule { width: 32px; height: 2px; background: var(--accent); margin: 24px 0; border: 0; }

.line {
  font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.25;
  margin: 0;
}
.line + .line { color: var(--muted); }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 48px 0 12px;
}

nav.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }

h1 { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-weight: 400; font-size: 36px; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 16px; font-weight: 600; margin: 32px 0 8px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 20px; margin: 0 0 12px; }
code { font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); background: var(--surface); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.lead { font-size: 18px; }

.lang { display: flex; gap: 16px; font-size: 14px; margin: 0 0 32px; }
.policy { padding-top: 32px; }
.policy + .policy { margin-top: 48px; border-top: 1px solid var(--hairline); }


/* ---- Two languages in one page: the <html data-lang> set by lang.js decides which shows. ---- */
[data-lang="tr"] [lang="en"]:not(html), [data-lang="en"] [lang="tr"]:not(html) { display: none !important; }

.langs { display: flex; gap: 4px; font-size: 13px; letter-spacing: 0.08em; }
.langs button { font: inherit; color: var(--muted); background: none; border: 0; padding: 8px; cursor: pointer; letter-spacing: inherit; }
.langs button[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }

/* ---- Landing ---- */
.wide { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }
.hero { position: relative; margin: 0 -16px 0; min-height: 440px; display: flex; align-items: flex-end; }
/* The photograph is a real <img> (found by the HTML parser, fetchpriority high), laid under the gradient exactly as the old background was. */
picture { display: contents; }
picture > source { display: none; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,11,12,0) 30%, var(--bg) 100%); }
.hero-text { position: relative; z-index: 1; padding: 0 16px 32px; max-width: 640px; }
.hero-text .line { font-size: 40px; }
.cta { display: inline-block; margin-top: 28px; padding: 14px 22px; background: var(--text); border: 1px solid var(--text); color: var(--bg);
       text-decoration: none; font-weight: 600; letter-spacing: 0.01em; border-radius: 2px; }
@media (hover: hover) { .cta:hover { background: var(--text-hover); border-color: var(--text-hover); } }
.cta-note { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }

.trust { margin: 0; padding: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }   /* trust line under the hero: --text, not --muted, for small-text legibility */
.feature { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 56px 0; border-top: 1px solid var(--hairline); }
.feature h2 { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-weight: 400; font-style: italic; font-size: 32px; line-height: 1.2; margin: 0 0 12px; }
.feature p { color: var(--text); max-width: 520px; }
.feature .eyebrow { margin: 0 0 12px; }
.shot { width: 100%; height: auto; max-width: 320px; justify-self: center; border-radius: 24px; border: 1px solid var(--hairline); display: block; }
@media (min-width: 760px) {
  .hero { margin: 24px 0 0; min-height: 520px; border-radius: 4px; overflow: hidden; }
  .hero-text { padding: 0 40px 48px; }
  .hero-text .line { font-size: 48px; }
  .feature { grid-template-columns: 1.1fr 0.9fr; gap: 64px; padding: 80px 0; }
  .feature:nth-of-type(even) .copy { order: 2; }
}

.join-block { padding: 64px 0 16px; border-top: 1px solid var(--hairline); }
.join-block h2 { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-weight: 400; font-style: italic; font-size: 36px; margin: 0 0 12px; }

/* ---- Join page ---- */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 32px 0; }
ol.steps li { counter-increment: step; position: relative; padding: 0 0 28px 56px; margin: 0; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border: 1px solid var(--hairline);
                      display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text); }
ol.steps h2 { font-size: 17px; font-weight: 600; margin: 4px 0 6px; }
.soon { color: var(--muted); font-style: italic; }

/* The landing is wide; the 680px column above is the policy page's. */
.wide main { max-width: none; padding: 0; }

/* A section that needs two parts of one screen: the same screen, scrolled — shown as two, not stitched. */
.shots { display: grid; gap: 12px; width: 100%; max-width: 320px; justify-self: center; }
.shots .shot { max-width: none; }

/* Hero, colour only (Onur, 25.09): the promise is the bright line, the negation the quiet one — in the app's
   onPhotoMuted, which stays readable over the photograph where the page's own muted ink disappeared. */
.hero-text .line.pre { color: #A9A49D; }
.hero-text .line.main { color: var(--text); }

/* ---- The shared header and footer (partials/, stamped by tools/ortak.mjs — edit there, not here) ---- */
html { scroll-padding-top: 76px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-top { position: sticky; top: 0; z-index: 20; background: rgba(11, 11, 12, 0.88);
            -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.site-top-in { max-width: 1040px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 8px; }
.site-top .brand { gap: 10px; margin-right: auto; }
.site-top .brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-top .wordmark { font-size: 16px; letter-spacing: 0.28em; }
.nav { display: flex; }
.nav a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 8px; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent);
                              text-decoration-thickness: 2px; text-underline-offset: 8px; }
.site-top .langs button { padding: 8px 6px; }
.btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; margin-left: 4px; background: var(--text); color: var(--bg);
       font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 2px; white-space: nowrap; }
@media (hover: hover) { .btn:hover { background: var(--text-hover); } }
.btn[aria-current="page"] { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (max-width: 480px) {
  .site-top-in { gap: 4px; }
  .site-top .wordmark small { display: none; }
  .site-top .wordmark { letter-spacing: 0.22em; }
  /* On a phone the switch shows only the other language — one tap, one word. */
  [data-lang="tr"] .site-top .langs button[data-set-lang="tr"],
  [data-lang="en"] .site-top .langs button[data-set-lang="en"] { display: none; }
}

.site-foot { border-top: 1px solid var(--hairline); margin-top: 64px; }
.site-foot-in { max-width: 1040px; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 16px; }
.brand.small { gap: 10px; }
.brand.small img { width: 28px; height: 28px; border-radius: 7px; }
.brand.small .wordmark { font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-note { font-size: 13px; color: var(--muted); margin: 0; }

/* ---- Landing: the way into /why and /faq ---- */
.more { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--muted); padding-bottom: 2px; }
.more:hover { border-bottom-color: var(--accent); }
.more::after { content: " →"; }

.excerpt { padding: 56px 0 48px; max-width: 680px; }
.excerpt h2 { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-weight: 400; font-style: italic; font-size: 32px; line-height: 1.2; margin: 0 0 20px; }
.excerpt blockquote { margin: 0; font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-style: italic; font-size: 28px; line-height: 1.3; }
.excerpt .by { color: var(--muted); font-size: 14px; margin: 16px 0 24px; }

.faq-teaser { padding: 56px 0 32px; border-top: 1px solid var(--hairline); max-width: 760px; }
.faq-teaser h2 { font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-weight: 400; font-style: italic; font-size: 32px; line-height: 1.2; margin: 0 0 20px; }
details.qa { border-top: 1px solid var(--hairline); }
details.qa:last-of-type { border-bottom: 1px solid var(--hairline); }
details.qa summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-weight: 600; position: relative; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 22px; font-weight: 400; color: var(--muted); }
details.qa[open] summary::after { content: "−"; }
details.qa p { margin: 0 0 20px; max-width: 640px; }
.faq-teaser .more { display: inline-block; margin-top: 24px; }
@media (max-width: 400px) {
  .site-top .wordmark { font-size: 15px; letter-spacing: 0.16em; }
  .site-top .brand { gap: 8px; }
  .nav a { padding: 8px 5px; }
  .site-top .langs button { padding: 8px 4px; }
  .btn { padding: 0 11px; margin-left: 2px; }
}

/* ---- Home in the bar (Onur, 26.09): on a phone the mark alone is the brand, so the four words fit ---- */
@media (max-width: 560px) {
  .site-top .wordmark { display: none; }
}

/* ---- Wide screens (Onur, 26.09: "it feels designed for a narrow screen") ----
   The column grows to 1200, the hero runs edge to edge, and the landing's text blocks take two columns.
   The reading pages keep a reading measure; only the type grows. */
@media (min-width: 1024px) {
  .wide, .site-top-in, .site-foot-in { max-width: 1232px; }
  .site-top-in { height: 68px; }
  .nav a { font-size: 15px; padding: 8px 12px; }
  .btn { height: 40px; padding: 0 18px; font-size: 15px; margin-left: 8px; }

  .hero { margin: 0 calc(50% - 50vw); border-radius: 0; min-height: min(80vh, 760px); }
  .hero-img { object-position: center 35%; }
  .hero-text { max-width: none; width: 100%; padding: 0 max(16px, calc((100vw - 1200px) / 2)) 80px; }
  .hero-text > div, .hero-text .rule { max-width: 820px; }
  .hero-text .line { font-size: clamp(56px, 4.6vw, 76px); }
  .hero .cta { font-size: 17px; padding: 16px 28px; margin-top: 36px; }
  .cta-note { font-size: 15px; }
  .trust { padding-top: 32px; font-size: 17px; }

  .excerpt { max-width: none; padding: 112px 0 96px; }
  .excerpt > div { display: grid; grid-template-columns: 1fr 2fr; column-gap: 80px; }
  .excerpt h2 { grid-column: 1; grid-row: 1; font-size: 44px; margin: 0; }
  .excerpt .more { grid-column: 1; grid-row: 2; align-self: start; margin-top: 20px; }
  .excerpt blockquote { grid-column: 2; grid-row: 1 / span 2; }
  .excerpt .by { grid-column: 2; grid-row: 3; }
  .excerpt blockquote { font-size: 42px; line-height: 1.22; }
  .excerpt .by { font-size: 15px; }
  .excerpt .more { justify-self: start; }
  .excerpt > div { align-items: start; }

  .feature { gap: 120px; padding: 112px 0; }
  .feature h2 { font-size: 44px; }
  .feature p { font-size: 18px; }
  .shot, .shots { max-width: 360px; }

  .faq-teaser { max-width: none; padding: 112px 0 64px; }
  .faq-teaser > div { display: grid; grid-template-columns: 1fr 2fr; column-gap: 80px; align-items: start; }
  .faq-teaser > div > * { grid-column: 2; }
  .faq-teaser h2 { grid-column: 1; grid-row: 1; font-size: 44px; }
  .faq-teaser .more { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 0; }
  details.qa summary { font-size: 18px; padding: 22px 40px 22px 0; }
  details.qa p { font-size: 17px; }

  .join-block { padding: 112px 0 32px; }
  .join-block > div { display: grid; grid-template-columns: 1fr auto; column-gap: 80px; align-items: center; }
  .join-block > div > * { grid-column: 1; }
  .join-block h2 { font-size: 56px; }
  .join-block p { font-size: 18px; max-width: 600px; }
  .join-block .cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 17px; padding: 16px 28px; }

  /* Reading pages: the same bar, a wider measure, larger type. */
  main { max-width: 760px; padding-top: 72px; }
  body { font-size: 17px; }
  h1 { font-size: 48px; }
  .lead { font-size: 20px; }
}


/* ---- Page heroes (Onur, 26.09): the app's own photographs, upscaled from the original PNGs
   (kaynak/, Upscayl remacri 4x, then 2560 and 1280 wide, grey, JPEG q2). The title sits on the faded
   bottom, as on the landing. Phones get the 1280 at 1x and the 2560 on dense screens; a desktop always 2560. */
.page-hero { position: relative; height: 42vh; min-height: 240px; max-height: 460px; background-size: cover; background-repeat: no-repeat; background-position: center 45%; }
.page-hero::after { content: ""; position: absolute; inset: 0;
                    background: linear-gradient(to bottom, rgba(11,11,12,0.10) 0%, rgba(11,11,12,0.35) 50%, var(--bg) 100%); }
.page-hero + main { position: relative; z-index: 1; margin-top: -120px; }
/* Each background: the JPEG first (every browser), then the same picture as AVIF with the JPEG as its fallback inside image-set(type()),
   which a browser that does not know type() skips whole — it keeps the JPEG line above it. */
.page-hero--sirtlar { background-position: center 62%;
  background-image: -webkit-image-set(url(/img/sirtlar-1280.jpg) 1x, url(/img/sirtlar-2560.jpg) 2x);
  background-image: image-set(url(/img/sirtlar-1280.jpg) 1x, url(/img/sirtlar-2560.jpg) 2x);
  background-image: image-set(url(/img/sirtlar-1280.avif) type("image/avif") 1x, url(/img/sirtlar-2560.avif) type("image/avif") 2x, url(/img/sirtlar-1280.jpg) type("image/jpeg") 1x, url(/img/sirtlar-2560.jpg) type("image/jpeg") 2x); }
.page-hero--teraslar { background-position: center 55%;
  background-image: -webkit-image-set(url(/img/teraslar-1280.jpg) 1x, url(/img/teraslar-2560.jpg) 2x);
  background-image: image-set(url(/img/teraslar-1280.jpg) 1x, url(/img/teraslar-2560.jpg) 2x);
  background-image: image-set(url(/img/teraslar-1280.avif) type("image/avif") 1x, url(/img/teraslar-2560.avif) type("image/avif") 2x, url(/img/teraslar-1280.jpg) type("image/jpeg") 1x, url(/img/teraslar-2560.jpg) type("image/jpeg") 2x); }
.page-hero--basamaklar { background-position: 70% 45%;
  background-image: -webkit-image-set(url(/img/basamaklar-1280.jpg) 1x, url(/img/basamaklar-2560.jpg) 2x);
  background-image: image-set(url(/img/basamaklar-1280.jpg) 1x, url(/img/basamaklar-2560.jpg) 2x);
  background-image: image-set(url(/img/basamaklar-1280.avif) type("image/avif") 1x, url(/img/basamaklar-2560.avif) type("image/avif") 2x, url(/img/basamaklar-1280.jpg) type("image/jpeg") 1x, url(/img/basamaklar-2560.jpg) type("image/jpeg") 2x); }
.page-hero--bulutlar { background-position: center 70%;
  background-image: -webkit-image-set(url(/img/fuji-1280.jpg) 1x, url(/img/fuji-2560.jpg) 2x);
  background-image: image-set(url(/img/fuji-1280.jpg) 1x, url(/img/fuji-2560.jpg) 2x);
  background-image: image-set(url(/img/fuji-1280.avif) type("image/avif") 1x, url(/img/fuji-2560.avif) type("image/avif") 2x, url(/img/fuji-1280.jpg) type("image/jpeg") 1x, url(/img/fuji-2560.jpg) type("image/jpeg") 2x); }
@media (min-width: 761px) {
  .page-hero--sirtlar { background-image: url(/img/sirtlar-2560.jpg); background-image: image-set(url(/img/sirtlar-2560.avif) type("image/avif"), url(/img/sirtlar-2560.jpg) type("image/jpeg")); }
  .page-hero--teraslar { background-image: url(/img/teraslar-2560.jpg); background-image: image-set(url(/img/teraslar-2560.avif) type("image/avif"), url(/img/teraslar-2560.jpg) type("image/jpeg")); }
  .page-hero--basamaklar { background-image: url(/img/basamaklar-2560.jpg); background-image: image-set(url(/img/basamaklar-2560.avif) type("image/avif"), url(/img/basamaklar-2560.jpg) type("image/jpeg")); }
  .page-hero--bulutlar { background-image: url(/img/fuji-2560.jpg); background-image: image-set(url(/img/fuji-2560.avif) type("image/avif"), url(/img/fuji-2560.jpg) type("image/jpeg")); }
}
@media (min-width: 1024px) {
  .page-hero { height: 52vh; max-height: 560px; }
  .page-hero + main { margin-top: -160px; }
}

/* ---- Join: every step ends in a button (Onur, 26.09: "where to go is not clear enough") ---- */
.order-note { color: var(--muted); font-size: 15px; margin: 24px 0 0; }
.step-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 18px; background: var(--text); color: var(--bg);
            font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 2px; }
.step-btn::after { content: " →"; white-space: pre; }
@media (hover: hover) { .step-btn:hover { background: var(--text-hover); } }
ol.steps li { padding-bottom: 36px; }


/* ---- /shin/: SHIN and SHIN+ side by side (P19b; the approved picture is docs/design/P19a/site-shin.png in the app repo) ----
   SHIN+ is the app's vermilion at low opacity (#1f0f0e on the page, rules #3a1b19) with a 2px vermilion top rule. Its dots are the
   page ink: in the app a red dot means Missed. SHIN's are the `completed` green. */
.shin-page { max-width: 944px; margin: 0 auto; padding: 56px 16px 32px; }
.shin-eyebrow { margin: 0 0 16px; }
.shin-h1 { font-style: italic; font-size: clamp(32px, 9vw, 40px); line-height: 1.15; margin: 0 0 20px; }
.shin-h1 em { color: var(--muted); }
.shin-lead { color: var(--muted); font-size: 17px; max-width: 620px; margin: 0 0 40px; }
.shin-note { color: var(--muted); font-size: 14px; margin: 24px 0 0; max-width: 820px; }

.cmp { --plus-fill: #1f0f0e; --plus-rule: #3a1b19; --plus-ink: #EC5A4F; --dot-shin: #7A9A7A;
       border-top: 1px solid var(--hairline); }
.cmp-head, .cmp-row, .cmp-sec { display: grid; grid-template-columns: minmax(0, 1fr) 260px 280px; }
.cmp-head { border-bottom: 1px solid var(--hairline); }
.cmp-top { padding: 28px 18px 20px; }
.cmp-top.cmp-plus { background: var(--plus-fill); border-top: 2px solid var(--accent); padding-top: 26px; }
.cmp-name { margin: 0; font-weight: 600; font-size: 20px; letter-spacing: 0.14em; line-height: 1.3; }
.cmp-name .kanji { font-size: 28px; letter-spacing: 0; margin-right: 4px; }
.cmp-plus .cmp-name { color: var(--plus-ink); }
.cmp-tag { margin: 4px 0 8px; font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; font-style: italic; font-size: 19px; color: var(--muted); }
.cmp-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.cmp-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 2px;
           color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; text-align: center; line-height: 1.25; cursor: pointer; }
.cmp-btn-plus { background: #3a1411; border-color: var(--accent); }
@media (hover: hover) { .cmp-btn:hover { border-color: var(--muted); } .cmp-btn-plus:hover { background: #4a1915; border-color: var(--plus-ink); } }

.cmp-row, .cmp-sec { border-bottom: 1px solid var(--hairline); }
.cmp-row .cmp-feat { padding: 12px 18px; font-size: 15px; line-height: 1.4; align-self: center; }
.cmp-cell { display: flex; align-items: center; justify-content: center; min-height: 43px; }
.cmp-plus { background: var(--plus-fill); }
.cmp-row .cmp-plus, .cmp-sec .cmp-plus-fill { border-bottom: 1px solid var(--plus-rule); }
.cmp-body .cmp-row:last-child .cmp-plus { border-bottom: 0; }
.cmp-sec { grid-template-columns: minmax(0, 1fr) 260px 280px; }
.cmp-secname { grid-column: 1 / 3; }
.cmp-secname { padding: 20px 18px 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cmp-plus-fill { background: var(--plus-fill); }
.cmp-sec { border-bottom: 0; }
.cmp-who { display: none; }

.mark { display: inline-block; }
.mark.yes { width: 11px; height: 11px; border-radius: 50%; }
.cmp-shin .mark.yes { background: var(--dot-shin); }
.cmp-plus .mark.yes { background: var(--text); }
.mark.no { width: 14px; height: 1px; background: var(--muted); opacity: 0.55; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-lang="tr"] .sr[lang="en"], [data-lang="en"] .sr[lang="tr"] { display: none !important; }

/* Phone: the feature name takes its own line, and SHIN and SHIN+ sit side by side under it, each with its name,
   so no column is ever squeezed to a few words. The two plan heads become two half-width cards with the buttons. */
@media (max-width: 719px) {
  .shin-page { padding-top: 40px; }
  .cmp-head, .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-sec { grid-template-columns: 1fr; }
  .cmp-secname { grid-column: auto; }
  .cmp-plus-fill { display: none; }
  .cmp-feat-head { display: none; }
  .cmp-top { padding: 20px 12px 16px; }
  .cmp-top.cmp-plus { padding-top: 18px; }
  .cmp-name { font-size: 16px; letter-spacing: 0.1em; }
  .cmp-name .kanji { font-size: 22px; }
  .cmp-tag { font-size: 17px; }
  .cmp-btn { font-size: 13px; padding: 8px 6px; }
  .cmp-row .cmp-feat { grid-column: 1 / -1; padding: 14px 12px 4px; }
  .cmp-row { border-bottom: 1px solid var(--hairline); }
  .cmp-cell { gap: 8px; min-height: 34px; padding: 0 12px; justify-content: flex-start; }
  .cmp-who { display: inline; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
  .cmp-plus .cmp-who { color: var(--plus-ink); }
  .cmp-row .cmp-plus { border-bottom: 0; }
  .cmp-body .cmp-row:last-child .cmp-plus { border-bottom: 0; }
  .cmp-secname { padding: 24px 12px 8px; }
}