/* Reference-driven refinements. Audience: owners (often older men) preparing birds for contests —
   larger type, high contrast, big tap targets, one obvious action per screen.
   References (Mobbin): Tiimo/Finch (daily checklist cards, persistent nav), Suno/OpenPhone/Quo (recorder stage),
   Brilliant/Craft/Riverside (pricing with one highlighted plan), Retro/Grab (profile with stat row). */

body{font-size:17px;line-height:1.55}

/* 1. Readable headings: previous tracking glued words together */
h1,h2,h3,.brand,.selling-pricing-heading h2{letter-spacing:-.015em;word-spacing:.06em}
h1{line-height:1.12}

/* 2. Buttons and fields: large, high-contrast tap targets */
.btn,button.btn,.selling-plan-cta,.daily-action-primary,.field input,.field select,.field textarea{min-height:var(--tap);font-size:17px}
.btn{font-weight:800;border-radius:16px}
.field label{font-size:15px;font-weight:800;color:var(--ink)}
.field input,.field select,.field textarea{border:2px solid #cfd8c8;border-radius:14px;background:var(--kl-card)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest)}
.form-note,.record-status{font-size:14px;color:var(--muted)}

/* 3. Floating action: compact circle above nav, never covers content */
.workspace .quick-fab{display:grid;place-items:center;inset:auto 16px calc(84px + env(safe-area-inset-bottom)) auto;width:62px;height:62px;padding:0;border-radius:50%;font-size:0;line-height:0;
  background:var(--yellow);color:var(--forest2);box-shadow:0 8px 22px rgba(14,51,41,.28)}

.content{padding-bottom:170px}

/* 4. Bottom nav: big labels, clear current tab */
.bottom-nav a{font-size:14px;font-weight:700;min-height:64px;display:flex;align-items:center;justify-content:center;color:#4f6158}


/* 5. Segmented tabs for Perawatan / Pakan / Burung Saya */
.journal-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:0 0 18px;background:#ece9db;border-radius:16px}
.journal-tabs a{display:grid;place-items:center;min-height:46px;border-radius:12px;font-size:15px;font-weight:800;color:#4f6158;text-decoration:none}
.journal-tabs a[aria-current=page]{background:var(--kl-card);color:var(--forest2);box-shadow:0 2px 8px rgba(14,51,41,.12)}

/* 6. Today: tidy cards, tactile and legible */
.daily-action-card{border-radius:22px;border:2px solid rgba(14,51,41,.08)}
.daily-action-card h3{font-size:19px}
.daily-action-primary{font-weight:800}
.demo-banner{font-size:14px}

/* 7. Profile hero: fix unreadable secondary button, add stat feel */
.profile-detail-actions{display:grid;gap:10px}
.profile-detail-actions .btn.ghost{background:rgba(255,255,255,.12);color:var(--kl-card);border:2px solid rgba(255,255,255,.55)}
.profile-detail-metric b,.profile-detail-metric span{color:var(--kl-card)}
.profile-detail-photo{position:relative}

/* 8. Recorder stage (Suno / OpenPhone pattern): big record button + live bars */
.audio-shell .card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.audio-shell .card>*{width:100%}
.rec-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 4px}
.rec-bars{display:flex;align-items:center;justify-content:center;gap:4px;height:64px;width:100%}
.rec-bars i{display:block;width:5px;height:10px;border-radius:3px;background:#c9d4c3;transition:background .2s}
.recording .rec-bars i{background:var(--kl-neg);animation:recbar .9s ease-in-out infinite}
.rec-bars i:nth-child(3n){animation-delay:.15s}.rec-bars i:nth-child(3n+1){animation-delay:.3s}.rec-bars i:nth-child(5n){animation-delay:.45s}
@keyframes recbar{0%,100%{height:10px}50%{height:56px}}
.rec-time{font:700 26px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
#capture{width:92px;height:92px;min-height:92px;padding:0;border-radius:50%;font-size:0;background:var(--kl-card);border:4px solid var(--kl-neg);display:grid;place-items:center;box-shadow:0 8px 20px rgba(192,57,43,.2);margin:0 auto}
#capture::before{content:"";width:60px;height:60px;border-radius:50%;background:var(--kl-neg);transition:all .2s}
.recording #capture::before{width:34px;height:34px;border-radius:9px}
.rec-label{font-weight:800;font-size:16px}
#audio-file{width:100%;padding:12px;border:2px dashed #b7c4ae;border-radius:14px;background:#f7f5ea;font-size:15px}
#audio-file::file-selector-button{min-height:42px;margin-right:12px;padding:0 16px;border:0;border-radius:12px;background:var(--forest);color:var(--kl-card);font-weight:800;font-size:15px}
#player{width:100%;height:54px;border-radius:14px}
.audio-shell form{width:100%;text-align:left}

/* 9. Pricing: one highlighted plan, calmer cards, easy comparison (Brilliant / Craft) */
.selling-plan-grid{display:grid;gap:16px}
.selling-plan{border:2px solid var(--line);border-radius:22px}
.selling-plan-yearly{border-color:var(--forest);box-shadow:0 14px 34px rgba(14,51,41,.16);position:relative}
.selling-plan-yearly .selling-plan-label b{background:var(--yellow);color:var(--forest2);padding:4px 10px;border-radius:999px;font-weight:800}
.selling-plan-yearly .selling-plan-cta{background:var(--forest);color:var(--kl-card);border-color:var(--forest)}
.selling-plan-price strong{font-size:38px;letter-spacing:-.02em}
.selling-plan li{font-size:16px;line-height:1.5}
.selling-plan-cta{border-radius:16px;font-weight:800;border-width:2px}
.selling-plan-free .selling-plan-value,.selling-plan-description{display:none}

/* Simulated gateway */
.fake-gateway{display:grid;gap:14px;text-align:left}
.fake-pay-tag{align-self:start;justify-self:start;padding:5px 12px;border-radius:999px;background:var(--yellow2);color:#5a4500;font-weight:800;font-size:13px}
.fake-methods{display:grid;gap:10px}
.fake-methods button{min-height:var(--tap);padding:0 16px;border:2px solid #cfd8c8;border-radius:14px;background:var(--kl-card);font-weight:800;font-size:17px;text-align:left;color:var(--ink)}
.fake-methods button.selected{border-color:var(--forest);background:#eef4ea;box-shadow:inset 0 0 0 1px var(--forest)}
.fake-qr{display:grid;grid-template-columns:repeat(21,1fr);width:min(260px,80%);aspect-ratio:1;margin:0 auto;padding:10px;background:var(--kl-card);border:2px solid var(--line);border-radius:14px}
.fake-qr i{background:var(--kl-card)}.fake-qr i.on{background:#111}
.fake-va{padding:16px;border-radius:14px;background:#f4f2e8;text-align:center}.fake-va small{display:block;color:var(--muted)}.fake-va b{font:800 24px ui-monospace,Menlo,monospace;letter-spacing:.04em}
.fake-order,.fake-timer{margin:0;text-align:center;color:var(--muted);font-weight:700}
.fake-result{text-align:center;padding:10px 0}.fake-result span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;color:var(--kl-card);font-size:34px;font-weight:800}
.fake-result.ok span{background:var(--forest)}.fake-result.bad span{background:var(--kl-neg)}

/* Landing: readable headlines, hero photo fills its band (no empty side panels) */
h1,h2,h3,h4,.public-hero h1,.hero-copy h1,.market-section h2,.public-brand,.market-brand{letter-spacing:-.01em!important;word-spacing:.08em}
.public-top-art{overflow:hidden}
.public-top-art img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.public-hero h1{line-height:1.12}
.public-top-art{position:relative;min-height:clamp(240px,38vw,480px)}
.public-top-art img{position:absolute;inset:0}