/* sept-legal.css, Otabek legal artboards (2026-09-28) onto terms / privacy / cookie-policy / complaints.
   Source of truth: "otabek legal pages sep 28/*-page-spec.md" + the designer HTML (HTML+spec handoff,
   Yuval-approved in place of PDF). Scoped to [data-sept="legal"]; chrome (ribbon, nav, footer) is
   shared by 39 pages and deliberately untouched (Yuval: "skip").
   Revert = delete the <link> + <script> tags on each page. */

/* ---------- shared: tokens ---------- */
[data-sept="legal"]{
  --lg-ink:#121212; --lg-body:#666666; --lg-accent:#B75F00; --lg-line:#E1DED6;
  /* --lg-accent: inline link colour. #B75F00 per the 30.09 specs ("link: Inline links in content section"),
     designer note 2026-10-03; was #F37F00. */
}

/* ---------- shared: section + column ---------- */
/* spec §3: full-bleed 1px #E1DED6 top rule, 80 above the column, 140 below it */
[data-sept="legal"] main > section.subhero{
  padding:80px 0 140px; border-top:1px solid var(--lg-line);
}
/* spec §3.1: one 800px column centred at x320→1120. .wrap carries 80px inner padding (skin rule 5) */
[data-sept="legal"] .wrap.legal{
  max-width:none; width:800px; padding:0; margin:0 auto; box-sizing:border-box;
}

/* ---------- shared: type roles (inline styles in markup → !important, skin rule "inline styles") ---------- */
[data-sept="legal"] .legal h1{
  font-size:36px !important; font-weight:500 !important; line-height:normal !important;
  color:var(--lg-ink); margin:0 !important; letter-spacing:0; text-wrap:wrap;
}
[data-sept="legal"] .legal h2{
  font-size:28px; font-weight:500; line-height:normal; color:var(--lg-ink);
  margin:60px 0 20px; letter-spacing:0; text-wrap:wrap;
}
[data-sept="legal"] .legal p,
[data-sept="legal"] .legal li{
  font-size:18px; line-height:1.5; color:var(--lg-body); margin:0; word-break:break-word;
}
[data-sept="legal"] .legal p + p{margin-top:20px}
/* header block: h1 / updated line / intro, 20 apart */
[data-sept="legal"] .legal .upd{font-size:18px; line-height:1.5; color:var(--lg-body); margin:20px 0 0}
[data-sept="legal"] .legal > .reveal > p:first-child{margin-top:20px}
/* inline links / emphasis: body metrics, accent colour, no underline, regular weight */
[data-sept="legal"] .legal p a,
[data-sept="legal"] .legal li a{
  color:var(--lg-accent) !important; font-weight:400 !important; text-decoration:none;
}

/* ---------- shared: Contents card (terms §B2, privacy §A2) ---------- */
[data-sept="legal"] .legal .toc{
  border:1px solid var(--lg-line); border-radius:24px; padding:30px; margin:60px 0 0;
  display:flex; flex-direction:column; gap:20px;
}
[data-sept="legal"] .legal .toc > p{
  font-size:28px; font-weight:500; line-height:normal; color:var(--lg-ink); margin:0;
}
[data-sept="legal"] .legal .toc ol{
  columns:auto; list-style:decimal outside; padding-left:27px; margin:0;
  display:block; font-size:18px; line-height:1.5;
}
[data-sept="legal"] .legal .toc li{margin:0; color:var(--lg-body)}

/* ---------- terms ---------- */
/* clause heading: number in its own nowrap column, 8px gap, top-aligned (JS moves the number into .lg-num) */
[data-sept="legal"] .legal h2.lg-clause{display:flex; align-items:flex-start; gap:8px}
[data-sept="legal"] .legal h2.lg-clause .lg-num{flex:0 0 auto; white-space:nowrap}
[data-sept="legal"] .legal h2.lg-clause .lg-ttl{flex:1 1 0; min-width:0}
/* clause 5 sub-heading "Onboarding requirements." : 20/1.5 Medium ink, 10 above its paragraph, 30 below the block above */
[data-sept="legal"] .legal p > strong.lg-subhead{
  display:block; font-size:20px; font-weight:500; line-height:1.5; color:var(--lg-ink); margin:0 0 10px;
}
[data-sept="legal"] .legal p.lg-has-subhead{margin-top:30px}
/* privacy A3: heading → first labelled pair is the block's 30px gap (margins collapse with the h2's 20, so state the full 30) */
[data-sept="legal"] .legal h2 + p.lg-has-subhead{margin-top:30px}
[data-sept="legal"] .legal p.lg-tight{margin-top:10px}
/* contact: three stacked lines, no margin between (JS splits by sentence, move-not-clone) */
[data-sept="legal"] .legal .lg-line{display:block; width:max-content; max-width:100%}

/* ---------- shared: bullet lists (privacy A4/A5) ---------- */
[data-sept="legal"] .legal ul{
  list-style:disc outside; padding-left:27px; margin:20px 0 0; display:block;
}
[data-sept="legal"] .legal ul > li + li{margin-top:10px}
[data-sept="legal"] .legal ul + p{margin-top:30px}
/* labels and "Aggregated Data": ink colour, SAME regular weight (spec: colour only, never weight) */
[data-sept="legal"] .legal li > strong,
[data-legal="privacy"] .legal p > strong:not(.lg-subhead){font-weight:400; color:var(--lg-ink)}

/* ---------- privacy ---------- */
/* B: 800px #B2B2B2 rule, 120 column-gap each side; C: contact block */
[data-legal="privacy"] .privacy-divider.legal{
  border-top:1px solid #B2B2B2; margin:120px 0 0; padding:120px 0 0; max-width:none; width:auto;
}
[data-legal="privacy"] .privacy-divider h2{margin-top:0}
[data-sept="legal"] .legal .lg-line{white-space:nowrap}

/* ---------- cookie-policy: Block 7 table ---------- */
/* cols 140/140/140/320 + 20 gaps = 800; rows 20 above/below a #E1DED6 hairline; header 20/1.5 ink regular,
   body 16/1.5, first col ink. 1px rules take layout here (table borders), compensated by 19px top padding on body cells */
[data-legal="cookie-policy"] .legal .table-scroll{margin:60px 0 0; overflow:visible; border:0; padding:0}
[data-legal="cookie-policy"] .legal table.policy-table{
  width:800px; table-layout:fixed; border-collapse:collapse; border:0; margin:0; background:none;
}
[data-legal="cookie-policy"] .legal .policy-table th,
[data-legal="cookie-policy"] .legal .policy-table td{
  padding:20px 20px 20px 0; border:0; border-bottom:1px solid var(--lg-line); background:none;
  text-align:left; vertical-align:top; font-weight:400; letter-spacing:0; text-transform:none;
}
[data-legal="cookie-policy"] .legal .policy-table th:nth-child(-n+3),
[data-legal="cookie-policy"] .legal .policy-table td:nth-child(-n+3){width:160px}
[data-legal="cookie-policy"] .legal .policy-table th:last-child,
[data-legal="cookie-policy"] .legal .policy-table td:last-child{width:320px; padding-right:0}
[data-legal="cookie-policy"] .legal .policy-table th{
  font-size:20px; line-height:1.5; color:var(--lg-ink); padding-top:0; vertical-align:middle;
}
/* 19 not 20: the 1px border above takes layout that his zero-height rule does not */
[data-legal="cookie-policy"] .legal .policy-table td{padding-top:19px; font-size:16px; line-height:1.5; color:var(--lg-body)}
[data-legal="cookie-policy"] .legal .policy-table td:first-child{color:var(--lg-ink)}
[data-legal="cookie-policy"] .legal .policy-table td code{
  color:var(--lg-ink); font:inherit; background:none; padding:0; border:0;
}
[data-legal="cookie-policy"] .legal .policy-table thead,
[data-legal="cookie-policy"] .legal .policy-table tr{background:none}
[data-legal="cookie-policy"] .legal .table-scroll + h2{margin-top:60px}

/* ---------- complaints ---------- */
/* ink emphasis is colour only (Regular); the Resolution card's "15/35 business days" is the one Medium */
[data-legal="complaints"] .legal strong{font-weight:400; color:var(--lg-ink)}
[data-legal="complaints"] .legal .callout strong{font-weight:500}
[data-legal="complaints"] .legal .lg-label{color:var(--lg-ink)}
/* blocks 2/4: list → trailing paragraph is the block's 40 gap; block 5 list → next heading 60 */
[data-legal="complaints"] .legal ul{margin:20px 0 0; padding-left:27px; gap:0}
[data-legal="complaints"] .legal ul + p{margin-top:40px}
/* block 3: heading → cards 40, cards 20 apart, cards → closing paragraph 40 */
[data-legal="complaints"] .legal h2 + .callout{margin-top:40px}
[data-legal="complaints"] .legal .callout{
  background:#F4F3F0; border:0; border-radius:24px; padding:30px; margin:20px 0 0;
  display:flex; flex-direction:column; gap:10px;
}
[data-legal="complaints"] .legal .callout + .callout{margin-top:20px}
[data-legal="complaints"] .legal .callout .ct{
  font-size:20px; line-height:24px; font-weight:500; color:var(--lg-ink); margin:0;
}
[data-legal="complaints"] .legal .callout p{font-size:18px; line-height:1.5; color:var(--lg-body); margin:0}
[data-legal="complaints"] .legal .callout + p{margin-top:40px}
/* §4: 800px #E1DED6 rule 120 below block 7, FAQ heading 120 below it, list flush, contact 120 below */
[data-legal="complaints"] .legal .lg-rule{border:0; border-top:1px solid var(--lg-line); margin:120px 0 0; height:0}
[data-legal="complaints"] .legal h2.faqhead{font-size:36px; line-height:44px; font-weight:500; margin:119px 0 20px}
[data-legal="complaints"] .legal .faqs{max-width:none; margin:0; display:block}
[data-legal="complaints"] .legal .faqs .faq{
  border:0; border-bottom:1px solid #CDCDCD; padding:40px 0 39px; margin:0; background:none; border-radius:0;
}
[data-legal="complaints"] .legal .faqs .faq::before{display:none}
[data-legal="complaints"] .legal .faq h3{
  font-size:28px; line-height:34px; font-weight:500; color:var(--lg-ink); margin:0 0 20px; letter-spacing:0;
}
[data-legal="complaints"] .legal .faq p{font-size:16px; line-height:1.5; color:var(--lg-body); margin:0}
[data-legal="complaints"] .legal h2.contacthead{margin:120px 0 20px}
[data-legal="complaints"] .legal .contacthead + p{margin-top:0}

/* ---------- mobile: same roles, fluid column ---------- */
@media (max-width:899px){
  [data-sept="legal"] main > section.subhero{padding:48px 0 80px}
  [data-sept="legal"] .wrap.legal{width:auto; padding:0 20px}
  [data-sept="legal"] .legal h1{font-size:30px !important}
  [data-sept="legal"] .legal h2{font-size:24px; margin-top:44px}
  [data-sept="legal"] .legal .toc{padding:20px; border-radius:20px}
  [data-sept="legal"] .legal .toc > p{font-size:24px}
  [data-sept="legal"] .legal .lg-line{white-space:normal}
  [data-legal="privacy"] .privacy-divider.legal{margin-top:64px; padding-top:64px}
  [data-legal="cookie-policy"] .legal .table-scroll{overflow-x:auto; margin-top:40px}
  [data-legal="cookie-policy"] .legal table.policy-table{width:720px}
  [data-legal="complaints"] .legal .lg-rule,[data-legal="complaints"] .legal h2.faqhead,[data-legal="complaints"] .legal h2.contacthead{margin-top:64px}
  [data-legal="complaints"] .legal h2.faqhead{font-size:30px; line-height:1.2}
  [data-legal="complaints"] .legal .faq h3{font-size:22px; line-height:1.25}
  [data-legal="complaints"] .legal .callout{padding:22px}
  [data-sept="legal"] .legal p,[data-sept="legal"] .legal li{font-size:16px}
}


/* ---------- 2026-10-26 designer note: nav CTAs on the four legal pages still showed dd-nav.css's orange primary and
     black-stroke Log in; same rules every designer-frame skin carries (sept-bapw.css 158-161), keyed on data-sept ---------- */
html[data-sept="legal"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-sept="legal"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-sept="legal"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-sept="legal"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}