/* Tickd brand page — extends styles.css */

.brand-page{padding-top:64px}

/* ---------- layout: sticky "on this page" toc + content ---------- */
.b-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start}
.b-toc{
  position:sticky;top:96px;padding:8px 0 24px;
  max-height:calc(100vh - 120px);overflow-y:auto;
}
.toc-label{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin:0 0 12px;
}
.b-toc nav{display:flex;flex-direction:column;border-left:1.5px solid rgba(52,51,90,.1)}
.b-toc nav a{
  position:relative;display:block;padding:7px 0 7px 18px;
  font-size:14px;font-weight:550;color:var(--slate);text-decoration:none;
  transition:color .2s;
}
.b-toc nav a:hover{color:var(--ink)}
.b-toc nav a.current{color:var(--ink);font-weight:750}
.b-toc nav a.current::before{
  content:"";position:absolute;left:-1.5px;top:6px;bottom:6px;width:3px;
  border-radius:2px;background:var(--peri);
}
.b-main{min-width:0}
@media (max-width:1000px){
  .b-layout{display:block}
  .b-toc{display:none}
}

.b-section{padding:56px 0;scroll-margin-top:80px}
.b-section:first-child{padding-top:44px}
.b-title{
  font-family:var(--font-round);font-size:clamp(26px,3.4vw,36px);font-weight:800;
  margin:0 0 10px;letter-spacing:-.01em;
}
.b-sub{font-size:17px;color:var(--slate);max-width:620px;margin:0 0 12px}
.b-group-title{
  font-family:var(--font-round);font-size:19px;font-weight:750;margin:44px 0 4px;
}
.b-note{font-size:14px;color:var(--slate);margin:2px 0 18px;max-width:620px}

/* ---------- logo tiles ---------- */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;
}
.logo-grid-wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.logo-tile{
  margin:0;background:var(--card);border-radius:20px;padding:14px;
  box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
}
.logo-preview{
  display:flex;align-items:center;justify-content:center;
  height:150px;border-radius:14px;overflow:hidden;
  background:
    linear-gradient(180deg,#FFFBFC,#FFF3F5);
  box-shadow:inset 0 0 0 1.5px rgba(52,51,90,.06);
}
.logo-grid-wide .logo-preview{height:130px}
.logo-preview img{max-width:78%;max-height:74%;width:auto;height:auto;object-fit:contain}
.logo-preview .round-icon{border-radius:22%;max-height:70%}
.logo-preview.on-dark{background:linear-gradient(180deg,#3B3A66,var(--ink))}
.logo-tile figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:12px 4px 10px;
}
.logo-tile figcaption strong{font-size:13.5px;font-weight:650}
.logo-tile figcaption span{font-size:12px;color:var(--slate);white-space:nowrap}
.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 10px;border-radius:14px;text-decoration:none;
  font-size:13px;font-weight:650;color:var(--pink-deep);
  background:rgba(255,143,163,.12);
  transition:background .2s,transform .2s var(--ease-spring);
}
.dl-btn:hover{background:rgba(255,143,163,.22);transform:translateY(-1px)}
.dl-btn:active{transform:scale(.97)}

/* ---------- usage rules ---------- */
.b-usage{
  margin-top:44px;background:var(--card);border-radius:var(--radius-lg);
  padding:26px 30px;box-shadow:var(--shadow-soft);
}
.b-usage h3{font-family:var(--font-round);font-size:18px;font-weight:750;margin:0 0 10px}
.b-usage ul{margin:0;padding-left:20px}
.b-usage li{font-size:14.5px;color:var(--slate);padding:4px 0}
.b-usage strong{color:var(--ink)}

/* ---------- swatches ---------- */
.swatches{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
}
.swatches-small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.swatch{
  position:relative;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--card);border:none;border-radius:16px;padding:12px 14px;
  box-shadow:var(--shadow-soft);cursor:pointer;
  transition:transform .2s var(--ease-spring),box-shadow .2s;
}
.swatch:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.sw-chip{width:44px;height:44px;border-radius:14px;flex:none}
.swatch-sm .sw-chip{width:34px;height:34px;border-radius:11px}
.sw-meta{display:flex;flex-direction:column;min-width:0}
.sw-meta strong{font-size:14px;font-weight:650}
.sw-meta code{font-size:12px;color:var(--slate)}
.sw-meta em{font-size:11.5px;color:var(--slate);font-style:normal;margin-top:2px}
.sw-copied{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(52,51,90,.92);color:#fff;border-radius:16px;
  font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;
}
.swatch.copied .sw-copied{opacity:1}

/* ---------- wash + gradients ---------- */
.wash-strip{
  display:flex;height:86px;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-soft);margin-bottom:8px;
}
.wash-stop{
  flex:1;display:flex;align-items:flex-end;padding:10px 14px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--slate);font-family:monospace;
}
.wash-stop:nth-child(1){background:#FFFBFC}
.wash-stop:nth-child(2){background:#FFF3F5}
.wash-stop:nth-child(3){background:#F1F1FF}
.grad-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
}
.grad-tile{
  height:110px;border-radius:18px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;box-shadow:var(--shadow-soft);
}
.grad-tile span{font-weight:750;font-family:var(--font-round);font-size:15px;text-shadow:0 1px 6px rgba(52,51,90,.3)}
.grad-tile code{font-size:11px;opacity:.9;text-shadow:0 1px 4px rgba(52,51,90,.4)}
.g-momentum{background:linear-gradient(90deg,#FF8FA3,#9095FF)}
.g-day{background:linear-gradient(90deg,#FFC36B,#FF8FA3,#9095FF)}
.g-journey{background:linear-gradient(90deg,#FF8FA3,#9095FF,#7FE0BE)}
.g-pro{background:linear-gradient(180deg,#3B3A66,#34335A)}

/* ---------- type ---------- */
.type-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.type-card{
  background:var(--card);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:8px;
}
.type-label{
  font-size:11.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);
}
.type-sample{margin:4px 0}
.type-display{font-family:var(--font-round);font-size:30px;font-weight:800;line-height:1.1}
.type-body{font-size:16px;color:var(--ink);line-height:1.55}
.type-eyebrow{
  font-size:13px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);
}
.type-card code{font-size:11.5px;color:var(--slate)}
.type-card .b-note{margin:0}

/* ---------- voice ---------- */
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.voice-card{
  margin:0;background:var(--card);border-radius:20px;padding:26px 28px;
  box-shadow:var(--shadow-soft);
  font-family:var(--font-round);font-size:21px;font-weight:750;line-height:1.3;
}
.voice-card em{font-style:normal;color:var(--pink)}
.voice-note{margin-top:18px}

/* ---------- overview pillars ---------- */
.pillar-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:26px}
.pillar{
  background:var(--card);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow-soft);
}
.pillar span{font-size:22px}
.pillar .p-tick{color:var(--pink);font-weight:800}
.pillar .p-space{color:var(--peri);font-weight:800}
.pillar h3{font-family:var(--font-round);font-size:17px;font-weight:750;margin:8px 0 4px}
.pillar p{font-size:14px;color:var(--slate);margin:0}

/* ---------- generic guideline list ---------- */
.b-list{list-style:none;margin:6px 0 0;padding:0;max-width:720px}
.b-list li{
  position:relative;padding:9px 0 9px 26px;font-size:15px;color:var(--slate);
  border-bottom:1.5px dashed rgba(124,124,160,.16);
}
.b-list li:last-child{border-bottom:none}
.b-list li::before{
  content:"✓";position:absolute;left:2px;top:9px;font-weight:800;color:var(--pink);
}
.b-list strong{color:var(--ink)}
.b-list code{
  font-size:12.5px;background:rgba(144,149,255,.12);color:var(--indigo);
  padding:1px 6px;border-radius:6px;
}

/* ---------- UI & motion specimens ---------- */
.ui-specimens{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:8px 0 22px;
}
.ui-spec{
  background:var(--card);border-radius:20px;padding:24px 18px 16px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.ui-spec code{font-size:11.5px;color:var(--slate)}
.spec-card{
  position:relative;display:block;width:150px;padding:14px 16px 14px 20px;
  background:rgba(255,143,163,.09);border-radius:16px;
  font-size:14px;font-weight:650;overflow:hidden;text-align:left;
}
.spec-edge{position:absolute;left:0;top:0;bottom:0;width:5px;background:color-mix(in srgb,var(--pink) 70%,white)}
.spec-chip{
  display:inline-block;padding:4px 12px;border-radius:12px;
  background:rgba(255,143,163,.14);color:#C2506B;font-size:12px;font-weight:650;
}
.spec-dot{
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px var(--pink),0 0 16px 4px rgba(255,143,163,.65);
  animation:breathe-dot 2.2s ease-in-out infinite;
}

/* ---------- the cast ---------- */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cast-card{
  background:var(--card);border-radius:20px;padding:22px;box-shadow:var(--shadow-soft);
}
.cast-glyph{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:18px;background:linear-gradient(180deg,#FFFBFC,#FFF3F5);
  box-shadow:inset 0 0 0 1.5px rgba(52,51,90,.06);
  font-size:24px;color:var(--pink);
}
.cast-glyph img{width:34px;height:auto}
.you-dot{
  display:block;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3.5px var(--pink),0 0 12px 3px rgba(255,143,163,.6);
  animation:breathe-dot 2.2s ease-in-out infinite;
}
@keyframes breathe-dot{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
.cast-card h3{font-family:var(--font-round);font-size:16.5px;font-weight:750;margin:12px 0 4px}
.cast-card p{font-size:13.5px;color:var(--slate);margin:0}

/* ---------- persona stills ---------- */
.logo-preview-photo img{max-width:100% !important;max-height:100% !important;width:100%;height:100%;object-fit:cover;border-radius:14px}

/* ---------- voice do / don't ---------- */
.dodont-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.dodont{border-radius:20px;padding:22px 26px;box-shadow:var(--shadow-soft);background:var(--card)}
.dodont h3{font-family:var(--font-round);font-size:16px;font-weight:800;margin:0 0 10px}
.dodont.do h3{color:#1F9873}
.dodont.dont h3{color:#D64A66}
.dodont ul{list-style:none;margin:0;padding:0}
.dodont li{
  position:relative;padding:7px 0 7px 24px;font-size:14.5px;color:var(--ink);
}
.dodont.do li::before{content:"✓";position:absolute;left:0;color:#1F9873;font-weight:800}
.dodont.dont li::before{content:"✕";position:absolute;left:0;color:#D64A66;font-weight:800}
.dodont li span{color:var(--slate);font-size:12.5px}

/* ---------- assets cta ---------- */
.asset-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(255,143,163,.1),rgba(144,149,255,.1));
  border-radius:var(--radius-lg);padding:26px 30px;margin:14px 0 18px;
  box-shadow:inset 0 0 0 1.5px rgba(255,143,163,.25);
}
.asset-cta h3{font-family:var(--font-round);font-size:18px;font-weight:800;margin:0 0 4px}
.asset-cta p{font-size:14px;color:var(--slate);margin:0;max-width:480px}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .type-grid{grid-template-columns:1fr}
  .voice-grid{grid-template-columns:1fr}
  .dodont-grid{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr}
  .b-section{padding:44px 0}
}
@media (prefers-reduced-motion:reduce){
  .spec-dot,.you-dot{animation:none}
}