/* Oinordetza story: a how-to in the order the sources give it, then a short look at the app. Chromium 67 safe: no gap, clamp, inset or aspect-ratio. */
@font-face { font-family: 'Estate UI'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }
body.page-oinordetza {
  --bg: #fbf7ee; --surface: #ffffff; --raised: #f1e9d8;
  --text: #2a2419; --text-2: #5a5140; --muted: #5a5140;
  --accent: #7a4a14; --accent-ink: #ffffff; --accent-soft: rgba(122,74,20,.12);
  --hair: rgba(42,36,25,.16); --hair-2: rgba(42,36,25,.32);
  --bar: #fbf7ee; --head: Georgia, 'Times New Roman', serif; --body: 'Estate UI', 'Segoe UI', Arial, sans-serif;
}
.page-oinordetza .wrap { max-width: 1080px; }
.page-oinordetza p { line-height: 1.72; }
.page-oinordetza h1, .page-oinordetza h2, .page-oinordetza h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.page-oinordetza h2 { font-size: 31px; line-height: 1.2; }
.page-oinordetza h3 { font-size: 21px; line-height: 1.3; }
.page-oinordetza a { text-underline-offset: 3px; }
.page-oinordetza .btn { border-radius: 4px; line-height: 1.35; }
.oin-top { padding: 40px 0 44px; border-bottom: 1px solid #cdbf9f; }
.oin-top .crumb { margin-bottom: 30px; font-size: 14px; }
.oin-top .story-app { margin-bottom: 26px; }
.oin-top h1 { font-size: 44px; line-height: 1.12; max-width: 820px; letter-spacing: -.01em; }
.oin-lead { margin-top: 22px; max-width: 700px; font-size: 19px; color: #3f372a; }
.oin-order { margin-top: 36px; border-top: 3px solid #2a2419; }
.oin-order ol { list-style: none; margin: 0; padding: 0; display: flex; }
.oin-order li { width: 25%; padding: 16px 18px 0 0; font-size: 15px; line-height: 1.45; }
.oin-order li a { display: block; text-decoration: none; }
.oin-order li a:hover strong { text-decoration: underline; }
.oin-order strong { display: block; font-family: Georgia, serif; font-size: 18px; margin-bottom: 4px; color: #7a4a14; }
.oin-how { padding: 54px 0 30px; }
.oin-how-head { max-width: 760px; margin-bottom: 30px; }
.oin-how-head p { margin-top: 14px; color: #4a4231; }
.oin-step { margin-left: 18px; padding: 0 0 36px 36px; border-left: 2px solid #b79a63; position: relative; scroll-margin-top: 84px; }
.oin-step:last-child { padding-bottom: 8px; }
.oin-step .num { position: absolute; left: -19px; top: 0; width: 36px; height: 36px; border-radius: 18px; background: #7a4a14; color: #fff; text-align: center; line-height: 36px; font-family: Georgia, serif; font-size: 18px; }
.oin-step h3 { margin-bottom: 12px; padding-top: 3px; }
.oin-step p { max-width: 720px; }
.oin-step p + p { margin-top: 14px; }
.oin-table { width: 100%; max-width: 820px; margin-top: 18px; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.5; }
.oin-table th, .oin-table td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid #d8cba9; }
.oin-table th { background: #f1e9d8; font-weight: 700; }
.oin-table td:nth-child(2) { white-space: nowrap; font-family: Georgia, serif; font-size: 17px; }
.oin-differ { margin: 22px 0 0; max-width: 720px; padding: 18px 22px; background: #f1e9d8; border-left: 4px solid #7a4a14; font-size: 15px; }
.oin-differ p { line-height: 1.65; }
.oin-differ p + p { margin-top: 10px; }
.oin-confirm { margin-top: 26px; max-width: 720px; font-weight: 700; }
.oin-app { background: #243326; color: #f3eee0; padding: 56px 0 52px; margin-top: 34px; scroll-margin-top: 64px; }
.oin-app a { color: #f0d9a5; }
.oin-app h2 { color: #fbf7ee; max-width: 760px; }
.oin-app-text { max-width: 740px; margin-top: 20px; }
.oin-app-text p + p { margin-top: 14px; }
.oin-app-text strong { color: #fff; }
.oin-shots { display: flex; margin: 38px -12px 10px; align-items: flex-start; }
.oin-shots figure { width: 33.333%; padding: 0 12px; margin: 0; }
.oin-shots img { display: block; width: 100%; max-width: 300px; margin: 0 auto 14px; border: 1px solid #6f8272; border-radius: 6px; background: #fbf7ee; }
.oin-shots figcaption { max-width: 300px; margin: 0 auto; font-size: 14px; line-height: 1.55; color: #e6dfcb; }
.oin-shots figcaption strong { display: block; margin-bottom: 4px; font-size: 16px; color: #fff; }
.oin-shot-note { margin-top: 28px; font-size: 14px; color: #d9d1ba; max-width: 740px; }
.oin-facts { display: flex; margin-top: 40px; border-top: 1px solid #6f8272; padding-top: 32px; }
.oin-facts > div { width: 50%; padding-right: 40px; }
.oin-facts > div + div { padding-right: 0; }
.oin-facts h3 { color: #fff; margin-bottom: 12px; }
.oin-facts p { font-size: 15px; margin-bottom: 12px; }
.oin-facts .btn { margin-top: 8px; background: #f0d9a5; color: #243326; border-color: #f0d9a5; }
.oin-end { padding: 40px 0 14px; }
.oin-end-box { display: flex; justify-content: space-between; align-items: center; border: 1px solid #cdbf9f; padding: 30px; border-radius: 6px; background: #fff; }
.oin-end-box > div:first-child { width: 64%; padding-right: 30px; }
.oin-end-box h2 { font-size: 26px; margin-bottom: 10px; }
.oin-end-actions { width: 36%; }
.oin-end-actions > a { display: table; margin: 12px 0; }
@media (max-width: 800px) {
  .oin-top h1 { font-size: 36px; }
  .oin-order ol { display: block; }
  .oin-order li { width: 100%; padding: 14px 0; border-bottom: 1px solid #d8cba9; }
  .oin-shots, .oin-facts, .oin-end-box { display: block; }
  .oin-shots { margin: 30px 0 8px; }
  .oin-shots figure { width: 100%; padding: 0; margin: 0 0 30px; }
  .oin-facts > div, .oin-end-box > div:first-child, .oin-end-actions { width: 100%; padding-right: 0; }
  .oin-facts > div + div { margin-top: 24px; border-top: 1px solid #6f8272; padding-top: 24px; }
}
@media (max-width: 560px) {
  .page-oinordetza h2 { font-size: 27px; }
  .oin-top { padding: 28px 0 32px; }
  .oin-top h1 { font-size: 31px; }
  .oin-lead { font-size: 17px; }
  .oin-how { padding: 38px 0 20px; }
  .oin-step { margin-left: 14px; padding-left: 28px; }
  .oin-table { font-size: 14px; }
  .oin-table th, .oin-table td { padding: 9px 9px; }
  .oin-table td:nth-child(2) { white-space: normal; }
  .oin-app { padding: 40px 0; }
  .oin-end-box { padding: 22px; }
}