/* Heroicons v2.1.5 outline SVGs in the public templates.
MIT License

Copyright (c) Tailwind Labs, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* MeroSplit home. Light by default, dark from the OS. html[data-theme] pins either one for local fixtures. */
:root {
  color-scheme: light;
  --page: #EEF0F3; --paper: #FFFFFF; --ink: #16181C; --quiet: #565D66; --rule: #C9CED6;
  --blue: #075DB4; --on-blue: #FFFFFF; --owed: #176B3A; --owes: #B42318;
  font-family: "Stack Sans Text", system-ui, sans-serif; font-size: 100%; line-height: 1.55; color: var(--ink); background: var(--page);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0F1114; --paper: #1A1D22; --ink: #ECEEF1; --quiet: #A9B0BA; --rule: #3A4049;
    --blue: #83B9FF; --on-blue: #0F1114; --owed: #78D9A0; --owes: #FF9B93;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0F1114; --paper: #1A1D22; --ink: #ECEEF1; --quiet: #A9B0BA; --rule: #3A4049;
  --blue: #83B9FF; --on-blue: #0F1114; --owed: #78D9A0; --owes: #FF9B93;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 62ch; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: .6rem 1rem; background: var(--paper); color: var(--ink); border-radius: 8px; z-index: 1; }
.skip:focus { top: 1rem; }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }

/* Heroicons (MIT): 24px outline paths, sized with the text. */
.i { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Shared by home and the help pages: brand, help links, Open MeroSplit. */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.brand { min-height: 2.75rem; display: flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 22%; }
.top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.top nav a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--quiet); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.top .open { padding: .5rem .9rem; }
.open { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.2rem; border-radius: 12px; background: var(--blue); color: var(--on-blue); font-weight: 600; text-decoration: none; }
.open:hover { text-decoration: underline; }
.open:focus-visible { outline-color: var(--ink); }

/* Help pages: one calm reading column. */
.doc { width: min(42rem, 100% - 2.5rem); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.doc .mark { display: inline-flex; color: var(--blue); margin-bottom: 1rem; }
.doc .mark .i { width: 2rem; height: 2rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.6rem); letter-spacing: -.015em; }
.doc h1 + p { margin-top: 1rem; font-size: 1.1rem; color: var(--quiet); }
.doc h2 { font-size: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.doc h2 + p, .doc h2 + ol { margin-top: .75rem; }
.doc p + p { margin-top: .9rem; }
.doc p, .doc li { max-width: 68ch; }
.doc ol { padding-left: 1.4rem; } .doc li + li { margin-top: .5rem; }
.doc .contact { margin-top: 1.5rem; }
.doc .contact + p { margin-top: 1.25rem; }

.foot { border-top: 1px solid var(--rule); padding-block: 2rem 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; color: var(--quiet); font-size: .95rem; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

.foot nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* One split, one set of choices. The help pages retain their shared styles above. */
.landing { width: min(67.5rem, 100% - 2.5rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.pitch h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); font-weight: 650; line-height: 1.03; max-width: 14ch; }
.pitch .lede { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--quiet); max-width: 36ch; }
.source-note { margin-top: 1rem; font-size: .9375rem; color: var(--quiet); }
.source-note a { font-weight: 500; }
.install { margin-top: 2rem; scroll-margin-block: 1rem; }
.badges { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.badges a { display: inline-flex; min-height: 3.25rem; border-radius: 10px; }
.badges img { height: 3.25rem; width: auto; max-width: 100%; }
.web-choice { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .75rem; font-weight: 500; }
.install-qr { margin: 1.5rem 0 0; display: flex; align-items: center; gap: 1rem; color: var(--quiet); font-size: .875rem; }
.install-qr img { width: 7rem; height: 7rem; flex-shrink: 0; background: white; }
.install-qr figcaption { max-width: 15ch; }
.split-example { margin: 0; padding: 1.5rem 2rem 2rem; border-radius: 18px; background: var(--paper); box-shadow: 0 8px 30px #00000008; font-variant-numeric: tabular-nums; }
.split-example figcaption { color: var(--quiet); font-size: .8rem; text-align: right; }
.dinner { padding-block: 1.25rem; border-bottom: 1px dashed var(--rule); }
.dinner h2 { font-size: 1.05rem; font-weight: 500; }
.dinner p { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.3; margin-block: .4rem; }
.dinner span, .receipt-note { color: var(--quiet); font-size: .875rem; }
.people { display: flex; justify-content: center; padding-top: 1.5rem; }
.people span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 3px solid var(--paper); margin-inline: -.2rem; font-weight: 600; color: #452511; background: #FFD99B; }
.people span:nth-child(2) { background: #FFC6B5; }.people span:nth-child(3) { background: #E5DFD6; }
.share { text-align: center; padding-block: .5rem 1.25rem; font-size: 1.7rem; font-weight: 600; }.share span { font-weight: 400; font-size: 1rem; color: var(--quiet); }
.settle { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--rule); }
.settle li { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }.settle strong { font-weight: 600; }
.receipt-note { margin-top: 1.5rem; }
.install-selected, #install:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 52rem) {
  .landing { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 32rem; padding-top: 2rem; }
  .pitch h1 { font-size: clamp(2.5rem, 9vw, 4rem); }
  .install-qr { display: none; }
}
@media (max-width: 40rem) { .top nav { order: 3; width: 100%; } }
@media (forced-colors: active) { .split-example, .people span { border: 1px solid CanvasText; } .open { border: 1px solid ButtonText; } }

.guide-open { overflow: hidden; }
.android-guide { color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; width: min(27rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.android-guide:not([open]) { display: none; }
.android-guide::backdrop { background: #0009; }
.guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-heading p { font-size: .8125rem; color: var(--quiet); font-weight: 500; }
.guide-heading form { margin: 0; }
.android-guide button { font: inherit; cursor: pointer; }
.guide-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -.5rem -.5rem -.5rem 0; color: var(--quiet); background: transparent; border: 0; border-radius: 8px; }
#android-progress-bar { display: block; width: 100%; height: 4px; margin-block: 1rem 1.25rem; border: 0; border-radius: 2px; overflow: hidden; accent-color: var(--blue); background: var(--rule); }
#android-progress-bar::-webkit-progress-bar { background: var(--rule); }
#android-progress-bar::-webkit-progress-value { background: var(--blue); }
#android-progress-bar::-moz-progress-bar { background: var(--blue); }
.android-guide h2 { font-size: 1.375rem; line-height: 1.2; }
.android-guide h2:focus { outline: none; }
.android-guide section p { margin-top: .75rem; color: var(--quiet); font-size: .9375rem; }
.guide-shot { display: block; width: fit-content; max-width: 100%; margin-top: 1.25rem; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.guide-shot img { background: white; }
.guide-button { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 44px; padding: .625rem 1.25rem; font-size: .9375rem; font-weight: 500; line-height: 1.35; border: 1px solid var(--rule); border-radius: 8px; text-align: center; text-decoration: none; }
.android-guide .guide-primary { margin-top: 1.25rem; background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.android-guide .guide-next { margin-top: .5rem; color: var(--blue); background: transparent; font-size: .9375rem; font-weight: 500; }
.guide-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: .5rem; }
.guide-footer a { font-size: .875rem; }
.guide-back { min-height: 44px; padding: .5rem .75rem; margin-left: -.75rem; color: var(--ink); border: 0; border-radius: 8px; background: transparent; }
.guide-back:disabled { color: var(--quiet); cursor: default; opacity: .6; }
.android-guide a:hover { text-decoration: underline; }
.android-guide button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.android-guide [hidden] { display: none; }
.android-fallback { display: none; padding-block: 2rem; }
.android-fallback:target { display: block; }
.guide-supported .android-fallback { display: none; }
.android-fallback a { display: inline-flex; align-items: center; min-height: 44px; }
@media (forced-colors: active) { .guide-button, #android-progress-bar { border: 1px solid ButtonText; } }