/* ═══════════════════════════════════════════════════════════════════════════
   RANCHER DOTI — product page stylesheet (loads AFTER kb.css, inherits every
   token from it). Scope: the Doti PDP only. Nothing here may leak to another
   catalogue page — every selector is prefixed `dt-`.

   DESIGN LAW. The Doti is a red carbon-fibre pole photographed against grey
   workshop steel and green estate bokeh. The page is therefore built on white
   and warm off-white, with brand maroon as the product's own identity colour,
   saffron reserved for ACTION, navy for data, green for gain. No gradient
   backgrounds, no glass except the sticky chrome, no shadow except on hover.

   MOBILE FIRST. Authored at 390px. 744 / 1024 / 1280 are the only upshifts.
   Nothing is a collapsed desktop layout; the phone order IS the source order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── page container: wider than .kb-wrap, because this page carries photography ── */
.dt-wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.dt-prose{max-width:64ch}
html[lang="kn"] .dt-prose{max-width:52ch}
@media(min-width:744px){.dt-wrap{padding-inline:40px}}
@media(min-width:1024px){.dt-wrap{padding-inline:56px}}

/* ── bands: the light/warm rhythm that paces the page ── */
.dt-band{padding:clamp(44px,7vw,88px) 0}
.dt-band.warm{background:#F8F6F1}
.dt-band.hair{border-top:0.5px solid var(--line)}
.dt-band.ink{background:#141416;color:#fff}
.dt-band.ink .dt-kicker{color:#FFB566}
.dt-band.ink .dt-lede,.dt-band.ink .dt-note{color:rgba(255,255,255,.66)}

/* ── type scale ── */
.dt-kicker{display:block;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-ink)}
html[lang="kn"] .dt-kicker{letter-spacing:.02em;text-transform:none;font-size:13px}
.dt-h2{margin-top:12px;font-family:var(--f-display);font-weight:400;
  font-size:clamp(30px,5.2vw,50px);line-height:1;letter-spacing:.02em}
html[lang="kn"] .dt-h2{font-family:var(--f-kn);font-weight:700;font-size:clamp(23px,4vw,37px)}
.dt-h3{font-weight:700;font-size:clamp(17px,2.2vw,20px);letter-spacing:-0.012em}
html[lang="kn"] .dt-h2{line-height:1.34;letter-spacing:0}
html[lang="kn"] .dt-h3{letter-spacing:0;line-height:1.5}
.dt-lede{margin-top:14px;font-size:clamp(15.5px,1.7vw,18px);line-height:1.62;color:var(--ink-2)}
html[lang="kn"] .dt-lede{line-height:1.8}
.dt-note{margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.dt-num{font-family:"Bebas Neue",var(--f-body);letter-spacing:.01em;font-weight:400}

/* ══ 01 · HERO ═════════════════════════════════════════════════════════════ */
.dt-hero{padding:20px 0 0}
/* R1: the hero carries an eyebrow, not a badge chip — same approved wording,
   set as quiet tracked text so the headline does the talking */
.dt-eyebrow{display:block;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
html[lang="kn"] .dt-eyebrow{letter-spacing:.02em;text-transform:none;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Layer B (statement) — matches the flagship PDP, which sets its headlines in Bebas.
   Doti loaded the font already and set this in DM Sans, so the two product pages
   spoke in different voices. Kannada keeps Noto 700 per the approved fallback. */
.dt-h1{margin-top:14px;font-family:var(--f-display);font-weight:400;
  font-size:clamp(38px,5.4vw,68px);line-height:.98;letter-spacing:.02em}
html[lang="kn"] .dt-h1{font-family:var(--f-kn);font-weight:700;line-height:1.3;
  letter-spacing:0;font-size:clamp(26px,6.4vw,50px)}
.dt-h1 em{font-style:normal;color:var(--brand-maroon)}
.dt-hero-sub{margin-top:14px;font-size:clamp(15.5px,1.8vw,19px);line-height:1.55;color:var(--ink-2);max-width:46ch}
html[lang="kn"] .dt-hero-sub{line-height:1.78;max-width:40ch}

/* the photograph: a stage, never a bleed. Capped so it can never exceed the
   viewport (the render check asserts no graphic is taller than the screen). */
.dt-stage{position:relative;margin-top:22px;border-radius:20px;overflow:hidden;background:#EFEDE8;
  border:0.5px solid var(--line)}
.dt-stage img{display:block;width:100%;height:auto;max-height:56svh;object-fit:cover;object-position:center 42%}
/* the source is 3:4 with the pole left of centre and dead steel panel to the
   right; a 2:3 window trims the panel and keeps the doorway for scale */
.dt-stage.portrait img{aspect-ratio:2/3;max-height:64svh;object-fit:cover;object-position:38% 30%}
/* Below 1024 the hero is a single column and takes the LANDSCAPE field frame.
   Show it at its own 4:3 rather than through the generic 56svh window, which
   cover-crops a 4:3 source down to a letterbox and cuts the farmer off at the
   neck — the one thing this photograph exists to show. */
.dt-hero-shot img{aspect-ratio:4/3;max-height:none;object-fit:cover;object-position:center}
/* and capped: the field frame is 646px of real photograph and there is no more
   to be had, so a full-bleed 940px hero at 1023 would just be an upscale. */
.dt-hero-shot{max-width:680px;margin-inline:auto}

/* the studio frame is already 2:3 and framed on purpose — show it whole, and
   let the seamless sweep run to the edge instead of sitting on the warm plate */
.dt-stage.studio{background:#F2F1EF}
.dt-stage.studio img{object-fit:contain;object-position:center}

/* ── the turntable. Shot on pure white, so the plate is white and the frame
   crops to the pole rather than letterboxing a band of empty studio. ── */
.dt-stage.film{background:#fff}
/* height:auto matters — the width/height attributes are there to reserve space
   before the clip loads, and without it the presentational height wins over
   aspect-ratio and the frame comes out 720px tall. */
/* 4:3 at every width — the same window the still it replaced occupied, so the
   section keeps its rhythm, and cropping the 16:9 source to 4:3 brings the pole
   up to a size where the clamps actually read. */
.dt-film{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;background:#fff}
.dt-stage.film{position:relative}
/* the field demonstration runs at its native 16:9, contained and capped —
   1280px of source, so ~980px on screen is the honest ceiling */
.dt-stage.film.wide{max-width:980px;margin-inline:auto;background:#EFEDE8}
.dt-film.is-wide{aspect-ratio:16/9;background:#EFEDE8}
.dt-film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:var(--saffron,#FF9933);color:#1a1208;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.dt-film-play svg{width:26px;height:26px;margin-left:3px}
.dt-film-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.dt-film-play:active{transform:translate(-50%,-50%) scale(.94)}
.dt-film-play:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:3px}
.dt-stage figcaption{padding:10px 14px;font-size:12px;line-height:1.5;color:var(--ink-2);background:#fff;
  border-top:0.5px solid var(--line)}

/* price + action */
.dt-buyrow{margin-top:26px}
.dt-from{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
html[lang="kn"] .dt-from{letter-spacing:0;text-transform:none;font-size:13.5px}
.dt-amt{display:block;margin-top:4px;font-weight:700;font-size:clamp(32px,6.4vw,46px);line-height:1;
  letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.dt-amt small{font-size:.42em;font-weight:600;color:var(--ink-2);letter-spacing:0;margin-left:8px}
/* ── PRICE ANCHOR ─────────────────────────────────────────────────
   The figure the farmer pays is INK and the loudest thing in the block; the MRP
   is a quiet struck number beside it; the discount is one soft chip. Making the
   price ink rather than maroon is what keeps the block to a SINGLE accent — a
   maroon price beside a green chip would have been two.
   Every numeral is tabular and the was/off row reserves its height, so switching
   grade re-prints the numbers without moving anything around them. ── */
.dt-priceline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:4px}
.dt-priceline .dt-amt{margin-top:0}
.dt-priceline .was{font-size:15px;font-weight:500;color:var(--price-was);text-decoration:line-through;
  text-decoration-thickness:1px;text-underline-offset:2px;font-variant-numeric:tabular-nums}
.dt-priceline .off{display:inline-flex;align-items:center;background:var(--save-bg);color:var(--save-ink);
  border:1px solid var(--save-line);font-weight:600;font-size:11.5px;line-height:1.5;padding:2px 10px;
  border-radius:var(--r-pill);white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-priceline [hidden]{display:none}
.dt-savenote{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.dt-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
@media(min-width:600px){.dt-actions{flex-direction:row;flex-wrap:wrap}}
.dt-actions .kb-btn{flex:1 1 auto;min-width:0}
@media(min-width:600px){.dt-actions .kb-btn{flex:0 1 auto}}
/* the lower-commitment pair under the hero buttons: text links, not buttons */
.dt-quietrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px;
  font-size:13.5px;font-weight:600;line-height:1.5}
.dt-quietrow a{color:var(--saffron-ink);text-decoration:none;padding:4px 0;min-height:24px}
.dt-quietrow a:hover{text-decoration:underline}
.dt-quietrow .sep{color:var(--line-strong)}

/* the four quick answers — their own proof strip directly below the hero
   (R1 moved them out of the hero itself) */
.dt-quickband{padding:clamp(24px,3.5vw,36px) 0 0}
.dt-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:0.5px solid var(--line);border-radius:14px;overflow:hidden}
.dt-quick div{background:#fff;padding:14px 14px 15px}
.dt-quick dt{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
html[lang="kn"] .dt-quick dt{letter-spacing:0;text-transform:none;font-size:12.5px}
.dt-quick dd{margin-top:5px;font-weight:700;font-size:15.5px;line-height:1.35}
.dt-quick dd small{display:block;margin-top:2px;font-weight:400;font-size:12px;color:var(--ink-2)}
.dt-quick dd .dt-wasline{color:var(--price-was);font-variant-numeric:tabular-nums}
@media(min-width:744px){.dt-quick{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Desktop: the say and the buy stack in column one, the photograph holds column
   two across both rows. Phone source order (say → photograph → buy) is kept. */
@media(min-width:1024px){
  .dt-hero{padding-top:34px}
  .dt-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
  .dt-hero-say{grid-column:1;grid-row:1}
  /* start, not end: the hero photograph is a tall vertical, so anchoring the
     buy block to the bottom of a ~1200px row would push the price and the CTAs
     below the fold. They sit directly under the sentence that earns them. */
  .dt-buyrow{grid-column:1;grid-row:2;align-self:start;margin-top:30px}
  /* the plate hugs the photograph instead of stretching the column, so the tall
     frame reads as a framed print rather than a picture floating on a slab */
  .dt-hero-shot{grid-column:2;grid-row:1 / span 2;margin-top:6px;align-self:center;
    width:max-content;max-width:100%;margin-inline:auto}
  /* The tall frame is shown WHOLE and sized to the viewport: its whole point is
     the distance between the farmer's feet and the crown of the palm, so it is
     never cover-cropped, and it never runs past the fold — a hero you have to
     scroll to finish is not a hero. */
  .dt-hero-shot img{width:auto;height:min(70vh,760px);max-width:100%;max-height:none;
    aspect-ratio:auto;object-fit:contain;object-position:center}
}

/* ══ 02 · THE PROBLEM ══════════════════════════════════════════════════════ */
.dt-problem{display:grid;gap:14px;margin-top:30px}
@media(min-width:744px){.dt-problem{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.dt-pcard{padding:22px 20px 24px;background:#fff;border:0.5px solid var(--line);border-radius:16px}
.dt-band.warm .dt-pcard{background:#fff}
.dt-pcard b{display:block;font-size:15.5px;line-height:1.4}
.dt-pcard p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
html[lang="kn"] .dt-pcard p{line-height:1.78}
.dt-pcard-n{display:block;margin-bottom:12px;font-size:12px;font-weight:700;color:var(--brand-maroon);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* ══ 03 · THE CHANGE — two columns, one crossed out ════════════════════════ */
.dt-switch{display:grid;gap:14px;margin-top:30px}
@media(min-width:744px){.dt-switch{grid-template-columns:1fr 1fr;gap:20px}}
.dt-col{padding:24px 22px 26px;border-radius:18px;border:0.5px solid var(--line)}
.dt-col.was{background:#F4F2EE}
.dt-col.now{background:#fff;border-color:rgba(120,18,22,.22);box-shadow:0 18px 44px -34px rgba(120,18,22,.5)}
.dt-col h3{font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase}
html[lang="kn"] .dt-col h3{letter-spacing:0;text-transform:none;font-size:14.5px}
.dt-col.was h3{color:var(--ink-2)}
.dt-col.now h3{color:var(--brand-maroon)}
.dt-col ol{list-style:none;margin-top:16px;display:grid;gap:11px;counter-reset:s}
.dt-col li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.55}
html[lang="kn"] .dt-col li{line-height:1.75}
.dt-col li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--f-body)}
.dt-col.was li::before{background:#E4E0D9;color:#6a6660}
.dt-col.now li::before{background:#FBE9E9;color:var(--brand-maroon)}
.dt-col.was li{color:var(--ink-2)}

/* ══ 04 · HOW IT WORKS ═════════════════════════════════════════════════════ */
.dt-how{display:grid;gap:14px;margin-top:30px}
@media(min-width:600px){.dt-how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.dt-how{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.dt-step{position:relative;padding:22px 20px 24px;background:#fff;border:0.5px solid var(--line);border-radius:16px}
.dt-step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--brand-maroon);color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dt-step b{display:block;margin-top:14px;font-size:16px}
.dt-step p{margin-top:7px;font-size:13.8px;line-height:1.6;color:var(--ink-2)}
html[lang="kn"] .dt-step p{line-height:1.78}

/* ══ 05 · CHOOSE YOUR REACH — the buying core ══════════════════════════════ */
.dt-warnbox{display:flex;gap:14px;margin-top:24px;padding:16px 18px;border-radius:14px;
  background:#FFF6EC;border:0.5px solid rgba(255,153,51,.5);border-left:3px solid var(--saffron)}
.dt-warnbox svg{flex:0 0 auto;width:22px;height:22px;color:var(--saffron-ink);margin-top:1px}
.dt-warnbox b{font-size:14.5px}
.dt-warnbox p{margin-top:4px;font-size:13.8px;line-height:1.6;color:#5a4326}
html[lang="kn"] .dt-warnbox p{line-height:1.78}

.dt-match{margin-top:28px;padding:22px 20px 24px;background:#fff;border:0.5px solid var(--line);border-radius:18px}
.dt-match-q{font-weight:700;font-size:16.5px;line-height:1.4}
.dt-match-h{margin-top:6px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.dt-heights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@media(min-width:600px){.dt-heights{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dt-hbtn{min-height:56px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer;text-align:center;line-height:1.35;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.dt-hbtn:hover{border-color:var(--line-strong)}
.dt-hbtn[aria-pressed="true"]{border-color:var(--navy);background:#F1F3FF;color:var(--navy)}
/* the escape hatch — "none of the above" is a different kind of answer, and it
   leads to a person rather than to a grade, so it does not look like a grade */
.dt-hbtn.is-out{grid-column:1 / -1;min-height:48px;border-style:dashed;color:var(--ink-2);font-weight:600}
.dt-hbtn.is-out[aria-pressed="true"]{border-style:solid;border-color:var(--saffron);background:#FFF6EC;color:var(--saffron-ink)}
.dt-answer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:16px;padding:14px 16px;
  border-radius:12px;background:#F1F3FF;font-size:14.5px;line-height:1.5;color:var(--navy)}
.dt-answer b{font-weight:700}
.dt-answer:empty{display:none}

.dt-grades{display:grid;gap:12px;margin-top:24px}
@media(min-width:600px){.dt-grades{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.dt-grades{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.dt-grade{position:relative;display:flex;flex-direction:column;gap:3px;padding:20px 18px 22px;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;font-family:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.dt-grade:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.dt-grade[aria-checked="true"]{border-color:var(--brand-maroon);box-shadow:0 0 0 3px rgba(120,18,22,.12)}
.dt-grade-pos{position:absolute;top:14px;right:14px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--green-soft);color:var(--green);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
html[lang="kn"] .dt-grade-pos{letter-spacing:0;text-transform:none;font-size:12px}
.dt-grade-ft{display:flex;align-items:baseline;gap:5px;font-size:44px;line-height:.92;color:var(--ink)}
.dt-grade-ft span{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.dt-grade-code{margin-top:8px;font-weight:700;font-size:14px;letter-spacing:.04em}
.dt-grade-tree{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.dt-grade-tree b{color:var(--ink);font-weight:600}
.dt-grade-price{margin-top:14px;padding-top:12px;border-top:0.5px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;font-variant-numeric:tabular-nums}
.dt-grade-price .p{font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-0.01em}
.dt-grade-price .was{font-weight:500;font-size:12.5px;color:var(--price-was);text-decoration:line-through;
  text-decoration-thickness:1px;text-underline-offset:2px}
.dt-grade-price .off{background:var(--save-bg);color:var(--save-ink);border:1px solid var(--save-line);
  font-weight:600;font-size:11.5px;line-height:1.55;padding:1px 8px;border-radius:var(--r-pill);white-space:nowrap}
.dt-grade.rec::after{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 2px var(--navy) inset}

/* ══ 06 · SPECIFICATIONS — summary first, full table on request ════════════ */
.dt-specsum{margin-top:22px}
.dt-specfull{margin-top:20px}
.dt-specfull > summary{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:9px 2px;
  cursor:pointer;list-style:none;font-weight:700;font-size:15px;color:var(--saffron-ink)}
.dt-specfull > summary::-webkit-details-marker{display:none}
.dt-specfull > summary::after{content:"";width:10px;height:10px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  transition:transform .2s var(--ease)}
.dt-specfull[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.dt-specfull > summary:hover{text-decoration:underline}
.dt-specfull > summary:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;border-radius:6px}
.dt-specwrap{margin-top:14px;border:0.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.dt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt-spec{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
table.dt-spec th,table.dt-spec td{padding:13px 14px;text-align:center;border-bottom:0.5px solid var(--line);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.dt-spec tbody tr:last-child th,table.dt-spec tbody tr:last-child td{border-bottom:0}
table.dt-spec th[scope="row"]{position:sticky;left:0;z-index:1;background:#FBFAF8;text-align:left;font-weight:600;
  font-size:12.5px;color:var(--ink-2);white-space:normal;min-width:148px;border-right:0.5px solid var(--line)}
html[lang="kn"] table.dt-spec th[scope="row"]{font-size:13px}
table.dt-spec thead th{background:#141416;color:#fff;font-weight:700;font-size:15px;letter-spacing:.03em}
table.dt-spec thead th[scope="row"]{background:#141416;color:#fff;border-right-color:rgba(255,255,255,.14)}
table.dt-spec thead th small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;opacity:.62;letter-spacing:.04em}
table.dt-spec td.is-sel{background:#FFF6EC}
table.dt-spec .row-price td{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
table.dt-spec .row-price td .was{display:block;margin-top:2px;font-weight:500;font-size:12px;
  color:var(--price-was);text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
table.dt-spec .row-save td{font-weight:600;color:var(--save-ink);font-variant-numeric:tabular-nums}
table.dt-spec .row-save td small{font-weight:500;opacity:.7}
.dt-spec-legend{padding:12px 14px;background:#FBFAF8;border-top:0.5px solid var(--line);font-size:12.5px;
  line-height:1.6;color:var(--ink-2)}

/* ══ 07 · ENGINEERING — bento ══════════════════════════════════════════════
   Four cards, each one verified fact with its evidence inside: the material
   card is dominant (studio photograph + the max-weight figure), the clamp card
   carries the turntable, grip and koythe are compact text cards. Phone stacks
   in source order; desktop is a 4-column bento. */
.dt-bento{display:grid;gap:14px;margin-top:30px}
.dt-bcard{display:flex;flex-direction:column;padding:22px 20px 24px;background:#fff;
  border:0.5px solid var(--line);border-radius:18px;overflow:hidden;
  transition:box-shadow .25s var(--ease)}
.dt-bcard:hover{box-shadow:0 20px 48px -34px rgba(20,20,22,.4)}
.dt-bcard b{display:block;font-size:15.5px}
.dt-bcard b .tm{font-size:.66em;vertical-align:super;opacity:.65;margin-left:1px}
.dt-bcard p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--ink-2)}
html[lang="kn"] .dt-bcard p{line-height:1.78}
/* the one large figure in the section — proof, set big, labelled quietly */
.dt-bfig{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:18px}
.dt-bfig .dt-num{font-size:clamp(42px,5vw,64px);line-height:.9;color:var(--ink)}
.dt-bfig-u{font-weight:700;font-size:17px;color:var(--ink-2)}
.dt-bfig-l{flex-basis:100%;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.dt-bimg{display:block;flex:1;min-height:260px;margin:18px -20px -24px;background:#F2F1EF}
.dt-bimg img{display:block;width:100%;height:100%;min-height:260px;max-height:56svh;object-fit:contain;object-position:center bottom}
.dt-bcard .dt-stage.film{margin-top:16px;border-radius:14px}
@media(min-width:744px){
  .dt-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .dt-bcard.is-material{grid-column:1 / -1}
  .dt-bcard.is-clamps{grid-column:1 / -1}
}
@media(min-width:1024px){
  .dt-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .dt-bcard.is-material{grid-column:1 / 3;grid-row:1 / 3}
  .dt-bcard.is-clamps{grid-column:3 / 5;grid-row:1}
  .dt-bento .dt-bcard:nth-child(3){grid-column:3;grid-row:2}
  .dt-bento .dt-bcard:nth-child(4){grid-column:4;grid-row:2}
}

/* ══ 08 · USE CASES — the Harvest ↔ Spray switcher ═════════════════════════
   Tabs with the house sliding underline (never pills). One panel at a time;
   the ink bar is positioned by doti.js from the active tab's box. */
.dt-jobtabs{position:relative;display:flex;gap:28px;margin-top:26px;border-bottom:0.5px solid var(--line)}
.dt-jobtab{position:relative;min-height:44px;padding:11px 2px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15.5px;color:var(--ink-2);transition:color .18s var(--ease)}
.dt-jobtab:hover{color:var(--ink)}
.dt-jobtab[aria-selected="true"]{color:var(--brand-maroon)}
.dt-jobtab:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;border-radius:6px}
.dt-jobink{position:absolute;left:0;bottom:-0.5px;height:2px;width:0;background:var(--brand-maroon);
  transition:transform .28s var(--ease),width .28s var(--ease)}
@media(prefers-reduced-motion:reduce){.dt-jobink{transition:none}}
.dt-uses{margin-top:22px;max-width:820px}
.dt-use{padding:26px 22px 28px;border-radius:18px;border:0.5px solid var(--line);background:#fff}
.dt-band.warm .dt-use{background:#fff}
.dt-use[hidden]{display:none}
.dt-use.is-in{animation:dtFade .3s var(--ease)}
@keyframes dtFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dt-use.is-in{animation:none}}
.dt-use h3{font-weight:700;font-size:clamp(19px,2.6vw,25px);line-height:1.2;letter-spacing:-0.018em}
html[lang="kn"] .dt-use h3{line-height:1.4;letter-spacing:0}
.dt-use p{margin-top:12px;font-size:14.8px;line-height:1.68;color:var(--ink-2)}
html[lang="kn"] .dt-use p{line-height:1.85}
.dt-use ul{list-style:none;margin-top:16px;display:grid;gap:9px}
.dt-use li{position:relative;padding-left:24px;font-size:14.2px;line-height:1.55}
html[lang="kn"] .dt-use li{line-height:1.75}
.dt-use li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;
  background:var(--brand-maroon)}

/* ══ 09 · BENEFITS ═════════════════════════════════════════════════════════ */
.dt-bens{display:grid;gap:12px;margin-top:30px}
@media(min-width:600px){.dt-bens{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1024px){.dt-bens{grid-template-columns:repeat(3,1fr);gap:16px}}
.dt-ben{padding:20px;background:#fff;border:0.5px solid var(--line);border-radius:14px}
.dt-band.warm .dt-ben{background:#fff}
.dt-ben b{display:block;font-size:15.5px}
.dt-ben p{margin-top:6px;font-size:13.8px;line-height:1.6;color:var(--ink-2)}
html[lang="kn"] .dt-ben p{line-height:1.78}

/* ══ 10 · GALLERY ══════════════════════════════════════════════════════════ */
.dt-gal{display:grid;gap:12px;margin-top:28px}
@media(min-width:744px){.dt-gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.dt-gal figure{margin:0;border-radius:16px;overflow:hidden;border:0.5px solid var(--line);background:#fff;
  display:flex;flex-direction:column}
.dt-gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;max-height:52svh}
.dt-gal figure:first-child img{object-position:center 38%}
.dt-gal figcaption{padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink-2);flex:1}
html[lang="kn"] .dt-gal figcaption{line-height:1.7}

/* ══ 11 · FAQ ══════════════════════════════════════════════════════════════ */
.dt-faq{margin-top:28px;border-top:0.5px solid var(--line)}
.dt-faq details{border-bottom:0.5px solid var(--line)}
.dt-faq summary{display:flex;align-items:flex-start;gap:14px;padding:18px 2px;cursor:pointer;list-style:none;
  font-weight:600;font-size:15.8px;line-height:1.45;min-height:44px}
html[lang="kn"] .dt-faq summary{line-height:1.65}
.dt-faq summary::-webkit-details-marker{display:none}
.dt-faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-top:6px;margin-left:auto;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);
  transition:transform .2s var(--ease)}
.dt-faq details[open] summary::after{transform:rotate(-135deg)}
.dt-faq summary:hover{color:var(--brand-maroon)}
.dt-faq .dt-a{padding:0 34px 20px 2px;font-size:14.8px;line-height:1.7;color:var(--ink-2);max-width:70ch}
html[lang="kn"] .dt-faq .dt-a{line-height:1.9}
.dt-faq .dt-a a{color:var(--saffron-ink)}

/* ══ 12 · BUY ══════════════════════════════════════════════════════════════ */
.dt-buy{margin-top:30px;display:grid;gap:20px}
@media(min-width:900px){.dt-buy{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:start}}
.dt-buycard{padding:26px 22px 28px;background:#fff;border:0.5px solid var(--line-strong);border-radius:20px}
.dt-buycard .dt-amt{color:var(--ink)}
.dt-pricelist{list-style:none;margin-top:20px;display:grid;gap:1px;background:var(--line);
  border:0.5px solid var(--line);border-radius:12px;overflow:hidden}
.dt-pricelist li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 15px;background:#fff;font-size:14.5px}
.dt-pricelist .n{font-weight:600}
.dt-pricelist .n small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.dt-pricelist .p{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 8px;
  text-align:right;font-variant-numeric:tabular-nums}
.dt-pricelist .p .now{font-weight:800;color:var(--ink);white-space:nowrap}
.dt-pricelist .p .was{font-weight:500;font-size:12.5px;color:var(--price-was);white-space:nowrap;
  text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
.dt-pricelist .p .off{background:var(--save-bg);color:var(--save-ink);border:1px solid var(--save-line);
  font-weight:600;font-size:11.5px;line-height:1.55;padding:1px 8px;border-radius:var(--r-pill);white-space:nowrap}
.dt-asklist{list-style:none;display:grid;gap:10px;margin-top:14px}
.dt-asklist li{position:relative;padding-left:22px;font-size:14px;line-height:1.6;color:var(--ink-2)}
html[lang="kn"] .dt-asklist li{line-height:1.78}
.dt-asklist li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;
  background:var(--saffron)}

/* ══ 13 · TRUST ════════════════════════════════════════════════════════════ */
.dt-trust{display:grid;gap:14px;margin-top:28px}
@media(min-width:744px){.dt-trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.dt-tcard{padding:22px 20px;border-radius:16px;border:0.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.dt-tcard b{display:block;font-size:15.5px;color:#fff}
.dt-tcard p{margin-top:8px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.66)}
html[lang="kn"] .dt-tcard p{line-height:1.82}
.dt-tcard a{color:#FFB566;text-decoration:none}
.dt-tcard a:hover{text-decoration:underline}

/* ══ 14 · FINAL CTA ════════════════════════════════════════════════════════ */
/* the trust band and the closing CTA are both dark: butt them together so the
   tricolor signature rule reads as the divider, not as a gap */
.dt-final.kb-next{margin-top:0}
body[data-kb-page="doti"] .kb-foot{margin-top:0}
.dt-final{text-align:left}
.dt-final .dt-h2{max-width:18ch}
.dt-final .dt-actions{margin-top:26px}
@media(min-width:744px){.dt-final{text-align:center}.dt-final .dt-h2,.dt-final .dt-lede{margin-inline:auto}
  .dt-final .dt-actions{justify-content:center}}

/* ══ STICKY BUY DOCK — phone only. One bottom element, per the house rule. ══ */
.dt-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-top:0.5px solid var(--line-strong);transform:translateY(120%);transition:transform .3s var(--ease)}
.dt-dock.show{transform:none}
.dt-dock-l{min-width:0;flex:1}
.dt-dock-g{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-dock-l .dt-dock-row{display:flex;align-items:baseline;gap:7px;margin-top:1px}
.dt-dock-p{font-weight:800;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.dt-dock-was{font-weight:500;font-size:12.5px;color:var(--price-was);font-variant-numeric:tabular-nums;
  text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
.dt-dock-was[hidden]{display:none}
.dt-dock .kb-btn{flex:0 0 auto;min-height:46px;padding:10px 20px;font-size:14.5px}
@media(min-width:1024px){.dt-dock{display:none}}
@media(prefers-reduced-motion:reduce){.dt-dock{transition:none}}
/* the dock's clearance is added to the FOOTER, not to <body> — padding on body
   paints the page background below the maroon footer and reads as a white strip */
body.has-dock .kb-foot{padding-bottom:calc(34px + 74px)}
@media(min-width:1024px){body.has-dock .kb-foot{padding-bottom:34px}}

/* ── in-page chapter nav (tablet+): the Monarch-style spine ── */
.dt-chapters{display:none}
@media(min-width:1024px){
  .dt-chapters{display:block;position:sticky;top:60px;z-index:40;background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:0.5px solid var(--line)}
  .dt-spine{display:flex;align-items:center;gap:22px;max-width:1180px;margin-inline:auto;padding:0 56px}
  .dt-chapters ul{list-style:none;display:flex;gap:18px;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  /* the desktop purchase bar: selected grade · from-price · Buy. Chrome layer —
     the saffron button here is the chrome accent, counted apart from content. */
  .dt-spine-buy{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding:6px 0}
  .dt-spine-p{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
  /* No struck MRP here on purpose: the spine is a compact chrome strip, and the
     53px it costs came straight out of the chapter list's legibility. The MRP is
     already on the hero, the grade cards, the price list, the buy card and the
     dock — removing it here costs the farmer nothing (R7). */
  .dt-spine-p b{color:var(--ink);font-weight:800}
  .dt-spine-buy .kb-btn{min-height:44px;padding:8px 20px;font-size:13.5px}
  .dt-chapters ul::-webkit-scrollbar{display:none}
  .dt-chapters a{display:inline-block;padding:13px 0;font-size:12.5px;font-weight:600;color:var(--ink-2);
    text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .18s var(--ease)}
  .dt-chapters a:hover{color:var(--ink)}
  .dt-chapters a[aria-current="true"]{color:var(--brand-maroon);border-bottom-color:var(--brand-maroon)}
}
:target{scroll-margin-top:112px}

/* ── reveal: reuse kb.css's .kb-rev grammar; nothing new to define here ── */