/* ============================================================================
   dry.css — shared styles for the "Swiss investor document" variants:
     /dry      — recurring subscription, minimum CHF 1'000 per month
     /dry-25k  — one-off subscription, minimum CHF 25'000

   Both pages are ANONYMISED: the issuer is not named anywhere in the markup.
   Nothing in here may reference the brand (no logo asset, no brand colour, no
   brand font) — the whole point is that the visitor cannot identify the company
   before pre-qualification.

   Deliberately does NOT import colors_and_type.css. The hypothesis under test
   is that this audience responds to the dry prospectus register, so the palette
   is the reference's own (deep navy / gold / cream). Keeping the tokens local
   also guarantees that editing the design system cannot move these variants
   mid-test.

   Type: Inter when the visitor already has it, system UI otherwise. Google
   Fonts is NOT hotlinked on purpose — a DE/CH investor page that promises Swiss
   data handling should not open a third-party font request before consent.
   ========================================================================== */
:root{
  --navy:        #1c3f4e;   /* brand blue — section fills, chips, step markers */
  --navy-deep:   #0f252e;   /* hero gradient end, access panel */
  --gold:        #be9b4b;   /* the single accent: CTA, values, rules, checks */
  --gold-soft:   #e4dccb;
  --cream:       #f7f4ee;   /* light narrative sections */
  --paper:       #f3f4f4;   /* form + FAQ surface */
  --ink:         #1a1a1a;   /* near-black sections */
  --black:       #0a0a0a;
  --line:        #e0e3e4;
  --line-soft:   #edf0f1;
  --muted:       #6e7679;
  --muted-dark:  #4a5257;
  --white:       #ffffff;

  --wrap: 760px;            /* single narrow column — a document, not a grid */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); background:var(--cream); color:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .wrap{ padding:0 24px; } }

/* ---------- section bands ---------- */
.band{ padding:56px 0; }
.band--cream{ background:var(--cream); color:var(--ink); }
.band--paper{ background:var(--paper); color:var(--ink); }
.band--navy { background:var(--navy);  color:var(--white); }
.band--ink  { background:var(--ink);   color:var(--white); }
.band--black{ background:var(--black); color:var(--white); }
@media (min-width:768px){ .band{ padding:72px 0; } }

/* ---------- type ---------- */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-0.01em; line-height:1.25; }
h1{ font-size:26px; }
@media (min-width:768px){ h1{ font-size:38px; line-height:1.2; } }

/* Section heading with the reference's short gold rule underneath. */
.h2{
  font-size:21px; margin:0 0 20px; padding-bottom:10px;
  border-bottom:2px solid var(--gold); display:inline-block;
}
@media (min-width:768px){ .h2{ font-size:26px; } }

p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:16px; }
@media (min-width:768px){ .lead{ font-size:17px; } }
.small{ font-size:13px; line-height:1.55; }
.note{ font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:14px; }
.band--navy .note,.band--ink .note,.band--black .note{ color:rgba(255,255,255,.52); }
.band--navy a,.band--ink a,.band--black a{ color:var(--gold-soft); }

/* ---------- check list (the reference's gold tick) ---------- */
.checks{ list-style:none; margin:0; padding:0; }
.checks li{ position:relative; padding-left:30px; margin-bottom:12px; }
.checks li:last-child{ margin-bottom:0; }
.checks li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4.1-4.1 1.4-1.4 2.7 2.7 5.7-5.7 1.4 1.4-7.1 7.1z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4.1-4.1 1.4-1.4 2.7 2.7 5.7-5.7 1.4 1.4-7.1 7.1z'/></svg>") center/contain no-repeat;
}
.checks strong{ font-weight:700; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1;
  padding:16px 22px; border:0; border-radius:2px; cursor:pointer;
  text-decoration:none; transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn--gold{ background:var(--gold); color:var(--ink); width:100%; }
.btn--gold:hover{ background:#ab8a3f; }
.btn--gold::before{ content:"\00BB"; font-size:19px; line-height:1; }
.btn--ghost{
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,.45); padding:11px 16px; font-size:13.5px;
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn[disabled]{ opacity:.42; cursor:not-allowed; }
.btn--gold[disabled]:hover{ background:var(--gold); }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hdr__in{
  max-width:var(--wrap); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:12px;
}
@media (min-width:768px){ .hdr__in{ padding:14px 24px; } }
.hdr__mark{
  width:34px; height:34px; flex:none; border-radius:2px; background:var(--gold);
  display:grid; place-items:center; color:var(--navy);
}
.hdr__mark svg{ width:18px; height:18px; }
.hdr__txt{ min-width:0; flex:1; }
.hdr__t{ font-size:14px; font-weight:700; color:var(--white); line-height:1.3; }
.hdr__s{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55); line-height:1.4; margin-top:1px;
}
.hdr .btn--ghost{ flex:none; }
@media (max-width:520px){
  .hdr .btn--ghost{ padding:9px 12px; font-size:12px; }
  .hdr__t{ font-size:13px; }
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 68%,var(--black) 100%);
  color:var(--white); padding:44px 0 0; position:relative; overflow:hidden;
}
@media (min-width:768px){ .hero{ padding:64px 0 0; } }
.eyebrow{
  display:inline-block; border:1px solid var(--gold); color:var(--gold);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; margin-bottom:22px;
}
.hero h1{ margin-bottom:20px; max-width:22ch; }
@media (min-width:768px){ .hero h1{ max-width:26ch; } }
.hero__sub{ color:rgba(255,255,255,.78); max-width:62ch; }
.hero__seal{
  width:132px; height:132px; border-radius:50%; background:var(--gold); color:var(--ink);
  display:grid; place-content:center; text-align:center; padding:10px;
  margin:30px 0 0 auto; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.hero__seal .l{ font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; line-height:1.3; }
.hero__seal .v{ font-size:25px; font-weight:700; line-height:1.05; margin:5px 0 2px; }
.hero__seal .u{ font-size:10.5px; font-weight:600; }
/* Desktop: the seal gets its own column instead of being pulled up with a
   negative margin, which used to overlap the sub-headline at >=768px. It still
   hangs past the hero's bottom edge, as in the reference. */
@media (min-width:768px){
  .hero__row{ display:flex; align-items:flex-end; gap:32px; }
  .hero__col{ flex:1; min-width:0; }
  .hero__seal{ width:154px; height:154px; flex:none; margin:0 0 -46px; }
  .hero__seal .v{ font-size:29px; }
}
.hero__pad{ height:56px; }
@media (min-width:768px){ .hero__pad{ height:70px; } }

/* Dark access panel overlapping the hero, as in the reference. */
.access{
  background:var(--navy-deep); border:1px solid rgba(255,255,255,.12);
  padding:26px 22px; margin-top:-46px; position:relative; z-index:2;
}
@media (min-width:768px){ .access{ padding:32px 30px; } }
.access h2{ font-size:19px; text-align:center; color:var(--white); }
@media (min-width:768px){ .access h2{ font-size:22px; } }
.access__sub{ text-align:center; font-size:13.5px; color:rgba(255,255,255,.68); margin:12px 0 18px; }
.access__rule{ border:0; border-top:1px solid rgba(255,255,255,.18); margin:0 0 18px; }
.access__min{ text-align:center; font-size:19px; font-weight:700; color:var(--white); margin:0; }
@media (min-width:768px){ .access__min{ font-size:23px; } }

/* ---------- notice box (cream, gold left rule) ---------- */
.notice{
  background:var(--cream); border-left:4px solid var(--gold);
  padding:18px 20px; font-size:14px; line-height:1.6; color:var(--muted-dark);
}
.notice strong{ color:var(--ink); }
.notice--dark{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.78); }
.notice--dark strong{ color:var(--white); }

/* ---------- fact table (the core "dry information" element) ---------- */
.facts{ border:1px solid var(--line); background:var(--white); }
.facts__row{
  display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; align-items:baseline;
  padding:13px 16px; border-bottom:1px solid var(--line-soft);
}
.facts__row:last-child{ border-bottom:0; }
.facts__row:nth-child(even){ background:#fafbfb; }
.facts__row--total{ background:var(--gold-soft); border-left:3px solid var(--gold); }
.facts__k{ font-size:14px; color:var(--muted-dark); }
.facts__v{ font-size:14px; font-weight:700; color:var(--navy); text-align:right; }
.facts__row--total .facts__v{ color:var(--ink); }
/* On narrow screens the two columns cannot reliably share a line: short rows
   stay side by side while long ones wrap and drop their value to the left edge,
   so the value column reads ragged — some right-aligned, some left. Stack every
   row deliberately instead, label over value. One rhythm, and long values get
   the full width. */
@media (max-width:640px){
  .facts__row{ display:block; padding:12px 16px; }
  .facts__k{ display:block; margin-bottom:3px; }
  .facts__v{ display:block; text-align:left; }
}

/* ---------- definition rows (Security Token explainer) ---------- */
.defs{ border-left:2px solid var(--gold); padding-left:18px; margin-top:22px; }
.defs__row{ margin-bottom:18px; }
.defs__row:last-child{ margin-bottom:0; }
.defs__t{ font-size:14.5px; font-weight:700; margin-bottom:5px; }
.defs__b{ font-size:14px; line-height:1.6; color:var(--muted-dark); margin:0; }
.band--navy .defs__b,.band--ink .defs__b,.band--black .defs__b{ color:rgba(255,255,255,.72); }
.band--navy .defs__t,.band--ink .defs__t,.band--black .defs__t{ color:var(--white); }

/* Legal citation — the dry register leans on these, so they get their own
   treatment rather than being buried in body copy. */
.cite{
  font-size:12.5px; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--line); background:var(--white);
  padding:10px 13px; margin-top:16px; display:block;
}
.band--navy .cite,.band--ink .cite,.band--black .cite{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.6);
}

/* Redacted value — the reference's core move: a fact row that exists but is
   withheld until pre-qualification. */
.facts__v--sealed{ color:var(--muted) !important; font-weight:600; font-style:italic; }

/* ---------- numbered list 01..05 ---------- */
.ordered{ border:1px solid var(--line); background:var(--white); }
.ordered__row{ display:flex; gap:14px; align-items:baseline; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.ordered__row:last-child{ border-bottom:0; }
.ordered__n{ font-size:13px; font-weight:700; color:var(--gold); flex:none; font-variant-numeric:tabular-nums; }
.ordered__t{ font-size:14.5px; }

/* ---------- value-driver cards ---------- */
.driver{ background:var(--white); border-top:3px solid var(--navy); padding:20px; margin-bottom:16px; }
.driver:last-child{ margin-bottom:0; }
.driver__chip{
  display:inline-block; background:var(--navy); color:var(--white);
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 9px; margin-bottom:12px;
}
.driver h3{ font-size:17px; margin-bottom:10px; }
.driver p{ font-size:14.5px; color:var(--muted-dark); }

/* ---------- process steps ---------- */
.step{ border:1px solid rgba(255,255,255,.20); padding:20px; margin-bottom:14px; }
.step:last-child{ margin-bottom:0; }
.step__n{
  width:30px; height:30px; border-radius:50%; background:var(--navy); color:var(--white);
  display:grid; place-items:center; font-size:13px; font-weight:700; margin-bottom:12px;
}
.step h3{ font-size:16px; margin-bottom:8px; color:var(--white); }
.step p{ font-size:14px; color:rgba(255,255,255,.68); }

/* ---------- stats ---------- */
.stat{ text-align:center; padding:22px 0; }
.stat__v{ font-size:36px; font-weight:700; color:#3a6b80; line-height:1; }
.stat__rule{ width:120px; height:2px; background:var(--gold); margin:12px auto 10px; }
.stat__l{ font-size:14px; font-weight:600; }
.stat__n{ font-size:12px; color:rgba(255,255,255,.45); margin-top:3px; }
@media (min-width:768px){ .stat__v{ font-size:44px; } }

/* ---------- trust strip ---------- */
.strip{ background:var(--navy); padding:22px 0; }
.strip .checks li{ margin-bottom:9px; font-size:14px; color:var(--white); }

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--line); background:var(--white); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  list-style:none; cursor:pointer; padding:16px; font-size:14.5px; font-weight:700;
  display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold); font-size:19px; line-height:1; flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq__a{ padding:0 16px 16px; font-size:14px; color:var(--muted-dark); }

/* ---------- form ---------- */
.form{ background:var(--paper); border:1px solid var(--line); padding:22px 20px; }
@media (min-width:768px){ .form{ padding:30px 28px; } }
.form h2{ font-size:19px; margin:0 0 8px; }
.form__sub{ font-size:13.5px; color:var(--muted-dark); margin:0 0 22px; }
.f{ margin-bottom:16px; }
@media (min-width:600px){ .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } }
.f label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.f .req{ color:var(--gold); }
.f input[type=text],.f input[type=email],.f input[type=tel],.f select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid #cfd6d8; border-radius:2px;
  padding:13px 14px; height:48px; appearance:none; -webkit-appearance:none;
}
.f select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236e7679' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:20px;
  padding-right:38px;
}
.f input:focus,.f select:focus{ outline:2px solid var(--navy); outline-offset:-2px; border-color:var(--navy); }
.f input::placeholder{ color:#9aa3a6; }
.f .hint{ font-size:12px; color:var(--muted); margin:6px 0 0; }
.f .err{ font-size:12px; color:#b4302f; margin:6px 0 0; display:none; }
.f.is-invalid input,.f.is-invalid select{ border-color:#b4302f; }
.f.is-invalid .err{ display:block; }
.phone-row{ display:flex; gap:8px; }
.phone-row select{ width:118px; flex:none; padding-right:30px; }
.phone-row input{ flex:1; min-width:0; }

.cb{ display:flex; gap:11px; align-items:flex-start; margin-bottom:13px; font-size:13px; line-height:1.5; color:var(--muted-dark); cursor:pointer; }
.cb input{ width:17px; height:17px; margin:2px 0 0; flex:none; accent-color:var(--navy); cursor:pointer; }
.cb.is-invalid{ color:#b4302f; }
.form__lock{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin:12px 0 0; }
.form__lock svg{ width:14px; height:14px; flex:none; margin-top:2px; color:var(--gold); }
.form__optout{ display:inline-block; margin-top:14px; font-size:12.5px; color:var(--muted); text-decoration:underline; cursor:pointer; background:0; border:0; font-family:inherit; padding:0; }
.form__optout-note{ display:none; margin-top:12px; }
.form__optout-note.is-open{ display:block; }
.form__legal{ font-size:11.5px; line-height:1.55; color:var(--muted); margin-top:16px; }
.form__legal a{ color:var(--muted-dark); }

/* submit states */
.form__state{ display:none; text-align:center; padding:26px 0; }
.form__state.is-active{ display:block; }
.spinner{
  width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--gold);
  border-radius:50%; margin:0 auto 16px; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner{ animation-duration:2.4s; } html{ scroll-behavior:auto; } }
.form__state h3{ font-size:18px; margin-bottom:10px; }
.form__state p{ font-size:14px; color:var(--muted-dark); }
.ref{
  display:inline-block; margin-top:14px; padding:9px 14px; background:var(--gold-soft);
  border:1px solid var(--gold); font-size:14px; font-weight:700; letter-spacing:.06em;
}

/* ---------- legal footer ---------- */
.legal{ background:var(--white); padding:34px 0 44px; }
.legal h3{ font-size:12.5px; font-weight:700; letter-spacing:.05em; margin-bottom:14px; color:var(--ink); }
.legal p{ font-size:11.5px; line-height:1.65; color:var(--muted); margin-bottom:12px; }
.legal p strong{ color:var(--muted-dark); }
.legal__links{ display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; font-size:12px; }
.legal__links a{ color:var(--muted-dark); }
.legal__bar{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.lang{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.lang button{ background:0; border:0; font:inherit; font-size:12px; color:var(--muted); cursor:pointer; padding:0; }
.lang button.is-on{ color:var(--ink); font-weight:700; text-decoration:underline; }

/* ---------- cookie banner ---------- */
.ck{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--navy-deep); border-top:1px solid var(--gold); padding:16px 0; display:none; }
.ck.is-open{ display:block; }
.ck__in{ max-width:var(--wrap); margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.ck p{ flex:1; min-width:240px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.78); margin:0; }
.ck__act{ display:flex; gap:9px; }
.ck__act .btn{ padding:10px 15px; font-size:12.5px; }
.ck__act .btn--gold{ width:auto; }
@media (max-width:520px){ .ck__act{ width:100%; } .ck__act .btn{ flex:1; } }

/* ---------- legal stub pages (/legal/*) ---------- */
.doc{ background:var(--white); padding:36px 0 56px; }
.doc h1{ font-size:24px; margin-bottom:8px; }
@media (min-width:768px){ .doc h1{ font-size:30px; } }
.doc__sub{ font-size:13px; color:var(--muted); margin:0 0 26px; }
.doc h2{
  font-size:16px; margin:32px 0 12px; padding-bottom:8px;
  border-bottom:2px solid var(--gold); display:inline-block;
}
.doc p,.doc li{ font-size:14px; line-height:1.65; color:var(--muted-dark); }
.doc ul{ margin:0 0 16px; padding-left:20px; }
.doc li{ margin-bottom:7px; }
.doc dl{ margin:0 0 16px; }
.doc dt{ font-size:13px; font-weight:700; color:var(--ink); margin-top:12px; }
.doc dd{ font-size:14px; color:var(--muted-dark); margin:3px 0 0; }
/* Unmistakable marker so a stub can never be shipped as if it were finished
   legal text. Removing the .todo spans is the checklist for going live. */
.todo{
  background:#fdf3d8; border:1px dashed var(--gold); color:#7a5f1e;
  padding:1px 6px; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.doc__warn{
  background:#fdf3d8; border-left:4px solid var(--gold); color:#7a5f1e;
  padding:16px 18px; font-size:13.5px; line-height:1.6; margin-bottom:28px;
}
.doc__warn strong{ display:block; margin-bottom:5px; color:#5c4715; }
.doc__back{ display:inline-block; margin-top:32px; font-size:13px; color:var(--navy); }