/* Counsel, craft v2 "The Receipt", type revised in craft v3. Taken from the app: the forest-dark page (#0f1511), bone
   ink (#ece9df), the brass "advisor's voice" (#cdae7e), lime for the one thing you press (#c9f36a) and Fraunces for
   anything Counsel says out loud. The motif is the app's own promise: every number comes with a receipt. A receipt here
   is a bone paper slip with a torn edge, narrow mono figures on dotted leaders, a double rule above the answer and a
   confidence pill. Nothing else is boxed.
   Type: Fraunces stays (the app's own voice; page and app have to sound alike, so this one is kept on purpose, cut to
   400 to 600 with its optical-size axis). Ysabeau Office reads: a Garamond-rooted humanist sans drawn for office and
   screen work, with lining tabular figures for money in running text; quieter and less seen than the grotesque it
   replaces. Iosevka prints the receipts: a narrow monospace whose proportions are close to a thermal till roll, so a
   42-column slip looks like one. All SIL OFL 1.1, see /counsel/fonts/. Shared by /counsel/ and /counsel/guides/*. */
@font-face { font-family: "Fraunces"; src: url("/counsel/fonts/fraunces.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/counsel/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ysabeau Office"; src: url("/counsel/fonts/ysabeau-office.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("/counsel/fonts/iosevka.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("/counsel/fonts/iosevka-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 109.4%; ascent-override: 89.4%; descent-override: 23.3%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback"; src: local("Georgia"); size-adjust: 85%; ascent-override: 115.1%; descent-override: 30%; line-gap-override: 0%; } /* opsz 144 is far narrower */
@font-face { font-family: "Ysabeau Fallback"; src: local("Arial"); size-adjust: 95.8%; ascent-override: 110%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "Iosevka Fallback"; src: local("Consolas"); size-adjust: 90.9%; ascent-override: 106.1%; descent-override: 23.6%; line-gap-override: 7.7%; }

body.cs {
  --forest-0: #0f1511; --forest-1: #141c16; --card: #1a231c; --line: #2a352c; --line-soft: rgba(236, 233, 223, .12);
  --bone: #ece9df; --bone-dim: #a9b3a8; --bone-faint: #8a978c;
  --brass: #cdae7e; --lime: #c9f36a; --lime-ink: #17240a; --hi: #7fce9f;
  --paper: #f1ede2; --slip: #f8f5ec; --ink: #16211b; --ink-2: #44514a; --ink-3: #5f6b63; --forest: #1c4b3a; --brass-ink: #7a5a1e;
  --rule-ink: rgba(22, 33, 27, .16);
  --display: "Fraunces", "Fraunces Fallback", Georgia, serif; --text-face: "Ysabeau Office", "Ysabeau Fallback", "Segoe UI", sans-serif;
  --mono: "Iosevka", "Iosevka Fallback", ui-monospace, monospace;
  --accent: var(--brass); --accent-2: var(--forest); --lamp: var(--lime);
  background: var(--forest-0); color: var(--bone); font: 400 18px/1.6 var(--text-face); font-variant-numeric: lining-nums;
}
body.cs::after { display: none; }
.cs ::selection { background: var(--lime); color: var(--lime-ink); }
.cs :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.cs h1, .cs h2, .cs h3 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.cs h1, .cs h2 { font-family: "Fraunces", "Fraunces Display Fallback", Georgia, serif; }
.cs h1 { font-size: clamp(46px, 6.4vw, 100px); margin: 0 0 24px; line-height: .98; }
.cs h2 { font-size: clamp(36px, 4.4vw, 66px); margin: 0 0 20px; }
.cs h3 { font-size: clamp(23px, 2vw, 29px); margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.12; }
.cs h1 em, .cs h2 em { font-style: italic; color: var(--brass); }
.cs p { max-width: 62ch; }
.cs .lede { font-size: clamp(18.5px, 1.45vw, 21px); color: var(--bone-dim); max-width: 48ch; line-height: 1.55; }
.cs a { text-underline-offset: 4px; }
.cs a:hover { color: var(--lime); }
.cs .skip:hover { color: var(--ink); }
.cs .wrap { max-width: 1220px; }

/* chrome: the shared nav + footer, inked for the ledger */
.cs .wordmark { font: 500 24px/1 var(--display); letter-spacing: -.01em; }
.cs .nav.scrolled { background: rgba(15, 21, 17, .94); backdrop-filter: none; border-bottom: 1px solid var(--line); }
.cs .nav ul a { font: 500 14.5px/1 var(--text-face); letter-spacing: 0; text-transform: none; color: var(--bone-dim); }
.cs .nav ul a:hover, .cs .nav ul a[aria-current="page"] { color: var(--bone); }
.cs .nav ul a[aria-current="page"]::after { -webkit-mask: none; mask: none; height: 0; bottom: 1px; background: none; border-bottom: 3px double var(--brass); }
.cs .nav .menu-btn { font: 500 14px/1 var(--text-face); letter-spacing: 0; text-transform: none; border-color: var(--line); }
@media (max-width: 900px) {
  .cs .nav ul { background: var(--paper); }
  .cs .nav ul a { color: var(--ink); font: 400 34px/1.15 var(--display); border-bottom-color: var(--rule-ink); }
  .cs .nav ul a:hover, .cs .nav ul a[aria-current="page"] { color: var(--forest); }
}
.cs .foot { background: var(--paper); color: var(--ink); border-top: 3px double rgba(22, 33, 27, .35); }
.cs .foot .wordmark { color: var(--ink) !important; }
.cs .foot .products a { font: 400 25px/1.1 var(--display); }
.cs .foot .products span, .cs .foot p { color: var(--ink-3) !important; }
.cs .foot .small { font: 400 13px/1.6 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.cs .foot a:hover { color: var(--forest); }

/* buttons: one lime primary per view (only where there's no App Store badge), a quiet underlined link otherwise */
.cs .btn {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--lime); color: var(--lime-ink); font: 600 16px/1 var(--text-face); letter-spacing: 0; text-transform: none; text-decoration: none;
  box-shadow: none; transition: filter .2s;
}
.cs .btn:hover { color: var(--lime-ink); filter: brightness(1.06); transform: none; box-shadow: none; }
.cs .quiet { font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--brass); display: inline-flex; align-items: center; min-height: 44px; }
.cs .paper-band .quiet { text-decoration-color: var(--forest); }
.store-badge { display: inline-flex; min-height: 50px; align-items: center; }
.store-badge img { height: 50px; width: auto; display: block; }

/* the receipt: the motif */
.rcpt {
  position: relative; background: var(--slip); color: var(--ink); font: 400 14px/1.5 var(--mono); padding: 22px 22px 34px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 28px 50px -26px rgba(0, 0, 0, .65);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.rcpt .r-h { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px dashed rgba(22, 33, 27, .35); margin-bottom: 8px; }
.rcpt .r-q { font: italic 400 21px/1.25 var(--display); color: var(--ink); margin: 6px 0 12px; letter-spacing: -.01em; }
.rcpt dl { margin: 0; }
.rcpt dl div { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.rcpt dt { color: var(--ink-2); }
.rcpt dt::after { content: ""; }
.rcpt dl div::after { content: none; }
.rcpt .lead { flex: 1; border-bottom: 1.5px dotted rgba(22, 33, 27, .4); transform: translateY(-4px); min-width: 12px; }
.rcpt dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcpt .tot { border-top: 3px double rgba(22, 33, 27, .6); margin-top: 8px; padding-top: 8px !important; }
.rcpt .tot dt { color: var(--ink); font-weight: 500; }
.rcpt .tot dd { font-size: 19px; }
.rcpt .strike dd { text-decoration: line-through; text-decoration-color: #a3352a; text-decoration-thickness: 2px; color: var(--ink-3); }
.rcpt .r-f { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed rgba(22, 33, 27, .35); font-size: 12px; line-height: 1.5; color: var(--ink-3); max-width: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.hi { background: #dcefdc; color: #1f5f3a; }
.pill.mod { background: #f0e5cf; color: #7a5a1e; }
.pill.none { background: #e4e6e1; color: #4d5850; }
.on-dark .pill.hi { background: rgba(127, 206, 159, .14); color: var(--hi); }
.on-dark .pill.mod { background: rgba(205, 174, 126, .14); color: var(--brass); }
.on-dark .pill.none { background: rgba(236, 233, 223, .08); color: var(--bone-dim); }

/* phone frame for the app's screens */
.phone { margin: 0; border-radius: 30px; padding: 7px; background: #070a08; box-shadow: 0 0 0 1px #26322a, 0 40px 60px -34px rgba(0, 0, 0, .9); }
.phone img { width: 100%; height: auto; border-radius: 24px; }
.cap { font: 400 13px/1.5 var(--mono); color: var(--bone-faint); margin-top: 12px; }
.paper-band .cap { color: var(--ink-3); }

/* hero */
.cs-hero { padding: clamp(112px, 12vw, 156px) 0 clamp(64px, 8vw, 110px); }
.cs-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lockup { display: flex; align-items: baseline; gap: 10px; margin: 0 0 26px; font: italic 400 17px/1 var(--display); color: var(--brass); }
.lockup img { align-self: center; }
.lockup img { width: 40px; height: 40px; border-radius: 10px; }
.lockup b { font: 500 22px/1 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--bone); margin-right: 2px; }
.cs-hero .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 30px; }
.cs-hero .small { margin-top: 16px; font: 400 13px/1.6 var(--mono); color: var(--bone-faint); }
/* The hero art: the 3D ledger (restored, /counsel/ledger.js) on its stand, with the receipt slip laid over it. The stage
   box has a fixed size, so nothing moves when the scene arrives; without WebGL the app's Today screen stands in it. */
.hero-art { position: relative; min-height: 560px; }
.c-stage { position: absolute; left: -14%; right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut))); top: -16%; bottom: 0; }
.c-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: pan-y; cursor: grab;
  opacity: 0; transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1); }
.c-stage canvas:active { cursor: grabbing; }
.c-stage.ready canvas { opacity: 1; }
.c-stage .phone { position: absolute; right: 8%; top: 10%; width: 58%; transform: rotate(2deg); }
.js .c-stage:not(.no-webgl) .phone { display: none; }
.hero-art .rcpt { position: absolute; left: 0; bottom: 6%; width: min(340px, 78%); transform: rotate(-2.4deg); z-index: 2; }
@media (max-width: 900px) {
  .cs-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .c-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 400px; margin: 0 calc(-1 * var(--gut)); }
  .c-stage .phone { right: var(--gut); top: 0; width: auto; height: 100%; max-width: 62%; }
  .c-stage .phone img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  .hero-art .rcpt { position: relative; left: auto; bottom: auto; width: 88%; max-width: 360px; margin-top: -96px; }
}
@media (prefers-reduced-motion: reduce) { .c-stage canvas { transition: none; } }

/* bands */
.cs-band { padding: clamp(72px, 9vw, 136px) 0; }
.paper-band { background: var(--paper); color: var(--ink); }
.paper-band .lede { color: var(--ink-2); }
.paper-band h1 em, .paper-band h2 em { color: var(--forest); }
.paper-band a:hover { color: var(--forest); }
.cs .head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }

/* why the average lies */
.avg { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.avg .rcpt { max-width: 420px; justify-self: end; width: 100%; transform: rotate(1deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 30px 50px -30px rgba(40, 30, 15, .5); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 118px; margin: 10px 0 14px; position: relative; border-bottom: 1.5px solid var(--ink); }
.bars i { display: block; background: var(--forest); border-radius: 2px 2px 0 0; position: relative; }
.bars i span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 400 10.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bars i.out { background: #b4a27c; }
.bars .line { position: absolute; left: -4px; right: -4px; border-top: 1.5px dashed #a3352a; }
.bars .line b { position: absolute; right: 0; top: -17px; font: 500 10.5px/1 var(--mono); color: #a3352a; background: var(--slip); padding: 0 3px; }
.bars .line.med { border-top: 2px solid var(--forest); }
.bars .line.med b { color: var(--forest); top: 3px; }
.avg .steps { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-ink); }
.avg .steps li { padding: 14px 0; border-bottom: 1px solid var(--rule-ink); color: var(--ink-2); }
.avg .steps b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .avg { grid-template-columns: minmax(0, 1fr); } .avg .rcpt { justify-self: start; } }

/* a week with counsel */
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.week li { display: flex; flex-direction: column; }
.week .day { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.week p { color: var(--bone-dim); font-size: 16.5px; margin: 0 0 22px; }
.week .phone { margin-top: auto; }
.also { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--line); }
.also div { padding: 22px 0 0; }
.also h3 { font-size: clamp(22px, 1.9vw, 27px); }
.also p { color: var(--bone-dim); font-size: 16.5px; margin: 0; }
.also .day { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 10px; }
@media (max-width: 900px) {
  .week { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .week li { display: grid; grid-template-columns: minmax(0, 1fr) 44%; gap: 0 18px; align-items: start; }
  .week .day, .week h3, .week p { grid-column: 1; }
  .week .phone { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .also { grid-template-columns: minmax(0, 1fr); }
}

/* receipts, not narratives */
.vs { width: 100%; border-collapse: collapse; margin: 0; }
.vs th { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: var(--ink-3); padding: 0 24px 14px 0; border-bottom: 1.5px solid var(--ink); }
.vs td { padding: 18px 24px 18px 0; border-bottom: 1px solid var(--rule-ink); vertical-align: top; width: 50%; }
.vs td:first-child { font: italic 400 21px/1.3 var(--display); color: var(--ink-3); }
.vs td:last-child { font: 400 15px/1.55 var(--mono); color: var(--ink); }
.counts { display: flex; flex-wrap: wrap; gap: 20px 64px; margin-top: clamp(40px, 5vw, 64px); }
.counts div b { display: block; font: 400 clamp(56px, 6vw, 88px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.counts div span { display: block; margin-top: 6px; color: var(--ink-3); font-size: 15px; max-width: 22ch; }
@media (max-width: 640px) {
  .vs thead { display: none; }
  .vs tr { display: block; border-bottom: 1px solid var(--rule-ink); padding: 14px 0; }
  .vs td { display: block; width: auto; border: 0; padding: 4px 0; }
  .vs td:first-child::before { content: "Elsewhere: "; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
}

/* books + built on */
.books { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.sources { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.sources li { font: 400 clamp(26px, 2.6vw, 38px)/1.3 var(--display); color: var(--bone); }
.sources li:not(:last-child)::after { content: "\00a0\00b7\00a0"; color: var(--brass); }
.limits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.limits li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--bone-dim); font-size: 16.5px; }
.limits li b { color: var(--bone); font-weight: 600; }
.built { margin-top: 30px; display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; max-width: 480px; text-decoration: none; }
.built img { width: 64px; height: auto; flex: none; }
.built span { color: var(--bone-dim); font-size: 15.5px; }
.built span b { display: block; color: var(--bone); font: 400 21px/1.2 var(--display); margin-bottom: 2px; }
.built:hover span b { color: var(--lime); }
@media (max-width: 900px) { .books { grid-template-columns: minmax(0, 1fr); } }

/* price */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); border-top: 1.5px solid var(--ink); }
.price > div { padding: 22px 0 8px; }
.price .tier { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.price .tier h3 { margin: 0; }
.price .tier b { font: 400 clamp(40px, 4vw, 56px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.price .tier b small { font: 400 14px/1 var(--mono); letter-spacing: 0; margin-left: 4px; color: var(--ink-3); }
.price p { color: var(--ink-2); margin: 10px 0 0; font-size: 16.5px; }
@media (max-width: 760px) { .price { grid-template-columns: minmax(0, 1fr); } .price > div + div { border-top: 1px solid var(--rule-ink); } }

/* guides */
.g-four { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); }
.g-four li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.g-four a.t { font: 400 clamp(23px, 2vw, 29px)/1.15 var(--display); text-decoration: none; display: block; margin-bottom: 6px; }
.g-four p { color: var(--bone-dim); margin: 0; font-size: 16px; }
.g-four .calc { font: 500 13px/1 var(--mono); color: var(--brass); margin-left: 6px; }
@media (max-width: 760px) { .g-four { grid-template-columns: minmax(0, 1fr); } }

/* last */
.cs-last .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: end; justify-content: space-between; }
.cs-last h2 { margin: 0; max-width: 16ch; }
.cs-last .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.cs-last .sig { flex-basis: 100%; font: 400 13px/1.6 var(--mono); color: var(--bone-faint); margin: 10px 0 0; max-width: 80ch; }