@import url('/fonts/fonts.css');

/* Atlas palette: warm paper, deep ink, copper reserved for the primary action. */
:root {
  color-scheme: light;
  --bg: #f8f6f0; --surface: #fffefa; --panel: #f0eee6; --text: #232d29;
  --muted: #62695f; --accent: #9a431f; --accent-hover: #7c3217; --on-accent: #fffaf5;
  --line: #d9dbd0; --control-line: #868d7f; --tint: #f4e9db; --focus: #9a431f;
  --error: #a12f2a; --error-bg: #fff1ee; --success: #425b40;
  --shadow: 0 2px 3px #26342b05, 0 12px 28px #26342b08, 0 35px 64px #26342b08;
  --inset: inset 0 1px 0 #ffffffb3;
  --display: 'Cormorant Garamond', Georgia, serif; --body: 'Manrope', Arial, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --ease: cubic-bezier(.22,.68,0,1.08); --duration: 240ms;
}
:root[data-theme='dark'] {
  color-scheme: dark; --bg: #141416; --surface: #1d1d20; --panel: #232326; --text: #eeeae4;
  --muted: #b6b3af; --accent: #e2a088; --accent-hover: #f2b9a4; --on-accent: #201511;
  --line: #424246; --control-line: #848489; --tint: #302725; --focus: #e2a088;
  --error: #ffb1aa; --error-bg: #382326; --success: #d0c8ba;
  --shadow: 0 0 0 1px #ffffff04, 0 16px 40px #00000040; --inset: inset 0 1px 0 #ffffff0d;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--control-line) var(--bg)}
body {margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--body); -webkit-font-smoothing: antialiased}
::selection {background: var(--accent); color: var(--on-accent)}
button,input,select,textarea {font: inherit}
button {cursor: pointer}button:disabled {opacity: .5; cursor: not-allowed}
a {color: inherit; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px}
svg {flex: 0 0 auto; display: inline-block; vertical-align: middle}
img {max-width: 100%; display: block}p {text-wrap: pretty; max-width: 70ch}h1,h2,h3 {text-wrap: balance}
h1,h2 {font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; margin: 0}
h1 {font-size: clamp(54px,10vw,112px)}h2 {font-size: clamp(42px,5vw,64px)}h3 {font-weight: 600; font-size: 20px; line-height: 1.3}
h1 em,h2 em {font-weight: 500}h2 em {color: var(--muted)}
:focus-visible {outline: 3px solid var(--focus); outline-offset: 5px}
main:focus {outline: none}
.wrap {width: min(1200px,calc(100% - 40px)); margin-inline: auto}
.skip-link {position: fixed; top: 8px; left: 12px; padding: 12px 20px; background: var(--accent); color: var(--on-accent); z-index: 100; transform: translateY(-180%)}
.skip-link:focus {transform: translateY(0)}
.eyebrow {display: block; margin: 0 0 20px; font-size: 11px; line-height: 1.5; letter-spacing: .16em; font-weight: 700; color: var(--muted)}
.pilot-strip {display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 20px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: .1em; flex-wrap: wrap}
.pilot-strip>span:last-child {font-weight: 400; letter-spacing: 0; font-size: 12px}
.pilot-dot {width: 5px; height: 5px; border-radius: 50%; background: currentColor}
.site-header {min-height: 104px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line)}
.brand {display: inline-flex; align-items: center; width: fit-content; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -.06em; white-space: nowrap}
.brand>span:not(.brand-mark) {font-weight: 400}
.brand-mark {font: italic 500 27px/1 var(--display); display: grid; place-items: center; width: 32px; height: 38px; border: 1px solid var(--text); margin-right: 10px; border-radius: 40% 40% 4px 4px; letter-spacing: -.12em; padding-right: 3px}
.site-header nav {display: flex; gap: 20px; grid-row: 2; grid-column: 1/-1; justify-content: center; flex-wrap: wrap}
nav a,.header-account {display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 500; color: var(--muted)}
nav a:hover,nav a:focus-visible {color: var(--text); text-decoration: underline}
.header-actions {display: flex; gap: 12px; align-items: center}
.header-account {gap: 8px; color: var(--text)}.header-account svg {width: 16px}
.theme-toggle {width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--text); transition: background var(--duration),transform var(--duration) var(--ease)}
.theme-toggle:hover {background: var(--panel); transform: rotate(-12deg)}.theme-toggle:active {transform: scale(.94)}
.site-header>.theme-toggle {justify-self: end}
.button,.secondary,.vote {display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 12px 20px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; transition: background var(--duration),color var(--duration),border-color var(--duration),transform var(--duration) var(--ease); text-align: center}
.button {background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 2px 2px #00000008}
.button:hover {background: var(--accent-hover); border-color: var(--accent-hover)}
.button svg,.text-link svg {transition: transform var(--duration) var(--ease)}.button:hover svg,.text-link:hover svg {transform: translateX(3px)}
.button:active,.secondary:active,.vote:active {transform: translateY(2px) scale(.98)}
.secondary,.vote {background: var(--surface); color: var(--text); border-color: var(--control-line)}
.secondary:hover,.vote:hover {background: var(--panel); border-color: var(--text)}
.text-link {display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.5}
.text-link:hover {border-bottom-color: currentColor}.text-link:active {opacity: .65}
.hero {display: grid; gap: 40px; padding-block: 48px 40px}
.hero-copy {align-self: center}.hero h1 {margin: 0 0 24px; max-width: 10ch}.hero h1 em {color: var(--accent)}
.hero-description {font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 42ch; margin: 0}
.hero-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin: 32px 0 24px}
.hero-terms {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); margin: 0}.hero-terms svg {width: 17px; margin-right: 3px}.hero-terms>span {opacity: .6}
.hero-art {margin: 0; min-width: 0; width: 100%; max-width: 580px; justify-self: center}
.art-mat {padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--inset),var(--shadow); position: relative; isolation: isolate}
.art-mat::after {content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; z-index: 2; background: url('data:image/svg+xml,%3Csvg viewBox=%220 0 150 150%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Cpath fill=%22%23000%22 filter=%22url(%23n)%22 opacity=%22.4%22 d=%22M0 0h150v150H0z%22/%3E%3C/svg%3E')}
.art-topline {display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); padding: 4px 4px 16px; font-size: 9px; font-weight: 600; letter-spacing: .14em}
.art-mat img {width: 100%; height: auto; aspect-ratio: 1402/1122; object-fit: cover; background: #aba99f; border-radius: 2px}
.art-bottomline {display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 4px; gap: 16px; font-size: 12px; line-height: 1.6}
.art-bottomline i {font-family: var(--display); font-size: 22px}
.art-seal {width: 56px; height: 56px; border: 1px solid var(--control-line); border-radius: 50%; outline: 1px solid var(--line); outline-offset: 4px; display: grid; place-items: center; font: italic 500 34px var(--display); transform: rotate(-14deg); transition: transform 350ms var(--ease),color 350ms,border-color 350ms}
.hero:has(.hero-actions .button:is(:hover,:focus-visible)) .art-seal {transform: rotate(0) scale(1.07); color: var(--accent); border-color: var(--accent)}
.hero-art figcaption {font-size: 11px; color: var(--muted); padding: 12px 0 0; text-align: right}
:root[data-theme='dark'] .art-mat img {filter: brightness(.84) saturate(.9)}
.section {padding-block: 64px; border-top: 1px solid var(--line)}
.section-heading {display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px}
.section-heading>p {font-size: 15px; color: var(--muted); margin: 0; max-width: 38ch}
.server-catalog {border-top: 1px solid var(--text)}
.server-entry {display: grid; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; min-width: 0; transition: background var(--duration)}
.server-identity {display: flex; align-items: center; gap: 16px; min-width: 0}
.catalog-index {font-size: 11px; color: var(--muted); align-self: start; margin-top: 5px; font-variant-numeric: tabular-nums}
.server-emblem {width: 56px; height: 64px; flex-shrink: 0; border: 1px solid var(--control-line); border-radius: 50% 50% var(--r-sm) var(--r-sm); display: grid; place-items: center; font: 500 40px var(--display); background: var(--surface)}
.server-entry h3 {margin: 8px 0 0; font-family: var(--display); font-size: 32px; letter-spacing: -.02em; font-weight: 600}
.badge {display: inline-flex; align-items: center; width: fit-content; font-size: 11px; font-weight: 600; line-height: 1.6; padding: 3px 8px; background: var(--tint); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm)}
.badge.muted {background: var(--panel); color: var(--muted)}
.server-description {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 38ch}
.server-order {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap}.server-price strong {font-size: 28px; font-weight: 600; line-height: 1.4; letter-spacing: -.04em; font-variant-numeric: tabular-nums}.server-price strong small {font-size: 13px; letter-spacing: 0}.server-price>span {display: block; font-size: 11px; color: var(--muted)}
.server-actions {display: flex; flex-direction: column; align-items: stretch}.server-actions .text-link {justify-content: center; font-size: 12px}
.server-wait {font-size: 13px; color: var(--muted)}.server-wait>span {display: block}.server-wait .text-link {font-size: 12px}
.server-pending .server-emblem {background: transparent; color: var(--muted)}.server-pending h3 {color: var(--muted)}
.catalog-note {display: flex; gap: 12px; align-items: flex-start; color: var(--muted); margin-top: 20px}.catalog-note p {font-size: 12px; margin: 0}.catalog-note svg {width: 16px; margin-top: 2px}
.process-band {background: var(--panel); border-block: 1px solid var(--line); padding-block: 56px}.process-layout {display: grid; gap: 32px}.process-layout h2 {font-size: 48px}.process-list {list-style: none; margin: 0; padding: 0; display: grid; gap: 24px}.process-list li {display: flex; gap: 16px}.step-number {font: italic 500 32px/1.2 var(--display); color: var(--muted); min-width: 32px; font-variant-numeric: tabular-nums}.process-list h3 {font-size: 15px; margin: 0 0 8px}.process-list p {font-size: 13px; margin: 0; color: var(--muted); max-width: 24ch}
.requests {display: grid; gap: 40px; border-top: 0}.request-copy>p {font-size: 16px; color: var(--muted); max-width: 35ch; margin: 24px 0}.request-rule {display: flex; align-items: start; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; margin: 32px 0 20px; max-width: 380px}.request-rule>span {font: 500 52px/.9 var(--display); font-variant-numeric: tabular-nums}.request-rule p {margin: 0; font-size: 12px; color: var(--muted); max-width: 28ch}.request-rule strong {display: block; color: var(--text); font-weight: 600; margin-bottom: 6px}
.request-panel {background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--inset),var(--shadow); min-width: 0}.panel-title {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap}.panel-title h3 {font-size: 17px; margin: 0}.panel-title>span {font-size: 9px; letter-spacing: .12em; color: var(--muted)}
.empty {color: var(--muted); padding: 24px 0; font-size: 14px}.request-empty {text-align: center; border-block: 1px solid var(--line); padding: 28px 0; margin: 24px 0}.request-empty p {margin: 12px auto 6px; color: var(--text); font-size: 14px}.request-empty small {font-size: 12px}.empty-symbol {display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; margin-inline: auto}
.signin p {font-size: 14px; color: var(--muted)}.signin .secondary {width: 100%; font-size: 13px; padding-inline: 12px}
.fine {font-size: 11px; color: var(--muted); line-height: 1.7}.request-panel>.fine {margin-top: 20px}
.request-list {list-style: none; padding: 0; margin: 24px 0; max-height: 360px; overflow: auto}.request-list li {display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line)}.request-list li>div {flex: 1; min-width: 0}.request-list a {font-size: 14px; overflow-wrap: anywhere}.request-list a svg {width: 14px; height: 14px; margin-left: 4px}.request-list small {font-size: 11px; color: var(--muted); display: block; overflow-wrap: anywhere}.count {font-size: 22px; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.2}.count small {margin-top: 4px}.vote {font-size: 12px; padding: 8px 10px; min-height: 44px}
form>label,.field-pair label,.application-card>label {display: block; font-size: 14px; color: var(--text); margin-top: 20px}
input:not([type=checkbox]),select,textarea {display: block; width: 100%; max-width: 100%; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--control-line); border-radius: var(--r-sm); min-height: 48px; padding: 12px; margin-top: 8px; font-size: 16px; line-height: 1.5; transition: border-color 200ms,background 200ms}
textarea {min-height: 104px; resize: vertical}input::placeholder,textarea::placeholder {color: var(--muted); opacity: .85}
input:user-invalid,textarea:user-invalid {border-color: var(--error)}input:disabled,select:disabled,textarea:disabled {opacity: .6; cursor: not-allowed}
input[type=checkbox] {width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; margin: 2px 4px 0 0}.consent {display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.7; padding-block: 12px}
form .button,form>.secondary {width: 100%; margin-top: 12px}
.status {color: var(--success); background: var(--panel); border-left: 2px solid currentColor; padding: 12px 16px; font-size: 13px; margin: 20px 0 0; overflow-wrap: anywhere}.error {padding: 16px; border: 1px solid var(--error); background: var(--error-bg); border-radius: var(--r-sm); color: var(--error); font-size: 14px; overflow-wrap: anywhere}.error p {margin: 0 0 8px}.error .text-link {color: inherit}.error:empty,.status:empty {display: none}
.faq {display: grid; gap: 32px}.faq>.text-link,.faq>div>.text-link {margin-top: 20px; font-size: 13px}.faq-list {min-width: 0}details {border-bottom: 1px solid var(--line)}summary {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; min-height: 64px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 500}summary::-webkit-details-marker {display: none}summary svg {width: 18px; transition: transform 200ms var(--ease)}details[open] summary svg {transform: rotate(45deg)}details p {font-size: 14px; color: var(--muted); margin: 0 0 24px; max-width: 60ch}summary:hover {color: var(--accent)}
.closing {display: flex; flex-direction: column; align-items: start; gap: 28px; padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); margin-block: 0 64px; box-shadow: var(--inset)}.closing h2 {font-size: clamp(36px,4vw,54px)}.closing p {font-size: 14px; color: var(--muted); margin: 16px 0 0}.closing .eyebrow {margin-bottom: 16px}
.site-footer {padding-block: 32px 112px; border-top: 1px solid var(--line)}.footer-top {display: flex; flex-direction: column; gap: 24px}.footer-top nav {display: flex; gap: 24px; flex-wrap: wrap}.footer-bottom {display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted)}.footer-bottom p {font-size: 11px; margin: 0; max-width: 65ch}.footer-bottom>span {font-size: 9px; letter-spacing: .13em; flex-shrink: 0}
.support-launcher {position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 56px; background: var(--surface); color: var(--text); border: 1px solid var(--control-line); border-radius: var(--r-md); box-shadow: var(--inset),var(--shadow); font-size: 14px; font-weight: 600; transition: transform var(--duration) var(--ease),background var(--duration)}.support-launcher:hover {transform: translateY(-3px); background: var(--panel)}.support-launcher small {display: block; color: var(--muted); font-size: 10px; font-weight: 400; margin-top: 2px}
/* Account, support and operator surfaces use the same tokens, at reading scale. */
.dashboard {padding-block: 48px 112px}.dashboard h1 {font-size: clamp(42px,6vw,64px)}.dashboard-title {display: flex; flex-direction: column; align-items: start; gap: 24px; margin-bottom: 32px}.dashboard-title h1 {margin: 8px 0 16px}.dashboard-title p {font-size: 15px; color: var(--muted); margin: 0}.dashboard-title .eyebrow {margin-bottom: 12px}
.panel,.application-card {border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 24px; min-width: 0; box-shadow: var(--inset)}.panel h2,.application-list>h2 {font: 600 28px/1.2 var(--display); letter-spacing: -.02em}.panel p {max-width: 65ch}.subtle {font-size: 13px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere}
.account-grid,.editor-grid,.admin-applications {display: grid; gap: 24px; align-items: start}.application-list>h2 {margin-bottom: 24px}.application-card {margin-bottom: 16px}.application-card h3 {font-size: 20px; margin: 0}.row-between {display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap}.row-between .badge {white-space: nowrap}.customer-note,.notice {padding: 16px; border-left: 2px solid var(--control-line); background: var(--panel); color: var(--text); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere}
.status-delivered {background: var(--panel); color: var(--success)}.status-rejected {background: var(--error-bg); color: var(--error)}.status-approved {background: var(--tint); color: var(--text)}.status-cancelled {background: var(--panel); color: var(--muted)}
.empty-panel {border: 1px dashed var(--control-line); border-radius: var(--r-md); background: var(--panel); padding: 32px; font-size: 15px; color: var(--muted)}.admin-notice {padding: 16px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: 13px; margin-bottom: 24px}
.summary-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 24px}.summary-grid article {padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 12px; background: var(--surface)}.summary-grid span {font-size: 12px; color: var(--muted); overflow-wrap: anywhere}.summary-grid strong {font-size: 32px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums}
.tabs {display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow: auto; margin-block: 32px 24px}.tabs button {border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 14px; min-height: 48px; padding: 12px 0; white-space: nowrap}.tabs button[aria-selected=true] {border-bottom-color: var(--accent); color: var(--text)}.field-pair {display: grid; gap: 16px}.app-contact {font-size: 14px; overflow-wrap: anywhere}.action-row {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px}.action-row .button,.action-row .secondary {font-size: 13px; padding: 12px 16px}.delivery-box {background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; margin-top: 24px}.delivery-box h4 {font-size: 14px; margin: 0}.delivery-box .button {margin-top: 12px; width: 100%}
.table-scroll {overflow: auto}table {width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; font-variant-numeric: tabular-nums}th {font-size: 12px; color: var(--muted); font-weight: 600}td,th {padding: 16px; border-bottom: 1px solid var(--line)}td small {display: block; color: var(--muted); font-size: 12px}.event-list {padding: 0; list-style: none}.event-list li {padding: 16px 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere}.event-list small,.event-list time {color: var(--muted); font-size: 12px}.tab-content {min-height: 160px}
.application-filters {display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px}.application-filters label {flex: 1 1 220px; margin: 0}.application-filters .button {width: auto}.pagination {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 24px 0}.pagination span {font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums}.pagination .secondary {font-size: 12px; padding: 10px 12px}
.support-grid {display: grid; gap: 24px; align-items: start}.support-grid aside {display: grid; gap: 24px; min-width: 0}.thread-list {list-style: none; padding: 0; margin: 20px 0}.thread-list button {width: 100%; min-height: 56px; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 16px; margin: 6px 0; overflow-wrap: anywhere}.thread-list button:hover {background: var(--panel)}.thread-list button[aria-pressed=true] {border-color: var(--accent); background: var(--tint)}.thread-list strong,.thread-list span,.thread-list small {display: block}.thread-list span,.thread-list small {font-size: 12px; color: var(--muted); margin-top: 4px}.thread-list .unread {color: var(--text); font-weight: 700}
.message-list {list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-height: 480px; overflow: auto}.message {padding: 16px; background: var(--panel); border-radius: var(--r-md); margin-right: 24px; overflow-wrap: anywhere}.message-admin {background: var(--tint); margin-right: 0; margin-left: 24px}.message-system {background: var(--surface); border: 1px dashed var(--control-line); margin: 0; font-size: 13px}.message>div {display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px}.message time {font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums}.message p {white-space: pre-wrap; font-size: 15px; line-height: 1.7; margin: 8px 0 0}.conversation h2 {overflow-wrap: anywhere}.remote-option,.review-box {border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px}
.availability-bar {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); padding: 20px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 14px}.availability-bar>span {flex: 1 1 220px}.support-grid form .button {width: auto}.account-shortcuts {display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px}.account-shortcuts .secondary {font-size: 13px}.policy-page {max-width: 850px}.policy-page h1 {margin: 20px 0 24px}.policy-page p {line-height: 1.85}.policy-page h2 {margin-top: 32px}.member-card {display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 24px; margin-bottom: 24px}.member-card p {margin: 8px 0; overflow-wrap: anywhere}.member-card small {color: var(--muted)}.login-page {max-width: 580px}.login-page h1 {margin-bottom: 24px}.login-page>.panel {margin-top: 32px}.owner-login {margin-top: 24px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-md)}.owner-login .secondary {margin-bottom: 24px}
/* Native dialog retains focus trapping, Escape dismissal and background inertness. */
dialog {padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--control-line); border-radius: var(--r-lg); max-width: 540px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); box-shadow: var(--shadow)}dialog::backdrop {background: #101014b3; backdrop-filter: blur(4px)}.modal {padding: 36px 24px; position: relative}.modal h2 {font-size: 52px; margin-block: 24px}.modal p {font-size: 14px; line-height: 1.85; color: var(--muted)}.close {position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text)}.close:hover {background: var(--panel)}.modal .eyebrow {padding-right: 48px}.license-facts {list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; font-size: 14px}.license-facts li {display: flex; gap: 12px; align-items: center}.license-facts svg {width: 18px}.modal-price {font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums}.modal-price span {font-size: 12px; font-weight: 400; color: var(--muted)}.modal .notice {color: var(--text); font-size: 12px}.modal>.button {width: 100%}
.not-found {min-height: 68vh; display: grid; align-content: center; justify-items: start; padding-block: 64px; position: relative}.not-found .map-number {font: 500 clamp(100px,20vw,180px)/1 var(--display); color: var(--line); margin-bottom: 24px; letter-spacing: -.07em}.not-found h1 {font-size: clamp(44px,7vw,72px)}.not-found p {color: var(--muted); margin-block: 24px; max-width: 42ch}.not-found .action-row {margin: 0}
.skeleton {display: block; background: var(--line); height: 16px; border-radius: 2px; width: 75%; opacity: .6}.skeleton+.skeleton {margin-top: 12px; width: 45%}.skeleton-block {padding: 32px 0; min-height: 112px}.loading-page {min-height: 60vh; padding-block: 64px}.loading-page>.skeleton:first-child {height: 56px; width: 50%; margin-bottom: 40px}
@media (min-width:700px) {
  .wrap {width: min(1200px,calc(100% - 80px))}.site-header {grid-template-columns: 1fr auto 1fr; min-height: 96px}.site-header nav {grid-row: auto; grid-column: auto; gap: 28px}.header-actions {justify-self: end}.hero {grid-template-columns: 1.05fr 1fr; align-items: center; gap: 32px; padding-block: 64px 72px}.hero h1 {font-size: clamp(64px,7.8vw,112px)}.hero-art {transform: rotate(1deg)}.hero-description {font-size: 15px}.art-topline {font-size: 8px}.art-bottomline {font-size: 11px}.hero-actions {gap: 16px}.hero-terms {font-size: 10px}.section {padding-block: 80px}.section-heading {flex-direction: row; align-items: end; justify-content: space-between; margin-bottom: 40px}.section-heading>p {text-align: right}.server-entry {grid-template-columns: 1.1fr 1fr; align-items: center}.server-description {grid-column: 2; grid-row: 1}.server-order,.server-wait {grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 20px}.server-order {justify-content: end; gap: 40px}.server-wait {display: flex; justify-content: space-between; align-items: center}.server-actions {flex-direction: row; align-items: center; gap: 20px}.process-list {grid-template-columns: repeat(3,1fr); gap: 24px}.requests {grid-template-columns: 1fr 1.1fr; gap: 48px}.faq {grid-template-columns: .9fr 1.1fr; gap: 48px}.closing {flex-direction: row; justify-content: space-between; align-items: center; padding: 40px; margin-bottom: 80px}.closing>.button {flex-shrink: 0}.footer-top,.footer-bottom {flex-direction: row; justify-content: space-between; align-items: center}.account-grid {grid-template-columns: 1fr 1.2fr}.editor-grid,.admin-applications {grid-template-columns: 1fr 1fr}.field-pair {grid-template-columns: 1fr 1fr}.dashboard-title {flex-direction: row; justify-content: space-between; align-items: center}.support-grid {grid-template-columns: minmax(260px,340px) minmax(0,1fr)}.event-list li {flex-direction: row; justify-content: space-between; align-items: center}.modal {padding: 44px}.summary-grid article {padding: 24px}
}
@media (min-width:1100px) {
  .hero {gap: 64px; padding-block: 72px 88px}.hero-description {font-size: 17px}.hero-actions {gap: 28px}.hero-terms {font-size: 12px}.art-topline {font-size: 10px}.art-mat {padding: 16px}.art-bottomline {font-size: 12px}.server-entry {grid-template-columns: 1.2fr 1fr 1.15fr; gap: 32px; padding-block: 32px}.server-description {grid-column: auto; grid-row: auto}.server-order,.server-wait {grid-column: auto; border: 0; padding: 0}.server-order {gap: 24px; justify-content: space-between}.server-actions {flex-direction: column; gap: 0}.server-wait {display: block; justify-self: end}.process-layout {grid-template-columns: .85fr 2fr; align-items: center; gap: 64px}.process-list li {gap: 12px}.requests {gap: 120px}.faq {gap: 120px}.request-panel {padding: 32px}.site-footer {padding-bottom: 48px}
}
@media(max-width:379px) {.wrap {width: calc(100% - 32px)}.site-header nav {gap: 16px}.header-actions {gap: 8px}.brand {font-size: 21px}.brand-mark {width: 28px; margin-right: 8px}.hero h1 {font-size: 58px}.hero-terms {font-size: 11px}.request-panel {padding: 20px}.server-order {align-items: start; flex-direction: column; gap: 20px}.server-actions {width: 100%; align-items: stretch}.closing {padding: 24px}.modal {padding: 36px 20px}.modal h2 {font-size: 44px}}
/* Meaningful entrance and scroll progress; unsupported browsers keep everything visible. */
@keyframes enter {from {opacity: 0; transform: translateY(12px)}to {opacity: 1; transform: translateY(0)}}
.hero-copy>.eyebrow,.hero h1,.hero-description,.hero-actions {animation: enter 350ms both var(--ease)}.hero h1 {animation-delay: 40ms}.hero-description {animation-delay: 80ms}.hero-actions {animation-delay: 120ms}.server-entry {animation: enter 350ms both var(--ease)}.server-entry:nth-child(2) {animation-delay: 80ms}.process-list li {animation: enter 350ms both var(--ease)}.process-list li:nth-child(2) {animation-delay: 60ms}.process-list li:nth-child(3) {animation-delay: 120ms}
@supports(animation-timeline:scroll()) {body::before {content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 90; background: var(--accent); transform-origin: left; animation: reading-progress linear both; animation-timeline: scroll()}@keyframes reading-progress {from {transform: scaleX(0)}to {transform: scaleX(1)}}}
@supports(animation-timeline:view()) {.section-heading,.request-copy>h2,.faq h2 {animation: enter 350ms both; animation-timeline: view(); animation-range: entry 0% entry 60%}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior: auto}*,*::before,*::after {animation: none!important; transition: none!important; scroll-behavior: auto!important}.hero-art,.art-seal {transform: none!important}body::before {display: none}}

/* Reserve the asynchronous request area; changing the load state does not move its form. */
.request-empty {min-height: 216px; display: flex; flex-direction: column; justify-content: center}
.request-empty .skeleton-block {padding: 8px 20%; min-height: 56px; width: 100%}
.server-entry:focus-within {background: var(--panel)}

/* Final reading-distance pass: primary explanations remain at body scale. */
.server-description,.faq-list details p,.modal>p:not(.notice) {font-size: 16px}
form>label.consent,.consent {display: flex}
@media(max-width:699px) {.support-launcher {gap: 8px; min-height: 48px; padding: 10px 14px}.support-launcher small {display: none}.support-launcher svg {width: 18px;height:18px}}
@media(forced-colors:active) {.button,.secondary,.badge,.art-seal {border: 1px solid ButtonText}.skip-link {forced-color-adjust:auto}}

.brand {min-height: 44px}.request-list a {display: inline-flex; align-items:center; min-height:44px}
.art-seal {align-content:center; gap:0}.art-seal>span {font:500 30px/1 var(--display)}.art-seal>small {font:700 8px/1.6 var(--body);letter-spacing:.16em}

/* Compatibility and guided application: restrained additions to the Atlas layout. */
.server-summary {min-width:0}.compatibility-link {font-size:12px;margin-top:4px;color:var(--muted)}
.compatibility-page>.back-link {margin-bottom:32px}.back-link svg {transform:rotate(180deg)}
.compatibility-heading {display:flex;align-items:start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:32px 0 40px}
.compatibility-heading h1 {margin:0 0 20px}.compatibility-heading p {color:var(--muted);max-width:56ch;margin:0}
.compatibility-layout {display:grid;gap:32px;align-items:start}.compatibility-layout .panel h2 {font-size:36px}
.compatibility-facts {margin:28px 0}.compatibility-facts>div {display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.compatibility-facts dt {font-size:12px;color:var(--muted)}.compatibility-facts dd {margin:0;font-size:15px;font-variant-numeric:tabular-nums}
.compatibility-action .button {width:100%}.compatibility-price {font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin:28px 0 20px}
.compatibility-price small {display:block;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}
.compatibility-notes h2 {font-size:32px;margin-bottom:20px}.compatibility-notes h2:not(:first-child) {margin-top:36px}
.compatibility-notes ul {padding:0;list-style:none;display:grid;gap:16px}.compatibility-notes li {display:flex;gap:12px;font-size:15px;max-width:65ch}
.compatibility-notes svg {margin-top:3px}.note-marker {flex:0 0 20px;color:var(--muted)}
.installation-guide {margin-top:48px}.installation-guide h2 {font-size:36px}.installation-guide ol {list-style:decimal-leading-zero;padding-left:32px;margin-top:32px}
.installation-guide li {padding:0 0 20px 12px}.installation-guide li::marker {color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.installation-guide li p {color:var(--muted);font-size:15px;max-width:64ch;margin:8px 0 0}
.device-field {margin-top:24px}.device-field>label {font-size:14px}.device-field code {font:inherit;overflow-wrap:anywhere}
.device-feedback {min-height:8px}.device-feedback .status {display:flex;align-items:start;gap:10px;font-size:12px;margin-top:16px}
.device-feedback .status svg {width:18px;height:18px;margin-top:2px}.device-feedback .status strong {display:block;font-size:13px}
.device-feedback .status small {display:block;overflow-wrap:anywhere;margin:4px 0;color:var(--muted)}
.device-help summary {font-size:13px;padding:16px 0}.device-help ol {font-size:13px;color:var(--muted);padding-left:20px;line-height:1.9}.device-help p {font-size:12px}
.application-progress {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;list-style:none;margin:24px 0 20px;gap:8px}
.application-progress li {position:relative;display:flex;flex-direction:column;gap:8px;align-items:start;min-width:0;color:var(--muted)}
.application-progress li:before {content:'';position:absolute;left:32px;right:0;top:15px;height:1px;background:var(--line)}
.application-progress li:last-child:before {display:none}.application-progress li>span {position:relative;width:30px;height:30px;border:1px solid var(--control-line);border-radius:50%;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;background:var(--surface)}
.application-progress li[aria-current=step]>span {border-color:var(--accent);background:var(--tint);color:var(--text)}
.application-progress li.complete>span {background:var(--panel);color:var(--text)}.application-progress small {font-size:10px;line-height:1.5}.application-progress svg {width:15px;height:15px}
.application-skeleton {padding:28px 20px;border:1px solid var(--line);border-radius:var(--r-md);min-height:160px}
@media(min-width:800px) {.compatibility-layout {grid-template-columns:1.3fr 1fr}.compatibility-notes {grid-column:1/-1}.compatibility-facts>div {grid-template-columns:140px 1fr;gap:20px}.compatibility-action {position:sticky;top:24px}}
@media(prefers-reduced-motion:no-preference) {.application-progress .complete svg {animation:enter 240ms var(--ease)}}

.back-link:hover svg {transform:translateX(-3px) rotate(180deg)}

/* Member support moderation stays separate from refund review. */
.moderation-flag{display:block;color:var(--accent);font-size:11px;line-height:1.6;margin-top:8px}.moderation-controls{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;margin:20px 0}.moderation-controls summary{min-height:44px;cursor:pointer}.moderation-controls form{margin-top:16px}
.order-desk-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:start}.order-desk-layout>*{min-width:0}.order-desk-list{display:grid;gap:8px;margin:16px 0}.order-choice{display:grid;gap:6px;width:100%;text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;cursor:pointer;overflow-wrap:anywhere;min-height:44px}.order-choice[aria-pressed=true]{outline:2px solid currentColor;outline-offset:-2px}.order-choice:hover{border-color:currentColor}.order-choice span,.order-choice small{font-size:14px}.order-review-form{display:grid;gap:12px;margin:24px 0}.order-events{padding-left:20px;overflow-wrap:anywhere}.order-events li{padding:12px 0;border-bottom:1px solid var(--line)}.order-events p{white-space:pre-wrap}.order-desk-layout .pagination{flex-wrap:wrap;font-variant-numeric:tabular-nums}@media(max-width:760px){.order-desk-layout{grid-template-columns:minmax(0,1fr)}.order-choice{padding:14px}}
.payment-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;overflow-wrap:anywhere;word-break:break-all}.payment-amount{font-size:22px;font-variant-numeric:tabular-nums}.payment-copy{display:block;width:auto;margin-top:8px;min-height:44px}.payment-networks{border:1px solid var(--line);border-radius:12px;padding:8px 16px;margin:0;min-width:0}.payment-networks legend{font-size:12px;color:var(--muted);padding-inline:4px}
/* Hero slogan and 'Bilinmesi gerekenler' (shared by the app home and the static intro). */
.hero-slogan{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);line-height:1.15;letter-spacing:-.02em;color:var(--text);margin:0 0 16px;max-width:20ch;text-wrap:balance}
.know-before{display:grid;gap:32px}.know-content{display:grid;gap:28px;min-width:0}.know-content article h3{font-size:18px;margin:0 0 8px}.know-content article p{font-size:15px;line-height:1.8;color:var(--muted);margin:0;max-width:60ch}
.know-example{margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);min-width:0}.know-example table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.know-example caption{text-align:left;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
.know-example th,.know-example td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}.know-example th{font-size:12px;color:var(--muted);font-weight:600}.know-example tbody tr:last-child td{border-bottom:0}.know-example td:first-child{white-space:nowrap;font-weight:600;width:5.5em}.know-example figcaption{font-size:12px;line-height:1.7;color:var(--muted);margin-top:12px}
@media(min-width:900px){.know-before{grid-template-columns:.9fr 1.1fr;gap:64px}}@media(max-width:420px){.hero-slogan{font-size:24px}.know-example{padding:16px}}
/* Narrow screens keep three menu links on one line; the requests section stays reachable by scrolling. */
@media(max-width:480px){.site-header nav .nav-optional{display:none}}