@import url("./site-tokens.css?v=0.1.69");

/* Landing identity, with task-sized typography and functional account surfaces. */
.web-site { margin: 0; min-width: 320px; background: var(--bg); color: var(--fg-1); font: 400 16px/1.55 Geist, system-ui, sans-serif; font-synthesis: none; overflow-x: clip; }
.web-site :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-frame { min-height: 100svh; }
.web-site main { width: min(calc(100% - var(--gutter) * 2), var(--wrap)); max-width: none; margin-inline: auto; padding: 48px var(--cell) 64px; border-inline: 1px solid var(--rule); flex: 1; overflow: visible; }
.web-site main > :not(.dashboard-grid, .dashboard-heading, .auth-form-column, .billing-layout, .billing-heading) { max-width: 760px; margin-inline: auto; }
.web-site h1 { font-size: 36px; line-height: 1.16; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.web-site h2 { letter-spacing: var(--track-h3); }
.web-site :is(.text-slate-900, .text-slate-800) { color: var(--fg-1); }
.web-site :is(.text-slate-700, .text-slate-600) { color: var(--fg-2); }
.web-site :is(.text-slate-500, .text-slate-400) { color: var(--fg-3); }
.web-site .border-line { border-color: var(--rule); }
.site-panel { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); box-shadow: none; }
.site-eyebrow { color: var(--fg-3); font-size: 13px; font-weight: 500; }
.site-skip { position: absolute; top: -80px; left: 16px; z-index: 60; padding: 12px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.site-skip:focus { top: 8px; }

/* Keep the landing's 63px header and 1240px rails continuous on every route. */
.site-nav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-nav-row { display: flex; align-items: stretch; height: var(--bar); width: min(calc(100% - var(--gutter) * 2), var(--wrap)); margin-inline: auto; border-inline: 1px solid var(--rule); }
.site-brand { display: flex; align-items: center; flex: none; gap: 8px; padding: 0 24px 0 var(--cell); color: var(--fg-1); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.site-brand img { flex: none; }
.site-nav-links { display: flex; margin-right: auto; border-left: 1px solid var(--rule); }
.site-nav-links a, .site-nav-actions > a, .site-nav-actions > form > button { display: flex; align-items: center; min-height: var(--bar); padding: 0 24px; border-right: 1px solid var(--rule); font-size: 14px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.site-nav-actions { display: flex; align-items: stretch; border-left: 1px solid var(--rule); }
.site-nav-actions > form { display: flex; margin: 0; }
.site-nav-actions > form > button { background: transparent; cursor: pointer; }
.site-nav-actions > .site-nav-account { color: var(--fg-1); font-weight: 600; }
.site-nav :is(a, button, summary):focus-visible { outline-offset: -4px; }
.site-nav :is(a, button, summary):hover { background: var(--hover); }
.site-nav :is(a, button, summary):active { background: var(--active); }
.landing-theme-menu { position: relative; }
.landing-theme-trigger { display: flex; align-items: center; justify-content: center; width: 64px; height: var(--bar); color: var(--fg-2); list-style: none; cursor: pointer; }
.landing-theme-trigger::-webkit-details-marker { display: none; }
.landing-theme-trigger > span:last-child { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.landing-theme-menu[open] .landing-theme-trigger { background: var(--active); }
.landing-theme-panel, .site-mobile-panel { position: absolute; top: calc(100% + 8px); right: 8px; z-index: 50; width: 168px; padding: 4px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); box-shadow: var(--menu-shadow); }
.landing-theme-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); font-size: 14px; font-weight: 500; text-align: left; }
.landing-theme-option-icon { display: flex; }
.landing-theme-option[data-theme-active="true"] { background: var(--active); color: var(--fg-1); }
.landing-theme-option[data-theme-active="true"]::after { content: "✓"; margin-left: auto; }
.site-mobile-trigger { display: grid; place-items: center; height: var(--bar); width: 52px; list-style: none; cursor: pointer; }
.site-mobile-trigger::-webkit-details-marker { display: none; }
.site-mobile-panel { width: 220px; }
.site-mobile-panel > a, .site-mobile-panel > p { display: block; padding: 10px 12px; font-size: 14px; border-radius: 8px; }
.site-mobile-panel > p { color: var(--fg-3); border-top: 1px solid var(--rule); margin-top: 4px; font-size: 12px; }
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); color: var(--fg-3); font-size: 13px; }
.site-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(calc(100% - var(--gutter) * 2), var(--wrap)); min-height: 72px; margin-inline: auto; padding: 20px var(--cell); border-inline: 1px solid var(--rule); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a:hover { color: var(--fg-1); }


/* Account navigation prioritizes the two places a signed-in person manages. */
.site-nav-links a[aria-current="page"] { color: var(--fg-1); background: var(--hover); box-shadow: inset 0 -2px 0 var(--focus); }
.site-account-identity { display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 0 20px; border-right: 1px solid var(--rule); color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.site-account-identity > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--active); color: var(--fg-1); font-size: 12px; font-weight: 500; }
.site-nav-actions > .site-mobile-account { display: none; }

/* All account operations fit in one overview, with a quieter setup rail. */
.web-site .dashboard-main { padding-block: 40px; }
.dashboard-heading { padding-bottom: 28px; gap: 8px; }
.dashboard-heading > p:first-child { color: var(--fg-3); font-size: 13px; font-weight: 400; }
.dashboard-heading > h1 { font-size: 32px; }
.dashboard-heading > p:last-child { color: var(--fg-2); font-size: 15px; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; }
.dashboard-grid > div:first-child, .dashboard-rail { gap: 20px; }
.dashboard-grid .site-panel { padding: 24px; }
.dashboard-grid .site-panel h2 { font-size: 17px; font-weight: 500; }
.dashboard-grid :is(#setup, [aria-label="Help and support"]) h2 { font-size: 13px; color: var(--fg-3); }
.dashboard-grid #accounts > div:first-child { margin-bottom: 12px; }
.dashboard-grid #accounts > ul > li { padding-block: 14px; }
.dashboard-grid #accounts > ul > li > div:nth-child(2) > p { margin-top: 4px; }
.dashboard-grid #accounts .bg-gradient-to-tr { background: var(--active); color: var(--fg-2); font-weight: 500; }
.dashboard-grid #plan [role="meter"] { height: 4px; }
.dashboard-grid #download > a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.dashboard-grid [aria-label="Help and support"] { padding: 0 4px; border: 0; background: transparent; }
.dashboard-grid [aria-label="Help and support"] > ul { flex-direction: row; flex-wrap: wrap; column-gap: 24px; }
.dashboard-grid [aria-label="Help and support"] h2 { margin-bottom: 4px; }
.dashboard-rail #setup { background: transparent; border-color: transparent; padding-top: 4px; }

/* One sign-in task; its notice and recovery belong beside the account action. */
.web-site .auth-main { display: flex; align-items: flex-start; justify-content: center; padding-block: 80px; }
.auth-form-column { width: 440px; max-width: 100%; }
.auth-form { display: flex; flex-direction: column; gap: 24px; padding: 32px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.auth-form-heading > img { display: block; margin-bottom: 24px; }
.web-site .auth-form h1 { font-size: 28px; letter-spacing: -.035em; }
.auth-form-heading > p { margin-top: 10px; color: var(--fg-2); font-size: 14px; line-height: 1.6; }
.auth-verification { padding: 14px 16px; border-left: 2px solid var(--chip); border-radius: 0 6px 6px 0; background: var(--hover); color: var(--fg-2); font-size: 13px; line-height: 1.65; }
.auth-verification a { text-underline-offset: 3px; }
.auth-form .auth-google { min-height: 48px; border-color: var(--control); font-size: 14px; font-weight: 500; box-shadow: none; }
.auth-form > p:last-child { text-align: left; font-size: 12px; line-height: 1.7; color: var(--fg-3); }
.auth-secondary { margin-top: 24px; text-align: center; color: var(--fg-3); font-size: 13px; }
.auth-secondary a { margin-left: 4px; color: var(--fg-1); text-decoration: underline; text-underline-offset: 4px; }

/* Membership: summary and actions together, with a separate recovery route. */
.billing-heading { margin-bottom: 28px; }
.billing-heading h1 { margin: 8px 0 10px; font-size: 32px; }
.billing-heading > p:last-child { color: var(--fg-2); font-size: 15px; }
.billing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 40px; align-items: start; }
.billing-layout > .site-panel { padding: 28px; }
.billing-plan-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.billing-status { display: inline-flex; padding: 4px 8px; border-radius: 5px; background: var(--hover); color: var(--fg-3); font-size: 12px; font-weight: 500; }
.billing-status.is-active { background: var(--ok-soft); color: var(--ok); }
.billing-layout > section > p:last-child { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.billing-help { padding-top: 8px; font-size: 14px; color: var(--fg-2); }
.billing-help h2, .billing-help h3 { margin-bottom: 10px; color: var(--fg-1); font-size: 15px; font-weight: 500; }
.billing-help p { line-height: 1.7; }
.billing-help a { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; color: var(--fg-1); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.billing-help > div { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* Public and long-form pages keep their own readable measure. */
.web-site .pricing-main { padding: 0; }
.web-site .pricing-main > section { max-width: none; padding: 40px var(--cell); border-bottom: 1px solid var(--rule); }
.web-site .pricing-main #pricing-hero { padding-block: 48px 40px; text-align: left; }
.web-site .pricing-main #pricing-hero h1 { max-width: 760px; font-size: 44px; font-weight: 400; }
.web-site .pricing-main #pricing-hero p { margin: 20px 0 0; max-width: 640px; font-size: 17px; }
.web-site .pricing-main #pricing-cards > div { max-width: 640px; }
.web-site .pricing-main #pricing-cards .site-panel { padding: 32px; }
.web-site .pricing-main #feature-table > div { text-align: left; }
.web-site .pricing-main #feature-table > div > p { margin-left: 0; }
.web-site .membership-main { padding: 0; }
.web-site .membership-main > section { max-width: none; padding: 48px var(--cell); }

@media (max-width: 1100px) {
  .web-site { --gutter: 32px; --cell: 32px; }
  .site-nav-links a, .site-nav-actions > a, .site-nav-actions > form > button { padding-inline: 16px; }
  .site-brand { padding-right: 20px; }
  .dashboard-grid, .billing-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .site-nav-actions { margin-left: auto; }
  .site-account-identity { display: none; }
  .dashboard-grid, .billing-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .billing-help { padding: 0; }
}
@media (max-width: 639px) {
  .web-site { --gutter: 16px; --cell: 20px; }
  .site-nav-links { display: none; }
  .site-nav-actions > .site-mobile-account { display: flex; }
  .web-site main { padding-block: 32px 40px; }
  .site-brand { padding-left: 16px; padding-right: 12px; font-size: 16px; }
  .site-nav-actions > a, .site-nav-actions > form > button { padding-inline: 12px; font-size: 12px; }
  .site-footer-row { align-items: flex-start; flex-direction: column; padding-block: 24px; }
  .site-footer nav { gap: 16px; }
  .dashboard-grid .site-panel, .billing-layout > .site-panel { padding: 20px; }
  .dashboard-rail { display: flex; }
  .web-site .auth-main { padding-block: 40px; }
  .auth-form { padding: 24px; }
  .dashboard-heading { padding-bottom: 24px; }
  .web-site .pricing-main #pricing-hero h1 { font-size: 36px; }
}