/* ═══════════════════════════════════════════════════════════════════════════
   The „document" template (Design chat, 2026-11-02): Shipping & Returns, Terms,
   Privacy Policy, Withdrawal. <body class="rg2 doc">:
     .doc-hero.page-stage[data-hero]  a short dark stage, h1 + sub-line, centred;
     .doc-body.dissolve               a light column of white cards (.doc-card)
                                      between the two blue dissolves;
     then the flat signup (.is-flat), or straight into the footer.
   The shared pieces (page stage, dissolve, signup, footer) come from css/site.css.
   Text #1b2340 / #444466, faint #8a90a8, gold as text #996E13, hairline rgba(27,35,64,.12).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ hero: the bands sit high, clear of the bottom edge ═══════════════════ */
.doc .doc-hero { padding: 170px var(--pad) 110px; text-align: center; }
.doc .doc-hero .band-1 { top: 12%; }
.doc .doc-hero .band-2 { top: -40%; }
.doc .doc-hero .band-3 { top: 6%; }
.doc .doc-head { max-width: 760px; margin: 0 auto; }
.doc .doc-head h1 { margin: 0 0 18px; font-size: 54px; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; color: #fff; }
.doc .doc-head h1 .sc-ul { left: -1%; width: 102%; bottom: -8px; height: 16px; }
.doc .doc-head p { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.65; color: var(--muted); }

/* ═══ body: one 800 px column of cards ════════════════════════════════════
   The cards start halfway down the upper fade and sit over it (founder 2026-11-02,
   as on Contact). The short pages (404, review) keep their old height by taking
   the space at the bottom: shorter, the two dissolves overlap and .dz2's edge shows. */
.doc .doc-body { --dz-h: 440px; --dz-tilt: 4deg; --dz-top: -100px; --dz2-bottom: 0px; --mid: 240px;
  padding: 150px var(--pad) 360px; }
.doc:is(.notfound, .review) .doc-body { padding-bottom: 570px; }
.doc .doc-col { display: flex; flex-direction: column; gap: 24px; max-width: 800px; margin: 0 auto; }
.doc .doc-card {
  padding: 40px 44px 36px; border-radius: 24px; background: #fff; color: #1b2340;
  border: 1px solid rgba(27,35,64,.08); box-shadow: 0 14px 40px rgba(27,35,64,.07);
}
.doc .doc-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: #1b2340; }
/* the rounded square before a heading: an outline icon in gold, or the section number */
.doc .doc-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  background: #f4f6fb; border: 1px solid rgba(27,35,64,.12); color: #996E13; font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.doc .doc-ico.is-num { color: #1b2340; }
.doc .doc-ico svg { width: 22px; height: 22px; }

/* running text */
.doc .doc-card p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: #444466; }
.doc .doc-card > :last-child { margin-bottom: 0; }
.doc .doc-card p.doc-small { margin-top: 24px; font-size: 14.5px; line-height: 1.7; }
.doc .doc-card strong { font-weight: 600; color: #1b2340; }
.doc .doc-card em { color: #8a90a8; }
.doc .doc-card a:not([class*="btn"]) { color: #996E13 !important; text-decoration: underline; text-underline-offset: 3px; }   /* the live links carry inline colours */
.doc .doc-card ol { margin: 0 0 14px; padding-left: 22px; }
.doc .doc-card ol li { margin-bottom: 8px; padding-left: 4px; font-size: 15.5px; line-height: 1.7; color: #444466; }
.doc .doc-card ol li::marker { color: #996E13; font-weight: 600; }
/* bullets: a short gold stroke, never a dot */
.doc .doc-card ul { margin: 0 0 14px; padding: 0; list-style: none; }
.doc .doc-card ul li { position: relative; margin-bottom: 8px; padding-left: 22px; font-size: 15.5px; line-height: 1.7; color: #444466; }
.doc .doc-card ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 12px; height: 2px; border-radius: 2px; background: var(--gold); }
.doc .doc-card li:last-child { margin-bottom: 0; }

/* small tracked label („Last updated", „Return address:") */
.doc .doc-card .doc-label, .doc .doc-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: #8a90a8; }
/* the quiet note block */
.doc .notice-box {
  margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; background: #f4f6fb; border: 1px solid rgba(27,35,64,.12);
  font-size: 14.5px; line-height: 1.65; color: #1b2340;
}
/* the „convenience only" sentence js/i18n.js adds on EN/RO legal pages ([data-legal-note] is its slot) */
.doc #rg-legal-note {
  margin: 0 0 16px !important; max-width: none !important; padding: 14px 18px !important; border-radius: 14px !important;
  background: #f4f6fb !important; border: 1px solid rgba(27,35,64,.12) !important; color: #1b2340 !important; font-size: 14.5px !important;
}
/* a small pill tag („Delivery with Speedy") */
.doc .doc-tag {
  display: inline-flex; align-items: center; height: 30px; margin: 0 0 20px; padding: 0 14px; border-radius: 999px;
  background: #fff7e6; color: #996E13; font-size: 12.5px; font-weight: 600;
}
/* numbered steps: navy circles */
.doc .step-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; }
.doc .step-item { display: flex; align-items: flex-start; gap: 14px; }
.doc .step-num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-top: 0; border-radius: 50%;
  background: #1b2340; color: #fff; font-size: 13px; font-weight: 600;
}
.doc .step-item p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #444466; }
/* an address in a hairline box with a gold pin */
.doc .address-box {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 16px;
  background: #fff; border: 1.5px solid rgba(27,35,64,.12); font-size: 15px; line-height: 1.6; color: #1b2340;
}
.doc .address-box svg { flex-shrink: 0; color: #996E13; }
.doc .address-box small { font-size: 13px; color: #8a90a8; }

/* Privacy Policy: the cookie table (no outer box) and the rights grid */
.doc .cookie-table { width: 100%; margin: 4px 0 14px; border-collapse: collapse; }
.doc .cookie-table th {
  padding: 0 12px 10px; border-bottom: 1px solid rgba(27,35,64,.12); text-align: left;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a90a8; background: none;
}
.doc .cookie-table td { padding: 12px; border-bottom: 1px solid rgba(27,35,64,.12); vertical-align: top; font-size: 14.5px; line-height: 1.55; color: #444466; }
.doc .cookie-table :is(th, td):first-child { padding-left: 0; }
.doc .cookie-table :is(th, td):last-child { padding-right: 0; }
.doc .cookie-table tr:last-child td { border-bottom: 0; }
.doc .rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
.doc .right-card { padding: 16px 18px; border-radius: 16px; background: #f4f6fb; border: 1px solid rgba(27,35,64,.12); }
.doc .right-card strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #1b2340; }
.doc .right-card span { font-size: 14px; line-height: 1.55; color: #444466; }

/* ═══ forms (the return request, the withdrawal statement) ══════════════ */
.doc .return-form { display: flex; flex-direction: column; gap: 16px; }
.doc .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doc .form-group label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #444466; }
.doc .form-group label span { color: #996E13; }
.doc .form-group input, .doc .form-group select, .doc .form-group textarea {
  display: block; width: 100%; height: 52px; padding: 0 18px; border-radius: 14px;
  border: 1px solid rgba(27,35,64,.12); background: #f4f6fb; color: #1b2340;
  font: inherit; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.doc .form-group select {
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.doc .form-group textarea { height: auto; min-height: 120px; padding: 14px 18px; resize: vertical; }
.doc .form-group :is(input, textarea)::placeholder { color: #8a90a8; }
.doc .form-group :is(input, select, textarea):focus { border-color: var(--gold); background-color: #fff; box-shadow: 0 0 0 3px rgba(246,177,30,.15); }
/* confirmations: 20 px rounded squares */
.doc .form-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.6; color: #444466; }
.doc .form-check input[type=checkbox] {
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex-shrink: 0;
  width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid #c3c8d8; background: #fff; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.doc .form-check input[type=checkbox]::after { content: ''; width: 10px; height: 5px; margin-top: -3px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); opacity: 0; }
.doc .form-check input[type=checkbox]:checked { background: #1b2340; border-color: #1b2340; }
.doc .form-check input[type=checkbox]:checked::after { opacity: 1; }
.doc .form-check input[type=checkbox]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.doc .form-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.doc .form-submit-row .btn-pink:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.doc .form-msg { display: none; font-size: 14px; font-weight: 600; }   /* the script shows it inline */

/* ═══ 404: a handwritten „404" over the title, the two buttons in a small card ═══ */
.doc .err-code { display: inline-block; margin: 0 0 18px; font-family: 'Bad Script', cursive; font-size: 84px; line-height: 1; color: var(--gold); transform: rotate(-4deg); }
.notfound .doc-col { max-width: 520px; }
.notfound .err-card { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 36px 40px; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .doc .doc-hero { padding: 130px 22px 70px; }
  .doc .doc-hero .band-1 { top: 16%; }
  .doc .doc-hero .band-2 { top: -30%; }
  .doc .doc-hero .band-3 { top: 10%; }
  .doc .doc-head h1 { font-size: 38px; }
  .doc .doc-head p { font-size: 15.5px; }
  .doc .doc-body { --dz-h: 300px; --dz-top: -60px; --mid: 200px; padding: 90px 22px 230px; }
  .doc.review .doc-body { padding-bottom: 370px; }
  .doc .doc-card { padding: 28px 20px 26px; }
  .doc .doc-card h2 { font-size: 22px; }
  .doc .doc-ico { width: 36px; height: 36px; }
  .doc .doc-ico svg { width: 20px; height: 20px; }
  .doc .form-row { grid-template-columns: minmax(0, 1fr); }
  .doc .form-submit-row .btn-pink { width: 100%; }
  .doc .rights-grid { grid-template-columns: minmax(0, 1fr); }
  .doc .cookie-table td { font-size: 13.5px; }
  .doc .err-code { font-size: 64px; }
  .doc.notfound .doc-body { padding: 90px 22px 310px; }
  .notfound .err-card { flex-direction: column; padding: 28px 20px; }
  .notfound .err-card > a { width: 100%; }
}

/* ═══ MOTION — the hero's entrance ══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .doc .navbar { animation: rg-drop .8s .05s cubic-bezier(.2,.7,.2,1) backwards; }
  .doc .doc-head > * { animation: rg-rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
  .doc .doc-head > :nth-child(1) { animation-delay: .08s; }
  .doc .doc-head > :nth-child(2) { animation-delay: .2s; }
  .doc .doc-head > :nth-child(3) { animation-delay: .3s; }
}