/* Dorax Finance — the website's pages before launch (v211; features/site/site-pages.view.js): /para-pj, /conversor-de-extrato-ofx, /sobre,
   /como-funciona (v212). Since v212 each has its drawings (js/ui/art.js, css/components/art.css): a person over the title, a thing on each card.
   Made of the home page's parts (.lp2 and its l2- rules, css/public/landing-v2.css; the bar: css/public/web-pages.css). Only what the home page has
   no rule for is here: the top's room, the light cards with an icon, a sage panel with words at each side, a list with checks, a row of buttons. */
.st-hero { padding: 48px 0 120px; }
.st-page .l2-h1:focus { outline: none; }

/* cards with an icon, a name and a sentence: as many in a row as fit (four, three); on a white band they are sage, on a dark band the home page's */
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
.st-card { padding: 30px; border-radius: 28px; background: var(--l2-soft); }
.st-card .st-obj { width: 88px; }
.l2-tc .st-obj { width: 76px; }
.st-card h3 { margin: 24px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--l2-ink); }
.st-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--l2-ink-2); }
.st-more { display: flex; justify-content: center; margin: 40px 0 0; }

/* a sage panel, its title at the left and its words or its list at the right (the home page's panel of moments) */
.st-month, .st-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 64px; border-radius: 40px; background: var(--l2-sage); }
.st-month > div, .st-data > div { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.st-month .l2-sub, .st-data .l2-sub { margin: 0; }
.st-month .st-obj { width: 96px; }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.st-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--l2-ink); }
.st-list .l2-ck { margin-top: 1px; background: #FFFFFF; }

/* a row of buttons */
.st-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.st-page .l2-white + .l2-end { padding-top: 120px; }      /* the closing box after a white band: the home page's room above it */


/* ---------- v212: the drawings ---------- */
/* a person over the title; people in a row under the line of trust (about) */
.st-pic { width: 150px; margin-bottom: -6px; }
.st-row { display: flex; justify-content: center; margin-top: 12px; } .st-row .fig { width: 132px; margin: 0 -10px; }
/* cards with a question, a thing over each: sage on a white band, white on the page, dark on a dark band */
.st-qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.st-qcard { display: flex; flex-direction: column; padding: 32px; border-radius: 32px; background: var(--l2-soft); }
.st-qcard .st-obj { width: 96px; }
.st-qcard h3 { margin: 30px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--l2-ink); }
.st-qcard p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--l2-ink-2); }
.st-qcards.white .st-qcard { background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.st-qcards.dark .st-qcard { background: var(--l2-dark-2); box-shadow: 0 0 0 1px var(--l2-dark-line); }
.st-qcards.dark .st-qcard h3 { color: #F0F2EE; } .st-qcards.dark .st-qcard p { color: var(--l2-on-dark-2); }
.st-mission { margin: 48px auto 0; max-width: 640px; text-align: center; font-size: 18px; line-height: 1.55; color: var(--l2-ink-2); }
.st-mission b { color: var(--l2-forest); font-weight: 600; }
/* the story: four moments in a row, joined by a dashed line, the last one the year */
.st-story { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.st-story li { display: flex; flex-direction: column; }
.st-story .fig { width: 172px; margin: 0 auto; }
.st-mark { position: relative; display: flex; align-items: center; margin: 28px 0 22px; }
.st-mark::after { content: ""; position: absolute; left: 44px; right: -28px; top: 50%; border-top: 2px dashed var(--l2-line-strong); }
.st-story li:last-child .st-mark::after { display: none; }
.st-num { position: relative; z-index: 1; display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; background: var(--l2-forest); color: var(--l2-lime); font-size: 14px; font-weight: 700; }
.st-story li:last-child .st-num { background: var(--l2-lime); color: var(--l2-forest); }
.st-story h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; color: var(--l2-ink); }
.st-story p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--l2-ink-2); }
/* your data: the key at the right of its panel */
.st-key { width: min(240px, 70%); justify-self: center; }
.l2-lock .st-key { width: 180px; }
/* who answers */
.st-talk { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.st-talk .fig { width: 190px; } .st-talk .l2-sub { margin: 0; } .st-talk .st-links { margin-top: 16px; }
/* how it works: the steps, picture and words taking turns */
.st-steps { list-style: none; margin: 64px 0 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.st-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.st-step:nth-child(even) .st-step-pic { order: 2; }
.st-step-pic { display: grid; place-items: center; padding: 28px; border-radius: 40px; background: var(--l2-soft); }
.st-step-pic .fig { width: min(260px, 100%); }
.st-step-w { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 470px; }
.st-no { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--l2-mint); color: var(--l2-forest); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.st-step h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; color: var(--l2-ink); }
.st-step p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--l2-ink-2); }
.st-say { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.st-say span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); font-size: 13px; font-weight: 600; color: var(--l2-ink-2); }
/* the company: the house and the briefcase, a dashed line between them */
.st-pair { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 48px; }
.st-pair .st-obj { width: 110px; }
.st-pair > i { width: 0; height: 110px; border-left: 2px dashed rgba(226, 246, 213, .45); }
.st-pair small { display: block; margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; color: #C9CEC4; }
.l2-pj .st-more { margin-top: 48px; }

@media (max-width: 1100px) { .st-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; } .st-story li:nth-child(2) .st-mark::after { display: none; } }
@media (max-width: 920px) {
  .st-month, .st-data { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 28px; }
  .st-qcards { grid-template-columns: minmax(0, 1fr); }
  .st-step { grid-template-columns: minmax(0, 1fr); gap: 24px; } .st-step:nth-child(even) .st-step-pic { order: 0; }
}
@media (max-width: 720px) {
  .st-hero { padding: 24px 0 72px; }
  .st-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
  .st-card { padding: 24px; border-radius: 24px; }
  .st-card h3 { margin-top: 20px; }
  .st-month, .st-data { padding: 28px 22px; border-radius: 28px; }
  .st-links .l2-btn, .st-more .l2-btn { width: 100%; }
  .st-page .l2-white + .l2-end { padding-top: 72px; }
  .st-card .st-obj { width: 72px; }
  .st-pic { width: 120px; }
  .st-row .fig { width: 80px; margin: 0 -7px; }
  .st-qcards { margin-top: 40px; gap: 14px; } .st-qcard { padding: 24px; border-radius: 28px; } .st-qcard .st-obj { width: 80px; } .st-qcard h3 { margin-top: 22px; font-size: 20px; }
  .st-mission { font-size: 16px; margin-top: 36px; }
  .st-story { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
  .st-story li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .st-story .fig { width: 104px; grid-row: span 3; }
  .st-mark { margin: 0 0 10px; } .st-mark::after { display: none; }
  .st-key { width: 150px; }
  .st-talk .fig { width: 160px; }
  .st-steps { gap: 48px; margin-top: 40px; } .st-step-pic { padding: 20px; border-radius: 28px; } .st-step-pic .fig { width: 190px; } .st-step p { font-size: 16px; }
  .st-pair .st-obj { width: 84px; } .st-pair > i { height: 84px; }
}

/* ---------- v212: the drawings on the other pages of the website ---------- */
/* the home page's steps and trust cards (css/public/landing-v2.css): a thing in each step's circle, on its colour */
.l2-st-c .obj { width: 66px; height: auto; }
.l2-st.s2 .l2-st-c .obj { --obj-fill: #FFFFFF; }
.l2-st.s3 .l2-st-c .obj, .l2-st.s4 .l2-st-c .obj { --obj-ink: #E2F6D5; }
.l2-steps-l > .l2-btn { margin-top: 24px; }
/* the Help center: each topic's thing (css/screens/help-center.css); the person over "Didn't find your answer?" */
.hc-bx .hc-bx-ic, .hc-bx.dark .hc-bx-ic { width: 76px; height: auto; border-radius: 0; background: none; box-shadow: none; }
.hc-bx .hc-bx-ic .obj { width: 76px; height: auto; }
.hc-fig { width: 150px; margin-bottom: 6px; }
/* the pages to log in and to create an account, the contact form: their person or thing over the title */
.auth-pic { width: 128px; margin: 4px auto 0; }
.auth-obj { width: 96px; margin: 4px auto 0; }
.ct-pic { width: 128px; margin: 8px 0 4px; }
@media (max-width: 720px) {
  .l2-st-c .obj { width: 42px; }
  .hc-bx .hc-bx-ic, .hc-bx.dark .hc-bx-ic, .hc-bx .hc-bx-ic .obj { width: 64px; }
  .hc-fig { width: 120px; }
  .auth-pic { width: 104px; } .auth-obj { width: 80px; } .ct-pic { width: 104px; }
}
/* the home page's people: css/public/landing-v2.css since v213 (the home page drawn around them) */