/* ============================================================
   Lyndran — the document pages (privacy, terms, security, muhasebe).
   site.css owns the shell, the bar, the footer and the tokens; this file
   owns only what a long document needs: a head, a reading column, a rail
   and quiet typography. Loaded after site.css.

   One measure. The door, the bands and the footer on the front page all
   sit inside 1200px with 24px of air at the edge, so these pages do too:
   the document's h1 starts on the same vertical as the wordmark in the
   footer under it, and a person moving between the two pages never sees
   the column jump. There is no outer frame — the front page dropped its
   hairline box and this one is not going to keep wearing it alone.
   ============================================================ */

.doc-wrap { max-width: 1200px; margin: 0 auto; }

/* ---- the head ----
   Every document says what it is before it starts saying it. A label, the
   title, one line of lede, and the meta line that carries the date this
   was last looked at. */
.doc-head { padding: clamp(52px, 6vw, 84px) 24px 40px; border-bottom: 1px solid var(--hair); }
.doc-head .mlabel {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint);
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
}
.mlabel .dot, .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.doc-h1 {
  font-weight: 600; letter-spacing: -0.026em; line-height: 1.07;
  font-size: clamp(2.05rem, 4.4vw, 3.5rem); margin: 0; max-width: 21ch; text-wrap: balance;
}
.doc-lede { font-size: 18px; line-height: 1.6; color: var(--dim); max-width: 60ch; margin: 22px 0 0; }
.doc-meta { font-family: var(--mono); font-size: 12px; color: var(--faint); margin: 24px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.doc-meta .dsep { color: var(--faint); }

/* the short version: hairlines and a blue dot, no fill. The front page
   holds a whole price table with nothing but rules under it; a summary
   does not need a panel either. */
.doc-tldr { padding: 34px 24px 38px; border-bottom: 1px solid var(--hair); }
.doc-tldr .mlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.doc-list { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.doc-list li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.6; color: var(--dim); }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.doc-list li strong { color: var(--text); font-weight: 600; }
.doc-tldr .doc-list li:first-child { border-top: 0; padding-top: 0; }
.doc-tldr .doc-list li:first-child::before { top: 9px; }

/* ---- rail beside the body ----
   The rail used to be a grid cell painted with --ground over a grid whose
   own background was --hair, with a 1px gap standing in for the rule. That
   works only while the cell fills its track, and a sticky rail cannot: it
   is align-self:start by necessity, so its paint stopped where its links
   stopped and the rest of the column showed the --hair underneath as a
   pale block running to the foot of the page. There is no fill here now.
   The rule is a real border on the body — which is the tall element, so
   the line runs the full height of the document at any length. */
.doc-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.doc-rail { padding: 40px 24px 48px; position: sticky; top: var(--navh); align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - var(--navh)); overflow-y: auto; }
.doc-rail-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 12px; }
.doc-rail a { font-size: 13.5px; line-height: 1.4; color: var(--dim); padding: 7px 0 7px 12px; border-left: 1px solid var(--hair); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.doc-rail a:hover { color: var(--text); }
.doc-rail a.here { color: var(--text); border-left: 2px solid var(--accent); padding-left: 11px; }

.doc-body { border-left: 1px solid var(--hair); padding: 44px 48px 88px; min-width: 0; }
.doc-sec { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--hair); max-width: 72ch; scroll-margin-top: calc(var(--navh) + 24px); }
.doc-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.doc-body h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 16px; }
.doc-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.doc-body p { font-size: 16px; line-height: 1.7; color: var(--dim); margin: 0 0 14px; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body em { color: var(--text); font-style: italic; }
.doc-body a:not(.btn) { color: var(--accent-up); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.doc-body a:not(.btn):hover { border-bottom-color: currentColor; }
.doc-body code { font-family: var(--mono); font-size: 0.86em; padding: 2px 6px; border: 1px solid var(--hair); border-radius: 4px; color: var(--text); background: var(--cell); overflow-wrap: anywhere; }
.doc-body .doc-list { margin: 8px 0 14px; }

/* a page with no rail is one column, and it keeps the head's edge */
.doc-solo .doc-body { border-left: 0; padding-left: 24px; padding-right: 24px; }

/* two-column tables of rows, as cells */
.doc-table { margin: 8px 0 18px; border: 1px solid var(--hair); overflow-x: auto; }
.doc-table .drow { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); }
.doc-table .drow span { background: var(--ground); padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.doc-table .drow + .drow { border-top: 1px solid var(--hair); }
.doc-table .dhead span { font-family: var(--mono); font-size: 11.5px; color: var(--faint); background: var(--cell); }

.doc-pull { margin: 18px 0; padding: 14px 20px; border-left: 2px solid var(--accent); font-size: 1.08em; color: var(--text); }
.doc-open .doc-list li { color: var(--dim); }
.doc-form { display: flex; gap: 10px; margin-top: 18px; max-width: 460px; }
.doc-form input[type="email"] { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--cell); color: var(--text); font: inherit; font-size: 14px; }
.doc-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.doc-form .chip { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 500; border: 0; cursor: pointer; font: inherit; }
.mnote { display: block; font-size: 13px; color: var(--faint); margin-top: 14px; }
.doc-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 14px; color: var(--dim); }
.doc-back:hover { color: var(--text); }

/* ---- arrival ----
   The same easing and the same distance the bands use on the front page,
   and the same restraint: one arrival for the head, one for the summary,
   one per section. A legal document has ninety paragraphs in it and not
   one of them wants its own entrance. Opacity and transform only.

   The resting state is visible. The hidden state exists only under .js,
   which boot.js withholds entirely when the reader has asked for reduced
   motion — so this is an enhancement and never a gate on the words. The
   media query below is the second belt for a browser that changes the
   setting after load. */
.js .doc-head, .js .doc-tldr, .js .doc-sec {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .doc-head.in, .js .doc-tldr.in, .js .doc-sec.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .doc-head, .js .doc-tldr, .js .doc-sec { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1000px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-rail {
    position: static; max-height: none; overflow: visible;
    flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding: 20px 24px 22px; border-bottom: 1px solid var(--hair);
  }
  .doc-rail-title { width: 100%; }
  .doc-rail a { border: 1px solid var(--hair); border-radius: 8px; padding: 8px 12px; }
  .doc-rail a.here { border-color: var(--accent); padding-left: 12px; }
  .doc-body { border-left: 0; padding: 40px 24px 80px; }
}
@media (max-width: 760px) {
  .doc-head, .doc-tldr, .doc-rail { padding-left: 22px; padding-right: 22px; }
  .doc-body { padding: 34px 22px 72px; }
  .doc-solo .doc-body { padding-left: 22px; padding-right: 22px; }
  .doc-h1 { max-width: none; }
  .doc-table .drow { grid-template-columns: 1fr; }
  .doc-form { flex-direction: column; }
}