/* Shared layout for standalone subpages: pricing.html and journal/ articles.
   Extends styles.css (same tokens and core classes). No JavaScript required. */

/* Brand lockup: mark + wordmark, same treatment as the homepage. */
.brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink);line-height:1;text-decoration:none}
.brand-symbol{display:block;width:21px;height:24px;flex:0 0 21px;background:currentColor;mask:url('assets/mark-v5.png') center/contain no-repeat;-webkit-mask:url('assets/mark-v5.png') center/contain no-repeat;opacity:.92}
.brand-wordmark{font-family:var(--sans);font-size:23px;font-weight:400;letter-spacing:-1.15px;line-height:1;white-space:nowrap;transform:translateY(1px)}
.nav .brand:hover,.footer .brand:hover{color:#383936}
@media(max-width:640px){.brand-symbol{width:20px;height:23px;flex-basis:20px}.brand-wordmark{font-size:22px;letter-spacing:-1.1px}}

/* Reduced static nav: full header parity with index.html.
   Dropdowns open via CSS :hover / :focus-within; nav.js (when loaded) drives
   the same .open class and aria-expanded state used by app.js. */
.nav a:hover,.nav .text-button:hover,.nav .nav-trigger:hover{color:#141414}
.nav-center a[aria-current]{color:#141414;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#d8dccd}
.nav-dropdown:hover .dropdown,.nav-dropdown:focus-within .dropdown,.nav-dropdown.open .dropdown{opacity:1;visibility:visible}
@media(min-width:641px){.nav-dropdown:hover .dropdown,.nav-dropdown:focus-within .dropdown,.nav-dropdown.open .dropdown{transform:translate(-50%,0)}}
.nav-dropdown:hover .nav-trigger>.chev,.nav-dropdown:focus-within .nav-trigger>.chev,.nav-dropdown.open .nav-trigger>.chev{transform:rotate(180deg)}
@media(max-width:850px){.nav-center>a{display:inline}}

/* Mobile hamburger without JS: invisible checkbox overlays the .menu-toggle
   label icon; :checked opens the menu using styles.css's ≤640px styles. */
.nav-toggle{display:none}
@media(max-width:640px){
  .nav{position:relative}
  .nav-toggle{display:block;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:120}
  .nav-toggle:focus-visible ~ .nav-actions .menu-toggle{outline:2px solid #727caf;outline-offset:3px;border-radius:4px}
  .nav-toggle:checked ~ .nav-center{display:flex;flex-direction:column;max-height:calc(100dvh - 67px);overflow-y:auto}
  .nav-toggle:checked ~ .nav-center .sign-in-mobile{display:block;padding:6px 0}
  .nav-dropdown:focus-within .dropdown,.nav-dropdown.open .dropdown{display:block}
}

/* Page hero band: warm paper tint, shared by pricing and journal pages. */
.page-hero{padding:80px 0 62px;border-bottom:1px solid #eceadf;background:linear-gradient(180deg,#f7f5f0 0%,#fbfaf5 65%,#ffffff 100%)}
.page-hero .eyebrow{font-size:13px;letter-spacing:.5px;color:#8d937f;margin-bottom:22px}
.page-hero h1{font-size:46px;color:#45473f;letter-spacing:-1.5px;max-width:640px}
.page-hero .lede{font-size:16px;line-height:1.7;color:#7d8272;max-width:560px;margin-top:26px}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:66px 0 0}
.plan{position:relative;display:flex;flex-direction:column;padding:38px 32px 32px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .3s,box-shadow .3s}
.plan:hover{border-color:#d9dccd;box-shadow:0 16px 40px -22px #6b7a5c33}
.plan.featured{border-color:#ccd7bd;background:#fcfdf8;box-shadow:0 22px 48px -22px #6b7a5c38}
.plan-flag{position:absolute;top:-13px;left:32px;font-size:10px;letter-spacing:1.3px;color:#5e7050;background:#eef3e6;border:1px solid #d8e2c8;border-radius:999px;padding:5px 12px}
.plan-name{font-size:15px;font-weight:400;color:#4c5147;margin-bottom:18px}
.plan-price{font-family:var(--sans);font-weight:600;font-size:46px;line-height:1;letter-spacing:-1.6px;color:var(--dark)}
.plan-price small{font-size:15px;letter-spacing:0;color:var(--muted)}
.plan-tag{font-size:12px;color:#9aa08d;margin-top:10px}
.plan-list{list-style:none;margin:26px 0 30px;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.plan-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.55;color:#6d7264}
.plan-list li:before{content:'✓';position:absolute;left:0;top:0;color:#7d9070}
.plan .button{margin-top:auto;width:100%}
.pricing-meta{padding:44px 0 96px}
.pricing-reassure{display:flex;justify-content:center;gap:14px 30px;flex-wrap:wrap;margin-bottom:26px;font-size:12px;color:#8a8f80}
.pricing-reassure span{display:inline-flex;align-items:center;gap:8px}
.pricing-reassure i{font-style:normal;color:#7d9070}
.pricing-note{text-align:center;font-size:13px;line-height:1.8;color:#8a8f80;max-width:560px;margin:0 auto}
.pricing-note a{color:#5e7050;border-bottom:1px solid #cfd9c0;padding-bottom:1px}
.pricing-note a:hover{color:#3e522f;border-color:#9db287}

/* Journal articles */
.article-hero{padding:56px 0 54px;border-bottom:1px solid #e6e2d6}
.article-hero.tint-flow{background:linear-gradient(180deg,#edf0e4 0%,#f7f8f1 70%,#ffffff 100%);border-color:#e2e6d8}
.article-hero.tint-source{background:linear-gradient(180deg,#eee9df 0%,#f8f6f0 70%,#ffffff 100%);border-color:#e8e0d3}
.article-hero.tint-book{background:linear-gradient(180deg,#e8edeb 0%,#f6f8f7 70%,#ffffff 100%);border-color:#dee5e1}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:#97a08a;margin-bottom:52px}
.breadcrumb a{color:#75845f;border-bottom:1px solid transparent;padding-bottom:1px}
.breadcrumb a:hover{color:#4c5a3a;border-color:#b9c6a4}
.breadcrumb span[aria-hidden]{color:#b6bda8}
.article-head{max-width:680px;margin:0 auto}
.article-kicker{font-size:11px;letter-spacing:1.6px;color:#909e82;margin-bottom:16px}
.article-category{display:inline-block;font-size:10px;letter-spacing:1.2px;color:#7b8a67;background:#eef3e6;border:1px solid #dfe7cf;border-radius:4px;padding:4px 9px;margin-bottom:22px}
.tint-source .article-category{color:#8f7f62;background:#f2ecdf;border-color:#e5dac6}
.tint-book .article-category{color:#66807a;background:#e9f0ee;border-color:#d3e0db}
.article-title{font-size:44px;line-height:1.08;letter-spacing:-1.3px;color:#454b3d;margin-bottom:20px}
.article-meta{font-size:12px;color:#99a18d;margin-bottom:30px}
.article-intro{font-size:17px;line-height:1.75;color:#6d7660}
.article-body{max-width:680px;margin:0 auto;padding:54px 0 26px}
.article-body section{margin-top:40px}
.article-body h2,.article-body h3{font:600 26px/1.25 var(--sans);letter-spacing:-.5px;color:#49523f;margin-bottom:14px}
.article-body p{font-size:15px;line-height:1.85;color:#6d7264}
.article-body p+p{margin-top:18px}
.article-body a{color:#5e7050;border-bottom:1px solid #cfd9c0;padding-bottom:1px}
.article-body a:hover{color:#3e522f;border-color:#9db287}
.article-cta{max-width:680px;margin:0 auto;padding:28px 0 36px;border-top:1px solid #e4e9db;font-size:13px;line-height:1.7;color:#8a9180}
.article-cta a{color:#5e7050;border-bottom:1px solid #cfd9c0;padding-bottom:1px}
.article-cta a:hover{color:#3e522f;border-color:#9db287}
.article-end{max-width:680px;margin:0 auto;padding:34px 0 92px}
.article-return{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid #e4e9db;padding-top:28px}
.article-return>p{font-size:12px;color:#9aa38d;max-width:300px}
.more-journal{max-width:680px;margin:0 auto;padding:0 0 30px}
.more-journal h2{font:15px/1.4 var(--sans);letter-spacing:1.2px;color:#99a18d;margin-bottom:20px}
.more-heading{text-transform:uppercase;letter-spacing:1.2px}
.more-journal a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-top:1px solid #ecede4}
.more-journal a strong{font:600 19px/1.35 var(--sans);letter-spacing:-.3px;color:#535c47;transition:color .2s}
.more-journal a span{font-size:11px;color:#a3ab96;white-space:nowrap}
.more-journal a:hover strong{color:#37452c}

/* 404 page */
.error-hero{min-height:52vh;display:flex;align-items:center;padding:80px 0 70px;background:linear-gradient(180deg,#f7f5f0 0%,#fbfaf5 65%,#ffffff 100%);border-bottom:1px solid #eceadf}
.error-hero .wrap{text-align:center}
.error-code{font-family:var(--sans);font-weight:600;font-size:110px;line-height:1;letter-spacing:-4px;color:#d8dcc9;margin-bottom:8px}
.error-hero h1{font-size:40px;color:#45473f;letter-spacing:-1.2px;margin-bottom:16px}
.error-hero .lede{font-size:15px;line-height:1.7;color:#7d8272;max-width:460px;margin:0 auto}
.error-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:44px 0 90px}
.error-links .button{text-decoration:none}
.error-links:has(+ .error-links-journal){padding-bottom:28px}
.error-links-journal{padding:0 0 90px;gap:14px 30px}
.error-journal-label{flex:0 0 100%;text-align:center;font-size:11px;letter-spacing:1.4px;color:#99a18d}
.error-links-journal a{font-size:13px;color:#75845f;border-bottom:1px solid transparent;padding-bottom:1px}
.error-links-journal a:hover{color:#4c5a3a;border-color:#b9c6a4}

/* Journal index (listing) page. Card visuals come from journal.css;
   .journal-grid rules here keep the listing layout on subpages too. */
.journal-index{padding:74px 0 96px}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.journal-cta{margin-top:64px}

/* Pricing page supporting sections */
.pricing-includes{margin-top:74px;max-width:680px}
.pricing-includes h2{font-size:32px;letter-spacing:-1px;line-height:1.12;max-width:640px}
.pricing-includes p{max-width:640px;font-size:15px;line-height:1.8;color:#6d7264}
.pricing-faq{margin-top:76px;padding-top:0;padding-bottom:0;align-items:start}
.pricing-faq h2{font-size:32px;letter-spacing:-1px;line-height:1.12}
.pricing-summary{max-width:640px;font-size:15px;line-height:1.8;color:#6d7264}
.pricing-faq details{border-top:1px solid #e9eae0;border-bottom:0;padding:18px 0}
.pricing-faq details:first-child{padding-top:18px}
.pricing-faq summary{font-weight:400;color:#4c5147;cursor:pointer}
.pricing-faq details p{max-width:640px}
.pricing-includes a,.pricing-faq a{color:#5e7050}
.pricing-includes a:hover,.pricing-faq a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:850px){.pricing-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto;padding-top:56px}}
@media(max-width:640px){
  .page-hero{padding:58px 0 46px}.page-hero h1{font-size:36px;letter-spacing:-1.1px}.page-hero .lede{font-size:15px}
  .plan{padding:32px 24px 26px}.plan-price{font-size:40px}
  .pricing-meta{padding:36px 0 70px}
  .article-hero{padding:42px 0 42px}.breadcrumb{margin-bottom:40px}
  .article-title{font-size:34px;letter-spacing:-1px}.article-intro{font-size:15px}
  .article-body{padding-top:44px}.article-body h2,.article-body h3{font-size:23px}.article-body p{font-size:14px}
  .article-end{padding-bottom:70px}.more-journal a strong{font-size:17px}
  .error-code{font-size:74px;letter-spacing:-2.5px}.error-hero h1{font-size:32px;letter-spacing:-1px}
  .journal-index{padding:52px 0 72px}
  .journal-grid{grid-template-columns:1fr}
  .pricing-includes,.pricing-faq{margin-top:60px}
  .pricing-includes h2,.pricing-faq h2{font-size:28px;letter-spacing:-.8px}
}

/* Contact page */
.contact-wrap{max-width:560px;margin:0 auto;padding:64px 0 96px}
.contact-form{display:grid;gap:22px}
.contact-form[hidden]{display:none}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-form label{display:block;font-size:11px;letter-spacing:1.2px;color:#8a8f7f}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;border:1px solid #dcded2;border-radius:10px;background:#fff;font-size:15px;line-height:1.6;color:#4c5147;transition:border-color .2s,box-shadow .2s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#9db287;box-shadow:0 0 0 3px #9db28722}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .button{justify-self:start}
.contact-form .button[disabled]{opacity:.75;transform:none}
.contact-form .button .btn-spinner{width:14px;height:14px;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;animation:rotate .7s linear infinite}
.contact-sent{padding:16px 18px;margin-bottom:28px;border:1px solid #cfd9c0;border-radius:10px;background:#eef3e7;font-size:14px;color:#4c5a3a}
.contact-error{padding:16px 18px;border:1px solid #e8c9c0;border-radius:10px;background:#f9ece7;font-size:14px;color:#7a463a}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.contact-alt{margin-top:26px;font-size:13px;color:#9aa38d}
.contact-alt a{color:#5e7050;border-bottom:1px solid #cfd9c0;padding-bottom:1px}
.contact-alt a:hover{color:#3e522f;border-color:#9db287}
@media(max-width:640px){
  .contact-wrap{padding:44px 0 72px}
  .contact-row{grid-template-columns:1fr}
}