/* 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}
/* Invite a friend: the link itself, read and copied at 360 px — never the 44 px price size. */
.lt-big.lt-linkline{font:700 17px/1.35 'Inter';letter-spacing:0;overflow-wrap:anywhere;margin:6px 0 12px}

.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-status a{color:#BC4901;font-weight:700;text-decoration:underline;display:inline-block;padding:6px 0}

.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}
/* A still reel is 9:16: shown whole (nothing of its safe zones cut), never wider than a phone. */
.lt-reel{aspect-ratio:9/16;object-fit:contain;max-width:360px;margin-left:auto;margin-right:auto;background:#161311}
.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}

/* Your next 9 posts (Lite P4, lite-approve.js): three columns in profile order, 4:5 like
   the posts, 2px apart like Instagram. The grid reaches 8px into the card's padding on each
   side, so on a 390px phone each tile is ~109px (the columns can only shrink, minmax(0,1fr):
   nothing is wider than the screen). The pictures are <img> only; the state is a WORD in a
   pill at the bottom corner (the headline band is at the top of every tile), never a colour
   alone. */
.lt-nine{list-style:none;margin:14px -8px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.lt-nine li{min-width:0}
.lt-nine-tile{position:relative;display:block;width:100%;aspect-ratio:4/5;margin:0;padding:0;border:0;border-radius:0;
              overflow:hidden;background:#F1E7DE;color:#161311;font:inherit;text-align:left;cursor:pointer}
.lt-nine-tile img{display:block;width:100%;height:100%;object-fit:cover}
.lt-nine-tile.is-empty{cursor:default;background:#FFF7F0;outline:2px dashed #D9CCC1;outline-offset:-2px}
.lt-nine-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px 6px 28px;
            box-sizing:border-box;text-align:center;font:600 12px/1.3 'Inter';color:#5c534d;overflow-wrap:anywhere}
.lt-nine-tag{position:absolute;left:5px;bottom:5px;max-width:calc(100% - 10px);box-sizing:border-box;padding:2px 7px;
             border:1.5px solid #161311;border-radius:99px;background:#fff;color:#161311;
             font:700 10px/1.4 'JetBrains Mono',monospace;letter-spacing:0;
             overflow-wrap:anywhere}
/* a narrow phone (360px) breaks a long word onto two lines; it is never cut short */
.lt-nine-tag.is-marked{background:#FE6403}
.lt-nine-tag.is-posted{background:#161311;color:#fff}
.lt-nine-tag.is-approved{background:#FFE1CC}
.lt-nine-tile[aria-current="true"]::after{content:"";position:absolute;inset:0;border:3px solid #161311;pointer-events:none}
.lt-nine-tile:focus-visible{outline:3px solid #161311;outline-offset:-3px}
/* the sheet: one picture big, under the grid, in the card's own language */
.lt-sheet{margin-top:16px;padding:14px 14px 16px;border:2px solid #161311;border-radius:14px;background:#FFF8F2;
          scroll-margin-top:16px}
.lt-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lt-card .lt-sheet h3{margin:0}
.lt-sheet h3:focus{outline:none}
.lt-sheet h3:focus-visible{outline:3px solid #161311;outline-offset:2px}
.lt-sheet .lt-warn{margin-top:12px}
.lt-card--nine > .lt-btn + p.lt-why{margin-top:8px}
/* The two pairs in this card (the marked step, the redo form) stand one above the other, the
   main button first: side by side at 390px "I checked the words. Approve" broke into three
   lines and the pill into a blob. Markup order stays Cancel-then-main for the keyboard. */
.lt-card--nine .lt-pair{flex-direction:column-reverse;gap:10px}
.lt-card--nine .lt-pair .lt-btn{flex:none;width:100%}
.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}

/* "Cancel my plan" on the paid card (17 Oct 2026): a quiet text button, and the in-page confirm. */
.lt-quiet{display:block;margin-top:6px;padding:10px 0;min-height:44px;background:none;border:0;
  font:600 13.5px 'Inter';color:#786E66;text-decoration:underline;cursor:pointer}
.lt-quiet:focus-visible{outline:3px solid #FE6403;outline-offset:2px}
.lt-confirm{margin-top:14px;padding:14px 16px;border:2px solid #161311;border-radius:14px;background:#FFF8F2}
.lt-confirm h3{margin:0 0 6px}
/* Settings (19 Oct 2026): the header's second link, and the one quiet support line at the
   foot of every Lite screen. */
.lt-heads{display:flex;gap:18px;align-items:center}
.lt-foot{max-width:520px;margin:0 auto;padding:0 clamp(16px,5vw,24px) 28px;box-sizing:border-box;
         font:500 13px/1.5 'Inter';color:#5c534d;text-align:center}
.lt-foot a{color:#5c534d;text-decoration:underline}
.lt-list{margin:8px 0 0;padding-left:20px;font:500 14.5px/1.55 'Inter';color:#161311}
.lt-list li{margin:0 0 6px}
.lt-receipts{list-style:none;margin:10px 0 0;padding:0}
.lt-receipts li{padding:10px 0;border-top:1px solid #EFE4DA}
/* Settings → Google (kadam 9): the posts switch and one card per review */
.lt-check{display:flex;gap:10px;align-items:center;margin-top:14px;font:600 15px/1.4 'Inter';cursor:pointer}
.lt-check input{width:22px;height:22px;accent-color:#161311}
.lt-reviews{list-style:none;margin:12px 0 0;padding:0}
.lt-reviews li{padding:14px 0;border-top:1px solid #D9CCC1}
.lt-reviews li:first-child{border-top:0}
.lt-reviews .lt-pair{margin-top:10px}
/* "Where did you hear about DhanaaDhan?" at the start of setup (lite-heard-from.js) */
.lt-heard{margin-top:18px;padding:16px 18px}
.lt-heard .lt-chip{font:600 14.5px 'Inter';color:#161311}
.lt-heard .lt-chip--skip{border-style:dashed;color:#5c534d}
/* Settings → Your products (kadam 10): one block per product, a row per photo */
.lt-products{list-style:none;margin:12px 0 0;padding:0}
.lt-product{padding:14px 0;border-top:1px solid #D9CCC1}
.lt-product:first-child{border-top:0}
.lt-product h3{margin:0}
.lt-slot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.lt-slotname{font:600 14px/1.3 'Inter';color:#161311;min-width:64px}
.lt-thumb{width:44px;height:44px;object-fit:cover;border:2px solid #161311;border-radius:10px;flex:none}
.lt-input--small{flex:1 1 140px;min-height:44px;padding:8px 12px;border-radius:12px}
.lt-btn.lt-file--small{width:auto;min-height:44px;margin-top:0;padding:0 14px;font-size:14px}
/* Review → Brand Kit (Lite P2): one row per colour. The picker IS the swatch; the hex code
   beside it and the server's name for the colour say it in words, so colour is never the only
   way to tell two apart. */
.lt-swatches{display:flex;flex-direction:column;gap:8px}
.lt-swatch{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.lt-swatch-pick{flex:none;width:52px;height:44px;padding:3px;box-sizing:border-box;border:2px solid #161311;
                border-radius:12px;background:#fff;cursor:pointer}
.lt-swatch-pick::-webkit-color-swatch-wrapper{padding:0}
.lt-swatch-pick::-webkit-color-swatch{border:0;border-radius:8px}
.lt-swatch-pick::-moz-color-swatch{border:0;border-radius:8px}
.lt-swatch-pick:focus-visible,.lt-select:focus-visible{outline:3px solid #161311;outline-offset:2px}
.lt-input.lt-hex{flex:0 1 120px;min-width:0;font:600 15px 'JetBrains Mono',monospace;text-transform:uppercase}
.lt-swatch-name{flex:1 1 100px;min-width:0;font:600 14px/1.3 'Inter';color:#161311;overflow-wrap:anywhere}
.lt-select{min-height:50px;cursor:pointer}
.lt-card p.lt-note:empty{display:none}
/* the Hindi text style's sample line: the server's own words, set big enough to judge */
.lt-card p.lt-sample{margin:8px 0 0;padding:10px 12px;border-left:4px solid #FE6403;background:#FFF7F0;
                     font:600 18px/1.5 'Inter';color:#161311;overflow-wrap:anywhere}
/* Launch: "Your setup is ready." — words with a tick, not a tint */
.lt-card p.lt-ready{font:800 18px/1.4 'Baloo 2';color:#161311;margin-top:10px}
.lt-card p.lt-ready::before{content:"✓ "}
/* the style lists use the product's own dropdown (/dropdown.js); on a Lite card its closed
   box matches every other Lite box: 2px ink, the same height and radius as .lt-input */
.lt .dd-seltrig{min-height:50px;padding:12px 14px;border-color:#161311;border-radius:16px;font:600 16px 'Inter'}
.lt .dd-seltrig:focus-visible{outline:3px solid #161311;outline-offset:2px;border-color:#161311;box-shadow:none}
.lt .dd-selopt{font:600 15px 'Inter';white-space:normal}