/* DhanaaDhan Lite — the first screens (offer link, start free, Connect Instagram, the
   Professional-account help page, Lite home). One sheet for all five, so they read as one
   product; the design language is docs/specs/LIGHTER_DESIGN_BRIEF.md: cream surface, white
   cards, 2px ink borders, radius 16px, hard shadow, pill buttons.
   Phone first: one column at 360px, and nothing here needs a wider screen.
   Greys: #5c534d and #786E66 only, both on light surfaces (AA). */
.lt{min-height:100vh;display:flex;flex-direction:column;background:#FFF7F0;color:#161311}
.lt-headin{max-width:1160px;margin:0 auto;padding:13px clamp(16px,5vw,32px);
           display:flex;align-items:center;justify-content:space-between;gap:12px}
.lt-head img{height:40px;width:auto;display:block}
.lt-out{font:600 13px 'Inter';color:#161311;text-decoration:underline;padding:12px 0}
.lt-main{flex:1;padding:8px clamp(16px,5vw,24px) 56px}
.lt-in{width:100%;max-width:520px;margin:0 auto}
.lt-kicker{font:700 11px 'JetBrains Mono',monospace;color:#BC4901;letter-spacing:.08em;margin:18px 0 0}
.lt-h1{font:800 clamp(28px,7vw,40px)/1.08 'Baloo 2';letter-spacing:-.02em;margin:8px 0 0}
.lt-sub{font:400 16px/1.6 'Inter';color:#5c534d;margin:10px 0 0}

.lt-card{background:#fff;border:2px solid #161311;border-radius:16px;box-shadow:4px 4px 0 #161311;
         padding:22px 20px;box-sizing:border-box;margin-top:22px}
.lt-card--flat{box-shadow:none}
.lt-card h2{font:800 22px/1.15 'Baloo 2';margin:0}
.lt-card h3{font:800 17px/1.25 'Baloo 2';margin:18px 0 0}
.lt-card p{font:400 15px/1.6 'Inter';color:#5c534d;margin:8px 0 0}
.lt-card p b,.lt-card li b{color:#161311;font-weight:800}
.lt-big{font:800 44px/1 'Baloo 2';letter-spacing:-.02em;color:#161311;margin:12px 0 0}
.lt-big small{font:600 15px 'Inter';color:#5c534d;letter-spacing:0}

.lt-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.lt-list li{display:flex;gap:10px;align-items:flex-start;font:500 15px/1.45 'Inter'}
.lt-list li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:#FE6403;
                    color:#161311;font:800 12px/22px 'Inter';text-align:center}
.lt-steps{margin:12px 0 0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:9px}
.lt-steps li{font:400 15px/1.55 'Inter';color:#161311;padding-left:2px}

.lt-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
        margin-top:20px;padding:14px 20px;box-sizing:border-box;cursor:pointer;text-align:center;
        background:#FE6403;color:#161311;font:800 16px 'Inter';border:2px solid #161311;border-radius:99px;
        box-shadow:4px 4px 0 #161311;transition:transform .18s ease,box-shadow .18s ease}
.lt-btn:hover{color:#161311}
.lt-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 #161311}
.lt-btn:focus-visible{outline:3px solid #161311;outline-offset:3px}
.lt-btn:disabled{cursor:default;background:#F1E7DE;box-shadow:none;color:#5c534d}
.lt-btn--plain{background:#fff;font-weight:700;box-shadow:none;margin-top:12px}
.lt-spin{display:none;width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid #161311;
         border-top-color:transparent;animation:ltSpin .8s linear infinite}
.lt-btn.is-busy .lt-spin{display:inline-block}
@keyframes ltSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lt-spin{animation:none}.lt-btn{transition:none}}

/* A sentence about what just happened. Never colour alone: every variant starts with words
   that say which it is, and the tick is a character, not a tint. */
.lt-msg{display:none;margin-top:16px;padding:12px 14px;border:2px solid #161311;border-radius:16px;
        background:#FFF3E6;font:500 14.5px/1.5 'Inter';color:#161311;overflow-wrap:anywhere}
.lt-msg.is-on{display:block}
.lt-msg--bad{border-color:#A32D12;background:#FFF1EC}
.lt-msg--good{background:#fff}
.lt-msg b{font-weight:800}
.lt-warn{margin-top:14px;padding:12px 14px;border:2px solid #A32D12;border-radius:16px;background:#FFF1EC;
         font:500 14.5px/1.5 'Inter';color:#161311}
.lt-warn b{font-weight:800}

.lt-handle{font:800 24px/1.15 'Baloo 2';margin:6px 0 0;overflow-wrap:anywhere}
.lt-ok{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border:2px solid #161311;
       border-radius:99px;background:#fff;font:700 13.5px 'Inter';color:#161311}
.lt-ok::before{content:"✓";width:18px;height:18px;border-radius:50%;background:#FE6403;
               font:800 11px/18px 'Inter';text-align:center}
.lt-note{font:600 11.5px/1.5 'JetBrains Mono',monospace;color:#786E66;letter-spacing:.02em;margin:14px 0 0}
.lt-link{font:700 14.5px 'Inter';color:#BC4901;text-decoration:underline;display:inline-block;padding:10px 0}
.lt-foot{max-width:520px;margin:0 auto;padding:0 clamp(16px,5vw,24px) 32px;font:400 12.5px/1.5 'Inter';color:#786E66}
.lt-foot a{color:#BC4901;font-weight:700}
.lt [hidden]{display:none !important}

/* ── the journey screens: chat setup, review, the daily post (slice 5) ─────────────────── */
/* Progress, in words: each step says "✓" or "→" itself, the tint only repeats it. */
.lt-dots{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.lt-dots li{font:600 11px/1 'JetBrains Mono',monospace;color:#786E66;padding:7px 9px;border:2px solid #D9CCC1;border-radius:99px}
.lt-dots li.is-done{color:#161311;border-color:#161311;background:#fff}
.lt-dots li.is-now{color:#161311;border-color:#161311;background:#FFE1CC}

/* The thread: ours on the left (white), theirs on the right (orange tint). */
.lt-thread{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.lt-bub{max-width:86%;padding:11px 14px;border:2px solid #161311;border-radius:16px;background:#fff;
        font:400 15px/1.5 'Inter';color:#161311;overflow-wrap:anywhere;white-space:pre-line;align-self:flex-start}
.lt-bub--bot{border-bottom-left-radius:4px}
.lt-bub--me{align-self:flex-end;background:#FFE1CC;border-bottom-right-radius:4px}
.lt-bub--bad{border-color:#A32D12;background:#FFF1EC}
.lt-bub--wait{color:#786E66;letter-spacing:.2em}
.lt-bub img{display:block;max-width:140px;max-height:140px;border-radius:10px;border:2px solid #161311;margin-top:6px}
.lt-bub a{color:#BC4901;font-weight:700;text-decoration:underline;display:inline-block;padding:6px 0}

/* What is being made — sits between the thread and the composer, and cannot be dismissed. */
.lt-status{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.lt-status p{margin:0;padding:9px 12px;border:2px solid #161311;border-radius:12px;background:#FFF3E6;
             font:600 12.5px/1.45 'JetBrains Mono',monospace;color:#161311}

.lt-composer{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:stretch}
.lt-composer .lt-btn{margin-top:0}
.lt-input{flex:1 1 100%;min-height:50px;padding:12px 14px;box-sizing:border-box;border:2px solid #161311;border-radius:16px;
          background:#fff;font:400 16px/1.45 'Inter';color:#161311;width:100%}
textarea.lt-input{min-height:110px;resize:vertical}
.lt-input:focus-visible,.lt-chip:focus-visible,.lt-file:focus-within{outline:3px solid #161311;outline-offset:2px}
.lt-chip{min-height:46px;padding:10px 16px;border:2px solid #161311;border-radius:99px;background:#fff;cursor:pointer;
         font:700 14.5px 'Inter';color:#161311;text-align:center}
.lt-chip:disabled{cursor:default;color:#786E66;border-color:#D9CCC1}
.lt-chip[aria-pressed="true"]{background:#161311;color:#fff}
.lt-file{position:relative;overflow:hidden}
.lt-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.lt-file.is-off{background:#F1E7DE;box-shadow:none;color:#5c534d}
.lt-check{display:flex;gap:10px;align-items:flex-start;flex:1 1 100%;font:500 15px/1.45 'Inter';color:#161311;padding:6px 0}
.lt-check input{width:22px;height:22px;flex:none;margin:0;accent-color:#FE6403}
.lt-hint{flex:1 1 100%;margin:0;font:600 12.5px/1.5 'Inter';color:#A32D12}

/* Review: the editable text and the two boards. */
.lt-label{display:block;font:700 11px 'JetBrains Mono',monospace;color:#786E66;letter-spacing:.06em;
          text-transform:uppercase;margin:16px 0 6px}
.lt-board{display:block;width:100%;height:auto;margin-top:14px;border:2px solid #161311;border-radius:12px;background:#F1E7DE}
.lt-state{margin:10px 0 0;padding:9px 12px;border:2px solid #161311;border-radius:12px;background:#FFF3E6;
          font:600 12.5px/1.45 'JetBrains Mono',monospace;color:#161311}
.lt-card p.lt-state{color:#161311}
.lt-said{font:600 13.5px/1.5 'Inter';color:#161311;margin:10px 0 0;overflow-wrap:anywhere}

/* The daily post. */
.lt-pic{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-top:14px;
        border:2px solid #161311;border-radius:12px;background:#F1E7DE}
.lt-quote{margin:12px 0 0;padding:10px 12px;border-left:4px solid #FE6403;background:#FFF7F0;
          font:500 15px/1.55 'Inter';color:#161311;white-space:pre-line;overflow-wrap:anywhere}
.lt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lt-posts{list-style:none;margin:12px 0 0;padding:0}
.lt-posts li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:11px 0;border-top:1px solid #D9CCC1;
             font:500 14.5px/1.45 'Inter';color:#161311}
.lt-posts li:first-child{border-top:0}
.lt-posts b{font-weight:800}
.lt-posts span{color:#5c534d}
.lt-posts a{color:#BC4901;font-weight:700;text-decoration:underline;padding:6px 0}

/* ── the public home page (index.html): DhanaaDhan Lite only, one column, phone first ──── */
.lh-head{position:sticky;top:0;z-index:100;background:rgba(255,247,240,.94);border-bottom:2px solid #161311}
.lt-sub b{color:#161311;font-weight:800}
.lh-free{font:800 19px/1.3 'Baloo 2';color:#161311;margin:6px 0 0}
.lh-fig{margin:30px 0 0}
.lh-fig figcaption{font:400 13.5px/1.55 'Inter';color:#5c534d;margin-top:10px}
/* The label is words a person can read, in ink — not a tint and not a tooltip. */
.lh-fig figcaption b{display:block;font:700 12px/1.4 'JetBrains Mono',monospace;color:#161311;letter-spacing:.04em}
#lh-end{margin-top:30px}
/* the price inside a card: `.lt-card p` would set it in body type */
#lh-price p.lt-big{font:800 44px/1 'Baloo 2';letter-spacing:-.02em;color:#161311;margin:12px 0 4px}

/* ── what we know about your business: /lite/know, and its line on /lite (slice 7b) ────── */
/* The list is the page: plain lines with a hairline between them, and quiet words under
   each. A line is somebody's own typing and may be one long word, so everything that
   carries one may break anywhere — nothing here is wider than its card. */
.lt-kicker--top{margin-top:6px}
.lt-know{display:flex;flex-direction:column;align-items:flex-start;margin:14px 0 0}
/* a link that stands alone on a line is a finger tall */
.lt-link--tap{display:inline-flex;align-items:center;min-height:44px;padding:0}
.lt-facts{list-style:none;margin:6px 0 0;padding:0}
.lt-fact{padding:12px 0 2px;border-top:1px solid #D9CCC1}
.lt-fact:first-child{border-top:0}
.lt-fact-text{font:500 15.5px/1.5 'Inter';color:#161311;overflow-wrap:anywhere}
.lt-fact-meta{font:500 12.5px/1.5 'Inter';color:#786E66;overflow-wrap:anywhere;margin-bottom:2px}
.lt-fact--gone .lt-fact-text{color:#5c534d}
.lt-fact .lt-quote{margin-top:8px;font-size:14px}
.lt-fact-page{display:inline-flex;align-items:center;min-height:44px;font:500 12.5px/1.5 'Inter';color:#786E66;
              text-decoration:underline;overflow-wrap:anywhere}
.lt-fact-page:hover{color:#161311}
.lt-fact .lt-said{margin:0 0 10px}
/* Change · Remove · Undo: words, not pills — thirty pills would shout over the list. Each is
   still a finger tall, and a finger wide ("Undo" alone is 37px of letters). */
.lt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin-top:2px}
.lt-act{min-height:44px;min-width:44px;padding:0;border:0;background:none;cursor:pointer;
        font:700 14px 'Inter';color:#BC4901;text-decoration:underline;text-align:left}
.lt-act:disabled{cursor:default;color:#786E66}
.lt-act:focus-visible,.lt-fact-page:focus-visible{outline:3px solid #161311;outline-offset:2px;border-radius:4px}
.lt-act--mid{display:block;margin:6px auto 0;text-align:center}
.lt-acts .lt-chip{min-width:96px;margin:6px 0 10px}
/* One sentence: a short box. The counter's line is always there, so the card does not move
   when the number appears; over the limit it is said by the number, not by its colour. */
textarea.lt-input--line{min-height:76px;display:block}
/* Why a button is off (Change while another box is open, Skip while the box holds words):
   one quiet line next to it, never a pop-up. */
.lt-card p.lt-why{margin:6px 2px 0;font:600 12.5px/1.4 'Inter';color:#786E66;overflow-wrap:anywhere}
.lt-fact p.lt-why{margin:0 2px 12px}
.lt-card p.lt-count,.lt-count{min-height:18px;margin:4px 2px 0;font:600 11.5px/18px 'JetBrains Mono',monospace;
                              color:#786E66;text-align:right}
.lt-card p.lt-count.is-over,.lt-count.is-over{color:#A32D12;font-weight:800}
.lt-count + .lt-btn{margin-top:8px}
.lt-card h2 label{font:inherit;color:inherit}
.lt-card h2 + textarea.lt-input{margin-top:14px}
.lt-ask{display:block;font:700 17px/1.4 'Inter';color:#161311;margin:16px 0 10px;overflow-wrap:anywhere}
.lt-card p.lt-note + .lt-ask{margin-top:6px}
.lt-card p.lt-thanks{font:700 16px/1.5 'Inter';color:#161311;margin-top:12px}
#questions{scroll-margin-top:12px}
#questions:focus,#lk-title:focus{outline:none}
#questions:focus-visible{outline:3px solid #161311;outline-offset:3px}
/* The questions card is SMALL on purpose: the list is what the page is for, and on a phone
   the first line we know must be on the first screen even while a question is open. So: the
   answer box is one row that grows with what is typed, Save and Skip share a row, the count
   stands in the last row beside "Skip all for now" (it is FIRST in the markup, so it is still
   read before the question), and the counter's line takes no room until it has a number
   (the box has grown by then, so the card moves anyway). */
.lt-card--ask{padding:18px 20px 8px}
.lt-card--ask p{margin-top:4px}
.lt-askform{display:grid;grid-template-columns:auto 1fr}
.lt-askform > *{grid-column:1 / -1;min-width:0}
.lt-askform > .lt-ask{margin:10px 0 8px}
textarea.lt-input--grow{display:block;min-height:50px;resize:none;overflow:hidden}
.lt-askform > p.lt-count{min-height:0;margin:0}
.lt-askform > p.lt-count:not(:empty){margin-top:4px}
.lt-pair{display:flex;gap:10px;margin-top:8px}
.lt-pair .lt-btn{flex:1 1 0;min-width:0;margin-top:0}
.lt-askform > p.lt-said{margin:0}
.lt-askform > p.lt-said:not(:empty){margin:8px 0 0}
.lt-askform > .lt-act--mid{grid-column:1;grid-row:7;justify-self:start;margin:2px 0 0}
.lt-askform > p.lt-note{grid-column:2;grid-row:7;justify-self:end;align-self:center;margin:2px 0 0;
                        font:600 12.5px/1.4 'Inter';color:#786E66}
/* one question only: no count, so the quiet link has the row to itself, in the middle */
.lt-askform > p.lt-note[hidden] ~ .lt-act--mid{grid-column:1 / -1;justify-self:center}
.lt-card--ask p.lt-thanks{margin:12px 0 12px}
#lk-empty{margin-top:22px}