/* Cyanfold — site styles. System fonts only, no external resources.
   Anti-slop rules (spec 4.13): no gradients, glows, dot grids, emoji, tilted phones.
   Orange (#FF8A3D) means "what you are doing" (the measurement, the primary action), never decoration. */

:root {
  --bg: #ffffff;
  --surface: #f3f6f9;
  --text: #10202d;
  --muted: #4a5d6c;
  --line: #d3dde6;
  --brand: #0d3a5c;
  --link: #0d3a5c;
  --snap: #1f6e9c;
  --accent: #ff8a3d;
  --on-accent: #1a0e05;
  --accent-text: #a65a28;
  --focus: #0d3a5c;
  --hero-bg: #0d3a5c;
  --hero-text: #ffffff;
  --hero-muted: #c9dcea;
  --warn-bg: #fff3ea;
  --warn-line: #a65a28;
  --mark-bg: #ffe2cc;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1722;
    --surface: #102231;
    --text: #e7eef3;
    --muted: #a3b6c5;
    --line: #26394a;
    --brand: #8ccbeb;
    --link: #8ccbeb;
    --snap: #8ccbeb;
    --accent-text: #ff8a3d;
    --focus: #ff8a3d;
    --hero-bg: #0d3a5c;
    --warn-bg: #2a1b10;
    --warn-line: #ff8a3d;
    --mark-bg: #4a2a12;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }
code { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--accent); color: var(--on-accent); padding: .6em 1em; border-radius: 6px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.logo { width: 30px; height: 30px; flex: none; }
.site-nav { order: 3; flex-basis: 100%; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--text); text-decoration: none; font-size: .95rem; padding: 6px 0; display: inline-block; }
.site-nav a:hover { color: var(--link); text-decoration: underline; }
@media (min-width: 760px) {
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; }
}

.lang { position: relative; margin-left: auto; }
@media (min-width: 760px) { .lang { margin-left: 0; } }
.lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .92rem; color: var(--text);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); margin-left: 2px;
}
.lang[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.icon { width: 18px; height: 18px; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 210px; margin: 0; padding: 6px;
  list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(4, 20, 33, .14);
}
.lang li a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.lang li a:hover { background: var(--surface); }
.lang li a[aria-current] { font-weight: 700; }
.lang li a[aria-current]::before { content: "› "; color: var(--accent-text); }

/* ---------- headings with a dimension line ---------- */
.dim-title::before {
  content: ""; display: block; width: 64px; height: 14px; margin-bottom: 12px; background: var(--snap);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M2 1v13M62 1v13M2 8h60M-2 12l8-8M58 12l8-8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M2 1v13M62 1v13M2 8h60M-2 12l8-8M58 12l8-8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat;
}
.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.lead { font-size: 1.125rem; color: var(--muted); }

/* ---------- hero ---------- */
.hero { background: var(--hero-bg); color: var(--hero-text); }
.hero-inner { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 48px; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1fr 1.05fr; gap: 48px; padding-top: 72px; padding-bottom: 72px; } }
.eyebrow { color: var(--hero-muted); font-size: .95rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .75em; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); letter-spacing: -0.025em; margin-bottom: .45em; }
.hero-lead { font-size: 1.15rem; color: var(--hero-muted); max-width: 34em; }
.hero a { color: var(--hero-text); }
.hero :focus-visible { outline-color: var(--accent); }
.hero-figure { margin: 0; }
.hero-plan { display: block; width: 100%; height: auto; border: 1px solid #3a6a8f; border-radius: var(--radius); }
.hero-figure figcaption { font-size: .85rem; color: var(--hero-muted); margin-top: 10px; }
.appstore-soon {
  display: inline-block; margin: .5em 0 0; padding: 12px 18px; border: 1.5px solid var(--hero-muted);
  border-radius: 12px; font-weight: 600; color: var(--hero-text);
}
.appstore img { display: block; height: 52px; width: auto; }

.button {
  display: inline-block; padding: 12px 20px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-weight: 650; text-decoration: none;
}
.button:hover { text-decoration: underline; }
.hero .button { color: var(--on-accent); }

/* ---------- bands ---------- */
.band { padding: 56px 0; }
.band-alt { background: var(--surface); }
@media (min-width: 900px) { .band { padding: 80px 0; } }

/* ---------- features ---------- */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { border-top: 1px solid var(--line); padding: 20px 0 22px 34px; position: relative; }
.feature h3 { font-size: 1.08rem; margin-bottom: .35em; }
.feature p { color: var(--muted); margin: 0; font-size: .98rem; }
.snap { position: absolute; left: 0; top: 23px; width: 20px; height: 20px; color: var(--snap); }
.features-coming .feature h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tag {
  font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

/* ---------- screenshots (placeholders) ---------- */
.shots { display: grid; gap: 20px; grid-template-columns: 1fr 1.6fr; align-items: end; }
.shot { margin: 0; }
.shot-mac { grid-column: 1 / -1; }
@media (min-width: 900px) { .shots { grid-template-columns: .55fr 1.25fr 1.6fr; } .shot-mac { grid-column: auto; } }
.shot-frame {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  border: 1.5px dashed var(--muted); border-radius: 14px; color: var(--muted); font-size: .9rem; background: var(--bg);
  position: relative;
}
.shot-frame::before, .shot-frame::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--snap);
}
.shot-frame::before { left: -8px; top: -8px; border-left-width: 1.5px; border-top-width: 1.5px; }
.shot-frame::after { right: -8px; bottom: -8px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.shot-iphone .shot-frame { aspect-ratio: 9 / 19.5; border-radius: 22px; }
.shot-ipad .shot-frame { aspect-ratio: 4 / 3; }
.shot-mac .shot-frame { aspect-ratio: 16 / 10; border-radius: 8px; }
.shot figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }

/* ---------- themes ---------- */
.themes { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .themes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .themes { grid-template-columns: repeat(4, 1fr); } }
.theme figure { margin: 0; }
.theme-art { display: block; width: 100%; height: auto; margin-bottom: 12px; }
.theme h3 { font-size: 1.05rem; margin-bottom: .3em; }
.theme p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- privacy ---------- */
.privacy { display: grid; gap: 24px; }
@media (min-width: 900px) { .privacy { grid-template-columns: 1fr 1fr; gap: 56px; } }
.privacy-points { list-style: none; margin: 0; padding: 0; }
.privacy-points li { border-top: 1px solid var(--line); padding: 16px 0 16px 30px; position: relative; color: var(--muted); }
.privacy-points li strong { color: var(--text); }
.privacy-points li::before {
  content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 12px; border: 1.5px solid var(--snap);
}
.more { font-weight: 600; }

/* ---------- pricing ---------- */
.preview { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 28px; background: var(--surface); }
.preview h3 { font-size: 1.15rem; }
.preview p { margin: 0; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.25em; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 12px; border-bottom: 1px solid var(--line); }
thead th { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); }
.compare th[scope="row"] { font-weight: 500; width: 46%; }
.compare td { width: 27%; }
.mark { width: 18px; height: 18px; color: var(--snap); vertical-align: -3px; }
.mark-no { color: var(--muted); }
@media (max-width: 620px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .compare th[scope="row"] { border: 0; padding: 4px 0 6px; width: auto; font-weight: 650; }
  .compare td { border: 0; padding: 3px 0; display: flex; gap: 10px; align-items: baseline; }
  .compare td::before {
    content: attr(data-label); flex: 0 0 6.5rem;
    font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
  }
}
.plans-title { margin-top: 28px; font-size: 1.2rem; }
.plans { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.plan h4 { font-size: 1rem; margin-bottom: .2em; }
.price { font-size: 1.9rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.plan-note { color: var(--muted); font-size: .92rem; margin: 0; }
.fine { color: var(--muted); font-size: .92rem; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 600; position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--snap);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0deg); }
.qa-a { padding: 0 0 8px; color: var(--muted); }
.more-q { margin-top: 20px; }

/* ---------- inner pages ---------- */
.page { padding-top: 40px; padding-bottom: 64px; }
.page-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); letter-spacing: -0.02em; }
.block { margin-top: 44px; }
.block h2 { font-size: 1.45rem; }
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: .5em; }
.formats th[scope="row"] { width: 7em; font-weight: 650; }

.legal { display: grid; gap: 32px; }
@media (min-width: 1000px) { .legal { grid-template-columns: minmax(0, 1fr) 200px; } }
.doc { max-width: 780px; min-width: 0; }
.doc h2 { font-size: 1.3rem; margin-top: 2em; scroll-margin-top: 16px; }
.doc h3 { font-size: 1.1rem; margin-top: 1.6em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: .35em; }
.doc table { font-size: .88rem; min-width: 640px; }
.doc td, .doc th { padding: 9px 10px; }
.doc blockquote { margin: 0 0 1.5em; padding: 14px 18px; border-left: 4px solid var(--line); background: var(--surface); }
.doc blockquote p:last-child { margin-bottom: 0; }
.draft-banner { border-left-color: var(--warn-line) !important; background: var(--warn-bg) !important; }
.license-text {
  font-family: var(--mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 1.5em;
}
.license-text code { font-size: inherit; }
mark.todo { background: var(--mark-bg); color: var(--text); padding: 0 .15em; border-radius: 3px; }
.note { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; background: var(--surface); font-size: .95rem; }
.toc { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; margin: 0 0 1.5em; }
.toc summary { cursor: pointer; font-weight: 600; }
.toc ol { margin: .6em 0 .2em; padding-left: 1.3em; font-size: .95rem; }
.site-note { margin-top: 2.5em; border-top: 2px solid var(--line); padding-top: .5em; }
.versions { font-size: .92rem; }
.versions h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.versions ul { list-style: none; margin: 0; padding: 0; }
.versions a[aria-current] { font-weight: 700; }
@media (min-width: 1000px) { .versions { position: sticky; top: 24px; align-self: start; } }

/* ---------- footer: a drawing title block ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: .93rem; }
.titleblock { display: grid; grid-template-columns: 1fr; border: 1.5px solid var(--text); }
@media (min-width: 640px) { .titleblock { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .titleblock { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.tb-cell { padding: 14px 16px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .tb-cell { border-right: 1px solid var(--line); } }
.tb-wide { grid-column: 1 / -1; border-bottom: 0; border-right: 0; color: var(--muted); font-size: .86rem; }
.tb-wide p { margin: 0 0 .3em; }
.tb-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .6em; font-weight: 650; }
.tb-cell ul { list-style: none; margin: 0; padding: 0; }
.tb-cell li { margin-bottom: .3em; }
.tb-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; margin-bottom: .4em; }
.tb-name .logo { width: 24px; height: 24px; }
.tb-brand p:last-child { color: var(--muted); margin: 0; }
.tb-copy { color: var(--muted); }

/* ---------- language chooser / 404 ---------- */
.chooser { max-width: 640px; padding-top: 56px; padding-bottom: 56px; }
.chooser-brand { margin-bottom: 1.5em; }
.chooser-list { list-style: none; margin: 1.2em 0 0; padding: 0; border-top: 1px solid var(--line); }
.chooser-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.chooser-list a:hover .native { text-decoration: underline; }
.chooser-list .native { font-weight: 600; }
.chooser-list .hint { color: var(--muted); font-size: .92rem; }
.code404 { font-size: 3rem; font-weight: 700; color: var(--snap); margin: 0; letter-spacing: .04em; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .site-header, .site-footer, .versions, .toc { display: none; }
  body { background: #fff; color: #000; }
}