/* Marketing LAYOUT only.
   The literals left below are genuine one-offs — hover shades, and borders
   that only ever sit on forest — so they have no token to point at. What is
   NOT left is a literal that merely restates one: --surface and --wash were
   spelled out here as #faf6ed and #eae3d4, which meant a change to either
   token would have moved the app and left the public pages behind. The Forest & Linen palette used to be declared here
   and scoped to .marketing-site; it now lives in kitlog.css's :root and is
   shared with the application, so a customer crossing from the public site
   into their register sees one product. What stays here is the part that is
   genuinely marketing-shaped: a longer measure, roomier type, the full-bleed
   hero, the pricing grid — none of which suit a dense register. */
.marketing-site { font-size: 16px; line-height: 1.7; }
/* The public header itself moved to kitlog.css, keyed on .marketing-nav
   rather than .marketing-site: login, password reset and the 404 page render
   the same header from the same partial and do not load this file. Only the
   marketing site's larger SCALE stays here — a taller bar, bigger type. Its
   wrapping went the same way on 2026-10-01, for the same reason: the two
   breakpoint rules below were unscoped but unreadable to the pages that
   never load this file, so the header folded differently on login than on
   pricing and was then crushed by the body column. Do not add layout back. */
.marketing-site .marketing-nav { min-height: 100px; padding: 24px max(32px, calc((100% - 1352px) / 2)); }
.marketing-site .marketing-nav a.brand { font-size: 28px; }
.marketing-site .marketing-content { max-width: 1440px; padding: 56px 44px 80px; }
.marketing-content:has(> .hero) { padding-top: 0; }
.marketing-site .hero {
  background: var(--forest); color: var(--cream); position: relative;
  padding: 64px 0 68px; text-align: left; isolation: isolate;
}
/* A full-width surface, without widening the document or clipping focus rings. */
.marketing-site .hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--forest); box-shadow: 0 0 0 100vmax var(--forest);
  clip-path: inset(0 -100vmax); z-index: -1;
}
.marketing-site .hero.hero-split { grid-template-columns: .8fr 1.2fr; gap: 28px; }
.marketing-site .hero-eyebrow {
  color: var(--gold); background: none; padding: 0; border: 0; border-radius: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 24px; display: block;
}
.marketing-site h1 { font-size: clamp(32px, 4.3vw, 60px); line-height: 1.14;
  font-weight: 700; letter-spacing: -.045em; margin: 0 0 24px; text-wrap: balance; }
.marketing-site .hero h1 { font-size: clamp(36px, 4.3vw, 60px); margin: 0 0 25px; max-width: 1000px; }
.marketing-site .hero p.sub { color: #e0e6d9; font-size: 19px; line-height: 1.7;
  margin: 0 0 30px; max-width: 760px; }
.marketing-site .hero.hero-split p.sub { margin: 0 0 30px; }
.marketing-site .hero .cta-note { color: #d8e0d4; font-size: 13px; margin-top: 28px; }
.marketing-site .hero .cta-note a, .marketing-site .hero-secondary { color: var(--gold); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.hero-secondary { font-size: 15px; font-weight: 550; }
.hero-secondary span { margin-left: 10px; }
.marketing-site .btn { padding: 13px 24px; border-radius: 5px; font-size: 15px; line-height: 1.5;
  box-shadow: none; font-weight: 650; background: transparent; border-color: var(--accent); }
.marketing-site .btn-primary { color: var(--cream); background: var(--forest); border-color: var(--forest); }
.marketing-site .btn:hover { transform: none; box-shadow: none; background: #e6dac4; }
.marketing-site .btn-primary:hover { background: #195644; color: var(--cream); }
.marketing-site .hero .btn-primary { color: var(--forest); background: var(--cream); border-color: var(--cream); }
.marketing-site .hero .btn-primary:hover { background: #e4d7bc; border-color: #e4d7bc; }
.marketing-site .hero :focus-visible, .marketing-site .nav :focus-visible,
.marketing-site .footer :focus-visible { outline-color: var(--gold); outline-offset: 5px; }
.marketing-site .product-shot { border: 1px solid #86978b; box-shadow: none; border-radius: 8px;
  background: #fff; min-width: 0; overflow: hidden; }
.marketing-site .product-shot img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.marketing-site .product-shot figcaption { background: #f4f5ed; color: #46584e; font-size: 12px; }
.marketing-site .home-product-shot { margin: 0; }
.marketing-site .marketing-home > .hero { min-height: 658px; padding-top: 24px; padding-bottom: 52px; }
.marketing-home .hero-actions .btn { font-size: 19px; padding: 18px 28px; }
.marketing-home .hero-secondary { font-size: 17px; }
.marketing-home .hero p.sub { max-width: 450px; font-size: 21px; }
.marketing-site .home-plan .price small { margin-left: 12px; }
.marketing-site .home-pricing { display: grid; grid-template-columns: 1fr 1fr; padding: 44px 5% 40px;
  gap: 26px 0; border-bottom: 1px solid var(--line); }
.home-plan { padding: 0 20%; display: flex; flex-direction: column; align-items: flex-start; }
.home-plan + .home-plan { border-left: 1px solid #c8b893; }
.home-plan h2 { margin: 0 0 12px; font-size: 25px; font-weight: 650; }
.marketing-site .home-plan .price { font-size: 68px; line-height: 1.1; letter-spacing: -.04em; white-space: nowrap; }
.marketing-site .home-plan .price small { font-size: 13px; font-weight: 450; letter-spacing: 0; }
.home-plan p { margin: 18px 0 24px; }
.home-plan .btn { margin-top: auto; min-width: 220px; text-align: center; }
.home-pricing-details { grid-column: 1 / -1; justify-self: center; font-size: 13px; }
.marketing-site .section { padding: 52px 0; border-color: var(--line); }
.marketing-site .section h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.035em; margin-bottom: 22px; }
.marketing-site .section > p, .marketing-site .section > ul { max-width: 850px; }
.marketing-site .cards { gap: 24px; }
.marketing-site .card { background: var(--surface); border: 1px solid var(--line); padding: 28px; box-shadow: none; }
.marketing-site .card.washed { background: var(--wash); border: 0; }
.marketing-site .card:hover, .marketing-site .price-card:hover { box-shadow: none; transform: none; }
.marketing-site .card h2 { font-size: 23px; }
.marketing-site .card h3 { font-size: 19px; margin-top: 0; }
.marketing-site .steps { padding-left: 1.5rem; }
.marketing-site .steps li { margin-bottom: 20px; line-height: 1.75; }
.marketing-site .faq dt { margin-top: 24px; font-size: 18px; }
.marketing-site .faq dd { color: var(--muted); margin: 8px 0 28px; max-width: 800px; }
.marketing-site .proof-strip { background: var(--wash); border-color: var(--line); border-radius: 0; margin-top: 0; }
.marketing-site .proof-strip li { padding: 22px 16px; border-color: var(--line); }
.marketing-site .intent-boundary { background: #e4dfce; border-color: #b0934f; padding: 28px 32px; }
.marketing-site .intent-feature-grid article { padding: 26px 0; }
.marketing-site .intent-price { background: var(--forest); color: var(--cream); padding: 32px; border-radius: 8px; }
.marketing-site .intent-price .btn { color: var(--cream); border-color: #a8b9a5; }
.marketing-site .intent-price .btn-primary { color: var(--forest); background: var(--cream); }
.marketing-site .intent-price .btn:hover { color: var(--forest); background: #e4d7bc; }
.marketing-site .intent-price :focus-visible { outline-color: var(--gold); }
.marketing-site .intent-price > div:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
/* Guides (task 16). Four small rules and no new colours: a guide is body copy
   with citations, so everything here is spacing and de-emphasis. `.guide-cite`
   stays a full-size link rather than a <sup> — a 10px tap target inside a
   paragraph is a citation nobody on a phone can follow. */
.marketing-site .guide-list { list-style: none; padding-left: 0; margin: 0; }
.marketing-site .guide-list > li { padding: 24px 0; border-top: 1px solid var(--line); }
.marketing-site .guide-list h3 { margin: 0 0 8px; font-size: 21px; }
.marketing-site .guide-meta { color: var(--muted); font-size: 15px; margin: 0; }
/* The padding is the point, not the spacing: unpadded, "[1]" measures 14x18,
   which is a citation nobody on a phone can hit. Inline padding grows the hit
   box without changing the line box, and there is no background or border for
   it to reveal. scripts/verify_guides_journey.py measures every one of them. */
.marketing-site .guide-cite { white-space: nowrap; text-decoration: none; font-size: 14px;
  padding: .3rem .5rem; }
.marketing-site .guide-sources ol { max-width: 820px; padding-left: 21px; }
.marketing-site .guide-sources li { margin-bottom: 14px; color: var(--muted); line-height: 1.7; }
.marketing-site .pricing-plans { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
.marketing-site .price-card { background: var(--surface); padding: 36px; border-color: var(--line); }
.marketing-site .price-card.featured { border-color: var(--forest); background: #e5e9dc; }
.marketing-site .price-card h3 { font-size: 26px; margin: 0 0 12px; }
.marketing-site .price-card .price { font-size: 60px; line-height: 1.2; }
.marketing-site .price-card li { margin-bottom: 14px; padding-left: 3px; }
.marketing-site .price-card ul { padding-left: 21px; margin-bottom: 32px; }
.marketing-site .price-card > .btn { align-self: stretch; text-align: center; }
.marketing-site .interval-toggle { background: #e5ddcc; border-color: var(--line); }
.marketing-site .interval-toggle .active { background: var(--forest); color: var(--cream); }
.marketing-site .interval-toggle .active .save { color: var(--gold); }
/* The card itself is in kitlog.css now, shared with login and the app's
   forms. Only the marketing page's wider measure and scale stay here. */
.marketing-site .auth-box { max-width: 660px; padding: 36px; }
.marketing-site .auth-box h1 { font-size: 42px; }
.signup-box [hidden] { display: none !important; }
/* The steps themselves are in kitlog.css, shared with the register's own
   forms. What is left here is the marketing page's larger scale. */
.marketing-site .form-steps-progress { margin: 28px 0; }
.marketing-site .form-step legend { font-size: 23px; padding-bottom: 18px; }
.marketing-site .form-step .field { margin-bottom: 18px; }
.signup-optional { margin-top: 0; line-height: 1.6; }
.marketing-site .compare th { background: var(--forest); color: var(--cream); padding: 20px 18px; }
.marketing-site .compare td { padding: 20px 18px; background: var(--surface); line-height: 1.65; }
.marketing-site .compare tr:nth-child(even) td { background: var(--wash); }
/* The forest footer is in kitlog.css now, shared with the app. What is left
   here is only the marketing page's roomier scale. */
.marketing-site .footer { padding-top: 26px; }
.marketing-site .footer strong { font-size: 23px; }
.marketing-site .footer .container { max-width: 1352px; padding-left: 32px; padding-right: 32px; }
.marketing-site .footer-grid { gap: 40px; line-height: 2; }
.marketing-site .footer-legal { border-top: 1px solid #355448; padding-top: 22px; }
@media (min-width: 1440px) {
  .marketing-site .marketing-home > .hero { min-height: 650px; }
}
@media (max-width: 1000px) {
  .marketing-site .hero.hero-split { grid-template-columns: 1fr 1fr; gap: 28px; }
  .home-plan { padding: 0 12%; }
}
@media (max-width: 760px) {
  .marketing-site .marketing-nav { padding: 20px 24px; }
  .marketing-site .nav a.brand { font-size: 24px; }
  .marketing-site .nav a { font-size: 13px; }
  .marketing-site .marketing-content { padding: 36px 24px 56px; }
  .marketing-site .marketing-content:has(> .hero) { padding-top: 0; }
  .marketing-site .hero.hero-split { grid-template-columns: 1fr; text-align: left; }
  .marketing-site .hero { padding: 36px 0 44px; }
  .marketing-site .hero h1 { font-size: clamp(36px, 7.7vw, 52px); }
  .marketing-site .hero p.sub { font-size: 17px; }
  .marketing-site .marketing-home > .hero { min-height: auto; }
  .marketing-site .product-shot { margin-top: 16px; }
  .marketing-site .home-pricing { padding: 32px 0; }
  .home-plan { padding: 0 16px; }
  .home-plan:first-child { padding-left: 0; }
  .home-plan:last-of-type { padding-right: 0; }
  .home-plan h2 { font-size: 22px; }
  .marketing-site .home-plan .price { font-size: 48px; }
  .marketing-site .home-plan .price small { display: block; font-size: 12px; margin-top: 12px; }
  .home-plan .btn { min-width: 0; width: 100%; padding: 12px 8px; font-size: 13px; }
  .home-plan p { font-size: 13px; }
  .marketing-site .section { padding: 36px 0; }
  .marketing-site .section h2 { font-size: 25px; }
  .marketing-site .pricing-plans { grid-template-columns: 1fr; }
  .marketing-site .price-card { padding: 26px; }
  .marketing-site .auth-box { padding: 24px; }
  .marketing-site .auth-box h1 { font-size: 34px; }
  .marketing-site .intent-price { padding: 24px; }
  .marketing-site .footer .container { padding-left: 24px; padding-right: 24px; }
  .marketing-site .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}