/* ============================================================
   KicauLog design system — the ONLY place colors, type, radius
   and spacing are defined. Other CSS files use these variables.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap;src:url('./assets/fonts/bricolage-grotesque-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;font-display:swap;src:url('./assets/fonts/bricolage-grotesque-800.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;src:url('./assets/fonts/instrument-sans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:swap;src:url('./assets/fonts/instrument-sans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;src:url('./assets/fonts/instrument-sans-600.woff2') format('woff2')}
:root{
  /* color */
  --kl-bg:#F6F3EA; --kl-card:#FFFFFF; --kl-green:#17402F; --kl-green-dark:#0F3023;
  --kl-amber:#E0A526; --kl-amber-text:#7A5600; --kl-ink:#14221B;
  --kl-muted:#4F5F55; --kl-muted-2:#3F4F46;
  --kl-green-light:#E3EDE2; --kl-amber-light:#FFF6DF; --kl-border:#E4DECB; --kl-sand:#EDE8D8;
  --kl-neg:#9A4416; --kl-focus:#E0A526;
  /* daily-care screens (Hari Ini, Catat pakan, Catat rawatan) */
  --kl-heat-0:#EDE8D8; --kl-heat-1:#CFE0D5; --kl-heat-2:#6FA386; --kl-heat-3:#17402F;
  --kl-dark:#0F2A1F; --kl-dark-soft:#A9C2B4;
  --kl-done-bg:#F2F6F1; --kl-open-bg:#FBF9F3; --kl-dashed:#B9B29C; --kl-banner-bg:#CFE0D5; --kl-divider:#EFEADB; --kl-warn:#B4541E;
  --kl-chart-green:#2F8F5B; --kl-chart-amber:#D8A01E; --kl-chart-clay:#C25A2A; --kl-chart-blue:#4A7FC1;
  /* type */
  --kl-font-head:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --kl-font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kl-text-xs:12px; --kl-text-sm:14px; --kl-text-md:16px; --kl-text-lg:18px; --kl-text-xl:24px; --kl-text-2xl:32px; --kl-text-hari-h:17px;
  /* radius */
  --kl-radius-sm:12px; --kl-radius:20px; --kl-radius-lg:24px; --kl-radius-xl:28px; --kl-radius-pill:999px;
  /* spacing (4px scale) */
  --kl-space-1:4px; --kl-space-2:8px; --kl-space-3:12px; --kl-space-4:16px; --kl-space-5:20px; --kl-space-6:24px; --kl-space-8:32px; --kl-space-10:40px;
  --kl-tap:48px; --kl-tap-hari-h:56px;
  --kl-shadow:0 10px 30px rgba(23,64,47,.08);
  --kl-sidebar-w:264px;
  /* legacy names used by older CSS, now resolved to the tokens above */
  --ink:var(--kl-ink); --forest:var(--kl-green); --forest2:var(--kl-green-dark); --cream:var(--kl-bg); --paper:var(--kl-card);
  --tint:var(--kl-sand); --line:var(--kl-border); --muted:var(--kl-muted); --soft:var(--kl-chart-green);
  --yellow:var(--kl-amber); --yellow2:var(--kl-amber-light); --rose:#FAECE6; --red:var(--kl-neg);
  --shadow:var(--kl-shadow); --radius:var(--kl-radius); --tap:var(--kl-tap);
}
body{font-family:var(--kl-font-body);background:var(--kl-bg);color:var(--kl-ink)}
h1,h2,h3,.eyebrow,.kl-brand{font-family:var(--kl-font-head)}
h1,h2,h3{font-weight:800}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--kl-focus);outline-offset:3px}

/* One logo lockup everywhere: icon + "KicauLog" with a 6px gap. The trimmed icon is not square, so only height is set. */
.kl-brand,.public-site .public-brand,.auth-page .market-brand,.marketing .market-brand{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--kl-green);font-weight:800;letter-spacing:-.02em}
.kl-brand img,.public-site .public-brand img,.auth-page .market-brand img,.marketing .market-brand img{display:block;flex:none;height:34px;width:auto;margin:0}
.public-site .public-brand img{height:40px}
.install-guide-logo{height:38px;width:auto}

.local-plan-status{align-items:flex-start;background:#eff5ea;border:1px solid #d6e5d6;border-radius:16px;display:flex;gap:12px;margin:0 0 20px;padding:15px 18px;color:#1b4937}
.local-plan-status .local-plan-dot{background:#e9bc3f;border:4px solid var(--kl-card);border-radius:50%;box-shadow:0 0 0 1px #d4c17a;flex:none;height:12px;margin-top:2px;width:12px}
.local-plan-status b{font-size:14px}.local-plan-status p{color:#60756a;font-size:12px;line-height:1.5;margin:4px 0 0}
.sandbox-checkout{background:var(--kl-bg);box-sizing:border-box;color:var(--kl-green);font-family:inherit;min-height:100vh;padding:0 28px 70px}
.sandbox-checkout-nav{align-items:center;border-bottom:1px solid var(--kl-border);display:flex;justify-content:space-between;margin:auto;max-width:1100px;padding:18px 0}
.sandbox-checkout-nav>a:last-child{color:#536e5c;font-size:13px;font-weight:700;text-decoration:none}
.sandbox-checkout-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);margin:50px auto 0;max-width:1100px}
.sandbox-checkout-main,.sandbox-checkout-summary{background:var(--kl-card);border:1px solid #e2e9de;border-radius:26px;box-shadow:0 12px 40px #153f3310;padding:34px}
.sandbox-checkout-main h1{font-size:clamp(30px,4vw,49px);letter-spacing:-.02em;line-height:1.12;margin:10px 0 12px}
.sandbox-checkout-main>p:not(.eyebrow){color:#66796c;font-size:15px;line-height:1.6;max-width:580px}
.sandbox-choice-list{display:grid;gap:10px;margin:28px 0}
.sandbox-choice-list button{align-items:center;background:var(--kl-card);border:1px solid #dae4d9;border-radius:14px;color:#1a4333;cursor:pointer;display:flex;justify-content:space-between;padding:15px 18px;text-align:left}
.sandbox-choice-list button.selected{background:#fff7d8;border-color:#dabb4a;box-shadow:0 0 0 2px #efd87255}
.sandbox-choice-list button span{display:grid;gap:3px}.sandbox-choice-list button b{font-size:15px}.sandbox-choice-list button small{color:#738478;font-size:11px}.sandbox-choice-list button strong{font-size:18px;white-space:nowrap}
.sandbox-gateway{background:#f2f6ed;border:1px solid #dce8da;border-radius:16px;padding:19px}
.sandbox-gateway>div{align-items:center;display:flex;gap:12px}.sandbox-gateway>div>div{display:grid;gap:4px}.sandbox-gateway b{font-size:15px}.sandbox-gateway small{color:#65786b;font-size:11px;line-height:1.45}
.sandbox-gateway-mark{align-items:center;background:#1d553e;border-radius:11px;color:#f4dc6b;display:flex;flex:none;font-size:25px;font-weight:900;height:42px;justify-content:center;width:42px}
.sandbox-gateway p{color:#5f7566;font-size:12px;line-height:1.55;margin:17px 0 12px}.sandbox-gateway .btn{border:0;cursor:pointer;width:100%}.sandbox-gateway .btn:disabled{cursor:not-allowed;opacity:.55}
.sandbox-demo-link{color:#1b513b;display:inline-block;font-size:12px;font-weight:800;margin-top:14px;text-decoration:none}
.sandbox-checkout-summary{align-self:start;background:var(--kl-green);color:var(--kl-card)}.sandbox-checkout-summary .eyebrow{color:#edce5f}.sandbox-checkout-summary h2{font-size:31px;margin:12px 0 30px}.sandbox-total{border-bottom:1px solid #ffffff36;border-top:1px solid #ffffff36;display:grid;gap:8px;padding:20px 0}.sandbox-total span{color:#cadacf;font-size:12px}.sandbox-total strong{font-size:34px}.sandbox-checkout-summary>p:not(.eyebrow){color:#d1dfd3;font-size:12px;line-height:1.65}.sandbox-access{background:#ffffff16;border-radius:13px;display:grid;gap:6px;margin-top:24px;padding:15px}.sandbox-access b{font-size:12px}.sandbox-access span{color:#d9e4da;font-size:11px;line-height:1.5}
@media(max-width:760px){.sandbox-checkout{padding:0 16px 40px}.sandbox-checkout-grid{gap:16px;grid-template-columns:1fr;margin-top:20px}.sandbox-checkout-main,.sandbox-checkout-summary{padding:23px}.sandbox-choice-list button strong{font-size:15px}}

/* Illustrated daily actions share a compact, responsive card layout. */
.workspace .daily-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.workspace .daily-action-card { position:relative; min-width:0; padding:18px 14px 12px; border-radius:20px; background:#fff1bf; display:flex; flex-direction:column; overflow:hidden; color:var(--kl-green); }
.workspace .daily-action-card.action-care { background:#e0f0fa; }
.workspace .daily-action-card.action-sound { background:#e9e4fc; }
.workspace .daily-action-heading h3 { margin:0 0 5px; font-size:17px; line-height:1.2; letter-spacing:-.02em; }
.workspace .daily-action-heading > span { font-size:10px; color:#526355; }
.workspace .daily-action-card > img { display:block; width:100%; height:118px; object-fit:contain; margin:8px auto 2px; transition:transform .2s ease; }
.workspace .daily-action-card > p { font-size:11px; line-height:1.5; margin:0 0 14px; color:#526355; }
.workspace .daily-action-primary { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding:10px; background:#fffdf5d9; border-radius:10px; text-decoration:none; color:var(--kl-green); font-size:11px; font-weight:800; }
.workspace .daily-action-primary span { font-size:17px; }
.workspace .daily-action-history { border:0; background:transparent; padding:10px 0 0; color:#45594d; font:inherit; font-size:10px; cursor:pointer; text-align:left; }
.workspace .daily-action-quick,.workspace .daily-action-presets button { border:1px solid #cfdeba; background:#ffffffb3; border-radius:10px; padding:9px; color:#1b4635; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.workspace .daily-action-quick { margin-top:6px; text-align:left; }
.workspace .daily-action-presets { display:flex; gap:5px; margin-top:6px; }
.workspace .daily-action-presets button { flex:1; }
.workspace .today-share-bar,.workspace .backup-reminder,.workspace .profile-routine-bar { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:10px 15px; border-radius:14px; background:#edf5eb; color:#365747; font-size:11px; }
.workspace .today-share-bar button,.workspace .backup-reminder button { border:0; padding:8px; background:transparent; color:#1a543c; font:inherit; font-weight:800; cursor:pointer; }
.workspace .profile-routine-bar { margin-top:16px; padding:15px; }
.workspace .profile-routine-bar > div { display:grid; gap:3px; margin-right:auto; }
.workspace .profile-routine-bar small { color:#758273; }
.workspace .profile-daily-actions,.workspace .profile-trends { margin:20px 0; }
.workspace .profile-trend-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.workspace .profile-trend-grid > div { min-width:0; display:grid; gap:10px; border:1px solid #e0e9df; background:#f9fbf5; border-radius:14px; padding:15px; }
.workspace .profile-trend-grid small { font-size:10px; font-weight:900; letter-spacing:.08em; color:#6d826d; }
.workspace .profile-trend-grid svg { width:100%; height:80px; }
.workspace .profile-trend-grid span { font-size:11px; color:#778874; }
.workspace.santai .profile-event-card,.workspace.santai .profile-cost-card,.workspace.santai .profile-detail-metric,.workspace.santai .next-event-card,.workspace.santai .tidy-prep,.workspace.santai .collection-pocket { display:none; }
.workspace .entry-actor { display:inline-flex; margin-left:8px; font-size:10px; color:#637c6d; }
.undo-toast { position:fixed; z-index:9999; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:calc(100vw - 30px); padding:11px 16px; background:#153f32; color:white; border-radius:14px; box-shadow:0 12px 35px #153f3244; font:600 12px/1.4 system-ui,sans-serif; }
.undo-toast button { border:0; background:#f4d96a; color:#173d31; border-radius:7px; padding:8px 10px; cursor:pointer; font:inherit; }
.undo-toast button:last-child { background:#ffffff23; color:white; }
.onboarding-page .auth-panel { max-width:580px; }
.onboarding-page .onboarding-modes { display:flex; flex-wrap:wrap; gap:10px; border:0; margin:0 0 18px; padding:0; }
.onboarding-page .onboarding-modes legend { margin-bottom:8px; font-weight:800; }
.onboarding-page .onboarding-modes label { flex:1; min-width:145px; border:1px solid #d6dfd1; border-radius:12px; padding:13px; background:#f7faf3; }
.onboarding-page #first-name-count { float:right; color:#71836b; font-size:12px; }
.event-day { min-height:100vh; background:var(--kl-green); color:#fffdf2; padding:20px; box-sizing:border-box; font-family:inherit; }
.event-day > header { max-width:900px; margin:auto; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff45; padding-bottom:18px; }
.event-day a { color:inherit; }
.event-day > section { max-width:900px; margin:42px auto; }
.event-day h1 { font-size:clamp(36px,7vw,76px); line-height:1.12; margin:10px 0 34px; overflow-wrap:anywhere; }
.event-day h2 { margin:28px 0 18px; }
.event-day-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.event-day-facts > div { display:grid; gap:8px; background:#ffffff15; border:1px solid #ffffff30; border-radius:16px; padding:16px; }
.event-day-facts small { color:#efda87; font-size:10px; letter-spacing:.1em; font-weight:900; }
.event-day-facts b { font-size:clamp(16px,2.5vw,24px); overflow-wrap:anywhere; }
.event-day-check { display:flex; align-items:center; gap:12px; margin-bottom:10px; padding:15px; border:1px solid #ffffff3b; border-radius:13px; background:#ffffff0d; font-size:16px; }
.event-day-check input { width:22px; height:22px; accent-color:#f4d96a; }
.event-day-actions { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0; }
.event-day .btn.quiet { color:var(--kl-card); border-color:#ffffff88; }
.workspace .daily-more-actions { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; }
.workspace .daily-more-actions a { color:#456850; font-size:11px; font-weight:700; text-decoration:none; padding:4px 0; }
.workspace .daily-action-card a:focus-visible,.workspace .daily-action-card button:focus-visible { outline:3px solid #35644c; outline-offset:3px; }
.workspace .entry-controls { display:flex; flex-direction:column; gap:12px; align-items:flex-end; flex-shrink:0; }
.workspace .entry-controls > div { display:flex; gap:12px; }
.workspace .entry-controls button { border:0; background:transparent; color:#526c5c; font:inherit; font-size:11px; cursor:pointer; padding:6px 0; }
.workspace .event-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.workspace .tool-list li { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.workspace .tool-list li > b { flex:1; overflow-wrap:anywhere; min-width:120px; }
.flow-dialog { width:min(520px,calc(100vw - 32px)); max-height:85vh; box-sizing:border-box; overflow:auto; border:1px solid #dce5d8; border-radius:24px; padding:24px; background:var(--kl-card); color:var(--kl-green); box-shadow:0 24px 80px #123e3333; }
.flow-dialog::backdrop { background:#133d3166; backdrop-filter:blur(4px); }
.flow-dialog header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; }
.flow-dialog header h2 { font-size:23px; margin:0; overflow-wrap:anywhere; }
.flow-dialog header button { border:0; background:transparent; color:var(--kl-green); font-size:28px; cursor:pointer; }
.flow-dialog .field { margin-bottom:14px; }
.flow-dialog .field label { display:block; font-size:13px; margin-bottom:7px; }
.flow-dialog input,.flow-dialog textarea { width:100%; box-sizing:border-box; padding:12px; border:1px solid #cbd8cd; border-radius:10px; background:white; color:var(--kl-green); font:inherit; }
.flow-dialog textarea { min-height:110px; }
.flow-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.flow-dialog p { line-height:1.6; }
.flow-dialog .restore-option { display:block; padding:10px 0; font-size:13px; }
.flow-dialog .restore-option input { width:auto; margin-right:6px; accent-color:#194b38; }

.quick-log-dialog nav { display:grid; gap:8px; }
.quick-log-dialog nav a { display:flex; align-items:center; justify-content:space-between; border-radius:12px; padding:14px 15px; background:#edf3e9; color:#234b35; font-weight:800; text-decoration:none; }
.workspace .routine-hint { margin:0 0 16px; padding:10px 12px; border-radius:10px; background:#f0f5e7; color:#375b43; font-size:12px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .workspace .daily-action-card:hover > img { transform:translateY(-4px) rotate(-3deg); } }
@media(max-width:700px) {


  .workspace .content:has(.bird-dashboard-heading) { display:flex; flex-direction:column; }
  .workspace .content:has(.bird-dashboard-heading) > .bird-dashboard-heading { order:0; }
  .workspace .content:has(.bird-dashboard-heading) > .tidy-switcher { order:1; }
  .workspace .content:has(.bird-dashboard-heading) > .today-share-bar { order:3; }
  .workspace .content:has(.bird-dashboard-heading) > .tidy-main-grid { order:2; }
  .workspace .content:has(.bird-dashboard-heading) > .tidy-feature { order:4; }
  .workspace .content:has(.bird-dashboard-heading) > .tidy-insight-grid { order:5; }
  .workspace .content:has(.bird-dashboard-heading) > .tidy-recent { order:6; }
  .workspace .content:has(.bird-dashboard-heading) > .collection-pocket { order:7; }
  .workspace .daily-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .workspace .daily-action-card { padding:10px 7px 8px; border-radius:12px; }
  .workspace .daily-action-card > img { height:66px; margin:2px auto; }
  .workspace .daily-action-heading h3 { font-size:12px; }
  .workspace .daily-action-heading > span { font-size:8px; }
  .workspace .daily-action-card > p { display:none; }
  .workspace .daily-action-primary { font-size:9px; padding:7px 5px; }
  .workspace .daily-action-history,.workspace .daily-action-quick,.workspace .daily-action-presets button { font-size:8px; }
  .workspace .daily-action-presets { flex-wrap:wrap; }
  .workspace .daily-action-presets button { min-width:40px; }
  .workspace .tidy-main-grid .tidy-prep { display:none; }
  .workspace .bird-dashboard-heading { margin-bottom:12px; }
  .workspace .bird-dashboard-heading h1 { font-size:clamp(22px,6vw,30px); }
  .workspace .tidy-switcher { margin-bottom:12px; }
  .workspace .tidy-routine { padding:16px; }
  .workspace .profile-trend-grid,.event-day-facts { grid-template-columns:1fr; }
  .workspace .entry { flex-wrap:wrap; }
  .workspace .entry-controls { width:100%; flex-direction:row; justify-content:space-between; align-items:center; }
}
@media(max-width:360px) { .workspace .daily-action-grid { gap:8px; } .workspace .daily-action-card { padding:14px 10px 10px; } .workspace .daily-action-card:first-child { grid-template-columns:1fr 100px; } .workspace .daily-action-heading h3 { font-size:15px; } }

/* Pricing uses the same cards on the public site and in the workspace. */
.selling-pricing { background: #edf1e7; }
.selling-pricing-heading { max-width: 1110px; margin: 0 auto 38px; }
.selling-pricing-heading h2 { font-size: clamp(34px,4vw,52px); letter-spacing:-.02em; line-height:1.12; margin: 14px 0 18px; color: #183f30; }
.selling-pricing-heading > p:last-child { font-size: 15px; line-height: 1.65; color: #65755f; max-width: 550px; }
.selling-plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; max-width: 1110px; margin: auto; align-items: stretch; }
.selling-plan { display: flex; flex-direction: column; min-width: 0; padding: 24px 20px; border: 1px solid #d8e1d1; border-radius: 22px; background: var(--kl-card); color: #224333; box-shadow: 0 6px 18px #27452e06; }
.selling-plan-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-bottom: 20px; }
.selling-plan-label > span { font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.selling-plan-label > b { border-radius: 20px; padding: 6px 9px; background: #e3edd8; color: #365833; font-size: 8px; letter-spacing: .02em; }
.selling-plan h3 { font-size: 23px; line-height: 1.15; letter-spacing:-.02em; margin: 0; min-height: 80px; }
.selling-plan-description { font-size: 11px; line-height: 1.6; color: #74806c; min-height: 36px; margin: 8px 0 24px; }
.selling-plan-price { margin-bottom: 18px; }
.selling-plan-price del,.selling-price-spacer { display: block; height: 20px; font-size: 12px; color: #7d8b73; margin-bottom: 4px; }
.selling-plan-price > div { display: flex; flex-direction: column; gap: 6px; }
.selling-plan-price strong { font-size: clamp(25px,2.5vw,34px); letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.selling-plan-price > div > span { font-size: 11px; color: #738169; }
.selling-plan-value { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #f0f4e9; min-height: 64px; box-sizing: border-box; }
.selling-plan-value b { font-size: 12px; }
.selling-plan-value small { font-size: 9px; line-height: 1.5; color: #738169; }
.selling-plan-capacity { display: flex; align-items: center; gap: 9px; padding-top: 22px; margin-top: 22px; border-top: 1px solid #e2e8da; }
.selling-plan-capacity svg { width: 19px; height: 19px; flex-shrink: 0; }
.selling-plan-capacity b { font-size: 13px; }
.selling-plan ul { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 12px; }
.selling-plan li { display: flex; align-items: baseline; gap: 8px; font-size: 11px; line-height: 1.5; color: #617257; }
.selling-plan li > span { color: #6d8955; }
.selling-plan-cta { margin-top: auto; padding: 13px 14px; border: 1px solid #c5d2ba; border-radius: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #2b5037; text-decoration: none; font-size: 12px; font-weight: 800; transition: background .2s, box-shadow .2s; }
.selling-plan-yearly { border-color: #a7bd8b; }
.selling-plan-yearly .selling-plan-cta { background: #e5eecf; border-color: #d7e3bf; }
.selling-plan-lifetime { background: #173f30; color: #fffdf4; border-color: #173f30; box-shadow: 0 12px 32px #173f3020; }
.selling-plan-lifetime .selling-plan-label > b { background: #efd36a; color: #24472e; }
.selling-plan-lifetime .selling-plan-description,.selling-plan-lifetime .selling-plan-price del,.selling-plan-lifetime .selling-plan-price > div > span,.selling-plan-lifetime li { color: #cfddc9; }
.selling-plan-lifetime .selling-plan-value { background: #2c513c; }
.selling-plan-lifetime .selling-plan-value b,.selling-plan-lifetime li > span { color: #f0d775; }
.selling-plan-lifetime .selling-plan-value small { color: #ccd9c4; }
.selling-plan-lifetime .selling-plan-capacity { border-color: #44634c; }
.selling-plan-lifetime .selling-plan-cta { background: #efd36a; border-color: #efd36a; color: #213f2e; }
.selling-pricing-footnote { max-width: 1110px; margin: 22px auto 0; display: grid; gap: 4px; font-size: 10px; line-height: 1.5; color: #78836f; }
.workspace .selling-pricing { padding: 24px 0; background: transparent; }
@media(hover:hover) { .selling-plan-cta:hover { box-shadow: 0 4px 12px #173f3020; background: #dbe8c3; } .selling-plan-lifetime .selling-plan-cta:hover { background: #ffe390; } }
.selling-plan-cta:focus-visible { outline: 3px solid #b18e28; outline-offset: 4px; }
@media(max-width:1100px) { .selling-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .selling-plan h3 { min-height: 54px; } .selling-plan-price strong { font-size: 34px; } }
@media(max-width:560px) { .selling-plan-grid { grid-template-columns: 1fr; } .selling-plan { padding: 24px; } .selling-plan h3,.selling-plan-description { min-height: 0; } .selling-price-spacer { display:none; } }
.bird-name-counter { display:block; margin-top:6px; text-align:right; color:#71816e; font-size:11px; font-variant-numeric:tabular-nums; }
.workspace .bird-feature-copy,.workspace .profile-detail-copy { min-width:0; }
.workspace .bird-feature-copy h2,.workspace .profile-detail-copy h1,.workspace .collection-card h2,.workspace .title-row h1 { overflow-wrap:anywhere; }
.workspace .bird-feature-copy h2,.workspace .profile-detail-copy h1 { font-size:clamp(24px,3.5vw,36px); line-height:1.15; }
.workspace .tidy-switcher .bird-orb-row .bird-orb,
.workspace .tidy-switcher .bird-orb-row .add-bird-compact { height:110px; min-height:110px; justify-content:center; }
.workspace .tidy-switcher .bird-orb-row .bird-orb b { white-space:normal; overflow-wrap:anywhere; font-size:11px; line-height:1.2; }
.workspace .tidy-switcher .bird-orb-row .bird-orb small { margin-top:0; }

/* Three ascending stages of the owner's journey. */
.journey-showcase { border-top: 1px solid #e2e6da; }
.journey-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.journey-heading h2 { margin-bottom: 0; }
.journey-heading > p { color: #68786a; font-size: 14px; line-height: 1.7; margin: 0; max-width: 340px; }
.journey-stairs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 18px; margin-top: 40px; }
.journey-step { position: relative; padding: 26px; border-radius: 22px; border: 1px solid #dce4d5; background: #edf2e5; min-width: 0; }
.journey-first { margin-top: 100px; }
.journey-second { margin-top: 50px; background: #fff3ca; border-color: #e8d89c; }
.journey-third { background: #194b38; border-color: #194b38; color: #fffdf4; }
.journey-number { display: block; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: #7a8d67; margin-bottom: 24px; }
.journey-third .journey-number { color: #efd36f; }
.journey-step h3 { font-size: 25px; line-height: 1.15; letter-spacing:-.02em; margin: 24px 0 12px; }
.journey-step > p { color: #657560; font-size: 12px; line-height: 1.7; margin: 0 0 24px; }
.journey-third > p { color: #d0dfce; }
.journey-step-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid #d3ddc7; padding-top: 16px; font-size: 10px; font-weight: 800; }
.journey-step-foot > span { font-size: 22px; }
.journey-third .journey-step-foot { border-color: #52745c; color: #f0d570; }
.journey-mini-bird,.journey-mini-event { display: flex; align-items: center; gap: 12px; min-height: 85px; }
.journey-mini-bird img { width: 62px; height: 62px; border: 4px solid #fffdf4; border-radius: 18px; object-fit: cover; object-position: 50% 30%; }
.journey-mini-bird > div,.journey-mini-event > div { display: grid; gap: 5px; }
.journey-mini-bird b { font-size: 18px; }
.journey-mini-bird small { color: #708065; font-size: 9px; }
.journey-mini-log { display: grid; gap: 6px; min-height: 85px; }
.journey-mini-log > span { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; }
.journey-mini-log i { display: grid; place-items: center; width: 22px; height: 22px; background: var(--kl-card); border-radius: 7px; font-style: normal; color: #547044; }
.journey-mini-event svg { width: 48px; height: 48px; color: #efd36f; flex-shrink: 0; }
.journey-mini-event small { font-size: 8px; letter-spacing: .06em; color: #c6d8bd; }
.journey-mini-event b { font-size: 15px; }
.journey-finish { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #dde4d6; }
.journey-finish p { display: grid; gap: 6px; margin: 0; }
.journey-finish b { font-size: 15px; }
.journey-finish p span { color: #71816b; font-size: 11px; }
@media(max-width:820px) {
  .journey-heading { grid-template-columns: 1fr; gap: 16px; }
  .journey-heading > p { max-width: 520px; }
  .journey-stairs { grid-template-columns: 1fr; gap: 18px; border-left: 2px dashed #c9d5bc; padding-left: 16px; }
  .journey-first,.journey-second,.journey-third { margin-top: 0; }
  .journey-second { margin-left: 12px; }
  .journey-third { margin-left: 24px; }
  .journey-finish { align-items: flex-start; flex-direction: column; }
}

/* Shared sizing and spacing for the KicauLog workspace. Keep responsive
   component adjustments here instead of appending one-off fixes. */
.workspace {
  --ui-space-1: 8px;
  --ui-space-2: 12px;
  --ui-space-3: 16px;
  --ui-space-4: 24px;
  --ui-card-radius: 20px;
  --ui-border: #e3e9df;
  --ui-surface: var(--kl-card);
}

.workspace .tidy-switcher {
  margin-bottom: var(--ui-space-2);
}

.workspace .switcher-heading h2 {
  font-size: 18px;
  line-height: 1.25;
}

.workspace .tidy-switcher .bird-orb-row {
  align-items: stretch;
  gap: var(--ui-space-2);
  padding: 0 2px 8px;
}

.workspace .tidy-switcher .bird-orb,
.workspace .tidy-switcher .add-bird-compact {
  box-sizing: border-box;
  flex: 0 0 92px;
  width: 92px;
  height: 112px;
  min-height: 0;
  margin: 0;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  text-align: center;
  text-decoration: none;
}

.workspace .tidy-switcher .bird-orb {
  background: var(--ui-surface);
  color: #274738;
}

.workspace .tidy-switcher .bird-orb.selected {
  background: #fffdf1;
  border-color: #e5c65e;
  box-shadow: 0 3px 10px rgba(40, 67, 43, .07);
}

.workspace .tidy-switcher .orb-photo {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  margin: 0 0 3px;
}

.workspace .tidy-switcher .bird-orb b,
.workspace .tidy-switcher .add-bird-compact b {
  width: 100%;
  font-size: 11px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.workspace .tidy-switcher .bird-orb small,
.workspace .tidy-switcher .add-bird-compact small {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #778579;
  font-size: 9px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace .tidy-switcher .add-bird-compact {
  position: relative;
  background: linear-gradient(145deg, #fff6d4, #f1f7ed);
  border-color: #e5d695;
  color: #335a43;
  box-shadow: 0 3px 10px rgba(40, 67, 43, .05);
}

.workspace .tidy-switcher .add-bird-compact > span {
  box-sizing: border-box;
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  margin: 0 0 3px;
  display: grid;
  place-items: center;
  border: 3px solid var(--kl-card);
  border-radius: 50%;
  background: var(--kl-amber);
  color: #315840;
  font-size: 27px;
  line-height: 1;
}

.workspace .tidy-switcher .add-bird-compact > i {
  position: absolute;
  top: 8px;
  right: 9px;
  color: #bc9533;
  font-size: 10px;
  font-style: normal;
}

.workspace .bird-feature.tidy-feature {
  justify-items: stretch;
  text-align: left;
  margin-bottom: var(--ui-space-4);
}

.workspace .bird-feature.tidy-feature .bird-feature-main {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: left;
}

.workspace .bird-feature.tidy-feature .bird-feature-main > .eyebrow,
.workspace .bird-feature.tidy-feature .bird-feature-copy {
  margin-left: 0;
  text-align: left;
}

.workspace .bird-feature.tidy-feature .bird-feature-identity {
  justify-content: flex-start;
}

.workspace .bird-feature.tidy-feature .bird-feature-progress {
  grid-column: 2;
  grid-row: 1;
}

.workspace .tidy-main-grid,
.workspace .tidy-insight-grid {
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.workspace .tidy-main-grid .overview-card,
.workspace .tidy-insight-grid .overview-card,
.workspace .collection-pocket,
.workspace .collection-manager,
.workspace .profile-extra-card {
  box-sizing: border-box;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
}

.workspace .tidy-main-grid .overview-card,
.workspace .tidy-insight-grid .overview-card,
.workspace .profile-extra-card {
  padding: var(--ui-space-4);
}

.workspace .tidy-main-grid .overview-card-head h2,
.workspace .tidy-insight-grid .overview-card-head h2,
.workspace .profile-extra-card h2 {
  font-size: 17px;
  line-height: 1.3;
}

.workspace .tidy-routine-row {
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) 0;
}

.workspace .routine-copy b {
  font-size: 13px;
}

.workspace .routine-copy small,
.workspace .routine-action {
  font-size: 11px;
  line-height: 1.3;
}

.workspace .tidy-prep {
  display: flex;
  flex-direction: column;
}

.workspace .tidy-prep .tidy-next-step {
  margin: var(--ui-space-4) 0 var(--ui-space-2);
  padding: 4px 0 4px var(--ui-space-2);
}

.workspace .tidy-prep .tidy-next-step b {
  font-size: 14px;
  line-height: 1.4;
}

.workspace .tidy-prep .tidy-footnote {
  font-size: 10px;
  line-height: 1.5;
}

.workspace .tidy-prep > .btn {
  align-self: flex-start;
  margin-top: auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  font-size: 11px;
}

.workspace .guided-empty {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface);
}

.workspace .guided-empty > span {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1bc;
  color: #39634a;
  font-size: 24px;
}

.workspace .guided-empty > div {
  flex: 1;
  min-width: 0;
}

.workspace .guided-empty b {
  color: #244734;
  font-size: 13px;
}

.workspace .guided-empty p {
  margin: 4px 0 0;
  color: #718074;
  font-size: 11px;
  line-height: 1.45;
}

.workspace .guided-empty .btn {
  flex: 0 0 auto;
  margin: 0;
}

.workspace .guided-empty.compact {
  padding: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

.workspace .profile-caregivers-card form {
  margin-top: var(--ui-space-3);
}

.workspace .profile-caregivers-card > small {
  display: block;
  margin-top: var(--ui-space-2);
  color: #79877b;
  font-size: 10px;
  line-height: 1.45;
}

.workspace .pocket-empty a {
  color: #255a3d;
  font-weight: 800;
  text-decoration: none;
}

.workspace .collection-dashboard {
  display: grid;
  gap: var(--ui-space-3);
  margin: var(--ui-space-3) 0 var(--ui-space-4);
}

.workspace .collection-dashboard .collection-manager {
  margin: 0;
  padding: 20px 24px;
  background: var(--ui-surface);
}

.workspace .collection-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.workspace .collection-manager-head .eyebrow {
  margin: 0 0 4px;
  color: #849185;
  font-size: 9px;
}

.workspace .collection-manager-head h2 {
  margin: 0;
  color: #214a37;
  font-size: 18px;
  line-height: 1.25;
}

.workspace .collection-manager-head .btn {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
}

.workspace .collection-manager-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
}

.workspace .collection-manager-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: var(--ui-space-3);
  border-left: 1px solid var(--ui-border);
}

.workspace .collection-manager-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.workspace .collection-manager-stats small {
  color: #819083;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.workspace .collection-manager-stats b {
  color: #214a37;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.workspace .collection-manager-stats span {
  color: #7c897d;
  font-size: 10px;
  line-height: 1.3;
}

.workspace .collection-manager-tip {
  display: inline-block;
  margin-top: var(--ui-space-3);
  color: #3e684b;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.workspace .collection-manager-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3);
}

.workspace .collection-action-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  column-gap: var(--ui-space-2);
  row-gap: var(--ui-space-2);
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface);
}

.workspace .collection-action-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eaf2e8;
  color: #386448;
  font-size: 19px;
}

.workspace .collection-action-card .eyebrow {
  margin: 0 0 3px;
  color: #879286;
  font-size: 9px;
}

.workspace .collection-action-card h3 {
  margin: 0;
  color: #254937;
  font-size: 15px;
  line-height: 1.3;
}

.workspace .collection-action-card > p,
.workspace .collection-agenda-list,
.workspace .collection-action-link {
  grid-column: 1 / -1;
}

.workspace .collection-action-card > p {
  margin: 0;
  color: #748176;
  font-size: 11px;
  line-height: 1.45;
}

.workspace .collection-action-link {
  align-self: end;
  color: #2e6041;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.workspace .collection-agenda-list {
  display: grid;
  gap: 6px;
}

.workspace .collection-agenda-list button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 2px 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: #f2f6ef;
  color: #284b38;
  cursor: pointer;
  text-align: left;
}

.workspace .collection-agenda-list button span {
  grid-row: 1 / 3;
  align-self: center;
  color: #4c7a55;
  font-size: 10px;
  font-weight: 800;
}

.workspace .collection-agenda-list button b {
  font-size: 11px;
}

.workspace .collection-agenda-list button small {
  color: #7c897d;
  font-size: 9px;
}

.workspace .overview-card .btn,
.workspace .profile-extra-card .btn,
.workspace .collection-manager .btn {
  border-radius: 12px;
}

.public-site .price-card,
.public-site .public-faq details {
  border-radius: 20px;
}

.public-site .price-card {
  padding: 24px;
}

@media (hover: hover) {
  .workspace .bird-orb:hover,
  .workspace .add-bird-compact:hover,
  .workspace .overview-card:hover {
    transform: translateY(-2px);
  }
}

.workspace .bird-orb:focus-visible,
.workspace .add-bird-compact:focus-visible,
.workspace .btn:focus-visible {
  outline: 3px solid #efc747;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .workspace .bird-feature.tidy-feature .bird-feature-progress {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  .workspace .collection-dashboard .collection-manager {
    padding: var(--ui-space-3);
  }

  .workspace .collection-manager-head {
    align-items: flex-start;
  }

  .workspace .collection-manager-head h2 {
    font-size: 16px;
  }

  .workspace .collection-manager-head .btn {
    font-size: 9px;
    padding: 8px 10px;
  }

  .workspace .collection-manager-stats {
    gap: var(--ui-space-1);
    margin-top: var(--ui-space-3);
  }

  .workspace .collection-manager-stats > div {
    padding-left: var(--ui-space-1);
  }

  .workspace .collection-manager-stats b {
    font-size: 15px;
  }

  .workspace .collection-manager-stats small,
  .workspace .collection-manager-stats span {
    font-size: 8px;
  }

  .workspace .collection-manager-actions {
    grid-template-columns: 1fr;
    gap: var(--ui-space-2);
  }

  .workspace .collection-action-card {
    padding: var(--ui-space-3);
  }

  .workspace .tidy-switcher .bird-orb,
  .workspace .tidy-switcher .add-bird-compact {
    flex-basis: 76px;
    width: 76px;
    height: 96px;
    padding: 7px 4px;
    border-radius: 15px;
  }

  .workspace .tidy-switcher .orb-photo,
  .workspace .tidy-switcher .add-bird-compact > span {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
  }

  .workspace .tidy-switcher .bird-orb b,
  .workspace .tidy-switcher .add-bird-compact b {
    font-size: 10px;
  }

  .workspace .tidy-switcher .bird-orb small,
  .workspace .tidy-switcher .add-bird-compact small {
    display: block;
    font-size: 8px;
  }

  .workspace .bird-feature.tidy-feature {
    padding: var(--ui-space-3);
  }

  .workspace .tidy-main-grid .overview-card,
  .workspace .tidy-insight-grid .overview-card,
  .workspace .profile-extra-card {
    padding: var(--ui-space-3);
  }

  .workspace .guided-empty {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workspace .guided-empty .btn {
    margin-left: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace .bird-orb,
  .workspace .add-bird-compact {
    transition: none;
  }
}

/* Public page motion: small cues around the product story and plan choices. */
@keyframes public-photo-arrive {
  from { opacity: .65; }
  to { opacity: 1; }
}

@keyframes public-product-appear {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes public-product-float {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-7px); }
}

@keyframes public-progress-fill {
  from { width: 0; }
  to { width: 66%; }
}

@keyframes public-row-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes public-faq-answer {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

.public-site .public-top-art img {
  animation: public-photo-arrive 1.2s ease-out both;
}

.public-site .public-hero .public-product {
  animation: public-product-float 6s ease-in-out .8s infinite, public-product-appear .75s cubic-bezier(.22,1,.36,1) .12s both;
}

@media (max-width: 820px) {
  .public-site .public-hero .public-product {
    animation: public-product-appear .75s cubic-bezier(.22,1,.36,1) .12s both;
    transform: none;
  }
}

.public-site .public-product-status i span {
  animation: public-progress-fill 1.15s cubic-bezier(.22,1,.36,1) .55s both;
}

.public-site .public-product-row {
  animation: public-row-arrive .55s cubic-bezier(.22,1,.36,1) both;
}

.public-site .public-product-row:nth-of-type(4) { animation-delay: .46s; }
.public-site .public-product-row:nth-of-type(5) { animation-delay: .56s; }
.public-site .public-product-row:nth-of-type(6) { animation-delay: .66s; }

.public-site .motion-ready {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease var(--motion-delay, 0ms), transform .6s cubic-bezier(.22,1,.36,1) var(--motion-delay, 0ms);
}

.public-site .motion-ready.motion-visible {
  opacity: 1;
  transform: translateY(0);
}

.public-site .public-steps article,
.public-site .price-yearly {
  animation: none;
}

.public-site .public-faq-items details[open] p {
  animation: public-faq-answer .28s ease-out both;
}

.public-site .public-faq-items summary::after,
.public-site .public-cta span,
.public-site .price-card a span {
  display: inline-block;
  transition: transform .22s ease;
}

.public-site .public-faq-items details[open] summary::after {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .public-site .public-cta:hover span,
  .public-site .price-card a:hover span {
    transform: translateX(4px);
  }

  .public-site .public-faq-items summary:hover {
    color: #3c7450;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-site .motion-ready,
  .public-site .motion-ready.motion-visible {
    opacity: 1;
    transform: none;
  }

  .public-site .public-top-art img,
  .public-site .public-hero .public-product,
  .public-site .public-product-status i span,
  .public-site .public-product-row,
  .public-site .public-faq-items details[open] p {
    animation: none;
  }
}

/* The local file is an explicit motion preview, even when macOS Reduce Motion is on. */
@keyframes opening-nav {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opening-art {
  from { opacity: .4; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes opening-copy {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes opening-product {
  from { opacity: 0; translate: 0 38px; }
  to { opacity: 1; translate: 0 0; }
}

.public-site .public-nav {
  animation: opening-nav .65s cubic-bezier(.22,1,.36,1) both;
}

.public-site .public-top-art {
  animation: opening-art 1.25s cubic-bezier(.22,1,.36,1) .12s both;
}

.public-site .public-top-art > div {
  animation: opening-copy .8s cubic-bezier(.22,1,.36,1) .82s both;
}

.public-site .public-hero > div:first-child {
  animation: opening-copy .8s cubic-bezier(.22,1,.36,1) 1s both;
}

.public-site .public-hero .public-product {
  animation: public-product-float 6s ease-in-out 2s infinite, opening-product .85s cubic-bezier(.22,1,.36,1) 1.15s both;
}

@media (max-width: 820px) {
  .public-site .public-hero .public-product {
    animation: opening-product .85s cubic-bezier(.22,1,.36,1) 1.15s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.kicaulog-motion-on .public-site .public-nav { animation: opening-nav .65s cubic-bezier(.22,1,.36,1) both !important; }
  html.kicaulog-motion-on .public-site .public-top-art { animation: opening-art 1.25s cubic-bezier(.22,1,.36,1) .12s both !important; }
  html.kicaulog-motion-on .public-site .public-top-art > div { animation: opening-copy .8s cubic-bezier(.22,1,.36,1) .82s both !important; }
  html.kicaulog-motion-on .public-site .public-hero > div:first-child { animation: opening-copy .8s cubic-bezier(.22,1,.36,1) 1s both !important; }
  html.kicaulog-motion-on .public-site .public-hero .public-product { animation: public-product-float 6s ease-in-out 2s infinite, opening-product .85s cubic-bezier(.22,1,.36,1) 1.15s both !important; }
  html.kicaulog-motion-on .public-site .motion-ready { opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--motion-delay, 0ms), transform .6s cubic-bezier(.22,1,.36,1) var(--motion-delay, 0ms) !important; }
  html.kicaulog-motion-on .public-site .motion-ready.motion-visible { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html.kicaulog-motion-on .public-site .public-hero .public-product { animation: opening-product .85s cubic-bezier(.22,1,.36,1) 1.15s both !important; }
}

/* A small, self-contained food log visitors can try in the landing preview. */
.feature-showcase .showcase-heading { max-width: 690px; margin-bottom: 36px; }
.feature-showcase .showcase-heading h2 { margin-bottom: 18px; }
.feature-showcase .showcase-heading > p:last-child { color: #617367; font-size: 16px; line-height: 1.65; }
.showcase-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.showcase-card { min-width: 0; padding: 32px; border: 1px solid #dce4d7; border-radius: 26px; background: var(--kl-card); }
.showcase-card h3 { font-size: clamp(25px,3vw,34px); line-height: 1.12; letter-spacing:-.02em; margin: 12px 0; }
.showcase-card > p:not(.public-kicker) { color: #647568; font-size: 13px; line-height: 1.7; margin-bottom: 24px; }
.showcase-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #e8efdf; color: #355d3d; margin-bottom: 20px; flex-shrink: 0; }
.showcase-icon svg { width: 25px; height: 25px; }
.showcase-rhythm { background: #edf2e8; }
.showcase-care { background: #fff6da; }
.showcase-care .showcase-icon { background: #f3df94; }
.showcase-recordings { background: #194838; color: #fffdf3; }
.showcase-recordings .showcase-icon { background: #315b48; color: #f1d36b; }
.showcase-recordings .public-kicker { color: #e7ce7f; }
.showcase-recordings > p:not(.public-kicker) { color: #ccdcd0; }
.voice-preview { background: var(--kl-card); border: 1px solid #dde5d7; border-radius: 18px; padding: 20px; }
.voice-preview-heading { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom:20px; }
.voice-preview-heading > div { display:grid; gap:4px; }
.voice-preview-heading b { font-size:16px; }
.voice-preview-heading small,.voice-preview-heading > span { font-size:10px; color:#728170; }
.voice-preview-heading strong { font-size:24px; color:#285039; }
.voice-week-labels,.voice-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.voice-week-labels { text-align:center; font-size:9px; color:#7b8978; margin-bottom:8px; }
.voice-calendar button { aspect-ratio:1; border:2px solid transparent; border-radius:7px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.voice-calendar [data-level="0"],.voice-legend [data-level="0"] { background:#eef0e9; color:#8b9789; }
.voice-calendar [data-level="1"],.voice-legend [data-level="1"] { background:#d7e5b8; color:#456039; }
.voice-calendar [data-level="2"],.voice-legend [data-level="2"] { background:#8faa67; color:#193d2c; }
.voice-calendar [data-level="3"],.voice-legend [data-level="3"] { background:#315c40; color:#fffdf3; }
.voice-calendar [aria-pressed="true"] { border-color:#d4a631; box-shadow:0 0 0 2px var(--kl-card) inset; }
.voice-calendar button:focus-visible,.voice-add:focus-visible { outline:3px solid #d4a631; outline-offset:2px; }
.voice-legend { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin:12px 0 18px; font-size:8px; color:#7a8777; }
.voice-legend i { width:10px; height:10px; border-radius:2px; }
.voice-day-detail { font-size:12px; font-weight:800; margin-bottom:10px; }
.voice-add { width:100%; padding:11px; border:0; border-radius:9px; background:#f2d66e; color:#234432; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.voice-add:disabled { background:#edf0e8; color:#71816b; cursor:default; }
.voice-note { display:block; margin-top:10px; color:#7c8879; font-size:9px; line-height:1.4; }
.care-preview { margin:30px 0; display:grid; gap:12px; }
.care-preview > span { display:flex; align-items:center; gap:12px; padding:16px 12px; background:var(--kl-card); border-radius:12px; }
.care-preview i { font-style:normal; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e5edda; color:#436143; }
.care-preview b { font-size:12px; }
.care-preview small { margin-left:auto; color:#7c8573; font-size:9px; }
.showcase-link { color:inherit; font-size:12px; font-weight:800; text-decoration:none; }
.recording-preview { display:grid; gap:14px; margin:22px 0; }
.recording-preview > div { border:1px solid #51705c; border-radius:14px; padding:16px; background:#224e3e; }
.recording-preview span { font-size:12px; font-weight:700; }
.recording-preview small { color:#afc5b5; font-size:9px; }
.showcase-wave { display:flex; align-items:center; justify-content:space-between; gap:4px; height:63px; }
.showcase-wave i { width:5px; max-width:5px; height:var(--wave-height); background:#e4cd78; border-radius:5px; }
.showcase-birds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:30px 0; }
.showcase-birds > div { display:grid; justify-items:center; gap:5px; text-align:center; }
.showcase-birds img { width:68px; height:68px; object-fit:cover; object-position:50% 30%; border-radius:50%; border:4px solid #e9eddb; }
.showcase-birds b { font-size:13px; }
.showcase-birds small { font-size:9px; color:#7b8879; }
.showcase-export { display:flex; align-items:flex-start; gap:13px; padding-top:23px; border-top:1px solid #e2e8dc; }
.showcase-export b { font-size:12px; }
.showcase-export p { font-size:11px; line-height:1.6; color:#71806e; margin:6px 0 0; }
.showcase-export .showcase-icon { margin:0; }
.showcase-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; }
.showcase-bottom p { color:#657461; font-size:13px; }
@media(max-width:820px) { .showcase-grid { grid-template-columns:1fr; } .showcase-card { padding:24px; } .showcase-bottom { flex-direction:column; align-items:flex-start; } }
@media(max-width:420px) { .voice-preview { padding:14px; } .voice-calendar,.voice-week-labels { gap:5px; } .showcase-card { padding:20px; } .care-preview > span { gap:8px; padding:12px 8px; } }

.public-site .public-demo {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
}

.public-site .public-demo [hidden] {
  display: none !important;
}

.public-site .public-demo-open,
.public-site .public-demo-form-actions button {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.public-site .public-demo-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: var(--kl-amber);
  color: var(--kl-green);
  text-align: left;
}

.public-site .public-demo-open span {
  font-size: 17px;
  line-height: 1;
}

.public-site .public-demo-form {
  display: grid;
  gap: 13px;
  padding: 15px;
  border-radius: 15px;
  background: var(--kl-card);
  color: #224232;
}

.public-site .public-demo-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.public-site .public-demo-heading b { font-size: 13px; }
.public-site .public-demo-heading small { color: #7a877b; font-size: 9px; }

.public-site .public-demo-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.public-site .public-demo-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #5a6b5e;
  font-size: 9px;
  font-weight: 800;
}

.public-site .public-demo-fields .public-demo-wide { grid-column: 1 / -1; }

.public-site .public-demo-fields select,
.public-site .public-demo-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid #dce5d9;
  border-radius: 8px;
  background: var(--kl-card);
  color: #244433;
  font: inherit;
  font-size: 10px;
}

.public-site .public-demo-quantity {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: 5px;
}

.public-site .public-demo-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.public-site .public-demo-form-actions button { padding: 9px 12px; }
.public-site .public-demo-form-actions button[type="button"] { background: #eef2ea; color: #49604d; }
.public-site .public-demo-form-actions button[type="submit"] { background: var(--kl-amber); color: var(--kl-green); }

.public-site .public-demo-result {
  margin: 10px 1px 0;
  color: #e7f2df;
  font-size: 10px;
  line-height: 1.4;
}

.public-site .public-demo button:focus-visible,
.public-site .public-demo select:focus-visible,
.public-site .public-demo input:focus-visible {
  outline: 3px solid var(--kl-amber);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .public-site .public-demo-fields { grid-template-columns: 1fr; }
  .public-site .public-demo-fields .public-demo-wide { grid-column: auto; }
}

/* Hero photo fills the whole banner; logo is larger with a clearer gap to the wordmark. */
.public-site .public-top-art img { object-fit: cover; object-position: center 35%; }

/* "Catat apa?" sheet */
.kl-sheet{width:min(480px,calc(100vw - 24px));margin:auto auto 12px;padding:var(--kl-space-6);border:0;border-radius:var(--kl-radius-xl);background:var(--kl-card)}

.kl-sheet-bird{margin:-8px 0 var(--kl-space-4);color:var(--kl-muted);font-size:var(--kl-text-sm)}
.kl-sheet-list{display:grid;gap:var(--kl-space-2)}
.kl-sheet-list a{display:flex;align-items:center;gap:var(--kl-space-4);min-height:64px;padding:var(--kl-space-3) var(--kl-space-4);border:1px solid var(--kl-border);border-radius:var(--kl-radius);background:var(--kl-bg);color:var(--kl-ink);text-decoration:none}
.kl-sheet-list a:hover{background:var(--kl-green-light)}
.kl-sheet-list img{flex:none;object-fit:contain}
.kl-sheet-list strong{display:block;font-family:var(--kl-font-head);font-size:var(--kl-text-lg)}
.kl-sheet-list small{color:var(--kl-muted);font-size:var(--kl-text-sm)}

/* 404 */
.kl-notfound{display:grid;justify-items:start;gap:var(--kl-space-3);max-width:520px;margin:var(--kl-space-8) auto;text-align:left}
.kl-notfound h1{margin:0;font-size:var(--kl-text-2xl)}
.kl-notfound p{margin:0;color:var(--kl-muted)}

/* Safety net: the Pakan/Rawatan journal screens ship an aside whose bird photo had no size, which made phones scroll sideways. */
.kl-app{overflow-x:clip}
.kl-app img{max-width:100%}
.journal-layout{display:grid;gap:var(--kl-space-4)}
.journal-aside{display:none}
@media(min-width:1024px){.journal-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.journal-aside{display:grid;gap:var(--kl-space-3)}.journal-aside .bird-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 30%}}

/* PWA update banner: above the tab bar, never covers a form field's keyboard area on phones. */
.pwa-update{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-radius:20px;background:var(--kl-green);color:var(--kl-bg);box-shadow:var(--kl-shadow);font-size:15px;max-width:520px;margin:0 auto}
.pwa-update span{flex:1 1 200px}.pwa-update button{min-height:44px;padding:0 16px;border-radius:999px;border:0;font:700 15px var(--kl-font-body);cursor:pointer;background:var(--kl-amber);color:var(--kl-ink)}.pwa-update #pwa-later{background:transparent;color:var(--kl-bg)}