:root{
  --green-900:#0B3D2E;
  --green-800:#10472F;
  --green-700:#15573F;
  --green-050:#E9F1EC;
  --amber:#F2A93B;
  --amber-soft:#FBE8C6;
  --cream:#FAF7F0;
  --ink:#1B1B18;
  --muted:#6C6C63;
  --line:#E4E0D6;
  --white:#fff;
  --danger:#B42318;
  --radius:16px;
  --shadow:0 1px 2px rgba(20,26,20,.05), 0 8px 24px rgba(20,26,20,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
input,select,button{font-size:16px}
em{font-style:normal}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;
  background:rgba(250,247,240,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__mark{width:34px;height:34px;flex:none}
.brand__text{display:flex;align-items:baseline;gap:6px;line-height:1}
.brand__text strong{font-size:17px;letter-spacing:-.2px}
.brand__text em{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--green-700);
  background:var(--amber-soft);padding:2px 6px;border-radius:6px}
.net{font-size:10px;color:#2E7D4F;transition:color .2s}
.net.is-off{color:var(--danger)}

/* ---------- banner ---------- */
.banner{
  background:#FDF0EE;color:#7A1D14;border-bottom:1px solid #F3C9C2;
  padding:11px 16px;font-size:13px;line-height:1.4;text-align:center;
}

/* ---------- layout ---------- */
main{max-width:560px;margin:0 auto;padding:16px 16px 24px}
.page{font-size:22px;letter-spacing:-.3px;margin:4px 0 16px}
.page-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.page-row .page{margin-bottom:12px}
.muted{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:13px;margin-top:-6px}
.hint--center{text-align:center;margin-top:10px}
.rule{border:0;border-top:1px solid var(--line);margin:18px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.foot{text-align:center;color:var(--muted);font-size:12px;margin:28px 0 8px}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow);
}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card__head h2{font-size:15px;letter-spacing:-.1px}
.link{background:none;border:0;color:var(--green-700);font-size:13px;font-weight:600;padding:4px 2px;cursor:pointer}
.link:active{opacity:.6}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--green-700),var(--green-900));
  color:#fff;border-radius:20px;padding:20px;margin-bottom:14px;
  box-shadow:0 10px 30px rgba(11,61,46,.22);
}
.hero__label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.72}
.hero__balance{font-size:40px;font-weight:750;letter-spacing:-1.4px;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.hero__sub{font-size:13px;opacity:.72}
.split{display:flex;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:14px}
.split b{display:block;font-size:16px;font-variant-numeric:tabular-nums;margin-top:2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot--in{background:#7BD3A2}
.dot--out{background:var(--amber)}

/* ---------- target ---------- */
.card--target{border-color:#E8D9B6;background:linear-gradient(#FFFDF7,#fff)}
.target__line{font-size:17px;line-height:1.4;letter-spacing:-.2px}
.target__line b{color:var(--green-800)}
.progress{height:8px;border-radius:99px;background:var(--green-050);overflow:hidden;margin:12px 0 8px}
.progress span{display:block;height:100%;background:var(--amber);border-radius:99px;transition:width .4s}
.progress.is-done span{background:#2E7D4F}
.target__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

/* ---------- cash check ---------- */
.checkline{display:flex;gap:8px;margin-top:10px}
.checkline input{flex:1;min-width:0}
.verdict{margin-top:10px;font-size:14px;font-weight:600}
.verdict.is-ok{color:#2E7D4F}
.verdict.is-bad{color:var(--danger)}

/* ---------- bars ---------- */
.bars{display:flex;flex-direction:column;gap:10px}
.bar__row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:14px}
.bar__track{grid-column:1/-1;height:6px;border-radius:99px;background:var(--green-050);overflow:hidden}
.bar__fill{height:100%;background:var(--green-700);border-radius:99px}
.bar__row:nth-child(2) .bar__fill{background:#2F7A55}
.bar__row:nth-child(3) .bar__fill{background:#5C9B78}
.bar__row b{font-variant-numeric:tabular-nums}

/* ---------- lists ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);
}
.list li:last-child{border-bottom:0}
.list .li__main{flex:1;min-width:0}
.list .li__title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .li__sub{font-size:12px;color:var(--muted);margin-top:2px}
.list .li__amt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.list .li__amt.is-in{color:#2E7D4F}
.empty{padding:18px 0;text-align:center;color:var(--muted);font-size:14px}

/* ---------- quick tiles ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.quick button{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);
}
.quick button:active{transform:scale(.97)}
.quick .q__ico{font-size:19px;line-height:1}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form--tight{gap:10px;margin-top:12px}
.field{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}
.field > span,.field legend{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field small{font-weight:400;text-transform:none;letter-spacing:0}
input,select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);color:var(--ink);min-height:48px;appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C6C63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
input:focus,select:focus{outline:2px solid var(--green-700);outline-offset:1px;border-color:var(--green-700)}
input::placeholder{color:#A8A69E}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inline{display:flex;gap:8px;margin-top:8px}
.inline input{flex:1;min-width:0}

.seg{display:flex;background:var(--green-050);border-radius:12px;padding:4px;gap:4px}
.seg__btn{flex:1;border:0;background:none;padding:10px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer}
.seg__btn.is-on{background:var(--white);box-shadow:var(--shadow)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips--wrap{margin-top:8px}
.chip{
  border:1px solid var(--line);background:var(--white);border-radius:99px;
  padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;
}
.chip.is-on{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.chip--x{padding-right:10px}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:12px 16px;font-weight:650;cursor:pointer;min-height:46px;
}
.btn:active{transform:scale(.99)}
.btn--primary{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.btn--ghost{background:var(--green-050);border-color:transparent;color:var(--green-800)}
.btn--wide{width:100%}
.btn--sm{padding:8px 12px;min-height:38px;font-size:14px}
.btn--danger{color:var(--danger);background:#FDF0EE}

/* ---------- book ---------- */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.filters select{min-height:42px;padding:8px 30px 8px 10px;font-size:14px;border-radius:10px}
.filters select:last-child{grid-column:1/-1}
.book{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.day{background:var(--cream);padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);border-bottom:1px solid var(--line);border-top:1px solid var(--line);text-transform:uppercase}
.book .day:first-child{border-top:0}
.entry{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.entry:active{background:var(--cream)}
.entry__main{flex:1;min-width:0}
.entry__title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry__sub{font-size:12px;color:var(--muted);margin-top:2px}
.entry__amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry__amt.is-in{color:#2E7D4F}
.book__foot{display:flex;justify-content:space-between;padding:12px 4px;font-size:13px;color:var(--muted)}

/* ---------- estimate ---------- */
.estimate{margin-top:12px}
.estimate:empty{display:none}
.est{background:var(--green-050);border-radius:12px;padding:14px}
.est__row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.est__row b{font-variant-numeric:tabular-nums}
.est__row--big{border-top:1px solid #CFE0D5;margin-top:8px;padding-top:10px;font-size:16px}
.est__row--big b{color:var(--green-800)}
.est__note{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- tabs ---------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;
}
.tab{
  background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:10px;
}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.is-on{color:var(--green-900)}
.tab.is-on svg{fill:var(--amber-soft);stroke:var(--green-900)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--green-900);color:#fff;padding:11px 18px;border-radius:99px;
  font-size:14px;font-weight:600;max-width:88vw;text-align:center;
  transition:opacity .18s,transform .18s;z-index:40;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- position ---------- */
.card--position{background:linear-gradient(#fff,#FBF8F1)}
.position__big{font-size:34px;font-weight:750;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;margin:2px 0 6px}
.position__words{font-size:14px;color:#3D4A41;line-height:1.45}
.pos{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.pos li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}
.pos li:last-child{border-bottom:0;padding-bottom:0}
.pos b{font-variant-numeric:tabular-nums}
.pos b.neg{color:var(--danger)}
.pos b.small{font-size:11px;font-weight:600;color:var(--muted);max-width:60%;text-align:right;word-break:break-all}

/* ---------- price list ---------- */
.prices{list-style:none;margin:8px 0 0;padding:0}
.price{display:grid;grid-template-columns:1fr 104px;gap:4px 10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.price:last-child{border-bottom:0}
.price label{display:contents}
.price span{font-size:14px}
.price input{min-height:42px;padding:8px 10px;text-align:right;font-variant-numeric:tabular-nums}
.price__src{grid-column:1/-1;font-size:11px;color:var(--muted);font-style:normal}

/* ---------- glossary ---------- */
.gloss{margin:0;display:flex;flex-direction:column;gap:10px}
.gloss div{border-bottom:1px solid var(--line);padding-bottom:9px}
.gloss div:last-child{border-bottom:0;padding-bottom:0}
.gloss dt{font-size:14px;font-weight:700}
.gloss dd{margin:2px 0 0;font-size:14px;color:var(--muted);line-height:1.45}

/* ---------- welcome ---------- */
.welcome{
  position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;inset:0;z-index:70;
  /* the same ground as every other page: cream, ruled, lit at the corners */
  background-color:#F4EFE0;
  background-image:
    repeating-linear-gradient(to bottom, rgba(27,27,24,.028) 0 1px, transparent 1px 30px),
    radial-gradient(70% 40% at 4% -6%, rgba(242,169,59,.30), rgba(242,169,59,0) 66%),
    radial-gradient(64% 38% at 102% 2%, rgba(62,142,138,.26), rgba(62,142,138,0) 66%),
    radial-gradient(60% 40% at 98% 100%, rgba(122,92,142,.18), rgba(122,92,142,0) 68%),
    url("img/mark.svg");
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:0 0, 0 0, 0 0, 0 0, 88% 12%;
  background-size:auto, auto, auto, auto, 240px auto;
  display:flex;align-items:flex-start;justify-content:center;padding:14px;
  overflow:auto;-webkit-overflow-scrolling:touch;
}
.welcome__card{
  background:var(--paper-solid,#FDFBF5);
  border:1px solid #E7E1D2;border-radius:18px;
  padding:0 0 16px;max-width:400px;width:100%;
  margin:auto;text-align:center;
  box-shadow:0 18px 44px rgba(24,38,29,.18), 0 2px 6px rgba(24,38,29,.06);
  max-height:calc(100vh - 24px);overflow:auto;
}
.welcome__mark{width:58px;height:58px;margin-bottom:10px}
.welcome__card h2{font-size:20px;letter-spacing:-.4px}
.welcome__text{font-size:14px;color:var(--muted);margin:8px 0 18px;line-height:1.5}
.welcome .field{text-align:left;margin-bottom:6px}
.welcome .btn{margin-top:12px}
.welcome .link{display:block;margin:12px auto 0;font-size:13px}
.tiny{font-size:12px;color:var(--muted);line-height:1.45;margin-top:8px}
.tiny--center{text-align:center;margin-top:14px}

/* ---------- install ---------- */
.install #installLater{display:block;margin:10px auto 0}

/* ---------- entry sheet ---------- */
.sheetwrap{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(16,22,18,.46);padding:16px;animation:fade .16s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  background:var(--white);border-radius:20px;padding:20px;width:100%;max-width:520px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);animation:rise .2s ease-out;
}
@keyframes rise{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
.sheet__amt{font-size:32px;font-weight:750;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.sheet__amt.is-in{color:#2E7D4F}
.sheet__title{font-size:17px;margin:2px 0 14px}
.sheet__meta{margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.sheet__meta div{display:flex;justify-content:space-between;gap:14px;font-size:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.sheet__meta dt{color:var(--muted)}
.sheet__meta dd{margin:0;text-align:right;font-weight:600}
.sheet__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- print ---------- */
@media print{
  .top,.tabs,.toast,.quick,.filters,.btn,.link,.welcome,.install{display:none !important}
  body{background:#fff;padding:0}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .hero{background:#fff;color:#000;box-shadow:none;border:1px solid #ccc}
  .hero__balance{color:#000}
  .split{border-color:#ccc}
}

@media (min-width:560px){
  .quick{grid-template-columns:repeat(5,1fr)}
}

/* ---------- reviews ---------- */
textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);color:var(--ink);font:inherit;resize:vertical;min-height:86px;
}
textarea:focus{outline:2px solid var(--green-700);outline-offset:1px;border-color:var(--green-700)}
textarea::placeholder{color:#A8A69E}

/* ---------- target verdict ---------- */
.tstatus{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:750;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:10px}
.tstatus__dot{width:8px;height:8px;border-radius:50%}
.tstatus--good{background:#E4F3EA;color:#1B6B3F}
.tstatus--good .tstatus__dot{background:#2E9E63}
.tstatus--warn{background:#FCF1DA;color:#8A5A00}
.tstatus--warn .tstatus__dot{background:#D39A1E}
.tstatus--bad{background:#FBEAE7;color:#96301F}
.tstatus--bad .tstatus__dot{background:#C4442E}

.progress span{background:#C2C7BF}
.progress.is-good span{background:#2E9E63}
.progress.is-warn span{background:#E0A92A}
.progress.is-bad span{background:#C4442E}

.tfigs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;padding:0}
.tfigs li{background:var(--cream);border-radius:10px;padding:9px 10px;min-width:0}
.tfigs span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tfigs b{display:block;font-size:15px;margin-top:3px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfigs b.neg{color:var(--danger)}

.card--target.is-good{border-color:#BFE3CD}
.card--target.is-warn{border-color:#F0DCB4}
.card--target.is-bad{border-color:#F3C9C2}

/* ---------- private account ---------- */
.passcode{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;font-weight:700;letter-spacing:2px;
  background:var(--green-050);border:1px dashed #A9C6B5;border-radius:12px;
  padding:14px;text-align:center;margin:6px 0 10px;user-select:all;
}
.pay{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.pay li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.pay li:last-child{border-bottom:0}
.pay b{font-variant-numeric:tabular-nums}
.price-note{font-size:13px;color:var(--muted);margin-top:6px}

/* ---------- welcome list ---------- */
.welcome__list{text-align:left;margin:0 0 18px;padding:0 0 0 18px;color:#3D4A41;font-size:13.5px;line-height:1.55}
.welcome__list li{margin-bottom:5px}
.tfigs{grid-template-columns:repeat(2,1fr)}

/* ---------- finishing ---------- */
.trust{font-size:11.5px;letter-spacing:.04em;opacity:.72;margin-top:10px}
:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.ver{font-size:10px;color:var(--muted);letter-spacing:.04em;margin-left:2px}
@media print{.ver{display:none}}

@media (max-height:640px){
  .welcome__mark{width:44px;height:44px;margin-bottom:6px}
  .welcome__card h2{font-size:18px}
  .welcome__text{font-size:13px;margin:6px 0 12px}
  .welcome__list{font-size:12.5px;margin-bottom:12px}
}

.banner--soft{background:#FFFDF7;color:var(--green-800);border-bottom-color:#EFE4C8;font-size:13px}
.banner--soft .link{font-size:13px;font-weight:700}

/* ---------- the sum ---------- */
.plrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}
.plrow b{font-variant-numeric:tabular-nums}
.plrow b.neg{color:var(--danger)}
.plrow--sum{border-top:2px solid var(--ink);border-bottom:0;margin-top:2px;font-size:16px;font-weight:700}

/* Before Start is pressed, the book itself is not on the page at all. */
.welcome:not([hidden]) ~ .top,
.welcome:not([hidden]) ~ main,
.welcome:not([hidden]) ~ nav.tabs,
.welcome:not([hidden]) ~ .banner{display:none !important}
.welcome__card{box-shadow:none}

/* ---------- brand screen ---------- */
.splash{
  position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;inset:0;z-index:80;
  background:#0B3D2E;display:flex;align-items:center;justify-content:center;padding:24px;
  text-align:center;animation:splashOut .55s ease 7s forwards;
}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splash{background:#0B3D2E}
.splash__mark{width:112px;height:112px;margin-bottom:22px}
.splash__name{color:#fff;font-size:31px;letter-spacing:-.5px;margin:0}
.splash__name em{color:#E4C55B;font-style:italic}
.splash__tag{color:#D9B85A;font-size:15px;letter-spacing:.01em;margin:11px 0 0}
@media (prefers-reduced-motion: reduce){.splash{animation:none}}

/* ---------- three things to begin ---------- */
.steps{margin:0;padding-left:20px;color:#3D4A41;font-size:14px;line-height:1.55}
.steps li{margin-bottom:7px}
.steps b{color:var(--ink)}

/* ---------- the printed page ---------- */
#report{display:none}
.rep{color:#111;font-size:11pt;line-height:1.4}
.rep__head{display:flex;align-items:center;gap:14px;border-bottom:3px solid #0B3D2B;padding-bottom:10px;margin-bottom:14px}
.rep__head h1{font-size:19pt;margin:0;letter-spacing:-.3px}
.rep__head p{margin:2px 0 0;font-size:9pt;text-transform:uppercase;letter-spacing:.14em;color:#555}
.rep__date{margin-left:auto;font-size:10pt;color:#333}
.rep__who{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:16px}
.rep__who div{display:flex;justify-content:space-between;border-bottom:1px dotted #bbb;padding-bottom:4px;font-size:10pt}
.rep__who span{color:#666}
.rep__block{margin-bottom:16px;break-inside:avoid}
.rep__block h2{font-size:10pt;text-transform:uppercase;letter-spacing:.12em;color:#0B3D2B;margin:0 0 6px}
.rep__block table{width:100%;border-collapse:collapse}
.rep__block td,.rep__block th{padding:5px 4px;border-bottom:1px solid #e2e2e2;font-size:10.5pt;text-align:left}
.rep__block th{font-size:8.5pt;text-transform:uppercase;letter-spacing:.08em;color:#666}
.rep .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep tr.sum td{border-top:2px solid #111;border-bottom:0;font-weight:700;font-size:11.5pt}
.rep__foot{margin-top:18px;border-top:1px solid #bbb;padding-top:8px;font-size:8.5pt;color:#666}

@media print{
  body > *:not(#report){display:none !important}
  body > #report{display:block !important}
  body{background:#fff;padding:0}
  .rep{font-size:10.5pt}
  @page{margin:14mm}
}

/* ---------- plain-word explanations on the first page ---------- */
.muted--tight{margin:-4px 0 10px}
.means{margin:2px 0 14px}
.means dt{font-weight:700;color:var(--ink);font-size:14px;margin-top:9px}
.means dt:first-child{margin-top:0}
.means dd{margin:2px 0 0;color:#3D4A41;font-size:14px;line-height:1.5}
.steps__head{font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 6px}

/* ---------- what if I change something ---------- */
.est__sub{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--green-800);
  margin:16px 0 8px;font-weight:700}
.levers{list-style:none;margin:0;padding:0}
.levers li{border-top:1px solid #E3EAE4;padding:9px 0;font-size:14px;color:#3D4A41}
.levers li:first-child{border-top:0}
.levers span{display:inline-block;min-width:132px;color:var(--muted)}
.levers b{color:var(--ink);font-variant-numeric:tabular-nums}
.levers em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;padding-left:132px}
.levers .est__ok b{color:var(--green-800)}
@media (max-width:420px){.levers span{display:block;min-width:0}.levers em{padding-left:0}}
.welcome__free{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 12px;line-height:1.45}

/* ---------- who built this ---------- */
.credit{display:flex;gap:14px;align-items:flex-start}
.credit img{border-radius:16px;flex:none;box-shadow:0 2px 10px rgba(11,61,46,.12)}
.credit__name{margin:0 0 4px;font-weight:700;font-size:15px;color:var(--ink)}
.credit__line{margin:0 0 4px;font-size:13px;color:#3D4A41;line-height:1.5}
.credit__line a{color:var(--green-800);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(11,61,46,.25)}
.credit__dot{color:var(--muted);margin:0 4px}
@media (max-width:380px){.credit{flex-direction:column;align-items:flex-start}}

/* ---------- add to home screen ---------- */
.install__art{margin:12px 0 10px;text-align:center}
.install__art svg{width:200px;max-width:100%;height:auto;display:block;margin:0 auto}
.install__art figcaption{font-size:12px;color:var(--muted);line-height:1.45;margin:6px auto 0;max-width:330px}
.install__steps{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.55;color:#3D4A41}
.install__steps li{margin-bottom:4px}

/* ---------- the first page should make you want to write something ---------- */
.hero{position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-50px;bottom:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,59,.30),rgba(242,169,59,0) 70%);pointer-events:none}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hero__badge{margin:2px 0 0;background:rgba(242,169,59,.16);border:1px solid rgba(247,198,107,.45);
  color:#F7C66B;font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 9px;border-radius:99px;white-space:nowrap}
.hero__say{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:#F1F7F2;
  background:rgba(255,255,255,.08);border-left:3px solid var(--amber);padding:10px 12px;border-radius:0 10px 10px 0}
.flow{display:flex;height:8px;border-radius:99px;overflow:hidden;margin-top:14px;background:rgba(255,255,255,.12)}
.flow span{display:block;height:100%}
#flowIn{background:#7BD3A2}
#flowOut{background:var(--amber)}

.btn--cta{margin:-2px 0 14px;font-size:16px;padding:15px 18px;box-shadow:0 8px 20px rgba(11,61,46,.18)}
.btn--cta__plus{display:inline-block;font-size:19px;font-weight:700;margin-right:8px;line-height:1;vertical-align:-1px}

.nudge{display:flex;gap:10px;align-items:center;justify-content:space-between;
  background:#FFF8E8;border:1px solid #EBD8AE;border-radius:14px;padding:11px 13px;margin:0 0 14px;font-size:13.5px;color:#5B4A22}
.nudge p{margin:0;line-height:1.45;flex:1}

.row--two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- the book, at a glance ---------- */
.book-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.book-sum div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.book-sum span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.book-sum b{display:block;font-size:16px;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:-.3px}
.book-sum .is-in{color:#2E7D4F}
.book-sum .is-ok{color:var(--green-800)}
.book-sum .neg{color:var(--danger)}
.page__sub{margin:-6px 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ---------- where a number came from ---------- */
.est__src{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.est__src b{color:var(--green-800)}
.link--inline{display:inline;padding:0;border:0;background:none;color:var(--green-800);
  font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.est__warn{background:#FFF7E6;border:1px solid #E9D3A2;border-radius:12px;padding:10px 12px;
  font-size:12.5px;line-height:1.55;color:#5B4A22;margin:12px 0 0}
.est__warn b{color:#3E3216}

/* ---------- My plan: numbered steps, so the page reads in order ---------- */
.step-head{display:flex;gap:10px;align-items:flex-start;margin:22px 2px 9px}
.step-head:first-of-type{margin-top:16px}
.step-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-800);
  color:#F7F3E8;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;
  font-variant-numeric:tabular-nums}
.step-head h2{margin:0;font-size:16.5px;letter-spacing:-.2px;color:var(--ink)}
.step-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.plan__verdict{margin-top:16px;border-radius:14px;padding:14px;background:#FBFCFA;border:1px solid var(--line)}
.plan__verdict--good{background:#F1F8F2;border-color:#BEDCC6}
.plan__verdict--warn{background:#FFF8EA;border-color:#EBD8AE}
.plan__verdict--bad{background:#FDF2F0;border-color:#EBBDB4}
.plan__verdict .tstatus{margin-bottom:8px}
.plan__verdict .tiny{margin-bottom:0}
.plan__none{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55;
  background:#F7F5EE;border-radius:12px;padding:10px 12px}
.plan__foot{margin:22px 4px 8px;font-size:12px;color:var(--muted);line-height:1.6;text-align:center}

/* ---------- a preview address is not the app ---------- */
.banner--address{background:#FFF4E0;border:1px solid #E4C48A;color:#5B4A22;line-height:1.5}
.banner--address a{color:#0B3D2E;font-weight:700}

/* ---------- the date, said plainly ---------- */
.hero__today{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:none;
  color:#F7C66B;font-weight:700;opacity:.95}

/* The language chooser — the first thing a reader meets, so it has to look
   like a row of choices, not like small print. Each name is written in its
   own language, with the English name underneath for anyone unsure. */
.langpick{margin:0 0 18px;padding:12px 12px 10px;background:#F7F3E8;border:1px solid #E4DCC8;border-radius:14px}
.langpick__label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#6B5B3E;margin:0 0 8px}
.langpick__row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.langpick__note{font-size:11.5px;color:#6B7280;margin:8px 0 0;line-height:1.4}
.langchip{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border:1px solid #D8CFB8;border-radius:10px;background:#fff;text-align:left;cursor:pointer;min-height:44px}
.langchip b{font-size:13.5px;color:#0B3D2E;font-weight:700;line-height:1.2}
.langchip span{font-size:10.5px;color:#6B7280;line-height:1.2}
.langchip.is-on{border-color:#0B3D2E;background:#0B3D2E;box-shadow:0 2px 0 rgba(11,61,46,.12)}
.langchip.is-on b,.langchip.is-on span{color:#F7F3E8}
.langchip:active{transform:translateY(1px)}
@media (max-width:519px){.langchip span{display:none}}
@media (max-width:430px){.langchip{padding:8px 6px}.langchip b{font-size:12px}}
@media (min-width:520px){.langpick__row{grid-template-columns:repeat(4,1fr);gap:8px}}

/* the season account: one price, one season */
.season{display:flex;flex-direction:column;gap:2px;margin:12px 0;padding:12px 14px;background:#0B3D2E;border-radius:14px}
.season b{color:#F7F3E8;font-size:19px;letter-spacing:-.01em}
.season span{color:#CBD9CE;font-size:12px;line-height:1.4}
.benefits{margin:0 0 12px;padding:0;list-style:none}
.benefits li{position:relative;padding:0 0 8px 22px;font-size:13.5px;line-height:1.5;color:#374151}
.benefits li:before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:#D9A75E}
.signin{margin-top:16px;padding-top:12px;border-top:1px solid #E4DCC8}
.signin input{min-height:44px}

/* ---------- the region, on the front page ---------- */
.rchip{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:10px 12px;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--rg,#C9C2AE);
  border-radius:12px;text-align:left;font:inherit;cursor:pointer;
  box-shadow:0 10px 22px -22px rgba(11,50,39,.7);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease
}
.rchip:hover{transform:translateY(-1px);box-shadow:0 14px 26px -22px rgba(11,50,39,.7)}
.rchip__pin{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#F1F5EE;color:#1F5C43}
.rchip__pin svg{width:16px;height:16px}
.rchip__body{min-width:0;flex:1}
.rchip__body small{display:block;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:#95A096}
.rchip__body b{display:block;font-family:var(--serif);font-size:.92rem;line-height:1.25;color:var(--ink);margin-top:1px}
.rchip__go{flex:none;font-size:.66rem;font-weight:700;color:#2A7A57;white-space:nowrap}
.rchip.is-set .rchip__pin{background:#EEF3EE;background:color-mix(in srgb,var(--rg) 14%,#fff);color:var(--rg)}

/* ---------- season account: short, not an essay ---------- */
.season{border-radius:14px;padding:12px 14px;background:var(--green-700,#15573F);color:#F7F3E8}
.season b{display:block;font-family:var(--serif);font-size:1rem;letter-spacing:.01em}
.season span{display:block;font-size:.74rem;color:#D6E4DA;margin-top:2px}
.signin{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.signin p{margin:0 0 8px;font-size:.78rem;line-height:1.45}
.hint{margin:6px 0 0;font-size:.68rem;color:var(--muted);line-height:1.4}

/* CSAUI — the shapes the book is filled in on.

   Every field, chip and scale on the site now shares one measure: the same
   label, the same height, the same gap, the same rounded corner. Before this,
   a two-column row could give one field more room than its neighbour, the
   answer chips wrapped into ragged lines, and the 1–5 question looked like
   five unrelated buttons rather than one scale.
*/

/* ---- a card breathes at the foot, so nothing sits on the edge ---------- */
.card{padding:16px 16px 18px}

/* ---- headings inside a card carry the masthead's serif ------------------ */
.card__head h2{font-family:var(--serif);font-size:1.02rem;letter-spacing:-.008em;line-height:1.25}

/* ---- labels: small, spaced, and always the same ----------------------- */
.field{gap:5px}
.field > span,.field legend{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;
  color:#6E7C72;line-height:1.3;
}
.field input,.field textarea,.field select{width:100%;min-width:0}
.field textarea{min-height:96px;line-height:1.55;font-size:16px;padding:11px 12px}
.field input{font-size:16px}          /* below 16px iOS zooms the page */

/* ---- two fields side by side are two equal fields --------------------- */
.grid2{grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.grid2 > .field{min-width:0}

/* ---- chips: answers sit in a tidy block, not a ragged line ------------- */
.chips{gap:8px}
.chip{line-height:1.25;letter-spacing:.005em;transition:background .14s ease,border-color .14s ease}

/* the "what should we add" ideas: two even columns */
#ideaChips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
#ideaChips .chip{
  width:100%;min-height:46px;border-radius:12px;padding:8px 12px;
  font-size:13.5px;font-weight:600;text-align:left;
  display:flex;align-items:center;
}

/* who is writing: three even columns, and the long title still fits */
#reviewRole{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#reviewRole .chip{
  width:100%;min-height:44px;border-radius:12px;padding:8px 6px;
  font-size:12.5px;text-align:center;justify-content:center;display:flex;align-items:center;
}
@media (max-width:359px){
  #reviewRole{grid-template-columns:1fr 1fr}
}

/* the 1–5 question is one scale, not five pills: joined cells, the two ends
   named, so a number means something without reading the hint. */
#reviewStars{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);
  margin-top:2px;
}
#reviewStars .chip{
  border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;
  min-height:46px;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;color:#4A5A50;
}
#reviewStars .chip:last-child{border-right:0}
#reviewStars .chip:hover{background:#F4F0E4}
#reviewStars .chip.is-on{background:var(--green-900);color:#FFF8E7}
.stars__ends{
  display:flex;justify-content:space-between;gap:10px;
  font-size:10.5px;letter-spacing:.02em;color:#7C8A80;margin-top:4px;
}

/* ---- language: eight even tiles --------------------------------------- */
.langpick__row{gap:8px}
.langchip{border-radius:11px;min-height:46px;padding:8px 10px}
.langchip b{font-size:13px;line-height:1.25}
.langchip span{font-size:10px;letter-spacing:.02em}
@media (max-width:359px){
  .langpick__row{grid-template-columns:repeat(3,1fr)}
}

/* ---- buttons: one height, one radius ---------------------------------- */
.btn--wide{min-height:46px;border-radius:12px;letter-spacing:.012em;font-weight:660}

/* ---- the position card: the figure leads, the rows follow ------------- */
#positionTotal{
  display:block;font-family:var(--serif);font-size:clamp(2.1rem,9vw,2.9rem);
  line-height:1.02;letter-spacing:-.022em;color:var(--green-900);
  font-variant-numeric:tabular-nums;margin:2px 0 4px;
}
#positionWords{font-size:.9rem;line-height:1.55;color:#5C6B62;margin:0 0 4px;max-width:52ch}
.pos{margin-top:12px}
.pos li{font-size:.945rem;line-height:1.4;padding:11px 0;align-items:baseline}
.pos li b{font-weight:700;letter-spacing:-.005em}

/* ---- small print under a form ----------------------------------------- */
.tiny{font-size:11.5px;line-height:1.55;color:#7A857C;margin:10px 0 0}
.hint{font-size:11.5px;line-height:1.5;color:#7C8A80}

/* CSAPLACE — the place, read back before the book opens.

   The province is asked once at the door, but a reader who has moved should
   not have to wipe the app to correct it. So the answer is shown again, with
   a yes and a change. */
.place{
  margin:16px 0 12px;padding:13px 14px;
  background:#FBFAF3;border:1px solid #E7E1D0;border-radius:14px;
}
.place__row{display:flex;align-items:center;gap:10px}
.place__pin{
  flex:none;width:32px;height:32px;border-radius:10px;
  background:#EAF2EC;color:#1E6B45;display:grid;place-items:center;
}
.place__pin svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.place__text{flex:1;min-width:0}
.place__text b{
  display:block;font-family:var(--serif);font-size:1rem;line-height:1.25;
  color:#0B3D2E;letter-spacing:-.005em;
}
.place__text span{display:block;font-size:11.5px;line-height:1.45;color:#7C8A80;margin-top:2px}

.place__acts{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:11px}
.place > .place__btn{width:100%;margin-top:11px}

.place__btn{
  min-height:42px;padding:0 14px;border-radius:11px;
  border:1px solid #DCD6C6;background:#fff;color:#0B3D2E;
  font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
}
.place__btn--primary{background:#0B3D2E;color:#FFF8E7;border-color:#0B3D2E}
.place__link{
  border:0;background:none;padding:6px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:650;color:#2C7A5B;text-decoration:underline;
}
.place__row--settled .place__text span{color:#8FA396}