/* about.css — /about/, the "About us" page (on top of style.css, legal.css and business.css) */
.about-text { max-width: 46em; display: grid; gap: 10px; }
.about-text h2 { margin: 0; }
.biz-main .about-intro, .biz-main .about-outro { max-width: 46em; }
.biz-main .about-outro { margin-top: 24px; }
.biz-steps ol { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 24px; }

/* the first screen: the headline on the left, and beside it a note with what you can count on: white paper lying
   askew on a yellow slab with a second page behind it, as on the recipe pages (css/apppage.css) */
.biz-hero.about-hero { max-width: none; grid-template-columns: minmax(0, 46em) minmax(260px, 380px); align-items: center; justify-content: space-between; gap: 48px; }
.about-head { display: grid; gap: 18px; }
.about-sheet { --pp-bg: #FFFFFF; --pp-ink: #1C2428; position: relative; justify-self: center; width: min(100%, 380px); padding: 26px 20px 32px 28px; }
.about-sheet::before { content: ""; position: absolute; inset: 0 0 0 8px; background: var(--yellow); border-radius: 28px; transform: rotate(-4deg); }
.about-sheet::after { content: ""; position: absolute; inset: 38px 28px 28px 16px; background: var(--pp-bg); border-radius: 4px; transform: rotate(-5.5deg); opacity: .7; }
.about-paper { position: relative; z-index: 1; background: var(--pp-bg); color: var(--pp-ink); border-radius: 4px; padding: 28px 26px 30px; transform: rotate(2deg);
  box-shadow: 0 1px 0 rgb(28 36 40 / .08), 0 34px 50px -30px rgb(28 36 40 / .55); }
.biz-main .about-paper h2 { font: 600 20px/1.2 var(--display); letter-spacing: 0; margin: 0 0 16px; color: var(--pp-ink); }
.about-paper ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 16px; line-height: 1.4; }
.about-paper li { position: relative; padding-left: 26px; }
.about-paper li::before { content: ""; position: absolute; left: 0; top: .22em; width: 15px; height: 15px; border-radius: 4px; background: var(--yellow); }
@media (max-width: 900px) { .biz-hero.about-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } .about-sheet { justify-self: start; width: min(calc(100% - 14px), 380px); } }
/* the foot of the app's pages, without the two notes above its line: one rule on top is enough */
.about-foot { display: block; margin-top: 56px; }
.about-foot > .foot-base { margin-top: 0; padding-top: 0; border-top: 0; }
/* the small way back to the home page, top left, as on a recipe's page (css/apppage.css .wf-back) */
.biz-main a.about-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, var(--paper)); text-decoration: none; }
.biz-main a.about-back:hover { color: var(--ink); text-decoration: underline 2px var(--yellow); text-underline-offset: 4px; }

/* ── the new look ("Kitchen counter"): the banner's button, the note, the two brothers' card. The headings, steps
   and the invitation come from business.css. ── */
/* the banner is the app's; its button for companies keeps the app's size here (body.biz .btn is bigger) */
body.biz a.top-biz { height: 40px; padding: 0 14px; border-radius: 12px; box-shadow: var(--k-shadow-sm); font: 700 .95rem/1 var(--k-display); background: var(--k-yolk); color: var(--k-on-color); }
body.biz a.top-biz:active { transform: translate(3px, 3px); }
.biz-main a.about-back { font: 650 .95rem/1 var(--k-body); color: var(--k-ink); text-decoration: none; }
.biz-main a.about-back:hover { color: var(--k-ink); text-decoration: underline 3px var(--k-yolk); text-underline-offset: 5px; }
.biz-hero.about-hero { padding-top: 12px; }
/* the note: white paper with the ink outline on a yolk slab, a second sheet behind it */
.about-sheet { --pp-bg: var(--k-card); --pp-ink: var(--k-ink); }
.about-sheet::before { background: var(--k-yolk); border: 2px solid var(--k-line); border-radius: var(--k-r-xl); box-shadow: var(--k-shadow-lg); }
.about-sheet::after { background: var(--k-butter); border: 2px solid var(--k-line); border-radius: 10px; opacity: 1; }
.about-paper { border: 2px solid var(--k-line); border-radius: 10px 22px 10px 10px; box-shadow: var(--k-shadow); }
.biz-main .about-paper h2 { font: 800 1.35rem/1.15 var(--k-display); letter-spacing: -.03em; margin: 0 0 16px; color: var(--pp-ink); }
.about-paper ul { gap: 12px; font-size: 1rem; }
.about-paper li { padding-left: 30px; }
/* a ticked box in front of every promise */
.about-paper li::before { top: .12em; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--k-line); border-radius: 6px; background: var(--k-yolk)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.300l2.600 2.600L11 4.400' fill='none' stroke='%231D1B20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.about-paper li:nth-child(3n+2)::before { background-color: var(--k-mint); } .about-paper li:nth-child(3n)::before { background-color: var(--k-blush); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .about-paper li::before { background-color: var(--k-yolk); } }
:root[data-theme="dark"] .about-paper li::before { background-color: var(--k-yolk); }
/* the two brothers: a card of its own, as wide as the text reads well */
.about-text { max-width: 46em; gap: 12px; background: var(--k-card); border: 2px solid var(--k-line); border-radius: var(--k-r-lg); padding: clamp(22px, 3.4vw, 34px); box-shadow: var(--k-shadow); }
.about-text h2 { margin: 0 0 4px; }
.biz-main .about-intro, .biz-main .about-outro { font-size: 1.05rem; }
.biz-main .about-outro { margin-top: 28px; color: var(--k-muted); }
.biz-steps ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1040px) { .biz-steps ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.about-foot { max-width: 1168px; box-sizing: border-box; border-top: 2px solid var(--k-faint); }