/* 6▪7 COFFEE — UI kit: square dot + no-coffee states */
body.kit{background:var(--cream);color:var(--ink)}
.kit-top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(18px,4vw,48px);background:rgba(244,235,221,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,27,45,.12);
}
.kit-top__brand{display:flex;align-items:baseline;gap:12px}
.kit-top__brand .brand{font-size:18px;color:var(--blue)}
.kit-top__brand span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kit-top__nav{display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kit-top__nav a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.kit-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.kit-hero{background:var(--blue);color:var(--cream);position:relative;overflow:hidden;padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)}
.kit-hero__bg{position:absolute;right:-15%;top:-25%;width:70%;opacity:.4;pointer-events:none}
.kit-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(32px,6vw,80px);align-items:center}
.kit-hero h1{font-size:clamp(38px,5.6vw,76px);line-height:1.06;letter-spacing:-.02em;margin-top:22px;max-width:12ch}
.kit-hero p{font-size:18px;line-height:1.6;color:rgba(244,235,221,.76);max-width:48ch;margin-top:22px}
.kit-hero__brand{font-size:clamp(90px,15vw,190px);color:var(--cream)}
.kit-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.kit-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(244,235,221,.3);border-radius:99px;padding:7px 11px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,235,221,.8)}
.kit-pill i{width:5px;height:5px;background:var(--gold);display:block}
.dot-poster{background:var(--cream);color:var(--blue);padding:clamp(22px,3vw,36px);box-shadow:0 30px 70px rgba(0,0,0,.22)}
.dot-poster__brand{font-size:clamp(62px,8vw,108px);line-height:1;letter-spacing:-.04em}
.dot-poster__brand .sqdot{width:.16em;height:.16em;margin:0 .07em;vertical-align:baseline}
.dot-poster__rule{height:1px;background:rgba(16,27,45,.16);margin:22px 0 14px}
.dot-poster__specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:10px;line-height:1.5;color:var(--muted)}
.dot-poster__specs b{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:3px;font-weight:600}
.dot-poster__coffee{font-family:var(--font-body);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-top:8px}
.kit-section{padding:clamp(48px,6vw,88px) 0;border-bottom:1px solid rgba(16,27,45,.12)}
.kit-section--blue{background:var(--blue);color:var(--cream);border-bottom-color:rgba(255,255,255,.14)}
.kit-section--paper{background:var(--paper)}
.kit-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(26px,4vw,44px)}
.kit-head h2{font-size:clamp(28px,3.5vw,46px);line-height:1.08;margin-top:14px}
.kit-head p{font-size:14px;line-height:1.6;color:var(--muted);max-width:44ch}
.kit-section--blue .kit-head p{color:rgba(244,235,221,.68)}
.kit-kicker{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.kit-kicker b{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;color:var(--blue);font-weight:600}
.kit-section--blue .kit-kicker{color:rgba(244,235,221,.55)}
.kit-section--blue .kit-kicker b{color:var(--gold)}
.kit-grid{display:grid;gap:18px}
.kit-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-card{border:1px solid rgba(16,27,45,.14);border-radius:12px;background:var(--paper);padding:20px;min-width:0}
.kit-section--blue .kit-card{background:rgba(255,255,255,.06);border-color:rgba(244,235,221,.18)}
.kit-card__label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;gap:10px}
.kit-section--blue .kit-card__label{color:rgba(244,235,221,.5)}
.kit-card__label span:last-child{opacity:.6;letter-spacing:.08em}

/* size ladder */
.size-row{display:flex;align-items:baseline;gap:clamp(16px,3vw,34px);flex-wrap:wrap;padding:18px 0;border-bottom:1px solid rgba(16,27,45,.1)}
.size-row:last-child{border-bottom:0}
.size-row .brand{color:var(--blue);line-height:1}
.size-row .sz{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:74px}
.size-row .brand[data-size="hero"]{font-size:clamp(56px,8vw,92px)}
.size-row .brand[data-size="h1"]{font-size:clamp(38px,4.6vw,56px)}
.size-row .brand[data-size="header"]{font-size:24px}
.size-row .brand[data-size="small"]{font-size:16px}
.size-row .brand[data-size="micro"]{font-size:12px}

/* construction */
.blueprint{position:relative;background:var(--blue);color:var(--cream);min-height:240px;display:grid;place-items:center;overflow:hidden;border-radius:8px}
.blueprint .brand{font-size:clamp(72px,10vw,120px)}
.blueprint__h,.blueprint__v{position:absolute;background:rgba(244,235,221,.3)}
.blueprint__h{left:8%;right:8%;top:50%;height:1px}
.blueprint__v{top:10%;bottom:10%;left:50%;width:1px}
.blueprint__cap{position:absolute;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,235,221,.65)}
.blueprint__cap--top{top:12px;left:12px}
.blueprint__cap--side{right:12px;bottom:12px;text-align:right}

/* browser header */
.browser{border:1px solid rgba(16,27,45,.14);border-radius:10px;overflow:hidden;background:var(--cream)}
.browser__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(16,27,45,.06);border-bottom:1px solid rgba(16,27,45,.1)}
.browser__bar i{width:7px;height:7px;border-radius:50%;background:rgba(16,27,45,.18)}
.browser__bar span{margin-left:10px;font-size:8px;letter-spacing:.1em;color:var(--muted);background:rgba(255,255,255,.55);border-radius:4px;padding:3px 8px;flex:1;max-width:220px}
.browser__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid rgba(16,27,45,.1);background:var(--cream)}
.browser__head .brand{font-size:20px;color:var(--blue)}
.browser__nav{display:flex;gap:14px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.browser__nav b{color:var(--blue);font-weight:600}
.browser__lang{font-size:8px;letter-spacing:.1em;border:1px solid rgba(16,27,45,.2);border-radius:99px;padding:3px 7px;color:var(--muted)}
.browser__body{padding:18px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.browser__body img{width:120px}
.browser__body .chip-mini{font-size:8px;border:1px solid rgba(16,27,45,.2);padding:4px 7px;border-radius:99px;color:var(--muted)}

/* phone splash */
.phone{width:min(100%,238px);aspect-ratio:9/19;background:var(--blue);border-radius:30px;padding:14px;margin:0 auto;border:4px solid #0B1A2A;box-shadow:0 24px 50px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;position:relative}
.phone__notch{width:34%;height:13px;background:#0B1A2A;border-radius:0 0 10px 10px;margin:-14px auto 0}
.phone__status{display:flex;justify-content:space-between;color:rgba(244,235,221,.7);font-size:7px;letter-spacing:.08em;padding:8px 4px 0}
.phone__center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.phone__center .brand{font-size:56px;color:var(--cream)}
.phone__coffee{font-size:8px;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,235,221,.72);margin-left:.32em}
.phone__foot{height:3px;width:44%;background:rgba(244,235,221,.24);border-radius:2px;margin:0 auto 8px;overflow:hidden}
.phone__foot i{display:block;width:38%;height:100%;background:var(--gold)}
.phone__hint{font-size:7px;text-align:center;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,235,221,.45);margin-bottom:8px}

/* icon word */
.icon-word{width:min(100%,230px);aspect-ratio:1;background:var(--blue);border-radius:24px;margin:0 auto;display:grid;place-items:center;box-shadow:0 18px 38px rgba(16,27,45,.2);position:relative;overflow:hidden}
.icon-word::after{content:"";position:absolute;inset:9%;border:1px solid rgba(244,235,221,.18);border-radius:16px}
.icon-word .brand{font-size:54px;color:var(--cream);letter-spacing:-.04em}
.icon-word .brand .sqdot{margin:0 .07em}
.app-icon-note{text-align:center;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.kit-section--blue .app-icon-note{color:rgba(244,235,221,.55)}

/* screen heading */
.screen{background:var(--cream);border:1px solid rgba(16,27,45,.12);border-radius:12px;overflow:hidden}
.screen__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(16,27,45,.1);background:rgba(255,255,255,.4)}
.screen__bar .brand{font-size:15px;color:var(--blue)}
.screen__bar span{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.screen__body{padding:22px 20px 24px}
.screen__eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.screen__title{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.02em;margin-top:8px;color:var(--ink)}
.screen__title .sqdot{width:.16em;height:.16em;margin:0 .07em;vertical-align:baseline}
.screen__sub{font-size:12px;color:var(--muted);margin-top:8px}

/* no-coffee states */
.lang-panel{border:1px solid rgba(16,27,45,.14);border-radius:14px;background:var(--paper);overflow:hidden}
.lang-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(16,27,45,.1);background:rgba(11,74,141,.05)}
.lang-panel__id{display:flex;align-items:center;gap:10px}
.lang-badge{font-family:var(--font-display);font-size:10px;letter-spacing:.08em;color:var(--cream);background:var(--blue);padding:4px 7px;border-radius:4px}
.lang-panel__head b{font-size:12px;font-weight:600}
.lang-panel__head span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lang-panel__body{padding:20px 18px;display:flex;flex-direction:column;gap:22px}
.state-label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.state-label i{width:16px;height:1px;background:currentColor;opacity:.5;display:block}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fchip{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(16,27,45,.22);background:var(--cream);
  color:var(--ink);border-radius:99px;padding:10px 15px;font-size:13px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;transition:.18s var(--ease);line-height:1.2;
}
.fchip:hover{border-color:var(--blue);color:var(--blue)}
.fchip--on{background:var(--blue);border-color:var(--blue);color:var(--cream)}
.fchip--on:hover{background:var(--blue-deep);color:var(--cream)}
.fchip__sq{width:6px;height:6px;background:currentColor;display:block;flex:none}
.fbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:99px;padding:12px 18px;
  border:1px solid var(--blue);background:transparent;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;transition:.18s var(--ease);
}
.fbtn:hover{background:rgba(11,74,141,.06)}
.fbtn--on{background:var(--blue);color:var(--cream)}
.fbtn svg{width:15px;height:15px;flex:none}
.empty{
  border:1px dashed rgba(16,27,45,.24);border-radius:10px;padding:24px 20px;text-align:center;background:rgba(244,235,221,.5);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.empty__icon{width:40px;height:40px;border-radius:8px;background:rgba(11,74,141,.08);display:grid;place-items:center;color:var(--blue);margin-bottom:2px}
.empty__icon svg{width:20px;height:20px}
.empty__title{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:0}
.empty__text{font-size:11.5px;line-height:1.55;color:var(--muted);max-width:30ch}
.empty__action{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);text-decoration:underline;text-underline-offset:3px;margin-top:2px}
.lang-note{font-size:10px;line-height:1.55;color:var(--muted);border-left:2px solid var(--gold);padding-left:10px;margin-top:2px}

/* rules */
.rule{position:relative;border:1px solid rgba(16,27,45,.14);border-radius:10px;background:var(--paper);padding:18px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.rule--bad{border-color:rgba(185,106,61,.35);background:rgba(185,106,61,.04)}
.rule__flag{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;border:1px solid currentColor}
.rule--bad .rule__flag{color:var(--caramel-deep)}
.rule--ok .rule__flag{color:#2E6B4F}
.rule__stage{display:flex;align-items:center;justify-content:center;min-height:58px;padding-top:10px}
.rule__cap{font-size:10px;line-height:1.5;color:var(--muted)}
.rule__cap b{display:block;color:var(--ink);font-size:11px;font-weight:600;margin-bottom:2px}
.wrong-brand{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--blue);letter-spacing:-.03em}
.wrong-brand .dot{display:inline-block;width:.155em;height:.155em;border-radius:50%;background:currentColor;margin:0 .075em;vertical-align:.305em}
.bad-language{display:inline-flex;align-items:center;border:1px solid rgba(16,27,45,.22);border-radius:99px;padding:8px 13px;font-size:12px;color:var(--ink);background:var(--cream)}
.rule .brand{font-size:34px;color:var(--blue)}

.kit-footer{background:var(--blue);color:var(--cream);padding:32px 0}
.kit-footer__row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,235,221,.55)}
.kit-footer .brand{font-size:20px;color:var(--cream)}

@media(max-width:1000px){
  .kit-hero__grid{grid-template-columns:1fr}
  .dot-poster{max-width:420px}
  .kit-grid--4{grid-template-columns:repeat(2,1fr)}
  .kit-head{grid-template-columns:1fr}
}
@media(max-width:720px){
  .kit-grid--2,.kit-grid--3,.kit-grid--4{grid-template-columns:1fr}
  .kit-top__brand span{display:none}
  .kit-top__nav span{display:none}
  .size-row{gap:12px}
  .size-row .brand[data-size="hero"]{font-size:64px}
}
@media print{
  .kit-top,.kit-footer{display:none}
  .kit-section{break-inside:avoid;padding:24px 0}
  .kit-hero{padding:32px 0}
}

/* ============ WHITE ARTBOARD BRIEF — v2 ============ */
body.kit{background:#fff}
.kit-top{background:rgba(255,255,255,.96);border-bottom:1px solid #E6E6E6}
.kit-hero{background:#fff;color:var(--ink);border-bottom:1px solid #E6E6E6}
.kit-hero__bg{display:none}
.kit-hero__brand{color:var(--blue)}
.kit-hero p{color:var(--muted)}
.kit-hero h1{color:var(--ink)}
.kit-pill{border-color:#DADADA;color:var(--muted)}
.kit-pill i{background:var(--blue)}
.dot-poster{background:#fff;border:1px solid #E4E4E4;box-shadow:none;color:var(--blue)}
.dot-poster__brand{color:var(--blue)}
.dot-poster__coffee{color:var(--ink)}
.dot-poster__specs{color:var(--muted)}
.dot-poster__specs b{color:var(--blue)}
.kit-section,.kit-section--blue,.kit-section--paper{background:#fff;color:var(--ink);border-bottom:1px solid #E6E6E6}
.kit-section--blue .kit-head p,.kit-section--blue .kit-kicker{color:var(--muted)}
.kit-section--blue .kit-kicker b{color:var(--blue)}
.kit-section--blue .kit-card{background:#fff;border-color:#E4E4E4}
.kit-section--blue .kit-card__label{color:var(--muted)}
.kit-section--blue .app-icon-note{color:var(--muted)}
.kit-card{background:#fff;border-color:#E4E4E4}
.kit-card__label{color:var(--muted)}
.browser{background:#fff;border-color:#E4E4E4}
.browser__bar{background:#fff;border-bottom:1px solid #E6E6E6}
.browser__bar span{background:#fff;border:1px solid #ECECEC}
.browser__head{background:#fff}
.browser__nav{color:var(--muted)}
.browser__lang{border-color:#D8D8D8;color:var(--muted)}
.browser__body .chip-mini{border-color:#D8D8D8;color:var(--muted)}
.phone{background:#fff;border-color:var(--blue);box-shadow:0 18px 40px rgba(16,27,45,.10)}
.phone__notch{background:var(--blue)}
.phone__status{color:var(--muted)}
.phone__center .brand{color:var(--blue)}
.phone__coffee{color:var(--muted)}
.phone__foot{background:#E7E7E7}
.phone__hint{color:var(--muted)}
.screen{background:#fff;border-color:#E4E4E4}
.screen__bar{background:#fff;border-bottom:1px solid #E6E6E6}
.screen__bar span{color:var(--muted)}
.lang-panel{background:#fff;border-color:#E4E4E4}
.lang-panel__head{background:#fff;border-bottom:1px solid #E6E6E6}
.fchip{background:#fff;border-color:#D4D4D4}
.empty{background:#fff;border-color:#CFCFCF}
.rule{background:#fff;border-color:#E4E4E4}
.rule--bad{background:#fff;border-color:rgba(185,106,61,.45)}
.rule__cap{color:var(--muted)}
.kit-footer{background:#fff;color:var(--muted);border-top:1px solid #E6E6E6}
.kit-footer .brand{color:var(--blue)}
.kit-footer__row{color:var(--muted)}
.sqdot--raised{vertical-align:.305em !important}
.wrong-brand .dot{vertical-align:baseline}
.bad-language{background:#fff}