:root {
  --ground:var(--bevel-ground); --surface:var(--bevel-surface); --sunk:var(--bevel-sunk);
  --ink:var(--bevel-ink); --ink-2:var(--bevel-ink-2); --muted:var(--bevel-muted); --faint:var(--bevel-faint);
  --line:var(--bevel-line); --line-2:var(--bevel-line-2); --line-3:light-dark(#C4B192,#46506E);
  --brass:var(--bevel-brass); --brass-soft:var(--bevel-brass-soft);
  --teal:var(--bevel-teal); --teal-soft:var(--bevel-teal-soft); --ox:var(--bevel-ox); --ox-soft:var(--bevel-ox-soft);
  --sans:var(--bevel-font-sans); --serif:var(--bevel-font-serif); --mono:var(--bevel-font-mono);
  --desk:light-dark(#EFE6D6,#07080D); --mark-body:light-dark(#D98E2B,#E29A3B); --mark-face:#232B36;
  --hard-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 10%,transparent);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html[data-theme] { background:var(--desk); scroll-behavior:smooth; }
body { margin:0; font:14px/1.5 var(--sans); color:var(--ink); }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { text-decoration:none; }
a:where(:not(.bevel-button)) { color:inherit; }
p { margin:0 0 16px; }
h1,h2,h3,h4 { margin:0; font-weight:400; }
button { font:inherit; }
.ic { width:18px; height:18px; fill:currentColor; flex-shrink:0; vertical-align:middle; }
.kicker { font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brass); }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }

.bevel-button { font-size:13px; min-height:32px; padding:4px 11px; }
.bevel-button .ic { width:15px; height:15px; }

.site { container-type:inline-size; background:var(--ground); }
.site-header { height:55px; padding:0 24px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand svg { height:28px; width:28px; }
.brand span { font:500 20px var(--serif); }
.site-header .site-context { border-left:1px solid var(--line-2); padding-left:16px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header .header-action { margin-left:auto; font-size:12px; color:var(--ink-2); white-space:nowrap; }
.text-link { color:var(--brass); font-weight:500; text-underline-offset:3px; }
.text-link:hover { text-decoration:underline; }
.site-body { min-height:540px; padding:48px 28px 40px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.auth { width:100%; max-width:400px; }
.auth.wide { max-width:760px; }
.auth-head { margin-bottom:24px; }
.auth-head h1, .auth-head h3 { font:400 36px/1.1 var(--serif); letter-spacing:-.015em; margin:8px 0 12px; }
.auth-head p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.auth-head .badge { margin-bottom:10px; }
.form-panel { background:var(--surface); border:1px solid var(--line-2); padding:24px; }
.form-fields { display:grid; gap:18px; }
.field { display:block; min-width:0; }
.field-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.field label { font:500 10px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.field-top a { font-size:11px; }
.bevel-input { font-size:14px; min-height:40px; padding:8px 10px; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:44px; }
.password-toggle { position:absolute; right:1px; top:1px; height:38px; width:38px; border:0; background:transparent; color:var(--muted); }
.password-toggle:hover { background:var(--sunk); }
.field-help { font-size:11px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
.field-error { color:var(--ox); }
.bevel-input[aria-invalid="true"] { border-color:var(--ox); }
.bevel-input[readonly] { background:var(--sunk); color:var(--muted); }
.submit { margin-top:24px; width:100%; min-height:40px; font-size:13px; }
.under-form { margin:18px 0 0; text-align:center; font-size:12px; color:var(--muted); }
.site-footer { padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; color:var(--faint); font-size:10px; }
.site-footer span { display:flex; gap:15px; }
.notice { display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line-2); border-left:3px solid var(--brass); background:var(--sunk); color:var(--ink-2); padding:13px; font-size:12px; line-height:1.5; margin:0 0 20px; }
.notice p { margin:0; }
.notice strong { display:block; color:var(--ink); font-weight:500; margin-bottom:3px; }
.notice.success { border-left-color:var(--teal); background:var(--teal-soft); }
.notice.error { border-left-color:var(--ox); background:var(--ox-soft); }
.notice.success > .ic { color:var(--teal); }
.notice.error > .ic { color:var(--ox); }
.notice > .ic { margin-top:1px; color:var(--brass); }
.status-icon { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--sunk); color:var(--brass); margin-bottom:22px; }
.status-icon .ic { width:25px; height:25px; }
.status-icon.success { background:var(--teal-soft); color:var(--teal); border-color:color-mix(in srgb,var(--teal) 30%,var(--line)); }
.status-icon.error { background:var(--ox-soft); color:var(--ox); border-color:color-mix(in srgb,var(--ox) 30%,var(--line)); }
.identity { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line-2); background:var(--surface); margin:0 0 20px; min-width:0; }
.identity .avatar { width:35px; height:35px; display:grid; place-items:center; background:var(--brass-soft); border:1px solid var(--line-2); color:var(--brass); font:500 11px var(--mono); flex-shrink:0; }
.identity .identity-copy { min-width:0; }
.identity b { display:block; font-weight:500; font-size:13px; overflow-wrap:anywhere; }
.identity small { display:block; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; background:var(--brass-soft); border:1px solid color-mix(in srgb,var(--brass) 28%,var(--brass-soft)); color:var(--brass); font:500 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.badge .ic { width:12px; height:12px; }
.invite-card { background:var(--surface); border:1px solid var(--line-2); padding:18px; margin-bottom:22px; }
.invite-card .target { display:flex; gap:11px; align-items:center; font:500 22px var(--serif); }
.invite-card .target .ic { color:var(--brass); width:24px; height:24px; }
.invite-card p { color:var(--muted); font-size:12px; margin:12px 0 0; }
.invite-meta { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:space-between; align-items:center; }
.small-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:15px; margin-top:18px; font-size:12px; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.plan { border:1px solid var(--line-2); background:var(--surface); padding:22px; }
.plan.selected { border-color:var(--brass); box-shadow:inset 0 3px var(--brass); }
.plan h4 { font:400 25px var(--serif); margin:0 0 9px; }
.plan > .kicker { margin-bottom:4px; }
.price { font:400 30px var(--mono); margin:12px 0 5px; letter-spacing:-.06em; }
.price small { font:12px var(--sans); letter-spacing:0; color:var(--muted); }
.plan p { font-size:11px; color:var(--muted); }
.features { list-style:none; padding:12px 0; margin:0; border-top:1px solid var(--line); }
.features li { display:flex; align-items:baseline; gap:8px; font-size:12px; padding:5px 0; }
.features .ic { width:12px; height:12px; color:var(--teal); }
.plan .bevel-button { width:100%; margin-top:8px; }
.checkout-details { max-width:460px; margin:24px auto 0; }
.terms { display:flex; align-items:flex-start; gap:9px; font-size:11px; line-height:1.5; color:var(--muted); margin-top:16px; }
.terms input { margin:2px 0 0; accent-color:var(--brass); }
.step-line { display:flex; gap:16px; font:10px var(--mono); color:var(--faint); margin-bottom:25px; }
.step-line .active { color:var(--brass); }
.step-line .done { color:var(--teal); }

@container (max-width:600px) {
  .site-header { padding:0 16px; gap:10px; }
  .site-context { display:none; }
  .site-body { padding:34px 20px; min-height:500px; }
  .auth-head h1, .auth-head h3 { font-size:31px; }
  .form-panel { padding:19px; }
  .plan-grid { grid-template-columns:1fr; gap:14px; }
  .site-footer { padding:14px 16px; font-size:9px; }
  .step-line { gap:10px; font-size:9px; }
}

html, html[data-theme] { background:var(--ground); }
.entry-page { min-height:100svh; display:flex; flex-direction:column; background:var(--ground); }
.entry-page .site-header, .entry-page .site-footer { flex-shrink:0; }
.entry-page .site-body { flex:1; min-height:calc(100svh - 105px); }
.entry-page .hidden { display:none; }
.theme-toggle { border:0; background:none; color:var(--muted); font:500 11px var(--sans); white-space:nowrap; padding:5px; }
.theme-toggle:hover { background:var(--sunk); color:var(--ink); }
.auth-head h1 { font:400 36px/1.1 var(--serif); letter-spacing:-.015em; margin:8px 0 12px; }
@container (max-width:600px) { .auth-head h1 { font-size:31px; } }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.billing-options, .tier-options { border:0; margin:0; padding:0; min-width:0; }
.seg { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line-2); background:var(--sunk); }
.plans-form label.bevel-button { cursor:pointer; position:relative; }
.plans-form label.bevel-button input { position:absolute; opacity:0; width:1px; height:1px; }
.plans-form label.bevel-button:has(input:focus-visible) { outline:2px solid var(--brass); outline-offset:3px; }
.seg label:has(input:checked) { background:var(--surface); color:var(--ink); }
.plans-form .plan:has(input:checked) { border-color:var(--brass); box-shadow:inset 0 3px var(--brass); }
.plans-form [data-annual], .plans-form .plan-selected { display:none; }
.plans-form:has([name="plan"][value="annual"]:checked) [data-annual] { display:block; }
.plans-form:has([name="plan"][value="annual"]:checked) [data-monthly] { display:none; }
.plans-form .plan:has(input:checked) .plan-unselected { display:none; }
.plans-form .plan:has(input:checked) .plan-selected { display:inline; }
.invite-signin summary { cursor:pointer; }
.invite-signin[open] summary { margin-bottom:18px; }
