@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --oc-dark: #17342D;
  --oc-button: #173F31;
  --oc-lime: #D8EDAA;
  --oc-offwhite: #F8F7F2;
  --oc-ink: #17342D;
  --oc-ink-2: #4a5a54;
  --oc-line: #e3e1d8;
}

html, body, #root { margin: 0; min-height: 100%; }
body {
  background: var(--oc-offwhite);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--oc-ink);
}
.oc * { box-sizing: border-box; }
.oc { font-family: 'Inter', Arial, sans-serif; font-size: 17px; line-height: 1.55; color: var(--oc-ink); }

/* Sample banner */
.oc-sample {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--oc-lime); color: var(--oc-dark);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}

/* Hero */
.oc-hero {
  background: var(--oc-dark); color: var(--oc-offwhite);
  border-radius: 20px; padding: 28px 24px; margin-top: 16px;
  display: flex; gap: 20px; align-items: center;
}
.oc-hero-text { flex: 1 1 auto; min-width: 0; }
.oc-hero h1 { margin: 10px 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.oc-hero p { margin: 0; font-size: 16px; color: #cfe0d6; }
.oc-hero-img { width: 104px; height: 138px; object-fit: cover; border-radius: 14px; flex: 0 0 auto; }
.oc-hero .oc-sample { margin: 0; }

/* Cards */
.oc-card {
  background: var(--oc-offwhite); border: 1px solid var(--oc-line);
  border-radius: 20px; padding: 22px; margin-top: 16px;
}
.oc-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.oc-eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--oc-ink-2); margin: 0 0 6px; }
.oc-big { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 2px; }
.oc-muted { color: var(--oc-ink-2); }
.oc-note { font-size: 14px; color: var(--oc-ink-2); margin: 10px 0 0; }

/* Buttons */
.oc-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  background: var(--oc-button); color: var(--oc-offwhite); border: 0; border-radius: 14px;
  min-height: 56px; padding: 14px 20px; font: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
}
.oc-btn:active { transform: scale(0.99); }
.oc-btn-secondary {
  background: transparent; color: var(--oc-button); border: 2px solid var(--oc-button);
}
.oc-btn-sub { display: block; text-align: center; font-size: 14px; color: var(--oc-ink-2); margin-top: 8px; }
.oc-btn-wrap { margin-top: 16px; }

/* Status pill rows */
.oc-bill {
  padding: 16px 0; border-top: 1px solid var(--oc-line);
}
.oc-bill:first-of-type { border-top: 0; padding-top: 6px; }
.oc-bill-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.oc-bill-name { font-weight: 700; font-size: 16px; }
.oc-bill-meta { font-size: 14px; color: var(--oc-ink-2); margin-top: 2px; }
.oc-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto;
  font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.oc-pill-checked { background: var(--oc-lime); color: var(--oc-dark); }
.oc-pill-waiting { background: #fff; border: 1.5px dashed #b9b39a; color: #7a6f3d; }
.oc-shane-note {
  margin-top: 10px; background: #fff; border-left: 4px solid var(--oc-lime);
  border-radius: 10px; padding: 12px 14px; font-size: 15px;
}
.oc-shane-note b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--oc-ink-2); margin-bottom: 4px; }

/* Facts list */
.oc-facts { margin: 8px 0 0; padding: 0; list-style: none; }
.oc-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--oc-line); font-size: 16px; }
.oc-facts li:first-child { border-top: 0; }
.oc-facts li span:first-child { color: var(--oc-ink-2); }
.oc-facts li span:last-child { font-weight: 700; text-align: right; }

/* Do I need to do anything */
.oc-todo-box {
  margin-top: 16px; background: var(--oc-dark); color: var(--oc-offwhite);
  border-radius: 20px; padding: 22px;
}
.oc-todo-box h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--oc-lime); }
.oc-todo-box p { margin: 0; font-size: 17px; }

/* Tips */
.oc-tip { padding: 14px 0; border-top: 1px solid var(--oc-line); font-size: 16px; display: flex; gap: 12px; }
.oc-tip:first-of-type { border-top: 0; }
.oc-tip::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--oc-lime); border: 2px solid var(--oc-dark); margin-top: 7px; }

/* Flag flow */
.oc-flag { margin-top: 12px; }
.oc-flag textarea {
  width: 100%; min-height: 80px; font: inherit; font-size: 16px; padding: 12px;
  border: 1.5px solid var(--oc-line); border-radius: 12px; background: #fff; color: var(--oc-ink);
  margin-top: 10px; resize: vertical;
}
.oc-flag-done { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--oc-button); }
.oc-linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--oc-button); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Upload preview */
.oc-upload-preview { margin-top: 16px; background: #fff; border: 1px solid var(--oc-line); border-radius: 16px; padding: 16px; }
.oc-upload-preview img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; background: var(--oc-offwhite); }
.oc-upload-actions { display: flex; gap: 10px; margin-top: 14px; }
.oc-upload-actions .oc-btn { min-height: 52px; font-size: 16px; flex: 1; }

/* Bottom tab bar */
.oc-tabbar {
  background: var(--oc-dark);
  display: flex; padding: 6px;
  border-radius: 16px; margin-top: 12px;
}
.oc-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #9db8ab; text-decoration: none; font-size: 12.5px; font-weight: 600;
  padding: 8px 4px; min-height: 52px; border-radius: 12px;
}
.oc-tabbar a svg { width: 24px; height: 24px; }
.oc-tabbar a[aria-current="page"] { color: var(--oc-dark); background: var(--oc-lime); }

.oc-page { padding-bottom: 8px; }
.oc-section { margin-top: 28px; }
.oc-section > h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.oc-hr { border: 0; border-top: 1px solid var(--oc-line); margin: 22px 0 0; }
.oc-fresh { font-size: 14px; color: var(--oc-ink-2); }
.oc-split { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .oc-split { grid-template-columns: 1fr 1fr; }
  .oc-hero h1 { font-size: 34px; }
}

a.oc-btn, a.oc-btn:visited, a.oc-btn:active { color: var(--oc-offwhite); }
a.oc-btn-secondary, a.oc-btn-secondary:visited { color: var(--oc-button); }

@media (max-width: 400px) {
  .oc-hero { flex-direction: column; align-items: flex-start; }
  .oc-hero-img { width: 120px; height: 160px; }
}

.oc-banner { margin-top: 12px; }
.oc-wait { font-size: 15px; font-weight: 600; color: #7a6f3d; margin-top: 6px; }
.oc-flagwrap { margin-top: 12px; }
.oc-btn-small { min-height: 48px; font-size: 16px; }
.oc-refer { background: var(--oc-lime); border-color: var(--oc-lime); }
.oc-refer .oc-btn-secondary { background: var(--oc-offwhite); }
.oc-checklist { margin: 12px 0 0; padding: 0; list-style: none; }
.oc-checklist li { padding: 8px 0 8px 30px; position: relative; font-size: 16px; }
.oc-checklist li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 12px; height: 7px; border-left: 3px solid var(--oc-button); border-bottom: 3px solid var(--oc-button); transform: rotate(-45deg); }
.oc-choice { display: flex; flex-direction: column; gap: 10px; }
.oc-chip { font: inherit; font-size: 18px; font-weight: 700; min-height: 56px; border-radius: 14px; border: 2px solid var(--oc-button); background: transparent; color: var(--oc-button); cursor: pointer; }
.oc-chip.is-on { background: var(--oc-button); color: var(--oc-offwhite); }
.oc-usage-head { margin: 0; font-size: 24px; font-weight: 800; }
.oc-bar-row { display: grid; grid-template-columns: 76px 1fr 56px; gap: 10px; align-items: center; margin-top: 10px; font-size: 15px; }
.oc-bar-track { background: #fff; border: 1px solid var(--oc-line); border-radius: 8px; height: 28px; overflow: hidden; }
.oc-bar { height: 100%; background: #b9c7bf; }
.oc-bar.is-now { background: var(--oc-button); }
.oc-bar-val { font-weight: 700; text-align: right; }
@media (max-width: 420px) {
  .oc-bar-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .oc-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .oc-bar-val { grid-column: 2; grid-row: 1; }
  .oc-bar-label { grid-column: 1; grid-row: 1; font-weight: 600; }
}

/* ---- v1 working model additions ---- */

.oc-modelbar {
  margin-top: 12px;
  background: var(--oc-lime); color: var(--oc-dark);
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  padding: 9px 14px; border-radius: 999px; text-align: center;
}

.oc-switch {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  background: #fff; border: 1.5px dashed #b9b39a; border-radius: 14px; padding: 8px 14px;
  font-size: 14px; color: var(--oc-ink-2);
}
.oc-switch-btn {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--oc-button);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
}

.oc-auth-head { text-align: center; margin: 26px 0 4px; }
.oc-auth-brand { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--oc-dark); }
.oc-auth-sub { margin: 2px 0 0; font-size: 15px; color: var(--oc-ink-2); }

.oc-label { display: block; font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.oc-input {
  width: 100%; font: inherit; font-size: 17px; color: var(--oc-ink);
  background: #fff; border: 1.5px solid var(--oc-line); border-radius: 12px;
  padding: 13px 14px; min-height: 52px;
}
.oc-input:focus { outline: 3px solid var(--oc-lime); border-color: var(--oc-button); }
.oc-notebox { min-height: 96px; resize: vertical; }
.oc-error { color: #a33; font-size: 15px; font-weight: 600; margin: 10px 0 0; }

.oc-honest { background: #fff; border-style: dashed; }
.oc-honest h2 { font-size: 17px; }

.oc-adminbar {
  margin-top: 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--oc-dark); color: var(--oc-offwhite); border-radius: 14px; padding: 10px 16px;
}
.oc-adminbar-title { font-weight: 800; font-size: 16px; margin-right: auto; }
.oc-adminbar a { color: #9db8ab; text-decoration: none; font-weight: 700; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.oc-adminbar a[aria-current="page"] { color: var(--oc-lime); }
.oc-adminbar .oc-linkish { color: #9db8ab; min-height: 44px; }

.oc-bill-saving { margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--oc-button); }
.oc-over48 { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: #a33; }
.oc-flagged { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #7a6f3d; background: #fff; border: 1px dashed #b9b39a; border-radius: 10px; padding: 8px 12px; }
.oc-saving-live { margin: 14px 0 0; font-size: 17px; color: var(--oc-ink); }
.oc-saving-live b { color: var(--oc-button); font-size: 19px; }

.oc-setuplink {
  margin-top: 12px; background: #fff; border: 1.5px solid var(--oc-line); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; font-weight: 600; word-break: break-all; color: var(--oc-button);
}
.oc-linkcard { border-color: var(--oc-lime); background: var(--oc-lime); }
.oc-linkcard .oc-btn-secondary { background: var(--oc-offwhite); }

/* sample bill document */
.oc-billdoc { position: relative; background: #fff; border: 1px solid var(--oc-line); border-radius: 10px; padding: 18px 16px 14px; font-size: 15px; }
.oc-billdoc-mark {
  position: absolute; top: 10px; right: -6px; transform: rotate(4deg);
  background: #a33; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 6px; text-transform: uppercase;
}
.oc-billdoc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--oc-dark); padding-bottom: 8px; margin-bottom: 8px; }
.oc-billdoc-head b { font-size: 17px; }
.oc-billdoc-head span { color: var(--oc-ink-2); font-size: 13px; }
.oc-billdoc-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--oc-line); }
.oc-billdoc-row span { color: var(--oc-ink-2); }
.oc-billdoc-foot { margin: 10px 0 0; font-size: 12.5px; color: var(--oc-ink-2); }

/* guided tour */
.oc-tour-wrap { position: fixed; inset: 0; z-index: 90; }
.oc-tour-hole {
  position: fixed; border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(12, 25, 20, 0.62);
  border: 3px solid var(--oc-lime);
  pointer-events: none;
}
.oc-tour-card {
  position: fixed; z-index: 95;
  background: var(--oc-offwhite); border: 1px solid var(--oc-line); border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 12px 40px rgba(12, 25, 20, 0.35);
}
.oc-tour-count { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oc-ink-2); }
.oc-tour-title { margin: 4px 0 4px; font-size: 19px; font-weight: 800; }
.oc-tour-text { margin: 0; font-size: 15.5px; color: var(--oc-ink); line-height: 1.5; }
.oc-tour-btns { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.oc-btn-tour { min-height: 48px; font-size: 16px; padding: 10px 18px; width: auto; flex: 0 0 auto; }
.oc-tour-skip {
  background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--oc-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px;
}



body{margin:0;background:var(--oc-offwhite);padding-bottom:96px}
#preview-banner{background:var(--oc-lime);color:var(--oc-dark);text-align:center;padding:8px;font-size:13px;font-weight:700;letter-spacing:.03em}
main{max-width:640px;margin:0 auto;padding:4px 16px 24px}
.oc-tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:616px;margin:0 auto;z-index:50;box-shadow:0 6px 24px rgba(12,25,20,.3)}
.oc-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#9db8ab;background:none;border:0;font:inherit;font-size:12.5px;font-weight:600;padding:8px 4px;min-height:52px;border-radius:12px;cursor:pointer;margin:0}
.oc-tabbar button svg{width:24px;height:24px}
.oc-tabbar button[aria-current="page"]{color:var(--oc-dark);background:var(--oc-lime)}
.oc-adminbar{position:static}
.oc-adminbar button.nav{background:none;border:0;color:#9db8ab;font:inherit;font-weight:700;font-size:15px;min-height:44px;cursor:pointer;padding:0 4px;margin:0}
.oc-adminbar button.nav[aria-current="page"]{color:var(--oc-lime)}
.oc-err{color:#a33;font-size:15px;font-weight:600;margin:10px 0 0}.oc-ok{color:var(--oc-button);font-size:15px;font-weight:600;margin:10px 0 0}
.oc-btn{margin:10px 0 0}.oc-btn-row{display:flex;gap:10px}.oc-btn-row .oc-btn{flex:1}
select.oc-input,textarea.oc-input{width:100%}
.oc-btn-sub.oc-center{text-align:center}
.oc-tour-wrap{position:fixed;inset:0}

main input:not([type=file]),main select,main textarea{width:100%;font:inherit;font-size:17px;color:var(--oc-ink);background:#fff;border:1.5px solid var(--oc-line);border-radius:12px;padding:13px 14px;min-height:52px;margin-top:4px}
main input:focus,main select:focus,main textarea:focus{outline:3px solid var(--oc-lime);border-color:var(--oc-button)}
main label{display:block;font-size:15px;font-weight:700;margin:14px 0 2px}
.oc-card .row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.oc-card.due{border-color:#b9b39a;border-style:dashed}
.oc-tour-card{max-width:560px;margin-left:auto;margin-right:auto}
.oc-adminbar{gap:6px 12px}
.oc-adminbar-title{flex:1 0 100%}
*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
main{min-height:70vh;min-height:70svh}
html.oc-tour-on,html.oc-tour-on body{overflow:hidden;touch-action:none}
.oc-tour-wrap{position:fixed;inset:0;z-index:90;touch-action:none}
.oc-tour-dim{position:fixed;inset:0;background:rgba(12,25,20,.62)}
.oc-tour-hole{position:fixed;border-radius:18px;border:3px solid var(--oc-lime);box-shadow:none;pointer-events:none}
.oc-tour-card{position:fixed;z-index:95;left:16px;right:16px;padding:14px 16px;max-height:none;overflow:visible}
.oc-tour-title{font-size:18px;margin:2px 0 4px}.oc-tour-text{font-size:15px;line-height:1.4}.oc-tour-count{font-size:12px}
.oc-tour-btns{margin-top:10px}.oc-btn-tour{min-height:44px;padding:8px 16px;margin:0}.oc-tour-skip{min-height:44px}
.oc-tour-card{transition:none}
.oc-tip-row{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--oc-line);font-size:16px}.oc-tip-row:first-of-type{border-top:0;padding-top:4px}
.oc-card a{color:var(--oc-button);font-weight:600}
.oc-usage-head{font-size:20px}