/* NKAF customer dashboard 1.3.0 — styles. One clear typeface (Plus Jakarta Sans), bigger text, a light cream base with a
   soft leaf texture, a calm dark mode. Phone first. Owner's brief of 15 Oct 2026. */
@font-face{font-family:'Jakarta';font-weight:400;font-display:swap;src:url('../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-weight:500;font-display:swap;src:url('../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-weight:600;font-display:swap;src:url('../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-weight:700;font-display:swap;src:url('../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-weight:800;font-display:swap;src:url('../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --g900:#12331f;--g800:#1a4a2d;--g700:#1f5a35;--g600:#2a7043;--g500:#3b8a55;--g100:#e4efe6;--g50:#f1f7f2;
  --gold:#b07d22;--gold50:#fbf3e2;--gold-ink:#7a5618;
  --ink:#17261c;--ink2:#46564b;--ink3:#5f6e63;--accent-text:#1f5a35;
  --line:#e3e0d5;--bg:#f6f4ee;--card:#ffffff;--card2:#f8f7f2;
  --red:#b3372f;--red50:#fbeae8;--amber:#875400;--amber50:#fcf3e2;--blue:#2b5f9e;--blue50:#e8eff8;
  --accent:var(--g700);--accent-ink:#ffffff;--accent-soft:var(--g100);--focus:#1f5a35;
  --radius:16px;--shadow:0 1px 2px rgba(18,51,31,.05),0 8px 24px rgba(18,51,31,.07);
  --hero-from:#163d24;--hero-to:#2f7a4a;
  --map-bg:#e3ecd9;--green-chip-ink:#1a4a2d;--gold-chip-ink:#7a5618;
  --texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%231f5a35' stroke-opacity='.055' stroke-width='1.4'%3E%3Cpath d='M34 46c-9-11-6-25 7-31 9 11 6 25-7 31zM34 46v16'/%3E%3Cpath d='M134 126c-9-11-6-25 7-31 9 11 6 25-7 31zM134 126v16'/%3E%3Cpath d='M120 30c-6-8-4-17 5-21 6 8 4 17-5 21z'/%3E%3C/g%3E%3C/svg%3E");
  --base:16px;--dur:280ms;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
html[data-theme="dark"]{
  --g100:#1d3b29;--g50:#172f20;--gold:#d8a94f;--gold50:#352b16;--gold-ink:#f0cf8a;
  --ink:#eef3ee;--ink2:#c6d1c8;--ink3:#a3b2a7;--line:#2b3f31;--bg:#12201a;--card:#1a2b21;--card2:#162619;
  --red:#f08a82;--red50:#3a2220;--amber:#e8b964;--amber50:#372c15;--blue:#8ab8ee;--blue50:#1d2f44;
  --accent:#3f9c5f;--accent-ink:#06180f;--accent-soft:#1d3b29;--accent-text:#9bd9b0;--focus:#9bd9b0;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3);--hero-from:#0f2417;--hero-to:#1f4a30;
  --map-bg:#1b2d21;--green-chip-ink:#a8dcbb;--gold-chip-ink:#f0cf8a;
  --texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%239bd9b0' stroke-opacity='.045' stroke-width='1.4'%3E%3Cpath d='M34 46c-9-11-6-25 7-31 9 11 6 25-7 31zM34 46v16'/%3E%3Cpath d='M134 126c-9-11-6-25 7-31 9 11 6 25-7 31zM134 126v16'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:dark;
}
html[data-textsize="large"]{--base:18px}
html[data-textsize="xlarge"]{--base:20px}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--base);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Jakarta,'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--bg) var(--texture);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,.display{font-family:Jakarta,'Segoe UI',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;margin:0;line-height:1.2}
h1{font-size:1.8rem;line-height:1.15}h2{font-size:1.3rem;font-weight:700}h3{font-size:1.08rem;font-weight:700}
p{margin:0}
a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
button{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 5px var(--bg)}
h1[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:10px;z-index:100;border:1px solid var(--line)}
.skip:focus{top:8px}
.muted{color:var(--ink2)}.small{font-size:.92rem}.tiny{font-size:.84rem;color:var(--ink3)}.bold{font-weight:700}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.92em;letter-spacing:.01em}
.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}.between>*{min-width:0}
.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.divider{height:1px;background:var(--line)}
.icon{width:1.25em;height:1.25em;flex:none}

/* app shell */
#app{min-height:100vh;display:flex;flex-direction:column}
.shell{display:flex;flex:1;min-height:100vh}
.sidenav{display:none}
.main{flex:1;min-width:0;padding:16px 16px 96px;max-width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:36px;height:36px;border-radius:50%}
.brand .name{font-weight:800;font-size:1.15rem;line-height:1;letter-spacing:.02em;color:var(--g900)}
html[data-theme="dark"] .brand .name{color:var(--ink)}
.brand .sub{font-size:.72rem;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex:none;padding:0}
.iconbtn svg{width:20px;height:20px}
.avatar{font-weight:700;font-size:.9rem;background:var(--g100);color:var(--green-chip-ink);border-color:transparent}
.bottomnav{position:fixed;left:0;right:0;bottom:0;height:76px;background:var(--card);border-top:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-around;padding:6px 4px calc(10px + env(safe-area-inset-bottom));z-index:20}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink2);text-decoration:none;font-size:.74rem;font-weight:600;border-radius:12px;min-height:44px}
.bottomnav a svg{width:22px;height:22px}
.bottomnav a[aria-current="page"]{color:var(--accent-text);font-weight:600}
.bottomnav a[aria-current="page"] .pill{background:var(--accent-soft);border-radius:999px;padding:3px 14px}
.bottomnav a[aria-disabled="true"]{opacity:.5}
.bottomnav .pill{display:inline-flex}

@media (min-width:900px){
  .shell{background:linear-gradient(90deg,var(--card) 0,var(--card) 250px,transparent 250px)}
  .sidenav{display:flex;flex:0 0 250px;background:var(--card);border-right:1px solid var(--line);padding:24px 16px;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto;align-self:flex-start}
  .sidenav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--ink2);text-decoration:none;font-weight:600;min-height:44px}
  .sidenav .navlinks{display:flex;flex-direction:column;gap:6px}
  .sidenav a svg{width:20px;height:20px}
  .sidenav a[aria-current="page"]{background:var(--accent-soft);color:var(--g900);font-weight:700}
  html[data-theme="dark"] .sidenav a[aria-current="page"]{color:var(--accent-text)}
  .sidenav a[aria-disabled="true"]{opacity:.5}
  .sidenav .brand{padding:4px 8px 18px}.sidenav .brand img{width:44px;height:44px}
  .sidenav .spacer{flex:1}
  .sidenav .me{padding:6px 8px;gap:10px;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
  .main{padding:28px 32px 48px;max-width:1280px}
  .shell .topbar{display:none}.bottomnav{display:none}
  .desk-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
  .desk-grid-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .grid3-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .narrow{max-width:860px}
}

/* cards & chips */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card.flat{box-shadow:none}.card.soft{background:var(--g50);border-color:var(--g100)}
.hero{background:linear-gradient(135deg,var(--hero-from),var(--hero-to));color:#fff;border-radius:var(--radius);padding:18px 16px 14px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:1.6rem}.hero .muted{color:rgba(255,255,255,.78)}.hero .mono{color:rgba(255,255,255,.9)}
.hero .scene{position:absolute;right:-6px;bottom:-4px;width:150px;height:96px;opacity:.95;pointer-events:none}
@media (min-width:900px){.hero{padding:28px 30px;min-height:170px}.hero h1{font-size:2.1rem}.hero .scene{width:460px;height:170px;right:0;bottom:0}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:700;border:1px solid transparent;white-space:normal;max-width:100%;text-align:center}
.chip.green{background:var(--g100);color:var(--green-chip-ink)}.chip.gold{background:var(--gold50);color:var(--gold-chip-ink)}
.chip.red{background:var(--red50);color:var(--red)}.chip.amber{background:var(--amber50);color:var(--amber)}
.chip.blue{background:var(--blue50);color:var(--blue)}.chip.grey{background:var(--card2);color:var(--ink2);border-color:var(--line)}
.chip.onhero{background:rgba(255,255,255,.14);color:#fff}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px}
.stat .n{font-size:1.7rem;font-weight:800;line-height:1;color:var(--g900)}.stat .l{font-size:.84rem;color:var(--ink2)}
html[data-theme="dark"] .stat .n{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;border:1px solid transparent;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;white-space:normal;text-align:center;max-width:100%;overflow-wrap:anywhere}
.btn.primary{background:var(--accent);color:var(--accent-ink)}.btn.secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost{background:transparent;color:var(--accent-text);padding:0 10px}.btn.danger{background:#b3372f;color:#fff}
.btn.block{width:100%}.btn.sm{min-height:40px;padding:0 14px;font-size:.9rem}.btn svg{width:18px;height:18px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.87rem;font-weight:600;color:var(--ink2)}
.input{height:52px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:0 14px;font:inherit;font-size:1.05rem;width:100%}
.input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.input[aria-invalid="true"]{border-color:var(--red)}
.codeboxes{display:flex;gap:6px;justify-content:space-between}
.codeboxes .input{flex:1 1 0;min-width:0;width:auto;max-width:52px;height:56px;text-align:center;font-size:1.35rem;padding:0;font-family:"JetBrains Mono",ui-monospace,monospace}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--g600);flex:none}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px}
.alert svg{width:20px;height:20px;flex:none;margin-top:1px}
.alert.red{background:var(--red50);color:var(--red)}.alert.amber{background:var(--amber50);color:var(--amber)}.alert.blue{background:var(--blue50);color:var(--blue)}
.alert .body{color:var(--ink)}
.signin-hero{background:linear-gradient(180deg,#fbf3e2 0%,var(--bg) 100%);color:var(--ink);padding:28px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden;text-align:center}
.signin-hero .field-pic{width:100%;max-width:560px;height:auto;aspect-ratio:956/364;border-radius:18px;object-fit:cover;box-shadow:var(--shadow)}
@media (max-width:599px){.signin-hero .field-pic{aspect-ratio:auto;height:210px}}
.signin-hero img.logo{width:84px;height:84px;border-radius:50%;box-shadow:0 6px 20px rgba(18,51,31,.25);position:relative;margin-top:-52px;border:3px solid var(--card);background:var(--card)}
.signin-hero h1{color:var(--g900);position:relative;font-size:1.7rem}.signin-hero p{position:relative;color:var(--ink2)}
html[data-theme="dark"] .signin-hero{background:linear-gradient(180deg,#1b2a21,var(--bg))}html[data-theme="dark"] .signin-hero h1{color:var(--ink)}
.signin-hero .kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);position:relative}
.signin-body{padding:20px 16px 24px;display:flex;flex-direction:column;gap:14px;flex:1;max-width:520px;width:100%;margin:0 auto}
.signin-page{min-height:100vh;background:var(--bg) var(--texture)}
.tiny.onhero{color:var(--ink3)}
@media (min-width:900px){
  .signin-page{display:flex;align-items:center;justify-content:center;padding:40px 24px}
  .signin-page .inner{width:100%;max-width:980px;display:grid;grid-template-columns:1.1fr 420px;gap:44px;align-items:center}
  .signin-page .signin-hero{background:none;padding:0;align-items:flex-start;text-align:left;box-shadow:none}
  .signin-page .signin-hero img.logo{margin-top:-46px;margin-left:20px}
  .signin-page .signin-hero h1{font-size:2.3rem}
  .signin-page .signin-body{padding:0;margin:0}
}

/* journey */
.journey{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:flex-start;padding:0 0 14px;position:relative}
.step .dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g100);color:var(--g700);border:2px solid var(--g600);flex:none;position:relative;z-index:1}
.step .dot svg{width:14px;height:14px}
.step.done .dot{background:var(--g600);color:#fff;border-color:var(--g600)}
.step.current .dot{background:var(--card);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 6px rgba(184,134,43,.18)}
.step.later .dot{background:var(--card2);border-color:var(--line);color:var(--ink3);border-style:dashed}
.step .line{position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.step .line::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--g600);transform-origin:top;transform:scaleY(1)}
.step.current .line::after,.step.later .line::after{display:none}
.step:last-child .line{display:none}
.step .t{font-weight:600;font-size:.93rem;line-height:1.3;padding-top:4px}.step .d{font-size:.8rem;color:var(--ink3)}
.step.later .t{color:var(--ink3);font-weight:500}
.journey-h{display:none}
@media (min-width:900px){
  .journey{display:none}
  .journey-h{display:flex;align-items:flex-start}
  .jstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center;min-width:0}
  .jstep .dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g600);color:#fff;border:2px solid var(--g600);z-index:1}
  .jstep .dot svg{width:16px;height:16px}
  .jstep.current .dot{background:var(--card);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 7px rgba(184,134,43,.18)}
  .jstep.later .dot{background:var(--card2);border-color:var(--line);color:var(--ink3);border-style:dashed}
  .jstep .t{font-size:.78rem;font-weight:600;line-height:1.25;padding:0 4px}.jstep .d{font-size:.72rem;color:var(--ink3)}
  .jstep.later .t{color:var(--ink3);font-weight:500}
  .jstep::before{content:"";position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--g600)}
  .jstep.current::before,.jstep.later::before{background:var(--line)}
  .jstep:last-child::before{display:none}
}
.next{background:linear-gradient(135deg,#fffaf0,var(--gold50));border:1px solid rgba(176,125,34,.3);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:flex-start}
html[data-theme="dark"] .next{background:var(--gold50)}
.next .ic{width:40px;height:40px;border-radius:12px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.next .ic svg{width:20px;height:20px}.next h3{font-size:1rem}
.kicker{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.kicker.plain{color:var(--ink3)}

/* lots */
.lot{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.lot.open{border-color:var(--g600)}
.lot .head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;width:100%;background:none;border:0;text-align:left;color:inherit;min-height:64px}
.lot .thumb{width:48px;height:48px;border-radius:12px;background:var(--g50);display:flex;align-items:center;justify-content:center;flex:none}
.lot .thumb svg{width:36px;height:36px}
.lot .meta{flex:1;min-width:0}.lot .meta .t{font-weight:600;font-size:1rem}.lot .meta .s{font-size:.8rem;color:var(--ink2)}
.lot .chev{width:20px;height:20px;color:var(--ink3);flex:none;transition:transform var(--dur)}
.lot.open .chev{transform:rotate(90deg)}
.lot .body{border-top:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:12px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.kv div{display:flex;flex-direction:column;gap:1px}
.kv .k{font-size:.72rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}.kv .v{font-size:.93rem;font-weight:500;overflow-wrap:anywhere}
@media (min-width:900px){.kv.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stages{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:10px 8px 6px;background:var(--g50);border-radius:12px;border:1px solid var(--g100)}
.stages .st{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.stages .st svg{width:40px;height:56px;opacity:.45}.stages .st.on svg{opacity:1}
.stages .st span{font-size:.68rem;font-weight:600;color:var(--ink2);text-align:center;line-height:1.2}
.stages .st.on span{color:var(--green-chip-ink)}
.locked{background:var(--card2);border:1.5px dashed var(--line);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.locked .ic{width:44px;height:44px;border-radius:50%;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center}
.locked .ic svg{width:20px;height:20px}.locked h3{font-size:1rem}
.locked.inline{flex-direction:row;text-align:left;gap:10px;padding:12px}
.locked.inline .ic{width:36px;height:36px}

/* documents */
.doc{display:flex;gap:12px;align-items:center;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.doc.flat{box-shadow:none;padding:10px}
.doc .ic{width:44px;height:52px;border-radius:8px;background:var(--g50);border:1px solid var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g700);flex:none}
.doc .ic svg{width:22px;height:22px}.doc .ic.gold{background:var(--gold50);color:var(--gold);border-color:rgba(184,134,43,.3)}
.doc .ic.red{background:var(--red50);color:var(--red);border-color:rgba(179,55,47,.3)}
.doc .meta{flex:1;min-width:0}.doc .meta .t{font-weight:600;font-size:.93rem}.doc .meta .s{font-size:.8rem;color:var(--ink2)}
.doc .acts{display:flex;gap:6px}.doc .acts .iconbtn{width:40px;height:40px}
.group-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:4px}

/* passbook */
.year{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.year.current{border-color:var(--gold)}
.year .head{display:flex;align-items:center;gap:12px;padding:12px 14px}
.ring{width:48px;height:48px;flex:none;position:relative}
.ring svg{width:48px;height:48px;transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.ring .fill{transition:stroke-dashoffset 600ms var(--ease)}
.year .r{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;font-size:.87rem;border-top:1px solid var(--line)}
.year .r .k{color:var(--ink2)}
.inst{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:.87rem}
.inst.head{background:var(--card2)}
.inst .ackline{grid-column:1/-1;margin:-4px 0 0 -10px}
.inst .th{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.year .foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.72rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}.table tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto}

/* help & settings */
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq+.faq{margin-top:8px}
.faq .q{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;font-weight:600;font-size:.93rem;min-height:48px;cursor:pointer;width:100%;background:none;border:0;color:inherit;text-align:left}
.faq .q svg{width:18px;height:18px;color:var(--ink3);flex:none}
.faq .a{padding:0 14px 14px;font-size:.93rem;color:var(--ink2);display:flex;flex-direction:column;gap:8px}
.faq[open] .q svg{transform:rotate(180deg)}
.faq.hit{border-color:var(--g600)}
.seg{display:flex;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button,.seg a{flex:1;min-height:40px;border:0;background:transparent;border-radius:9px;font:inherit;font-weight:600;font-size:.9rem;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:0 6px}
.seg button[aria-checked="true"],.seg button[aria-selected="true"],.seg a[aria-current="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button[disabled]{opacity:.5;cursor:not-allowed}
.steps{display:flex;flex-direction:column;gap:14px}
.stepn{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:flex-start}
.stepn .n{width:32px;height:32px;border-radius:50%;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.list-card{padding:0}
.list-card a,.list-card .item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;text-decoration:none;color:inherit;min-height:48px;border-bottom:1px solid var(--line)}
.list-card a:last-child,.list-card .item:last-child{border-bottom:0}
.list-card .item svg,.list-card a .chev{width:18px;height:18px;color:var(--ink3);flex:none}

/* map */
.mapbox{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--map-bg);height:420px}
@media (min-width:900px){.mapbox{height:600px}}
.mapbox .leaflet-container{height:100%;width:100%;background:var(--map-bg);font-family:inherit}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.leaflet-marker-icon.tree-marker,.tree-marker{background:transparent;display:flex;align-items:center;justify-content:center}
.tree-marker::after{content:"";display:block;flex:none;width:16px;height:16px;border-radius:50%;background:#2a7043;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tree-marker.replaced::after{background:#875400}
.tree-marker.selected::after{background:#b8862b;box-shadow:0 0 0 6px rgba(184,134,43,.3)}
.nursery-marker{width:28px;height:28px}
.leaflet-popup-content{font-family:inherit;font-size:.87rem;margin:10px 12px}
html[data-theme="dark"] .leaflet-tile{filter:brightness(.6) contrast(1.1) saturate(.6)}
html[data-theme="dark"] .leaflet-popup-content-wrapper,html[data-theme="dark"] .leaflet-popup-tip{background:var(--card);color:var(--ink)}
.leaflet-marker-icon.plot-cluster,.plot-cluster{background:var(--g700);color:#fff;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;border:2px solid #fff}
.map-skeleton{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:.9rem;background:var(--map-bg)}

/* misc */
.dyk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.dyk .ic{width:36px;height:36px;border-radius:10px;background:var(--g50);color:var(--g700);display:flex;align-items:center;justify-content:center;flex:none}
.dyk .ic svg{width:18px;height:18px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:.72rem;font-weight:600;color:var(--ink2);text-align:center}
.badge .c{width:40px;height:40px;border-radius:50%;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center}
.badge .c svg{width:18px;height:18px}
.badge.off{color:var(--ink3)}.badge.off .c{background:var(--card2);color:var(--ink3);border:1.5px dashed var(--line)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.section-title h2{font-size:1.15rem}.section-title a,a.small.bold{font-size:.87rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-12px -4px}
.toast{position:fixed;left:16px;right:16px;bottom:92px;background:#123822;color:#fff;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:40;max-width:520px;margin:0 auto}
.toast svg{width:20px;height:20px;flex:none;color:#9fd8b2}
.toast a{color:#9fd8b2;font-weight:600;text-decoration:none}
@media (min-width:900px){.toast{bottom:24px}}
.backdrop{position:fixed;inset:0;background:rgba(13,31,20,.6);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:50}
.backdrop.center{align-items:center}
.dialog{width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;-webkit-overflow-scrolling:touch}
.celebrate{align-items:center;text-align:center;position:relative;overflow:hidden;padding-top:60px}
.celebrate .leaves{position:absolute;left:0;top:0;width:100%;height:150px;opacity:.9;pointer-events:none}
.celebrate .medal{width:84px;height:84px;border-radius:50%;background:var(--gold50);border:3px solid var(--gold);display:flex;align-items:center;justify-content:center}
.celebrate .medal svg{width:40px;height:40px;color:var(--gold)}
.viewer{position:fixed;inset:0;background:#2a3a30;z-index:60;display:flex;flex-direction:column}
.viewer .topbar{position:static}
.viewer .frame{flex:1;border:0;width:100%;background:#2a3a30}
.viewer .pages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 8px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;background:#2a3a30}
.viewer .pages canvas{display:block;max-width:100%;background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.viewer .pages img.photo{max-width:100%;max-height:100%;border-radius:10px;margin:auto}
.viewer .loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;padding:24px;text-align:center}
.viewer .loading .spinner{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:#9fd8b2}
.viewer .pageno{position:absolute;left:50%;transform:translateX(-50%);bottom:76px;background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;padding:4px 10px;border-radius:999px;pointer-events:none}
.viewer .pages canvas.pending{min-height:200px}
.viewer .foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;background:var(--card);border-top:1px solid var(--line)}
.skeleton{border-radius:10px;background:linear-gradient(90deg,var(--line),var(--card2),var(--line));background-size:200% 100%}
html[data-motion="on"] .skeleton{animation:shimmer 1.4s linear infinite}
.devpanel{position:fixed;left:8px;bottom:84px;z-index:30;background:#fff6d6;color:#6a4b00;border:1px solid #f0dc9a;border-radius:12px;padding:8px 10px;font-size:.75rem;max-width:300px;box-shadow:var(--shadow)}
html[data-theme="dark"] .devpanel{background:#3a2c12;color:#f1cf86;border-color:#5a4520}
.devpanel summary{cursor:pointer;font-weight:700}
.devpanel button{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 4px;cursor:pointer;color:inherit;font-size:.75rem;border-top:1px solid rgba(0,0,0,.08)}
.devpanel button:hover{text-decoration:underline}
@media (min-width:900px){.devpanel{bottom:16px}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 16px}
.empty svg{width:150px;height:112px}

/* motion — all off when html[data-motion="off"] (reduced motion or user setting) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 6px rgba(184,134,43,.18)}50%{box-shadow:0 0 0 10px rgba(184,134,43,.1)}}
@keyframes swayk{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes leaffall{0%{opacity:0;transform:translateY(-30px) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(120px) rotate(180deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
html[data-motion="on"] .rise{animation:rise var(--dur) var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
html[data-motion="on"] .step.done .line::after{animation:draw 500ms var(--ease) both;animation-delay:calc(var(--i,0)*120ms)}
html[data-motion="on"] .step.current .dot,html[data-motion="on"] .jstep.current .dot{animation:glow 2.4s ease-in-out infinite}
html[data-motion="on"] .sway{transform-origin:50% 100%;animation:swayk 4s ease-in-out infinite}
html[data-motion="on"] .leaf{animation:leaffall 1.6s ease-in both}
html[data-motion="on"] .leaf:nth-child(1){animation-delay:0ms}
html[data-motion="on"] .leaf:nth-child(2){animation-delay:90ms}
html[data-motion="on"] .leaf:nth-child(3){animation-delay:180ms}
html[data-motion="on"] .leaf:nth-child(4){animation-delay:270ms}
html[data-motion="on"] .leaf:nth-child(5){animation-delay:360ms}
html[data-motion="on"] .leaf:nth-child(6){animation-delay:450ms}
html[data-motion="on"] .leaf:nth-child(7){animation-delay:540ms}
html[data-motion="on"] .leaf:nth-child(8){animation-delay:630ms}

html[data-motion="on"] .spin,.spinner{animation:spin 1s linear infinite}
html[data-motion="off"] *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.bottomnav,.sidenav,.topbar,.devpanel,.toast{display:none!important}.main{padding:0}}

/* R2-08: nothing may force a sideways scroll at 320 px with Extra large text */
#main,.card,.lot,.kv,.list-card{min-width:0}
.mono,.v,.small.bold{overflow-wrap:anywhere}
/* R2-12: every map control except the 24 px tree markers meets the 44 px tap-target rule */
.leaflet-container .leaflet-bar a,.leaflet-container.leaflet-touch .leaflet-bar a,.leaflet-container .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:1.3rem}
.leaflet-container .leaflet-popup a.leaflet-popup-close-button,.leaflet-container.leaflet-touch a.leaflet-popup-close-button{width:44px;height:44px;line-height:44px;font-size:1.4rem;top:0;right:0;display:flex;align-items:center;justify-content:center;padding:0}
.leaflet-popup-content{margin:14px 44px 14px 16px}

/* ===== 1.3.0: Home layout ===== */
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bell{position:relative}.bell .dotn{position:absolute;top:8px;right:9px;width:11px;height:11px;border-radius:50%;background:#d6452f;border:2px solid var(--card)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;gap:12px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;color:inherit;font:inherit;width:100%;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.tile:hover,.tile:focus-visible{border-color:var(--g500);box-shadow:0 8px 22px rgba(31,90,53,.12);transform:translateY(-2px)}
.tile .ic{width:42px;height:42px;border-radius:12px;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center;flex:none}
.tile .ic svg{width:22px;height:22px}
.tile .n{font-size:1.55rem;font-weight:800;line-height:1.05;color:var(--g900)}.tile .l{font-size:.82rem;color:var(--ink2);line-height:1.25}
html[data-theme="dark"] .tile .n{color:var(--ink)}
html[data-theme="dark"] .tile .ic,html[data-theme="dark"] .msg .ic,html[data-theme="dark"] .txn .ic,html[data-theme="dark"] .welcome .feat .ic,html[data-theme="dark"] .lotcard .art{color:var(--accent-text)}
html[data-theme="dark"] .jpct{color:var(--accent-text)}
.tile .go{margin-left:auto;color:var(--ink3);width:18px;height:18px;flex:none}
.home-grid{display:grid;grid-template-columns:1fr;gap:12px}
.plant-card{display:flex;gap:14px;align-items:center}
@media (max-width:599px){.plant-card{flex-direction:column;align-items:stretch}.plant-card .mini{width:100%;height:120px}}
.plant-card .mini{width:118px;height:96px;border-radius:12px;background:var(--map-bg);flex:none;overflow:hidden;position:relative;border:1px solid var(--line)}
.plant-card .mini svg{width:100%;height:100%}
.plant-card .coord{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--ink2);margin:4px 0 8px}
.feed{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.post{padding:0;overflow:hidden}
.post .ph{position:relative;background:var(--g50);min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.post .ph img{display:block;width:100%;max-height:260px;object-fit:cover}
.post .ph .spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--g600);border-radius:50%}
.post .bd{padding:14px 16px 16px}
.post .from{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--ink3);flex-wrap:wrap}
.post .from img{width:24px;height:24px;border-radius:50%}
.post h3{margin:6px 0 4px;font-size:1.08rem}
.post .body{white-space:pre-line;color:var(--ink2);font-size:.95rem}
.badge-new{font-size:.68rem;font-weight:800;color:#fff;background:#d6452f;border-radius:6px;padding:2px 6px;letter-spacing:.04em}
.msg{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;color:inherit;font:inherit;cursor:pointer}
.msg:first-child{border-top:0;padding-top:0}
.msg .ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--g100);color:var(--g700)}
.msg .ic.gold{background:var(--gold50);color:var(--gold)}.msg .ic svg{width:18px;height:18px}
.msg .t{font-weight:700;font-size:.97rem}.msg .s{font-size:.84rem;color:var(--ink3)}
.impact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.imp{background:var(--g50);border:1px solid var(--g100);border-radius:14px;padding:14px}
.imp .n{font-size:1.4rem;font-weight:800;color:var(--g900)}.imp .l{font-size:.84rem;color:var(--ink2)}
html[data-theme="dark"] .imp .n{color:var(--ink)}
.est{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold50);border-radius:6px;padding:2px 6px;display:inline-block}
@media (min-width:900px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .home-grid{grid-template-columns:1.15fr 1fr;gap:16px}
  .feed{grid-template-columns:1.3fr 1fr;gap:16px}
  .impact{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .plant-card .mini{width:150px;height:118px}
  .lots2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
/* lot cards on Home */
.lotcard{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}
.lotcard .art{width:72px;height:72px;border-radius:16px;background:var(--g100);display:flex;align-items:center;justify-content:center;flex:none}
.lotcard .art svg{width:46px;height:60px}
.bar{height:8px;border-radius:8px;background:var(--line);margin:8px 0 6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--g500);border-radius:8px;transition:width 700ms var(--ease)}
/* journey track (1.3.0) */
.track{position:relative;display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));margin-top:14px;gap:0}
.track::before{content:"";position:absolute;left:5%;right:5%;top:25px;height:6px;border-radius:6px;background:var(--line)}
.track::after{content:"";position:absolute;left:5%;width:calc(var(--done,0) * 90%);top:25px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--g600),var(--g500));transition:width 900ms var(--ease)}
.track .st{position:relative;z-index:1;text-align:center;font-size:.76rem;font-weight:600;color:var(--ink2);padding:0 2px;background:none;border:0;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.track .st .d{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line);color:var(--ink3);transition:transform var(--dur) var(--ease)}
.track .st .d svg{width:20px;height:20px}
.track .st.done .d{background:var(--g700);border-color:var(--g700);color:#fff}
.track .st.now .d{background:var(--card);border:3px solid var(--gold);color:var(--gold);box-shadow:0 0 0 7px rgba(176,125,34,.15)}
.track .st.now{color:var(--gold-ink)}.track .st.done{color:var(--g900)}
html[data-theme="dark"] .track .st.done{color:var(--ink)}
.track .st small{display:block;font-weight:500;color:var(--ink3);font-size:.7rem;line-height:1.2}
.track .st:hover .d,.track .st:focus-visible .d{transform:scale(1.08)}
.track .st .lab{line-height:1.2;overflow-wrap:anywhere}
.jpct{background:var(--g100);color:var(--g700);font-weight:800;border-radius:999px;padding:4px 12px;font-size:.84rem;white-space:nowrap}
/* growth timeline (reuses the journey-page sway animation) */
.growth{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:12px 8px 8px;background:var(--g50);border:1px solid var(--g100);border-radius:14px;position:relative;overflow:hidden}
.growth::before{content:"";position:absolute;left:8%;right:8%;bottom:34px;height:3px;background:var(--line)}
.growth .st{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;position:relative;min-width:0}
.growth .st svg{width:44px;height:62px;opacity:.4;transition:opacity var(--dur)}
.growth .st.on svg,.growth .st.done svg{opacity:1}
.growth .st.on svg{transform:scale(1.12);transform-origin:50% 100%}
.growth .st span{font-size:.7rem;font-weight:700;color:var(--ink2);text-align:center;line-height:1.2}
.growth .st.on span{color:var(--green-chip-ink)}
.growth .st .pin{width:12px;height:12px;border-radius:50%;background:var(--line);border:2px solid var(--card)}
.growth .st.done .pin{background:var(--g600)}.growth .st.on .pin{background:var(--gold);box-shadow:0 0 0 5px rgba(176,125,34,.18)}
/* welcome modal (first visit) — owner's design of 15 Oct */
.welcome{padding:0;max-width:720px;overflow:auto;border-radius:24px;gap:0;background:var(--card)}
@media (max-height:640px){.welcome .pic{aspect-ratio:956/200}.welcome .what{display:none}}
.welcome .pic{position:relative;aspect-ratio:956/364;background:#f3ecd8;overflow:hidden}
.welcome .pic img{display:block;width:100%;height:100%;object-fit:cover}
.welcome .wlogo{width:72px;height:72px;border-radius:50%;border:3px solid var(--card);background:var(--card);box-shadow:0 6px 18px rgba(18,51,31,.25);margin:-36px auto 0;position:relative;display:block}
.welcome .bd{padding:10px 24px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.welcome .kicker{letter-spacing:.16em}
.welcome h2{font-size:1.9rem;line-height:1.1;color:var(--g900)}
html[data-theme="dark"] .welcome h2{color:var(--ink)}
.welcome .leafrule{width:150px;height:14px;color:var(--gold);display:flex;align-items:center;gap:8px;justify-content:center}
.welcome .leafrule::before,.welcome .leafrule::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.6}
.welcome .leafrule svg{width:16px;height:16px;flex:none}
.welcome .hello{font-size:1.25rem;font-weight:800;color:var(--g700)}
html[data-theme="dark"] .welcome .hello{color:var(--accent-text)}
.welcome .lead{font-size:1rem;color:var(--ink)}
.welcome .what{font-size:.95rem;color:var(--ink2);max-width:560px}
.welcome .feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:4px}
.welcome .feat{display:flex;gap:10px;align-items:center;background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:10px 12px;font-size:.9rem;font-weight:600;color:var(--ink);text-align:left}
.welcome .feat .ic{width:32px;height:32px;border-radius:50%;background:var(--card);color:var(--g700);display:flex;align-items:center;justify-content:center;flex:none}
.welcome .feat .ic svg{width:17px;height:17px}
.welcome .tag{font-size:.9rem;font-weight:700;color:var(--gold-ink);letter-spacing:.02em}
.welcome .btn{margin-top:6px;min-height:54px;font-size:1.05rem}
.welcome .err{font-size:.88rem;color:var(--red)}
@media (min-width:900px){
  .welcome .bd{padding:12px 36px 30px}
  .welcome .feats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .welcome .feat{flex-direction:column;text-align:center;gap:8px;padding:12px 8px;font-size:.84rem}
  .welcome .feat .ic{width:44px;height:44px}.welcome .feat .ic svg{width:20px;height:20px}
}
html[data-motion="on"] .welcome .pic img{animation:kenburns 9s ease-out both}
html[data-motion="on"] .welcome .bd>*{animation:rise 500ms var(--ease) both}
html[data-motion="on"] .welcome .bd>:nth-child(2){animation-delay:80ms}html[data-motion="on"] .welcome .bd>:nth-child(3){animation-delay:160ms}html[data-motion="on"] .welcome .bd>:nth-child(4){animation-delay:240ms}html[data-motion="on"] .welcome .bd>:nth-child(5){animation-delay:320ms}html[data-motion="on"] .welcome .bd>:nth-child(6){animation-delay:400ms}html[data-motion="on"] .welcome .bd>:nth-child(7){animation-delay:480ms}html[data-motion="on"] .welcome .bd>:nth-child(8){animation-delay:560ms}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
/* notice pop-up */
.notice-pop{padding:0;overflow:auto;max-width:440px;gap:0}
.notice-pop .ph{position:relative;max-height:220px;overflow:hidden;background:var(--g50)}
.notice-pop .ph img{width:100%;display:block;object-fit:cover;max-height:220px}
.notice-pop .stripe{height:10px;background:linear-gradient(90deg,var(--g700),var(--gold))}
.notice-pop .bd{padding:18px 22px 20px;display:flex;flex-direction:column;gap:8px}
.notice-pop .body{white-space:pre-line;color:var(--ink2);font-size:.95rem}
/* passbook (folded years) */
.year .head.fold{cursor:pointer;width:100%;background:none;border:0;text-align:left;color:inherit;font:inherit}
.year .head .chev{width:20px;height:20px;color:var(--ink3);transition:transform var(--dur);flex:none}
.year.open .head .chev{transform:rotate(180deg)}
.year .foldbody{display:none}.year.open .foldbody{display:block}
.payrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line);background:var(--card2)}
.sel{height:48px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:0 40px 0 14px;font:inherit;font-weight:700;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6e63' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;max-width:100%}
.sumgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sumgrid div{background:var(--card2);border-radius:12px;padding:10px 12px}.sumgrid .k{font-size:.74rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}.sumgrid .v{font-weight:800;font-size:1.05rem}
/* payments page */
.txn{display:flex;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.txn:first-child{border-top:0}
.txn .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--g100);color:var(--g700)}
.txn .ic.gold{background:var(--gold50);color:var(--gold)}.txn .ic svg{width:18px;height:18px}
.txn .t{font-weight:700;font-size:.97rem}.txn .s{font-size:.82rem;color:var(--ink3)}
.txn .amt{font-weight:800;white-space:nowrap}
/* help pop-up on sign-in */
.howto{display:flex;flex-direction:column;gap:12px;text-align:left}
.howto .stepn .n{background:var(--g700)}
/* tour pointers */
.tour{position:fixed;z-index:70;max-width:300px;background:var(--g900);color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:.92rem}
.tour .btn{min-height:40px}
.tour-ring{position:fixed;z-index:69;border-radius:16px;box-shadow:0 0 0 4px var(--gold),0 0 0 9999px rgba(13,31,20,.55);pointer-events:none;transition:all var(--dur) var(--ease)}
.dialog.sheet{max-width:560px}
.kv2{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:.95rem}.kv2 .k{color:var(--ink2)}.kv2 .v{font-weight:700;text-align:right}
.chiprow{display:flex;gap:8px;flex-wrap:wrap}
.btn.whats{background:#1f8a4c;color:#fff}

/* ===== 1.3.0 review fixes (UX/accessibility review, 15 Oct) ===== */
.sumgrid .v{white-space:nowrap;overflow-wrap:normal}
@media (max-width:599px){.sumgrid{grid-template-columns:1fr 1fr}.sumgrid div:last-child{grid-column:1/-1}}
@media (max-width:599px){.plant-card{flex-direction:column;align-items:stretch}.plant-card .mini{width:100%;height:120px}}
@media (max-width:599px){.signin-hero .field-pic{height:140px}.signin-hero p.small{display:none}}
html[data-theme="dark"] .doc .ic,html[data-theme="dark"] .dyk .ic,html[data-theme="dark"] .locked .ic,html[data-theme="dark"] .step .dot,html[data-theme="dark"] .imp .icon,html[data-theme="dark"] .card .icon,html[data-theme="dark"] .msg .ic,html[data-theme="dark"] .tile .ic{color:var(--accent-text)}
html[data-theme="dark"] .step .dot{border-color:var(--accent)}
html[data-theme="dark"] .next .ic{color:var(--accent-ink)}
html[data-theme="dark"] .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b2a7' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-theme="dark"] .signin-page .signin-hero{background:none}
.chip.onhero{background:rgba(0,0,0,.26)}
.hero .muted,.hero .tiny{color:rgba(255,255,255,.92)}
.badge-new{background:#c43d28;font-size:.74rem}
.btn.whats{background:#1a7a42}
.next .ic{background:#8a6218}
@media (min-width:900px){.backdrop{align-items:center}}
.stages .st span,.growth .st span{font-size:.8rem}.jstep .t{font-size:.82rem}.kv .k{font-size:.78rem}.track .st{font-size:.8rem}.track .st small{font-size:.74rem}
@media (max-width:599px){.badges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.badge{min-width:0;padding:8px 2px;font-size:.68rem}}
.viewer .topbar{flex-wrap:nowrap}.viewer .topbar>.row{flex:none;flex-wrap:nowrap}.viewer .topbar>.row:first-child{flex:1;min-width:0}
.viewer .pageno{bottom:calc(84px + env(safe-area-inset-bottom))}
.inst.head{grid-template-columns:1fr auto auto}
.doc .acts .iconbtn{width:44px;height:44px}
.journey .step .chev{width:18px;height:18px;color:var(--ink3);align-self:center}
.morerow{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){.morerow{display:none}}
.btn.quiet{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.chip.checking{background:var(--amber50);color:var(--amber)}

/* 1.4.0: download buttons say what is happening (Preparing… / Downloaded ✓ / Couldn't download) */
.iconbtn.busy,.btn.busy{opacity:.75;cursor:progress}
.iconbtn.done,.btn.done{color:var(--green-chip-ink);border-color:var(--green-chip-ink)}
.iconbtn.failed,.btn.failed{color:var(--red);border-color:var(--red)}
.btn.busy svg,.btn.done svg,.btn.failed svg{width:18px;height:18px}
/* 1.4.0: the journey per lot — tabs above the journey card when there is more than one lot */
.lottabs{display:flex;gap:6px;flex-wrap:wrap}
.lottabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.lottabs button[aria-selected="true"]{background:var(--g600);color:#fff;border-color:var(--g600)}
.lotcard.shut{opacity:.92}
.lotcard .lockline{display:flex;gap:6px;align-items:center;color:var(--amber);font-weight:700}
/* 1.4.0: Your journey */
.journey-next{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:14px 16px;background:var(--card)}
.updates-hidden{opacity:.7}
.lotcard .lockline svg{width:15px;height:15px;flex:none}
.tile .n.long{font-size:1.02rem;line-height:1.3;letter-spacing:0}

/* ===== 1.4.2 "calmer customer screens" (owner decisions, 17 Oct 2026) ===== */
:root{--road:#e4e5e3;--road-dash:#ffffff;--road-done:#3b8a55;--road-done-dash:#d9efe0;--road-todo:#c9cbc8;
  --veil1:rgba(246,244,238,.62);--veil2:rgba(246,244,238,.86);--veil3:rgba(246,244,238,.95)}
html[data-theme="dark"]{--road:#363a38;--road-dash:#1a2b21;--road-done:#3f9c5f;--road-done-dash:#1d3b29;--road-todo:#555a57;
  --veil1:rgba(18,32,26,.74);--veil2:rgba(18,32,26,.9);--veil3:rgba(18,32,26,.97)}
/* the heading a page focuses for screen readers shows no box (it is not a control) */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible,main[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
/* computer-only / phone-only parts (the phone is the layout with the bottom bar) */
@media (max-width:899px){.desk-only{display:none!important}}
@media (min-width:900px){.phone-only{display:none!important}}
/* side menu groups */
.navgroup{display:none}
@media (min-width:900px){
  .sidenav .navgroup{display:block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:10px 0 0 14px;line-height:1.2}
  .sidenav .navgroup:first-child{margin-top:0}
}
/* the road journey */
.roadwrap{display:flex;flex-direction:column;gap:4px}
.road{position:relative;margin-top:6px}
.road-svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.road-svg text{font-family:Jakarta,'Segoe UI',system-ui,sans-serif}
.rd-base{fill:none;stroke:var(--road);stroke-linecap:round}
.rd-dash{fill:none;stroke:var(--road-dash);stroke-width:2;stroke-dasharray:6 8}
.rd-done{fill:none;stroke:var(--road-done);stroke-linecap:round}
.rd-done-dash{fill:none;stroke:var(--road-done-dash);stroke-width:2;stroke-dasharray:6 8}
.rd-st .tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.rd-st.done .c{fill:var(--g700);stroke:var(--card);stroke-width:3}
.rd-st.here .halo{fill:var(--g100)}.rd-st.here .c{fill:var(--g700);stroke:var(--card);stroke-width:3}.rd-st.here .tick{stroke-width:1.8}
.rd-st.wait .halo{fill:var(--gold50)}.rd-st.wait .c{fill:var(--card);stroke:var(--gold);stroke-width:3}.rd-st.wait .dot{fill:var(--gold)}
.rd-st.todo .c{fill:var(--card);stroke:var(--road-todo);stroke-width:2.5}
.rd-st .num{fill:var(--ink3);font-size:10.5px;font-weight:700}
.rd-st .lab{fill:var(--ink);font-weight:600}
.rd-st.here .lab{font-weight:800}
.rd-st.wait .lab{fill:var(--gold-ink);font-weight:800}
.rd-st.todo .lab{fill:var(--ink3)}
.rd-flag rect{fill:var(--g700)}.rd-flag text{fill:#fff;font-size:11px;font-weight:800}
html[data-theme="dark"] .rd-flag rect{fill:var(--accent)}html[data-theme="dark"] .rd-flag text{fill:var(--accent-ink)}
/* REV3 L6 — dark mode: the gold "waiting" halo was the card's own tone; a translucent gold ring and the brighter gold label */
html[data-theme="dark"] .rd-st.wait .halo{fill:rgba(216,169,79,.26)}
html[data-theme="dark"] .rd-st.wait .lab{fill:#f6dc9c}
.rd-tree{opacity:.55}.rd-tree .trunk{stroke:#6b4e2e;stroke-width:3}.rd-tree .crown{fill:#9ccaa9}
.rd-hit{position:absolute;width:7.5%;min-width:44px;height:58px;padding:0;transform:translate(-50%,-26px);background:transparent;border:0;border-radius:14px;cursor:pointer;color:inherit}
.road.s .rd-hit{width:18%;height:56px;transform:translate(-50%,-24px)}
.rd-hit:focus-visible{box-shadow:none}   /* REV3 L6: the opaque focus halo covered the step's label */
.rd-hit:hover{background:rgba(31,90,53,.06)}
html[data-theme="dark"] .rd-hit:hover{background:rgba(155,217,176,.08)}
.rd-line{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink2)}
.rd-line .gd{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
.rd-line b{color:var(--ink)}
/* Home */
.home-grid>.dyk{align-self:stretch}
@media (max-width:899px){
  .lotcard{padding:12px 14px;gap:12px}
  .lotcard .art{width:44px;height:44px;border-radius:13px}
  .lotcard .art svg{width:28px;height:36px}
  .lotcard .bar{max-width:170px;height:5px;margin:6px 0 4px}
}
/* My Lots: the lot's next step in one gold line; facts folded under Details */
.lot .meta .nextline{font-size:.8rem;color:var(--gold-ink);font-weight:700;margin-top:3px}
details.facts{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
details.facts>summary,details.earlier>summary{cursor:pointer;list-style:none;font-size:.92rem;min-height:28px}
details.facts>summary::-webkit-details-marker,details.earlier>summary::-webkit-details-marker{display:none}
details.facts>summary .bold,details.earlier>summary .bold{color:var(--accent-text)}
details.facts>summary .bold::after{content:" ▾"}
details.facts[open]>summary .bold::after{content:" ▴"}
details.facts>.kv{margin-top:10px}
details.earlier{padding:2px 14px 6px}
details.earlier>summary .bold::after{content:" ▸"}
details.earlier[open]>summary .bold::after{content:" ▾"}
details.earlier[open]>.stack{margin-top:8px}
.growth .st .when{display:block;font-weight:600}
@media (max-width:899px){.growth .st .when{display:none}}
/* Care Passbook: money boxes with a border; the one help line */
.sumgrid.boxed>div{background:var(--card);border:1px solid var(--line)}
.sumgrid.boxed>div>div{background:transparent}
.stuck{display:flex;gap:10px;align-items:flex-start;padding:12px 14px}
.stuck .q{font-size:1.1rem;font-weight:800;color:var(--accent-text);line-height:1.3}
.stuck a{color:inherit}
/* Profile (phone): the More from NKAF list */
.list-card button.item{width:100%;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;cursor:pointer;text-align:left}
.list-card button.item:last-child{border-bottom:0}
.list-card .item .chev{width:18px;height:18px;color:var(--ink3);flex:none}
/* Sign-in: the round logo is the hero; the plantation picture is a soft, faded page background */
.signin-page{background:linear-gradient(180deg,var(--veil1),var(--veil2) 60%,var(--veil3)),url('../assets/img/welcome-hero-sm.jpg') center top/auto 760px no-repeat,var(--bg)}
.signin-hero,html[data-theme="dark"] .signin-hero{background:none;align-items:center;text-align:center}
.signin-hero picture{display:block}
.signin-hero img.logo{position:static;display:block;margin:0 auto 6px;width:132px;height:132px;border-radius:50%;box-shadow:0 10px 30px rgba(18,51,31,.22);border:4px solid #fff;background:#fff}
@media (min-width:900px){
  .signin-page{background:linear-gradient(180deg,var(--veil1),var(--veil2) 60%,var(--veil3)),url('../assets/img/welcome-hero.jpg') center top/cover no-repeat fixed,var(--bg)}
  .signin-page .signin-hero{align-items:center;text-align:center}
  .signin-page .signin-hero img.logo{width:176px;height:176px;margin:0 auto 6px}
}
@media (max-width:599px){.jhead{gap:8px}.jhead>.row{gap:8px!important}.jhead h2{font-size:1.15rem}.jhead .jpct{padding:3px 10px}}
/* 1.4.2 re-issue 1: the plantation card's lot buttons (open · paused red · limited amber) */
.plant-card{flex-wrap:wrap}
.plant-card .plant-top{flex-basis:100%;margin-bottom:8px}
.plant-lots button[aria-pressed="true"]{background:var(--g600);color:#fff;border-color:var(--g600)}
.plant-lots button.off-r{color:var(--red);border-color:var(--red);background:var(--red50)}
.plant-lots button.off-a{color:var(--amber);border-color:var(--amber);background:var(--amber50)}
.plant-lots button svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}