@font-face { font-family: Mulish; src: url("fonts/mulish-400.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Mulish; src: url("fonts/mulish-700.ttf"); font-weight: 700; font-display: swap; }
:root { color-scheme: only light; --plum: #420b33; --teal: #086b70; --paper: #fbf8f4; --ink: #322832; --line: #d5cdca; --tint: #e6f0ed; font: 100%/1.55 Mulish, system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--paper); color: var(--ink); margin: 0; }
h1, h2, h3 { font-family: Quicksand, system-ui, sans-serif; color: var(--plum); font-weight: 700; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 4.9vw, 4.85rem); }
h2 { font-size: clamp(2rem, 3.3vw, 3.25rem); }
h3 { line-height: 1.23; font-size: 1.4rem; letter-spacing: -.025em; }
h1 em { color: var(--teal); font-style: normal; }
a { color: var(--plum); text-underline-offset: .2em; font-weight: 700; }
a:hover { color: var(--teal); } :focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.wrap { width: min(76rem, calc(100% - clamp(2rem, 8vw, 8rem))); margin-inline: auto; }
header { background: var(--paper); border-bottom: 1px solid var(--line); }
.product-operator-nav { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.bar, nav, .account-links, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
.bar { justify-content: space-between; padding-block: .75rem; }
nav a, .account-links > a { text-decoration: none; }
nav [aria-current], nav a:hover { text-decoration: underline; }
.btn, .calculator button { display: inline-block; padding: .75rem 1.1rem; border-radius: .35rem; color: white; background: var(--plum); font: inherit; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; }
.btn:hover, .calculator button:hover { background: #61234e; color: white; }
.skip { position: absolute; inset-inline-start: 1rem; top: -8rem; z-index: 4; background: white; padding: .6rem; } .skip:focus { top: .5rem; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 6rem); }
.eyebrow, .label, .specimen figcaption { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--teal); margin-bottom: 1rem; }
.lead { max-width: 50ch; font-size: clamp(1.08rem, 1.6vw, 1.28rem); margin-top: 1.3rem; }
.actions { margin: 1.6rem 0 .7rem; }
.note, .fine, .legend { font-size: .87rem; } .note, .fine { color: #62565e; }
.specimen { isolation: isolate; position: relative; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.65rem); background: #400c33; color: #fff; border-radius: .35rem; }
.specimen::before { content: ""; position: absolute; z-index: -1; inset: -35% -40% -10% 35%; border: 1px solid #976381; transform: rotate(22deg); box-shadow: 14px 14px 0 -1px #400c33, 14px 14px 0 0 #976381; }
.specimen figcaption { color: #bce4df; margin-bottom: 1.55rem; }
.paper { padding: clamp(.95rem, 2vw, 1.6rem); background: #fff; color: var(--ink); box-shadow: 0 8px 20px #21091830; }
.paper.back { transform: rotate(-3deg); margin: 0 1rem -.4rem .2rem; background: #eee6e5; padding-bottom: 1.6rem; }
.paper.result { position: relative; margin-left: .85rem; border-top: 4px solid #087c83; }
.paper h2 { margin: .65rem 0; font-size: clamp(1.5rem, 2.3vw, 2.25rem); }
.paper p { margin-top: .4rem; overflow-wrap: anywhere; } .label { color: var(--teal); }
.amount { display: flex; justify-content: space-between; gap: .5rem; border-block: 1px solid var(--line); margin: .9rem 0; padding: .55rem 0; } mark { color: #294843; background: #d6eae6; padding: .03em .18em; }
.legend { margin-top: 1.1rem; color: #eddfe8; }
.band { background: var(--tint); border-block: 1px solid #cbddda; color: #28524e; }
.band .wrap { display: flex; gap: .55rem 2rem; flex-wrap: wrap; justify-content: space-between; padding-block: 1.12rem; font-size: .95rem; } .band b::before { content: "✓ "; color: var(--teal); }
.section { padding-block: clamp(3rem, 5.7vw, 5rem); } .section + .section { border-top: 1px solid var(--line); }
.roles, .cards, .examples { display: grid; gap: 1.2rem; margin-top: 1.75rem; }
.roles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.roles a, .cards article, .examples article { border-top: 2px solid var(--plum); padding: 1rem 0; }
.roles a { text-decoration: none; }
.roles a span { display: block; color: var(--teal); margin-bottom: .6rem; } .roles a span::after { content: " ↗"; }
.roles a strong { font-size: 1.25rem; line-height: 1.35; }
.split, .examples { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 5vw, 4rem); }
.tint { background: var(--tint); }
.section p + p, article p, .section h3 + p { margin-top: .7rem; }
.page-head { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.75rem); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 21ch; } .page-head .lead { max-width: 61ch; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cards article { background: white; border-color: #cec4c6; padding: 1.35rem; }
.cards article:first-child { border-color: var(--teal); } .price { color: var(--plum); font-weight: 700; font-size: 2.4rem; line-height: 1.1; }
.cards a { display: inline-block; margin-top: 1rem; }
.examples article { padding: 1.3rem; background: #fff; } .examples article:last-child { border-color: var(--teal); background: var(--tint); }
.prose { max-width: 54rem; } .prose h2 { margin-bottom: 1.4rem; }
details { padding: .95rem 0; border-bottom: 1px solid var(--line); } summary { cursor: pointer; color: var(--plum); font-weight: 700; } details p { margin-top: .65rem; }
.calculator { background: var(--tint); padding: 1.2rem; margin-top: 1rem; } .fields { display: flex; flex-wrap: wrap; gap: .8rem; margin: .8rem 0; }
.fields label { display: grid; } .fields input { width: 8rem; padding: .45rem; font: inherit; color: var(--ink); background: white; border: 1px solid #897e85; } output { display: block; margin-top: .6rem; font-weight: 700; }
footer { border-top: 1px solid var(--line); padding-block: 2.75rem; background: #f4eee8; }
.foot { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 1.5rem; }
.foot div > a:not(.ll-brand) { display: block; font-weight: 400; margin-top: .35rem; }
@media(max-width: 62rem) { .bar { gap: .7rem; } nav, .account-links { gap: .6rem 1rem; } }
@media(max-width: 48rem) { .bar nav { order: 3; width: 100%; } .hero, .split, .examples { grid-template-columns: 1fr; } .foot { grid-template-columns: 1fr 1fr; } .specimen { max-width: 33rem; } }
@media(max-width: 24rem) { .account-links { font-size: .84rem; gap: .55rem; } .bar .btn { padding: .55rem .65rem; } nav { font-size: .9rem; } .foot { grid-template-columns: 1fr; } }
.founder h2 + p { max-width: 57ch; margin-top: 1rem; }

.mobile-menu { display: none; }
@media (min-width: 80rem) { .bar, .bar > nav, .bar .account-links { column-gap: 1rem; } }
@media(max-width: 80rem) {
  .bar { position: relative; display: flex; flex-wrap: nowrap; gap: .5rem; }
  .bar > nav, .bar .account-links > a:first-child { display: none; }
  .bar .account-links { margin-inline-start: auto; }
  .bar .btn { font-size: .86rem; padding: .64rem .65rem; }
  .mobile-menu { display: block; padding: 0; border: 0; }
  .mobile-menu summary { padding: .55rem .2rem; font-size: .9rem; }
  .mobile-menu div { position: absolute; z-index: 5; right: 0; top: 100%; min-width: 12rem; padding: .6rem 1rem; border: 1px solid var(--line); background: white; box-shadow: 0 6px 18px #420b3312; }
  .mobile-menu [aria-current] { text-decoration: underline; }
  .mobile-menu a { display: block; padding: .45rem 0; text-decoration: none; }
}
@media (max-width: 22rem) {
  .bar { gap: .25rem; }
  .bar .btn { white-space: nowrap; font-size: .8rem; padding-inline: .4rem; }
  .mobile-menu summary { padding-inline: 0; white-space: nowrap; }
}

.plan-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "story offer" "photo offer"; gap: 1.5rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2.25rem, 5vw, 4.5rem); }
.plan-story { grid-area: story; }
.plan-story h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
.plan-story .lead { margin-top: 1rem; }
.plan-photo { grid-area: photo; align-self: end; display: block; width: 100%; height: auto; border-radius: .35rem; }
.team-offer { grid-area: offer; align-self: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--plum); color: #fff; border-radius: .5rem; }
.team-offer h2, .team-offer .fine { color: inherit; }
.team-offer h2 { font-size: 2rem; }
.billing-switch { display: inline-flex; margin: 1rem 0 0; padding: .15rem; min-inline-size: 0; border: 1px solid #b390a7; border-radius: 2rem; }
.billing-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.billing-switch label { position: relative; cursor: pointer; }
.billing-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.billing-switch span { display: block; padding: .45rem 1rem; border-radius: 2rem; font-weight: 700; font-size: .92rem; }
.billing-switch small { display: inline-block; margin-inline-start: .2rem; padding: .05rem .4rem; border-radius: 1rem; background: #dfedd5; color: var(--plum); font-size: .78rem; line-height: 1.4; vertical-align: .05em; }
.billing-switch input:checked + span { background: var(--paper); color: var(--plum); }
.billing-switch input:focus-visible + span { outline: 2px solid white; outline-offset: 3px; }
@media (forced-colors: active) { .billing-switch input:checked + span { outline: 2px solid Highlight; outline-offset: -3px; } }
.plan-variants { display: grid; }
.plan-variants > * { grid-area: 1 / 1; }
.team-offer:has([value="annual"]:checked) .when-monthly,
.team-offer:has([value="monthly"]:checked) .when-annual { visibility: hidden; }
.plan-actions { justify-items: start; }
.plan-amount { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid #936f86; }
.plan-amount strong { float: left; margin-right: .75rem; font: 700 3.7rem/.95 Quicksand, sans-serif; letter-spacing: -.06em; }
.plan-bill { clear: both; margin-top: 1rem; font-weight: 700; }
.team-offer ul { padding-left: 1.1rem; margin-block: 1.35rem; }
.team-offer li { margin-bottom: .55rem; }
.plan-saving { margin-top: .7rem; color: #dfedd5; }
.team-offer .btn { color: var(--plum); background: #dfedd5; }
.team-offer .fine { margin-top: .65rem; }
.plan-foot { padding-block: 1.4rem 2.5rem; }
@media(max-width: 48rem) { .plan-hero { grid-template-columns: 1fr; grid-template-areas: "story" "offer" "photo"; gap: 1.5rem; } }

.evidence-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.scorecard, .excerpt { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: .35rem; }
.scorecard { background: var(--plum); color: white; }
.scorecard figcaption, .excerpt figcaption { font-size: 1.05rem; font-weight: 700; }
.scorecard > p, .excerpt > p { margin-top: 1.25rem; font-size: .92rem; }
.score { display: grid; gap: .4rem; margin-top: 1.2rem; }
.score strong { font: 700 clamp(1.8rem, 3vw, 2.9rem)/1.05 Quicksand, sans-serif; font-variant-numeric: tabular-nums; }
.score meter { width: 100%; height: .75rem; border: 0; border-radius: 0; background: #745469; }
.score meter::-webkit-meter-bar { height: .75rem; background: #745469; border: 0; border-radius: 0; }
.score meter::-webkit-meter-optimum-value { background: #a1ddd3; }
.score meter::-moz-meter-bar { background: #a1ddd3; }
.excerpt { background: var(--tint); border: 1px solid #cbddda; }
.excerpt > div { background: white; border-inline-start: .25rem solid #998692; padding: 1rem 1.2rem; margin-top: 1rem; }
.excerpt > div:nth-of-type(2) { border-color: var(--teal); }
.excerpt h2 { font-size: 1.18rem; letter-spacing: -.025em; margin-bottom: .55rem; }
.excerpt p { overflow-wrap: anywhere; }
.evidence-table { border-collapse: collapse; width: 100%; margin-block: 1.4rem; font-variant-numeric: tabular-nums; }
.evidence-table caption { text-align: start; font-weight: 700; padding-bottom: .65rem; }
.evidence-table :is(th, td) { text-align: end; vertical-align: bottom; padding: .65rem .5rem; border-bottom: 1px solid var(--line); }
.evidence-table th:first-child { text-align: start; }
.evidence-table thead { color: var(--teal); }
.review-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-inline-start: 0; margin: 2rem 0 0; list-style-position: inside; }
.review-steps li { border-top: 2px solid var(--teal); padding-block: 1rem; }
.review-steps li::marker { color: var(--teal); font-weight: 700; }
.review-steps h3 { display: inline; }
.review-steps p { margin-top: .65rem; }
@media (max-width: 48rem) {
  .evidence-hero, .review-steps { grid-template-columns: 1fr; }
  .review-steps { gap: .65rem; }
  .evidence-table :is(th, td) { padding: .65rem .25rem; overflow-wrap: anywhere; }
}