/* Measured, About (/about/). Ported from docs/design/v2/about-b.html (round 1, 22 October). Only what the page needs
   beyond home.css: the shared inner hero (left set, shorter band) with the glance card, the dashboard showcase under
   it, What we do, How we work, How we're different and the close's one line. Loaded after home.css. */

/* Chip and paper tokens (light, then dark by preference, then dark by choice) */
:root { --chip-y: #FDEBC4; --chip-s: #DCE9FB; --paper: #FFFBF3; --paper-2: #F3E6CC; --paper-3: #F8EEDB; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; }
}
:root[data-theme="dark"] { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; }

.chip { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--chip-ink); flex: none; }
.chip .i { width: 17px; height: 17px; }
.chip--y { background: var(--chip-y); } .chip--m { background: var(--chip-m); } .chip--s { background: var(--chip-s); }
.nowrap { white-space: nowrap; }

/* ---------- Hero: the shared inner hero, Home's Aurora at Home's strength, the glance card across the band's edge ---------- */
.hero { --edgeh: 0px; background: var(--bg); }
.hero::before { display: none; }
.hero__copy { position: relative; text-align: left; justify-items: start; padding-top: 48px; }
.hero__copy::before, .hero__copy::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -60px; bottom: calc(-1 * var(--bandx, 150px)); pointer-events: none; }
.hero__copy::before { border-bottom: 1px solid rgb(185 212 247 / .22); background: var(--band); }
.hero__copy::after { opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
.hero__copy .hero__glow { display: block; inset: auto; top: -60px; bottom: calc(-1 * var(--bandx, 150px)); left: calc(50% - 50vw); width: 100vw; z-index: -1; }
.hero .eyebrow { min-height: 0; padding: 0; box-shadow: none; background: none; font-size: 15px; font-weight: 600; }
.hero h1 { margin-top: 14px; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; }
.hero h1 span { display: inline; }
.lede { margin-top: 16px; max-width: 720px; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.lede b { color: #fff; font-weight: 600; }
.aform { margin-top: 24px; }
.factstage { position: relative; margin-top: 40px; display: grid; justify-items: start; padding-bottom: 8px; }
.sheets { position: relative; width: min(760px, 100%); }
.sheets::before, .sheets::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--paper-2); box-shadow: 0 1px 0 rgb(20 40 75 / .06), 0 20px 40px -24px rgb(4 10 24 / .45); }
.sheets::before { transform: rotate(-1.2deg) translate(-6px, 10px); }
.sheets::after { transform: rotate(.8deg) translate(8px, 6px); background: var(--paper-3); }
.sheet { position: relative; z-index: 1; border-radius: 6px; background: var(--paper); color: #14284B; overflow: hidden; --focus: #14284B;
  box-shadow: 0 0 0 1px rgb(120 90 40 / .10), 0 2px 4px rgb(4 10 24 / .08), 0 26px 50px -22px rgb(4 10 24 / .5), 0 60px 110px -40px rgb(4 10 24 / .34); }
.sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .3  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.sheet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 1.5px; background: #F2C9B8; }
.sheet__top { position: relative; padding: 20px 26px 13px 62px; border-bottom: 1px solid #EEDFC4; }
.sheet__top b { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.facts { position: relative; padding: 4px 26px 4px 62px; margin: 0; }
.facts div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid #F1E6D2; }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: 15px; font-weight: 600; color: #3E4F70; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.45; color: #14284B; text-wrap: pretty; overflow-wrap: anywhere; }
.facts dd a { color: #14284B; font-weight: 600; display: inline-flex; align-items: center; padding-block: 11px; margin-block: -11px; }
@media (min-width: 1101px) {
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; align-items: start; }
  .hero__copy::before, .hero__copy::after, .hero__copy .hero__glow { left: calc(-1 * ((100vw - min(100vw, var(--page) + 2 * var(--gutter))) / 2 + var(--gutter))); }
  .hero__copy { --bandx: 72px; padding-bottom: 8px; }
  .factstage { margin-top: 48px; justify-items: stretch; }
  .sheets { width: 100%; }
}

/* ---------- Product visual: Home's dashboard render (styled by home.css), in its own section ---------- */
.showcase { padding-top: 88px; }
.showcase .instrument.rdi { margin-top: 0; }
.showcase .rdm { box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -20px rgb(12 26 51 / .45), 0 70px 120px -40px rgb(12 26 51 / .35); }
/* 12px text floor for the render on this page (Home is frozen and keeps its own sizes in home.css) */
.showcase .rd-pill, .showcase .rd-info, .showcase .rd-kick, .showcase .rd-navh, .showcase .rd-client small,
.showcase .rd-owner i, .showcase .rd-owner small, .showcase .rd-leg span, .showcase .rdm__head small,
.showcase .rdm__date, .showcase .rd-rest { font-size: 12px; }
.showcase .rd-chart { --fs: 12px; }

/* ---------- What we do: one list, two columns, chip rows, on the page ground ---------- */
.svc { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 1px solid var(--hair); }
.svc li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.svc b { color: var(--ink); font-weight: 600; }
.focus-line { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 44em; }

/* ---------- How we work: Home's paper section, heading left, rows right ---------- */
.how { margin-top: 104px; }
.how__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.rows { border-top: 1px solid var(--warm-line); }
.rows li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--warm-line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rows b { color: var(--ink); font-weight: 600; }

/* ---------- How we're different: three points on the ground, no cards ---------- */
.diff { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--hair); }
.diff li { padding: 18px 0 4px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.diff b { display: block; margin-bottom: 4px; font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.diff-more { margin-top: 10px; }
.diff-more .link { color: var(--ink); }
.close__line { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--on-band-2); max-width: 30em; }
/* Quality bar 22 Oct, X1: the last section ends with the set's gap (104px, 48px on phones) above the navy close. The
   "See the websites we build" link's 44px target already sits 12px below its text, so the padding is 12px less. */
.sec:has(+ .close) { padding-bottom: 92px; }
@media (max-width: 760px) { .sec:has(+ .close) { padding-bottom: 36px; } }

@media (max-width: 1100px) { .how__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 760px) {
  .hero__copy { padding-top: 18px; padding-bottom: 36px; --bandx: 72px; }
  .hero .eyebrow { font-size: 14px; }
  .hero h1 { margin-top: 10px; font-size: 40px; }
  .lede { margin-top: 12px; font-size: 17px; }
  .factstage { margin-top: 26px; }
  .sheets { margin-inline: -6px; width: calc(100% + 12px); }
  .sheet::after { left: 24px; }
  .sheet__top { padding: 14px 14px 10px 40px; }
  .sheet__top b { font-size: 17px; }
  .facts { padding: 2px 14px 2px 40px; }
  .facts div { grid-template-columns: 1fr; gap: 0; padding: 8px 0; }
  .facts dt { font-size: 13px; }
  .facts dd { font-size: 15px; }
  .showcase { padding-top: 40px; }
  /* Phones: the phone view only (as Home), its top part, so About stays short */
  .showcase .instrument.rdi { padding-bottom: 0; max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); }
  .svc { grid-template-columns: 1fr; margin-top: 18px; }
  .svc li { padding: 10px 0; gap: 12px; }
  .focus-line { font-size: 15px; }
  .how { margin-top: 48px; }
  .rows li { padding: 10px 0; gap: 12px; }
  .diff { grid-template-columns: 1fr; margin-top: 16px; }
  .diff li { padding: 12px 0 10px; border-bottom: 1px solid var(--hair); }
  .diff b { font-size: 17px; }
  .close__line { font-size: 15px; }
}
@media (max-width: 374px) { .hero h1 { font-size: 36px; } }

/* F41, 22 Oct: the close card's email line, as the hero's hint, on the cream card (fixed colours in both themes) */
.go .cta2__hint { margin-top: 14px; color: #3E4F70; }
.go .cta2__hint a { color: #14284B; }