/* Shared brand and interface type. Every size on the site is in rem, so the
   whole site scales from the one root size below: 1rem is 16px on phones and
   tablets. Computers, driven by a mouse or trackpad, show the site at 87.5%
   (1rem = 14px), the density a laptop screen suits. Hairlines stay in px. */
html { font-size: 100%; }
@media (hover: hover) and (pointer: fine) { html { font-size: 87.5%; } }
:root {
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-brand: 'Fraunces', Georgia, serif;
  --ui-small: .8125rem;
  --ui-label: .875rem;
  --ui-body: .9375rem;
  --ui-heading: 1.125rem;
  --ui-title: 1.75rem;
  --ui-text: #EFE6D6;
  --ui-muted: #B6AFA4;
  --ui-border: rgba(239,230,214,0.16);
  --space-card: 1.5rem;
  --space-section: 2.5rem;
  --space-page: 2.5rem;
}
body { font-family: var(--font-ui); font-size: var(--ui-body); }
button, input, textarea, select { font-family: var(--font-ui); }
.ch-brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; color: var(--ui-text); text-decoration: none; white-space: nowrap; }
.ch-brand > img { display: block; width: 1.75rem; height: 1.75rem; margin: 0; opacity: 1; flex: none; }
.ch-brand > span { display: inline; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 500; font-style: normal; line-height: 1; letter-spacing: -0.02em; font-variation-settings: 'opsz' 48, 'SOFT' 30; color: inherit; }
.ch-brand:focus-visible { outline: 2px solid #D8624B; outline-offset: .3125rem; border-radius: .1875rem; }
.ch-brand:hover { color: #EFE6D6; }
.dash-slide-header { min-height: 4.25rem; padding: 1.25rem var(--space-page); background: #1A1817; }
.dash-title { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ch-page-name { font: 400 var(--ui-label)/1.4 var(--font-ui); color: var(--ui-muted); padding-left: 1rem; border-left: 1px solid var(--ui-border); }
.dash-slide-close { width: 2.25rem; height: 2.25rem; color: var(--ui-muted); background: transparent; }
.dash-slide iframe { background: #1A1817; }
.header-right a, .page-tab { font-size: var(--ui-label); }
.claw-swap { margin: 0 0.12em; }
.header-center .auth-row { font-size: var(--ui-small); color: var(--ui-muted); }
body.dashboard-page { display: block; background: #100E0D; color: var(--ui-text); }
.dashboard-page .dashboard-container { padding: 1.75rem var(--space-page) 4rem; }
.dashboard-container > .card { padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
.dashboard-container h1 { font: 600 var(--ui-title)/1.25 var(--font-ui); letter-spacing: -0.02em; }
.dashboard-container h2 { font: 600 var(--ui-heading)/1.4 var(--font-ui); letter-spacing: normal; text-transform: none; margin-bottom: 1.25rem; text-wrap: balance; }
.dashboard-container h3, .dashboard-container h4 { font-family: var(--font-ui); }
.dashboard-container .section { margin-top: var(--space-section); padding-top: 2rem; }
.dashboard-container .tab-bar { margin: 0 0 1.75rem; gap: .75rem; border-bottom: 1px solid var(--ui-border); }
.dashboard-container .tab { padding: .75rem .5rem; font: 500 var(--ui-label)/1.4 var(--font-ui); min-height: 2.75rem; color: var(--ui-muted); border-bottom-width: 2px; }
.dashboard-container .tab.active { color: var(--ui-text); background: transparent; border-bottom: 2px solid #8DBD79; }
.dashboard-container .tab:hover { color: #EFE6D6; }
.dashboard-container :is(input, select, textarea) { font-size: var(--ui-body); }
.dashboard-container .plat-name { font-size: var(--ui-body); }
.dashboard-container .plat-card { padding: 1.25rem; gap: 1rem; background: #1A1817; }
.dashboard-container .plat-connect-btn { font-size: var(--ui-small); min-height: 2rem; }
.dashboard-container .tab:focus-visible { outline: 2px solid #D8624B; outline-offset: -2px; }
/* Space within groups stays smaller than space between tasks. */
.dashboard-container .platforms-grid { gap: 1rem; grid-auto-columns: calc(50% - .5rem); }
.dashboard-container .integrations-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.dashboard-container .int-card { padding: 1.25rem; gap: .75rem; }
.dashboard-container .int-unfurl-inner { padding: var(--space-card); }
.dashboard-container .settings-group { margin-bottom: 1.75rem; }
.dashboard-container .settings-group-header { padding: var(--space-card); }
.dashboard-container .settings-group-header h2 { margin-bottom: .75rem; }
.dashboard-container .settings-group-body { padding: var(--space-card); }
.dashboard-container .settings-group > div:not(.settings-group-header):not(.settings-group-body) { padding: var(--space-card) !important; }
.dashboard-container .section-desc { line-height: 1.65; max-width: 70ch; text-wrap: pretty; }
.dashboard-container .conn-card { padding: 1.125rem 1.25rem; }
.dashboard-container .mc-metrics { gap: 1rem; margin-bottom: 2rem; }
.dashboard-container .mc-metric { padding: 1.25rem; }
.dashboard-container .mc-metric-value { margin-bottom: .625rem; }
.dashboard-container .agent-tpl-grid { gap: 1rem; }
.dashboard-container .auto-template { padding: 1.25rem !important; }
.brain-toolbar { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: center; flex-wrap: wrap; }
#memory-filters { display: flex; gap: .5rem; row-gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.dashboard-container .auto-card { margin-bottom: 1rem; }
.dashboard-container .auto-card-header { padding: 1.25rem; gap: 1rem; }
.dashboard-container .auto-card-detail-inner { padding: 0 1.25rem 1.25rem; }
.dashboard-container .mc-section-label { margin-top: 2rem; margin-bottom: 1rem; }
.dashboard-container .mcp-hero { padding: 3rem 2rem; }
.mcp-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 1.5rem; max-width: 22.5rem; margin: 0 auto 2.25rem; }
.mcp-copy { max-width: 56ch; margin: 0 auto 2rem; text-align: center; }
.mcp-title { font-size: 1.0625rem; font-weight: 600; color: #EFE6D6; letter-spacing: -0.01em; text-wrap: balance; }
.mcp-description { font-size: .875rem; color: var(--ui-muted); line-height: 1.65; margin: 1rem 0 .75rem; text-wrap: balance; }
.mcp-security { font-size: .8125rem; color: var(--ui-muted); line-height: 1.6; margin: 0; text-wrap: balance; }
.dashboard-container .mcp-pill-inner { padding: 1.25rem; gap: 1rem; }
#mcp-url-input { min-width: 0; min-height: 3em; }
.mcp-browse { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.25rem; }
/* Home, conversation and file browsing use the same breathing room. */
.header { padding: 1.5rem var(--space-page); }
.page-tabs { margin-top: .75rem; margin-bottom: 1.25rem; }
.hero-heading { margin-bottom: 1rem; text-wrap: balance; }
.hero-heading-sub { margin-bottom: 2.25rem; text-wrap: balance; }
.input-textarea-wrap { padding: 1.75rem 1.75rem 1.25rem; }
.input-toolbar { padding: 1rem 1.5rem 1.25rem; }
.suggestions { margin-top: 1.5rem; gap: .75rem; }
.hero-bridge-prompt { margin: 1.75rem 0 1rem; flex-wrap: wrap; gap: .75rem; }
.features-page { padding: 3rem var(--space-page) 5rem; }
.feat-row { gap: 2rem; margin-bottom: 5rem; }
.feat-card { padding: 2.5rem; }
.feat-grid { gap: 1.75rem; }
.feat-mini { padding: 2.5rem 2rem; }
:is(.feat-card-title,.feat-mini-title,.feat-heading) { margin-bottom: 1rem; text-wrap: balance; }
:is(.feat-card-desc,.feat-mini-desc,.feat-sub) { text-wrap: pretty; }
.feat-pills { gap: 1rem; }
.chat-messages { gap: 1.25rem; }
.library-view { top: var(--workspace-top, 7.5rem); }
.rag-container { padding: 2.25rem; }
.computers-view { padding-top: 1.5rem; }
.mon-grid { gap: 1rem; padding: 1.5rem; }
.rag-header { margin-bottom: 1.5rem; }
.rag-query-box { gap: .75rem; margin-bottom: 1.5rem; }
:is(.rag-source,.rag-doc,.rag-result) { padding: 1.125rem 1.25rem; margin-bottom: .75rem; }
.rag-empty-panel p { margin-bottom: 1.5rem; text-wrap: balance; }
@media (min-width: 600px) and (max-width: 899px) {
  .dashboard-container .platforms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .dashboard-container .platforms-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.setup-page { --font-display: var(--font-ui); --text-secondary: #B6AFA4; --text-tertiary: rgba(239,230,214,0.64); }
.setup-page .wrap { padding-top: 2rem; }
.setup-page header.top { margin-bottom: 3rem; }
.setup-page .hero { margin-bottom: 2rem; }
.setup-page .step { margin-bottom: 1.5rem; }
.setup-page h1 { font: 600 var(--ui-title)/1.25 var(--font-ui); letter-spacing: -0.02em; }
.setup-page h1 em { color: inherit; font-style: normal; font-weight: inherit; }
.setup-page .step h2 { font: 600 var(--ui-heading)/1.4 var(--font-ui); }
.setup-page .num { font: 400 var(--ui-heading)/1.4 var(--font-ui); }
.setup-page .summary .count { font: 500 var(--ui-label)/1.4 var(--font-ui); }
.setup-page :is(.ready,.finish) h2 { font: 600 1.375rem/1.3 var(--font-ui); }
.setup-page :is(.field input,.field select) { font: 400 var(--ui-body)/1.5 var(--font-ui); }
.setup-page footer em { font: inherit; }
@media (max-width: 600px) {
  :root { --space-card: 1.25rem; --space-section: 2rem; --space-page: 1.25rem; }
  /* Type in a field is never under 16px (1rem) on a phone: iOS Safari zooms the
     whole page in to focus a smaller field and never zooms back out. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 1rem !important; }
  .header { padding: 1.25rem 1.25rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; }
  .header-left-group { grid-column: 1; grid-row: 1; }
  .header-right { grid-column: 2; grid-row: 1; }
  /* "Connected as" on its own row, centred, the same space above it as below. */
  .header-center { grid-column: 1 / -1; grid-row: 2; position: static !important; left: auto !important; right: auto !important; transform: none !important; justify-content: center; text-align: center; padding: 1.125rem 0 .5rem; }
  .header-center:empty { display: none; }
  .input-toolbar { padding: .75rem; }
  .input-textarea-wrap { padding: 1.5rem 1.25rem 1.25rem; }
  .hero-heading { margin-bottom: 1rem; }
  .hero-heading-sub { margin-bottom: 2rem; }
  .features-page { padding: 4rem 1.25rem; }
  .feat-row, .feat-grid { gap: 1.5rem; margin-bottom: 4rem; }
  .feat-card, .feat-mini { padding: 1.75rem 1.5rem; }
  .library-view { padding: 1.25rem 1rem; }
  .rag-container { padding: 1.25rem 1rem; }
  .rag-empty-panel { padding: 2rem 1.25rem; }
  .mon-grid { gap: .75rem; padding: 1.25rem; }
  .dashboard-container .mcp-pill-inner { flex-wrap: wrap; }
  #mcp-url-input { flex-basis: 100% !important; min-height: 4.5em; }
  .mcp-connect-btn { margin-left: auto; }
  #brain-search { flex-basis: 100% !important; }
  .rag-query-box { flex-wrap: wrap; }
  .rag-query-input { min-width: 0; }
  .toolbar-right { gap: .375rem; }
  .chat-app-toggle { padding: .5rem .625rem; min-height: 2.5rem; font-size: var(--ui-small); }
  .send-btn { padding: .5rem .75rem; min-width: 0; min-height: 2.5rem; }
  .toolbar-btn { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; }
  .dash-slide-header { padding: 1.25rem; }
  .dash-title { gap: .75rem; }
  .ch-page-name { padding-left: .75rem; font-size: var(--ui-small); }
  .dashboard-page .dashboard-container { padding: 1.5rem 1.25rem 3rem; }
  .dashboard-container .plat-card { padding: 1.25rem 1rem; }
  .dashboard-container .int-card { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .5rem .75rem; }
  .int-card > :first-child { grid-column: 1; grid-row: 1 / span 2; }
  .int-card .int-name { grid-column: 2; grid-row: 1; white-space: normal; min-width: 0; }
  .int-card .int-badge { grid-column: 2; grid-row: 2; }
  .int-card .int-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .dashboard-container .mcp-hero { padding: 2rem 1.25rem; }
  .mcp-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 15rem; margin-bottom: 1.75rem; }
  .dashboard-container .tab-bar { gap: 2px; }
  .dashboard-container .tab { padding: .75rem .5rem; }
  .setup-page header.top { flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
  .setup-page .wrap { padding: 1.5rem 1.25rem 4rem; }
  .header-right a[href='/privacy'], .header-right a[href='/terms'] { display: none; }
}

/* Settings use the same body type and spacing as the surrounding dashboard. */
#phone-title { font-weight: 600; }
#phone-desc { margin: .375rem 0 0; color: var(--ui-muted); line-height: 1.6; }
#phone-block > div:last-child { padding: var(--space-card); }
#phone-block .dashboard-save { margin: 1.5rem 0 0; }
#phone-block a, .platform-pills a, .notification-retry { color: var(--ui-accent, #D8624B); text-underline-offset: .1875rem; }
.dashboard-link-details { flex: 1; min-width: min(15rem, 100%); color: var(--ui-muted); line-height: 1.65; }
.dashboard-link-details p { margin: .75rem 0 0; }
.dashboard-link-details a { display: inline-block; margin-bottom: .625rem; }
#phone-live { margin-top: 1.5rem !important; }
#platform-pills { display: block; }
.notification-help, #platform-pills .pulse-no-platforms { margin: 0; color: var(--ui-muted); font-size: var(--ui-body); line-height: 1.65; }
.notification-options { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.notification-options + .pulse-no-platforms { margin-top: 1.25rem !important; }
.notification-options .pill[aria-pressed="true"]::before { content: "✓ "; }
.notification-options .pill { display: inline-flex; align-items: center; gap: .5rem; }
.notification-options .pill-logo { width: 1rem; height: 1rem; border-radius: .1875rem; opacity: 0.85; }
/* Apps not linked yet: the same pill, drawn dashed and quiet, brightening on hover. */
.notification-options .pill-add { border-style: dashed; border-color: rgba(239,230,214,0.26); background: transparent; color: #B6AFA4; }
.notification-options .pill-add .pill-logo { opacity: 0.7; transition: opacity 0.15s; }
.notification-options .pill-add .pill-add-plus { font-size: .9375rem; line-height: 1; margin-left: -2px; color: #D8624B; }
.notification-options .pill-add:hover { border-style: solid; border-color: rgba(208,86,63,0.55); color: #EFE6D6; background: rgba(208,86,63,0.06); }
.notification-options .pill-add:hover .pill-logo { opacity: 1; }
.notification-options .pill-add-more { border-style: dashed; border-color: rgba(239,230,214,0.22); background: transparent; color: #B6AFA4; padding: .375rem 1.125rem .375rem .5rem; }
.notification-options .pill-add-more .int-more-plus { width: 1.625rem; height: 1.625rem; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(239,230,214,0.22); color: #D8624B; transition: transform 0.25s, border-color 0.2s; }
.notification-options .pill-add-more:hover { border-style: dashed; border-color: rgba(208,86,63,0.55); background: rgba(208,86,63,0.06); color: #EFE6D6; }
.notification-options .pill-add-more:hover .int-more-plus { transform: rotate(90deg); border-color: rgba(208,86,63,0.55); }
.notification-options .pill-add { animation: pillIn 0.25s ease both; }
@keyframes pillIn { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: none; } }
.notification-retry { background: none; border: 0; padding: .25rem; font: inherit; text-decoration: underline; cursor: pointer; }
.preference-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.375rem 0; border-bottom: 1px solid var(--ui-border, rgba(239,230,214,0.16)); }
.preference-row input { width: 1.25rem; height: 1.25rem; margin: .1875rem 0 0; flex: 0 0 1.25rem; accent-color: #D0563F; }
.preference-copy { flex: 1; min-width: 0; font-size: var(--ui-body); line-height: 1.65; overflow-wrap: anywhere; }
.preference-copy small { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .375rem; font-size: .875rem; color: var(--ui-muted); }
.preference-copy small > span { white-space: nowrap; }
.preference-remove { flex: 0 0 2rem; width: 2rem; min-height: 2rem; border: 0; background: none; color: var(--ui-muted); font: inherit; font-size: 1.375rem; cursor: pointer; }
.preference-remove:hover { color: #D8624B; }
.preference-row input:focus-visible, .preference-remove:focus-visible, .notification-retry:focus-visible { outline: 2px solid #D8624B; outline-offset: .1875rem; }
@media (max-width: 520px) {
  #phone-block > div:last-child > div:first-child { flex-wrap: wrap; }
  .preference-row { gap: .75rem; }
}
#tab-settings .section-desc { color: var(--ui-muted); font-size: var(--ui-body); }
#rules-section .settings-group-body > label { font-size: var(--ui-body) !important; padding-bottom: 1.25rem !important; margin-bottom: 1.25rem !important; }
#rules-section .settings-group-body > div:has(> #allowed-hosts) { padding-bottom: 1.25rem !important; margin-bottom: 0 !important; }
.approved-sites-title { font-size: var(--ui-body); color: var(--ui-text); }
.approved-sites-desc { font-size: var(--ui-body); color: var(--ui-muted); line-height: 1.65; margin: .5rem 0 .75rem; max-width: 65ch; }
#allowed-hosts { padding: .875rem 1rem; background: var(--ui-hover, #24211e); border-radius: .5rem; }
.saved-preferences-title { margin: 1.5rem 0 .75rem; font-size: var(--ui-body); font-weight: 600; }
#allowed-hosts > span { color: var(--ui-muted) !important; font-size: var(--ui-label) !important; }
#new-rule-input { min-width: 0; min-height: 2.75rem; font-size: var(--ui-body) !important; }
@media (max-width: 520px) {
  #phone-qr, #phone-scan-help { display: none; }
}

/* The website's header on every page, as on the home page: the Closedhand
   lockup, then GitHub, My Closedhand as an outlined button, Privacy and
   Terms. On a phone it keeps the lockup, the GitHub mark and the button,
   each on one line. */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.75rem; }
.site-head nav { display: flex; align-items: center; gap: 2.25rem; }
.site-head nav a { font-size: .8125rem; color: #B6AFA4; text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: #EFE6D6; }
.site-head nav a.gh { display: inline-flex; align-items: center; gap: .375rem; }
.site-head nav a.gh svg { width: .9375rem; height: .9375rem; fill: currentColor; }
.site-head nav a.nav-cta { padding: .4375rem 1rem; border-radius: 62.4375rem; border: 1px solid rgba(239,230,214,0.32); background: rgba(239,230,214,0.05); color: #EFE6D6; font-size: .9375rem; transition: background 0.2s, border-color 0.2s; }
.site-head nav a.nav-cta:hover { background: rgba(239,230,214,0.1); border-color: rgba(239,230,214,0.5); }
@media (max-width: 600px) {
  .site-head { padding: .75rem .875rem; }
  .site-head nav { gap: 1rem; }
  .site-head nav a.nav-cta { font-size: .84375rem; padding: .4375rem .8125rem; }
  .site-head nav a.gh span, .site-head nav a[href="/privacy"], .site-head nav a[href="/terms"] { display: none; }
}
@media (max-width: 360px) { .site-head nav a.gh { display: none; } }

/* Mac app and Docker on a phone or tablet (home page and /open), and the
   "On your phone?" sheet they open (get-sheet.js). */
.get-it-ways { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.get-it-way { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .625rem .75rem; border-radius: .75rem; background: rgba(239,230,214,0.04); border: 1px solid rgba(239,230,214,0.08); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, border-color 0.15s; }
.get-it-way:hover, .get-it-way:active { background: rgba(239,230,214,0.08); border-color: rgba(239,230,214,0.18); }
.get-it-way:focus-visible { outline: 2px solid #D8624B; outline-offset: 2px; }
/* "On your phone?": a sheet from the bottom of a phone, a card on a tablet. */
.get-sheet { width: 100%; max-width: 27.5rem; max-height: calc(100dvh - 1rem); overflow-y: auto; margin: auto auto 0; padding: 1.875rem 1.375rem calc(1.375rem + env(safe-area-inset-bottom, 0px)); border: 1px solid rgba(239,230,214,0.12); border-bottom: 0; border-radius: 1.375rem 1.375rem 0 0; background: #181615; color: #EFE6D6; text-align: center; box-shadow: 0 -1.25rem 3.75rem rgba(0,0,0,0.5); }
.get-sheet[open] { display: flex; flex-direction: column; align-items: center; animation: sheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.get-sheet::backdrop { background: rgba(10,8,7,0.6); -webkit-backdrop-filter: blur(.1875rem); backdrop-filter: blur(.1875rem); }
@keyframes sheetUp { from { transform: translateY(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { .get-sheet { margin: auto; border-bottom: 1px solid rgba(239,230,214,0.12); border-radius: 1.375rem; padding-bottom: 1.625rem; } }
.get-sheet-close { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(239,230,214,0.06); color: #B6AFA4; cursor: pointer; }
.get-sheet-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.get-sheet-icon { width: 2.125rem; height: 2.125rem; margin-bottom: .75rem; fill: none; stroke: #EFE6D6; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.get-sheet h2 { margin: 0 0 .5rem; font: 500 1.625rem/1.15 var(--font-brand); font-variation-settings: 'opsz' 48, 'SOFT' 30; letter-spacing: -0.02em; }
.get-sheet p { margin: 0; max-width: 34ch; font-size: .90625rem; line-height: 1.5; color: #B6AFA4; text-wrap: balance; }
.get-sheet-send { width: 100%; min-height: 3.125rem; margin-top: 1.375rem; border: 0; border-radius: .75rem; background: #EFE6D6; color: #100E0D; font: 500 1.125rem/1 var(--font-brand); font-variation-settings: 'opsz' 48, 'SOFT' 30; cursor: pointer; }
.get-sheet-send:active { background: #E6DCC9; }
.get-sheet-copy { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3.125rem; margin-top: 1.125rem; padding: 0 1rem; border-radius: .75rem; border: 1px solid rgba(239,230,214,0.14); background: #100E0D; color: #EFE6D6; font: .9375rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.get-sheet-copy strong { font: 500 .875rem/1 var(--font-ui); color: #B6AFA4; }
.get-sheet-copy.done strong { color: #EFE6D6; }
.get-sheet:focus { outline: none; }
.get-sheet :focus-visible { outline: 2px solid #D8624B; outline-offset: .1875rem; }
@media (prefers-reduced-motion: reduce) { .get-sheet[open] { animation: none; } }
.get-it-way svg { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: #EFE6D6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.get-it-way svg.fill { fill: #EFE6D6; stroke: none; }
.get-it-way > span { display: flex; flex-direction: column; font-size: .75rem; line-height: 1.3; color: #B6AFA4; text-align: left; }
.get-it-way strong { font-size: .875rem; font-weight: 500; color: #EFE6D6; }
.get-sheet-mail { width: 100%; margin-top: 1.375rem; padding-top: 1.125rem; border-top: 1px solid rgba(239,230,214,0.08); }
.get-sheet .get-sheet-or { margin: 0 auto .625rem; font-size: .84375rem; color: #EFE6D6; }
.get-sheet-field { display: flex; gap: .5rem; }
.get-sheet-field input { flex: 1; min-width: 0; min-height: 3rem; padding: 0 .875rem; border-radius: .75rem; border: 1px solid rgba(239,230,214,0.14); background: #100E0D; color: #EFE6D6; font: 1rem/1 var(--font-ui); }
.get-sheet-field input::placeholder { color: #6F695F; }
.get-sheet-field input:focus { outline: none; border-color: rgba(239,230,214,0.4); }
.get-sheet-field button { flex: none; min-height: 3rem; padding: 0 1.125rem; border-radius: .75rem; border: 1px solid rgba(239,230,214,0.16); background: rgba(239,230,214,0.06); color: #EFE6D6; font: 500 .9375rem/1 var(--font-ui); cursor: pointer; }
.get-sheet-field button:disabled { opacity: 0.55; }
.get-sheet .get-sheet-note { margin: .625rem auto 0; max-width: none; font-size: .78125rem; color: #8C857B; }
.get-sheet .get-sheet-note.warn { color: #E8A493; }
.get-sheet-trap { position: absolute; left: -624.9375rem; width: 1px; height: 1px; opacity: 0; }