/* Guided examples and account surfaces share the site's typography and color tokens. */
.hero-example-link { margin-top:22px; font-size:13px; }
.example-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.examples-section .section-heading>p,.settings-guide .section-heading>p { max-width:390px; font-size:14px; }
.example-card { border:1px solid var(--line); background:white; border-radius:16px; padding:24px; display:flex; flex-direction:column; transition:border-color .2s,box-shadow .2s; }
.example-card:hover { border-color:#87ad9e; box-shadow:0 10px 28px -20px #173e38; }
.example-card-top { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
.example-icon { display:inline-grid; place-items:center; width:40px; height:40px; background:var(--mint); color:var(--green); border-radius:11px; flex-shrink:0; }
.example-card .eyebrow { font-size:9px; margin:0; }
.example-card h3 { line-height:1.3; font-size:20px; }
.example-card p { font-size:13px; margin-bottom:20px; }
.example-mini { background:var(--paper); padding:12px; border:1px solid #edf1ed; border-radius:8px; margin-top:auto; }
.example-mini>div { display:flex; gap:10px; justify-content:space-between; font-size:10px; padding:7px 0; }
.example-mini span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.example-mini strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.example-metric { font-size:10px; color:var(--muted); margin:14px 0 18px; }
.example-card .text-button { text-align:left; font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:40px; }
.settings-guide { border-top:1px solid var(--line); }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.guide-grid details { border:1px solid var(--line); border-radius:12px; background:white; }
.guide-grid summary { display:flex; align-items:center; gap:12px; padding:22px; cursor:pointer; font-size:15px; font-weight:600; list-style:none; }
.guide-grid summary::-webkit-details-marker { display:none; }
.guide-grid summary::after { content:'+'; margin-left:auto; font-size:20px; font-weight:400; }
.guide-grid details[open] summary::after { content:'−'; }
.guide-grid details>div { padding:0 22px 22px; font-size:14px; }
.guide-grid details p { margin-bottom:12px; }
.field-help { border-left:2px solid #8cb3a3; padding:0 0 0 12px; margin:4px 0 20px; font-size:12px; }
.field-help summary { color:var(--green); cursor:pointer; font-weight:600; margin-bottom:8px; }
.field-help .icon { width:16px; height:16px; margin-right:4px; }
.field-help p { margin-bottom:8px; }
.dialog-open { overflow:hidden; }
.ui-dialog { padding:0; border:1px solid var(--line); border-radius:22px; background:#fff; color:var(--ink); width:calc(100% - 32px); max-height:calc(100dvh - 40px); overflow:auto; box-shadow:0 32px 120px #06251f55; }
.ui-dialog::backdrop { background:#102b2766; backdrop-filter:blur(4px); }
.dialog-content { padding:36px; position:relative; }
.dialog-content>h2 { font-size:29px; padding-right:20px; margin-bottom:12px; }
.dialog-content>.eyebrow { padding-right:28px; }
.dialog-content>p { font-size:14px; }
.dialog-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); background:white; color:var(--muted); border-radius:50%; font-size:25px; line-height:1; z-index:1; }
.dialog-close:hover { background:var(--mint); color:var(--ink); }
.example-dialog { max-width:900px; }
.example-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; }
.example-input { min-width:0; }
.detail-label,.example-result>span { display:block; font-size:10px; letter-spacing:.1em; color:var(--muted); font-weight:650; margin-bottom:12px; }
.example-input .table-wrap { border:1px solid var(--line); border-radius:10px; }
.example-input th,.example-input td { font-size:11px; padding:13px 10px; white-space:nowrap; }
.example-result { padding:22px; border-radius:12px; background:var(--mint); margin-top:20px; }
.example-result strong { display:block; font-size:25px; letter-spacing:-.04em; }
.example-result p { margin:8px 0 0; font-size:13px; }
.walkthrough { margin:0; padding-left:25px; }
.walkthrough li { padding-left:8px; margin-bottom:22px; }
.walkthrough li::marker { color:var(--green); font-weight:700; }
.walkthrough h3 { font-size:15px; line-height:1.4; margin:0 0 6px; }
.walkthrough p { font-size:13px; margin:0; }
.example-caution { display:flex; align-items:start; gap:12px; background:#f8f5ea; border:1px solid #e8e2cc; padding:16px; border-radius:10px; margin-top:20px; }
.example-caution p { font-size:12px; margin:0; color:#73623b; }
.example-actions { margin-top:24px; }
.example-actions>.hint { margin:12px 0 0; }
.replace-example p { font-size:13px; color:var(--ink); }
.auth-dialog { max-width:460px; text-align:center; }
.auth-dialog .dialog-content { padding:28px 32px; }
.auth-dialog .dialog-content>h2 { font-size:26px; padding:0; margin-top:16px; }
.auth-mark { display:inline-grid; place-items:center; width:48px; height:48px; background:var(--mint); color:var(--green); border-radius:14px; }
.auth-mark .icon { width:25px; height:25px; }
.auth-subtitle { margin-bottom:24px; line-height:1.7; }
.signin-options { display:grid; gap:10px; margin-top:24px; }
.provider-button { display:flex; justify-content:center; min-height:50px; border:1px solid #bfcfc6; border-radius:9px; color:var(--ink); background:white; gap:12px; font-size:14px; }
.provider-button:hover { background:var(--paper); text-decoration:none; border-color:var(--green); }
.google-button { border-color:#6e998a; }
.provider-letter { font-size:19px; line-height:1; font-weight:700; width:24px; text-align:center; }
.github-letter { font-size:10px; border:1.5px solid currentColor; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; }
.signin-divider { display:flex; align-items:center; gap:12px; color:#7f8c85; font-size:11px; }
.signin-divider::before,.signin-divider::after { content:''; height:1px; background:var(--line); flex:1; }
.signin-terms { font-size:11px; margin:18px 0 12px; text-align:center; line-height:1.7; }
.signin-terms a { text-decoration:underline; }
.signin-details { font-size:11px; color:var(--muted); text-align:left; }
.signin-details summary { cursor:pointer; text-align:center; }
.signin-details p { margin:10px 0 0; }
.signin-preserve { font-size:11px; background:var(--paper); padding:10px; border-radius:8px; margin:12px 0; }
.guest-dismiss { font-size:12px; min-height:40px; }
.auth-status { font-size:12px; color:var(--green); margin:12px 0 0; }
.auth-status:empty { display:none; }
.auth-dialog [data-account-refresh] { font-size:10px; margin-top:10px; }
.modal-allowance { text-align:left; background:var(--mint); border-radius:12px; padding:20px; margin:20px 0; }
.modal-allowance strong { display:block; font-size:23px; margin:8px 0; }
.modal-allowance span,.modal-allowance p { font-size:12px; margin:0; }
.member-email { overflow-wrap:anywhere; font-size:13px; }
.full-width { width:100%; justify-content:center; }
.account-workspace { padding-block:48px 70px; }
.workspace-heading h1 { font-size:38px; margin-bottom:12px; }
.workspace-heading>p { font-size:15px; }
.account-status:empty { display:none; }
.payment-return { margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:white; }
.payment-return[data-state="active"] { background:var(--mint); border-color:var(--green); }
.payment-return h2 { margin:0 0 10px; font-size:24px; }
.payment-return p { margin:0; max-width:760px; font-size:14px; }
.payment-return-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.account-status:not(:empty) { border:1px solid var(--line); padding:14px 18px; border-radius:10px; background:var(--mint); font-size:13px; margin:24px 0; }
.signin-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin:40px 0; max-width:1000px; margin-inline:auto; }
.signin-story h2 { margin-top:20px; font-size:36px; line-height:1.15; }
.signin-story>p { font-size:15px; }
.auth-benefits { list-style:none; padding:0; margin:30px 0; }
.auth-benefits li { display:flex; gap:14px; align-items:start; margin:20px 0; font-size:13px; color:var(--muted); }
.auth-benefits .icon { color:var(--green); }
.auth-benefits strong { display:block; color:var(--ink); font-size:14px; margin-bottom:4px; }
.signin-card { background:white; padding:40px; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); text-align:center; }
.signin-card h2 { font-size:25px; margin:18px 0 10px; }
.signin-card>p { font-size:14px; }
.signin-footer { display:block; border-top:1px solid var(--line); padding-top:20px; margin-top:24px; font-size:11px; color:var(--muted); }
.dashboard { display:grid; grid-template-columns:220px minmax(0,1fr); gap:38px; margin-top:32px; }
.workspace-sidebar { border-right:1px solid var(--line); padding-right:24px; }
.identity-card { display:flex; flex-direction:column; gap:7px; margin-bottom:28px; }
.avatar { display:grid; place-items:center; width:42px; height:42px; background:var(--green); color:white; font-weight:600; border-radius:50%; margin-bottom:8px; }
.identity-card strong { font-size:13px; overflow-wrap:anywhere; }
.identity-card>span:last-child { color:var(--muted); font-size:12px; }
.workspace-sidebar nav { display:flex; flex-direction:column; gap:6px; }
.workspace-sidebar nav a { padding:10px 12px; display:flex; align-items:center; gap:10px; border-radius:8px; font-size:12px; }
.workspace-sidebar nav a[aria-current] { background:var(--mint); }
.workspace-sidebar>.text-button { margin:28px 12px; font-size:12px; }
.allowance-card { border:1px solid #c9dcd0; border-radius:18px; background:linear-gradient(110deg,#edf5ef,#f9fcf9); padding:30px; }
.allowance-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.allowance-heading .text-button { font-size:11px; }
.allowance-number { display:block; font-size:38px; letter-spacing:-.045em; margin:24px 0 16px; line-height:1.2; }
.allowance-card progress { display:block; width:100%; height:7px; border:0; border-radius:10px; accent-color:var(--green); overflow:hidden; background:#d5e4db; }
.allowance-card progress::-webkit-progress-bar { background:#d5e4db; }
.allowance-card progress::-webkit-progress-value { background:var(--green); }
.allowance-card>p { font-size:12px; margin-top:12px; }
.count-explainer { display:flex; gap:12px; font-size:12px; border-top:1px solid #d6e3d9; margin-top:22px; padding-top:18px; color:var(--muted); }
.count-explainer strong { color:var(--ink); }
.workspace-tools { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.workspace-tools>a { display:grid; grid-template-columns:40px 1fr 20px; column-gap:14px; padding:22px; background:white; border:1px solid var(--line); border-radius:14px; color:var(--ink); }
.workspace-tools>a:hover { text-decoration:none; border-color:var(--green); }
.workspace-tools .example-icon { grid-row:1/3; }
.workspace-tools strong { font-size:14px; }
.workspace-tools>a>span:not(.example-icon) { grid-column:2; font-size:11px; color:var(--muted); }
.workspace-tools>a>.icon { grid-column:3; grid-row:1/3; align-self:center; width:17px; }
.dashboard-pro { display:grid; grid-template-columns:1fr auto; gap:0 24px; align-items:center; border:1px solid var(--line); border-radius:16px; padding:26px 30px; background:white; }
.dashboard-pro .eyebrow { font-size:9px; margin-bottom:12px; }
.dashboard-pro h2 { font-size:24px; margin-bottom:12px; }
.dashboard-pro p { font-size:13px; margin:0; }
.dashboard-pro .inline-link { font-size:12px; margin-top:10px; }
.dashboard-pro .pro-fineprint { grid-column:1/-1; font-size:11px; border-top:1px solid var(--line); margin-top:20px; padding-top:15px; }
.local-work-note { display:flex; align-items:start; gap:14px; margin-top:30px; padding:0 4px; }
.local-work-note h2 { font-size:15px; margin:0 0 8px; }
.local-work-note p,.local-work-note a { font-size:12px; }
@media(max-width:1050px) {
  .example-grid { grid-template-columns:1fr 1fr; }
  .signin-layout { gap:30px; }
  .dashboard { grid-template-columns:180px minmax(0,1fr); gap:24px; }
  .workspace-tools { grid-template-columns:1fr; }
  .dashboard-pro { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:760px) {
  .guide-grid,.example-detail-grid,.signin-layout,.dashboard { grid-template-columns:1fr; }
  .example-card { padding:20px; }
  .example-card h3 { font-size:18px; }
  .example-card-top { margin-bottom:15px; }
  .example-card .eyebrow { line-height:1.6; }
  .dialog-content { padding:28px 20px; }
  .dialog-content>h2 { font-size:25px; }
  .example-detail-grid { gap:24px; }
  .ui-dialog { max-height:calc(100dvh - 24px); border-radius:16px; }
  .auth-dialog .dialog-content { padding:28px 24px; }
  .auth-dialog .dialog-content>h2 { font-size:23px; }
  .workspace-heading h1 { font-size:31px; }
  .account-workspace { padding-top:32px; }
  .signin-card { padding:28px 24px; order:-1; }
  .signin-story h2 { font-size:30px; }
  .workspace-sidebar { border-right:0; padding:0; border-bottom:1px solid var(--line); }
  .identity-card { display:grid; grid-template-columns:42px 1fr; column-gap:14px; margin-bottom:18px; }
  .identity-card .avatar { grid-row:1/3; margin:0; }
  .workspace-sidebar nav { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .workspace-sidebar nav a { font-size:11px; padding:9px; }
  .workspace-sidebar>.text-button { margin:16px 10px; }
  .allowance-card,.dashboard-pro { padding:22px; }
  .allowance-number { font-size:30px; }
  .hero-example-link { margin-top:14px; font-size:12px; }
}
@media(max-width:480px) {
  .example-grid { grid-template-columns:1fr; }
  .example-card { display:grid; grid-template-columns:1fr; }
  .example-card-top { flex-wrap:nowrap; }
  .example-mini>div { font-size:12px; }
  .example-metric { font-size:11px; }
  .example-card .text-button { font-size:13px; }
  .guide-grid summary { font-size:14px; padding:18px; }
  .guide-grid details>div { padding-inline:18px; }
  .example-actions .button { width:100%; justify-content:center; margin-bottom:8px; }
  .allowance-heading { align-items:flex-start; }
  .allowance-number { font-size:27px; }
  #allowance-status { font-size:9px; max-width:170px; }
  .workspace-tools>a { padding:18px; }
}