/* MeCentral Easy. One column, big words, one loud color for the next step. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/space-grotesk-600.woff2") format("woff2"); }

:root {
  --ground: #F2F5F9; --sheet: #FFFFFF; --ink: #10253B; --soft: #4A5E74; --line: #C5D1DE; --line-strong: #10253B;
  --brand: #2C5F8D; --link: #1F5A94;
  --go: #FFC530; --go-ink: #10253B; --go-edge: #B98300;
  --ok: #17734A; --ok-bg: #E4F4EC; --bad: #A3321F; --bad-bg: #FBEAE6; --tint: #E3ECF6;
  --r: 14px; --tap: 3.5rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0D1B2A; --sheet: #15273A; --ink: #EEF3F9; --soft: #A9BBCD; --line: #2E445B; --line-strong: #EEF3F9;
    --brand: #7FB2E5; --link: #8DC0F2;
    --go: #FFC530; --go-ink: #10253B; --go-edge: #FFDC82;
    --ok: #6FD3A2; --ok-bg: #12382A; --bad: #FF9E8C; --bad-bg: #40201A; --tint: #1C3148;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.1875rem/1.5 "Inter", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2 { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 600; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 2.875rem); line-height: 1.1; }
h2 { font-size: 1.4375rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .09em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px var(--go); }
ul { list-style: none; margin: 0; padding: 0; }
.ez-i { flex: none; }
.ez-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ez-skip { position: absolute; left: 1rem; top: -5rem; background: var(--go); color: var(--go-ink); padding: .75rem 1rem; border-radius: 8px; z-index: 20; font-weight: 600; }
.ez-skip:focus { top: 1rem; }

/* ---- top bar ---- */
.ez-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem max(1rem, calc((100vw - 60rem) / 2)); background: var(--sheet); border-bottom: 2px solid var(--line); }
.ez-brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 1.1875rem; white-space: nowrap; }
.ez-brand img { height: 2.25rem; width: auto; }
.ez-brand sup { font-size: .55em; }
.ez-brand b { font-weight: 600; background: var(--go); color: var(--go-ink); padding: .05em .4em; border-radius: 6px; margin-left: .15em; }
.ez-nav { display: flex; gap: .25rem; }
.ez-nav a { display: flex; align-items: center; gap: .4rem; min-height: 3rem; padding: 0 .8rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.0625rem; }
.ez-nav a:hover { background: var(--tint); }
.ez-nav a[aria-current] { background: var(--ink); color: var(--sheet); }

/* ---- page ---- */
.ez-main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.ez-foot { padding: 1.25rem 1rem 1.75rem; text-align: center; color: var(--soft); font-size: 1rem; border-top: 2px solid var(--line); }
.ez-foot p { margin: 0 auto; max-width: 40rem; }
.ez-lede { font-size: 1.3125rem; color: var(--soft); max-width: 34rem; margin-top: .75rem; }
.ez-hello { margin-bottom: 2rem; }
.ez-back { margin-bottom: 1rem; }
.ez-back a { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.75rem; font-weight: 500; }
.ez-flash { padding: 1rem 1.125rem; border-radius: var(--r); border: 2px solid var(--ok); background: var(--ok-bg); font-weight: 500; margin-bottom: 1.5rem; }
.ez-flash.is-note { border-color: var(--line-strong); background: var(--sheet); }
.ez-problem { color: var(--bad); font-weight: 500; margin: .5rem 0 0; }
p.ez-problem[role="alert"], .ez-list-block > .ez-problem { background: var(--bad-bg); border: 2px solid var(--bad); border-radius: var(--r); padding: 1rem 1.125rem; margin-bottom: 1.5rem; }
.ez-empty { background: var(--sheet); border: 2px dashed var(--line); border-radius: var(--r); padding: 1.5rem 1.25rem; }
.ez-count { color: var(--soft); margin-bottom: .75rem; }
.ez-opt { color: var(--soft); font-weight: 400; }
.ez-note-page { padding-top: 2rem; }
.ez-note-page h1 { margin-bottom: 1rem; }

/* ---- buttons ---- */
.ez-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: 0 1.375rem; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--sheet); color: var(--ink); font: 600 1.1875rem/1 "Inter", sans-serif; text-decoration: none; cursor: pointer; }
.ez-btn:hover { background: var(--tint); }
.ez-btn.is-go { background: var(--go); color: var(--go-ink); border-color: var(--go-ink); box-shadow: 0 3px 0 var(--go-ink); }
.ez-btn.is-go:hover { background: #FFD25C; }
.ez-btn.is-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--go-ink); }
.ez-btn.is-quiet { min-height: 2.75rem; padding: 0 .875rem; font-size: 1.0625rem; border-color: var(--line); }
.ez-btn[disabled] { opacity: .6; cursor: default; }

/* ---- the ask box: the one loud thing ---- */
.ez-ask { margin-top: 1.5rem; }
.ez-ask > label { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 1.3125rem; margin-bottom: .5rem; }
.ez-ask-box { display: flex; gap: .625rem; background: var(--sheet); border: 3px solid var(--line-strong); border-radius: 18px; padding: .5rem; box-shadow: 0 5px 0 var(--line-strong); }
.ez-ask-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 1.3125rem/1.2 "Inter", sans-serif; padding: 0 .75rem; min-height: var(--tap); outline: none; }
.ez-ask-box:focus-within { box-shadow: 0 5px 0 var(--line-strong), 0 0 0 5px var(--go); }
.ez-ask-box .ez-btn.is-go { box-shadow: none; }
.ez-kinds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.ez-kinds a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--sheet); color: var(--ink); text-decoration: none; font-weight: 500; }
.ez-kinds a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

/* ---- three ways in ---- */
.ez-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; margin-bottom: 2.5rem; }
.ez-three a { display: flex; flex-direction: column; gap: .375rem; height: 100%; padding: 1.125rem; background: var(--sheet); border: 2px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.ez-three a:hover { border-color: var(--line-strong); }
.ez-three .ez-i { width: 2rem; height: 2rem; color: var(--brand); }
.ez-three strong { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.ez-three span { color: var(--soft); font-size: 1.0625rem; line-height: 1.35; }

/* ---- lists ---- */
.ez-list-block h2 { margin-bottom: .75rem; }
.ez-rows { background: var(--sheet); border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1.25rem; }
.ez-rows li + li { border-top: 2px solid var(--line); }
.ez-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; min-height: 5rem; color: var(--ink); text-decoration: none; }
.ez-row:hover { background: var(--tint); }
.ez-row-pic { flex: none; width: 4rem; height: 4rem; border-radius: 10px; background: var(--tint); color: var(--brand); display: grid; place-items: center; overflow: hidden; }
.ez-row-pic img { width: 100%; height: 100%; object-fit: cover; }
.ez-row-pic .ez-i { width: 1.875rem; height: 1.875rem; }
.ez-row-text { min-width: 0; display: flex; flex-direction: column; }
.ez-row-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.ez-row-meta { display: block; color: var(--soft); font-size: 1.0625rem; font-weight: 400; }
.ez-pages { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--soft); }

/* ---- one item ---- */
.ez-paper > header { margin-bottom: 1.25rem; }
.ez-paper h1 { font-size: clamp(1.625rem, 4.4vw, 2.25rem); overflow-wrap: anywhere; }
.ez-view { background: var(--sheet); border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; place-items: center; min-height: 8rem; }
.ez-view img, .ez-view video { display: block; max-width: 100%; max-height: 75vh; }
.ez-view iframe { display: block; width: 100%; height: 75vh; border: 0; background: #fff; }
.ez-view audio { width: 100%; margin: 1.5rem; max-width: 30rem; }
.ez-view-none { display: flex; align-items: center; gap: .75rem; padding: 1.5rem; margin: 0; color: var(--soft); }
.ez-do { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 2rem; }
.ez-panel { background: var(--sheet); border: 2px solid var(--line); border-radius: var(--r); padding: 1.25rem; margin-bottom: 1.25rem; }
.ez-panel h2 { margin-bottom: .625rem; }
.ez-panel > p:last-child, .ez-panel > form:last-child { margin-bottom: 0; }
.ez-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ez-people li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 2px solid var(--line); }
.ez-people li:first-child { border-top: 0; }
.ez-people li > span, .ez-people li > a { min-width: 0; overflow-wrap: anywhere; }
.ez-people li > a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.ez-people li.is-ok strong::before { content: "✓ "; color: var(--ok); }
.ez-people li.is-bad .ez-row-meta { color: var(--bad); }
.ez-people form { flex: none; margin: 0; }
.ez-links li { padding: .375rem 0; }

/* ---- forms ---- */
.ez-form { display: grid; gap: 1.25rem; justify-items: start; margin-top: 1.5rem; }
.ez-field { width: 100%; border: 0; padding: 0; margin: 0; min-width: 0; }
.ez-field > label, .ez-field > legend, .ez-door-form > label, .ez-inline > label { display: block; font-weight: 600; margin-bottom: .375rem; padding: 0; }
input[type="text"], input[type="email"], select, textarea { width: 100%; min-height: var(--tap); padding: .75rem .875rem; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--sheet); color: var(--ink); font: 400 1.1875rem/1.4 "Inter", sans-serif; }
input[aria-invalid="true"] { border-color: var(--bad); }
.ez-field .ez-row-meta { margin-top: .375rem; }
.ez-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.ez-choices legend { width: 100%; }
.ez-choices label { position: relative; }
.ez-choices input { position: absolute; opacity: 0; inset: 0; }
.ez-choices span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.125rem; border: 2px solid var(--line); border-radius: 12px; background: var(--sheet); font-weight: 500; cursor: pointer; }
.ez-choices input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.ez-choices input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--go); }
.ez-check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.ez-check input { width: 1.75rem; height: 1.75rem; margin: .1rem 0 0; accent-color: var(--brand); flex: none; }
.ez-inline { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.ez-inline > label { width: 100%; margin: 0; }
.ez-inline select { flex: 1; min-width: 12rem; width: auto; }
.ez-drop { width: 100%; position: relative; border: 3px dashed var(--line-strong); border-radius: 18px; background: var(--sheet); padding: 2rem 1.25rem; text-align: center; }
.ez-drop.is-over { background: var(--tint); border-style: solid; }
.ez-drop label { display: flex; flex-direction: column; align-items: center; gap: .375rem; cursor: pointer; }
.ez-drop label .ez-i { width: 2.75rem; height: 2.75rem; color: var(--brand); }
.ez-drop label strong { font-family: "Space Grotesk", sans-serif; font-size: 1.4375rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.ez-drop label span { color: var(--soft); }
.ez-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ez-drop:focus-within { box-shadow: 0 0 0 5px var(--go); }
.ez-chosen { margin: .75rem 0 0; font-weight: 600; }
.ez-chosen:empty { display: none; }

/* ---- front door ---- */
.ez-door { padding-top: 1.5rem; }
.ez-door-form { margin: 2rem 0 1.5rem; display: grid; gap: .5rem; max-width: 30rem; }
.ez-door-form .ez-btn { margin-top: .75rem; justify-self: start; min-width: 12rem; }
.ez-door-how { display: flex; gap: .75rem; align-items: flex-start; color: var(--soft); max-width: 34rem; }
.ez-door-how .ez-i { margin-top: .15rem; color: var(--brand); }
.ez-door-new { margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--line); }

/* ---- busy: an honest sweep, never a made-up percentage ---- */
.ez-busy { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: color-mix(in srgb, var(--ground) 88%, transparent); padding: 1rem; }
.ez-busy-box { background: var(--sheet); border: 3px solid var(--line-strong); border-radius: 18px; padding: 1.5rem; width: min(26rem, 100%); font-weight: 600; font-size: 1.3125rem; }
.ez-sweep { height: .625rem; margin-top: 1rem; border-radius: 999px; background: var(--tint); overflow: hidden; }
.ez-sweep::before { content: ""; display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--go-edge); animation: ez-sweep 1.3s ease-in-out infinite !important; }
@keyframes ez-sweep { from { transform: translateX(-110%); } to { transform: translateX(300%); } }

/* ---- confirm ---- */
.ez-modal { border: 3px solid var(--line-strong); border-radius: 18px; padding: 1.5rem; width: min(28rem, calc(100% - 2rem)); background: var(--sheet); color: var(--ink); }
.ez-modal::backdrop { background: rgba(16, 37, 59, .55); }
.ez-modal p { font-family: "Space Grotesk", sans-serif; font-size: 1.4375rem; font-weight: 600; line-height: 1.25; margin-bottom: 1.25rem; }
.ez-modal div { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- small screens: the menu moves under the thumb ---- */
@media (max-width: 52rem) {
  .ez-top { justify-content: center; }
  body:not(.is-out) { padding-bottom: 5rem; }
  .ez-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--sheet); border-top: 2px solid var(--line-strong); padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); gap: 0; justify-content: space-around; }
  .ez-nav a { flex: 1; flex-direction: column; gap: .1rem; padding: .375rem .125rem; min-height: 3.75rem; font-size: .875rem; justify-content: center; }
  .ez-three { grid-template-columns: 1fr; }
  .ez-three a { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .75rem; }
  .ez-three span { width: 100%; }
  .ez-ask-box .ez-btn span { display: none; }
  .ez-ask-box .ez-btn { padding: 0 1rem; }
  .ez-do .ez-btn { flex: 1 1 100%; }
  .ez-main { padding-top: 1.5rem; }
}

.ez-field > label.ez-check { display: flex; }
.ez-check > span { flex: 1; min-width: 0; }

/* ---- change, remove, small forms ---- */
.ez-inline.is-first { margin-top: 0; padding-top: 0; border-top: 0; }
.ez-inline input[type="text"] { flex: 1; min-width: 12rem; width: auto; }
.ez-remove { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 2px solid var(--line); }
.ez-remove a { color: var(--bad); font-weight: 600; }
.ez-btn.is-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.ez-btn.is-danger:hover { background: var(--bad); filter: brightness(1.1); }
.ez-form.is-tight { margin-top: 0; gap: 1rem; }
.ez-secret { font: 600 1.4375rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--tint); border: 2px solid var(--line-strong); border-radius: 12px; padding: .875rem 1rem; overflow-wrap: anywhere; margin: 0 0 1rem; user-select: all; }
.ez-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ez-people li.is-new strong::after { content: " (new)"; color: var(--ok); font-weight: 600; }
textarea { resize: vertical; }
.ez-pair { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; flex: none; }