/* Monty's free tools (/tools): the hub, each tool's workbench, the template pages. Tokens, type, buttons, nav and
   footer come from /assets/brand.css. Each page sets its crew colour on <body data-crew>, as an RGB triplet in --c. */
body { min-height: 100vh; display: flex; flex-direction: column; --c: var(--c-monty); }
body[data-crew="hunter"] { --c: var(--c-hunter); }
body[data-crew="lookout"] { --c: var(--c-lookout); }
body[data-crew="warmup"] { --c: var(--c-warmup); }
body[data-crew="callprep"] { --c: var(--c-prep); }
main.tl { flex: 1; width: 100%; padding: 118px 0 0; }
.foot { margin-top: clamp(90px, 10vw, 140px); }
.label { font: 600 11.5px/1 var(--sys); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tertiary); }

/* MARK: Hero */
.tl-hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13.5px; color: var(--tertiary); }
.crumbs a, .crumbs span { white-space: nowrap; }
.crumbs a { color: var(--secondary); transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tl-hero h1 { font-size: clamp(40px, 6vw, 76px); }
.tl-hero .lede { max-width: 30em; }
.crew-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(var(--c), .08); box-shadow: inset 0 0 0 1px rgba(var(--c), .22);
  font-size: 13px; color: rgb(var(--c)); }
.crew-chip img { width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--c), .14); }
.crew-chip b { font-weight: 600; color: var(--text); }

/* MARK: The workbench: inputs on the left, the result on the right; stacked on phones */
.bench { position: relative; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--gutter); }
.bench::before { content: ""; position: absolute; left: 50%; top: -40px; bottom: -80px; width: min(1300px, 140vw); translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--c), .07), rgba(var(--c), .02) 55%, transparent); }
.bench-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -40px rgba(0,0,0,.9); }
.bench-form { padding: clamp(24px, 3vw, 36px); display: grid; gap: 22px; align-content: start; box-shadow: inset -1px 0 0 var(--hair); }
.bench-out { position: relative; padding: clamp(24px, 3vw, 36px); background: rgba(0,0,0,.18); min-height: 460px; display: grid; align-content: start; gap: 14px; }
@media (max-width: 860px) {
  .bench-in { grid-template-columns: 1fr; }
  .bench-form { box-shadow: inset 0 -1px 0 var(--hair); }
  .bench-out { min-height: 0; }
}
.field { display: grid; gap: 9px; }
.field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 500; }
.field > span em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--tertiary); }
.field small { font-size: 13px; color: var(--tertiary); line-height: 1.45; }
.inp { width: 100%; font: 400 16px/1.5 var(--sys); color: var(--text); background: rgba(255,255,255,.045); border: 0; border-radius: 14px; padding: 13px 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: box-shadow .2s, background .2s; resize: vertical; }
.inp::placeholder { color: #66666c; }
.inp:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.inp:focus { outline: none; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(var(--c), .7), 0 0 0 4px rgba(var(--c), .12); }
textarea.inp { min-height: 112px; }
.handle { position: relative; }
.handle::before { content: "@"; position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--tertiary); font-size: 18px; }
.handle .inp { padding-left: 36px; font-size: 18px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); justify-self: start; }
.seg button { padding: 8px 15px; border-radius: 999px; font-size: 14px; color: var(--secondary); transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.seg button[aria-pressed="true"] { color: #0b0c10; background: #f5f5f7; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.linkish { font-size: 14px; color: var(--secondary); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.linkish:hover { color: var(--text); text-decoration-color: #fff; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.privacy-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--tertiary); }
.privacy-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* The result side */
.out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.out-head .label { color: rgb(var(--c)); }
.ghost { display: grid; gap: 12px; }
.ghost i { display: block; height: 92px; border-radius: 18px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ghost i:nth-child(2) { height: 76px; opacity: .7; } .ghost i:nth-child(3) { height: 84px; opacity: .45; }
.empty-note { font-size: 14.5px; color: var(--tertiary); line-height: 1.5; max-width: 30em; }
.thinking { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--secondary); }
.thinking img { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--c), .12); animation: bob 1.4s var(--ease-out) infinite; }
.thinking b { display: inline-flex; gap: 4px; }
.thinking b i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--c)); animation: blink 1.2s infinite; }
.thinking b i:nth-child(2) { animation-delay: .15s; } .thinking b i:nth-child(3) { animation-delay: .3s; }
.ghost.loading i { background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.06), rgba(255,255,255,.025)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes blink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.err { padding: 16px 18px; border-radius: 16px; background: rgba(255,120,120,.07); box-shadow: inset 0 0 0 1px rgba(255,120,120,.2); color: #ffc9c9; font-size: 15px; line-height: 1.5; }

/* A message card: the angle, the text, why it works, copy */
.msg { position: relative; padding: 18px 18px 14px; border-radius: 20px; background: var(--graphite); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  animation: rise .5s var(--spring) both; transition: box-shadow .2s; }
.msg:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.msg:nth-child(2) { animation-delay: .07s; } .msg:nth-child(3) { animation-delay: .14s; } .msg:nth-child(4) { animation-delay: .21s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.msg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.angle { font: 600 11px/1 var(--sys); letter-spacing: 0.105em; text-transform: uppercase; color: rgb(var(--c)); }
.msg p { margin: 0; font-size: 16.5px; line-height: 1.5; letter-spacing: -.012em; white-space: pre-wrap; }
.msg .ph { color: rgb(var(--c)); background: rgba(var(--c), .1); border-radius: 6px; padding: 0 4px; }
.msg .why { margin-top: 10px; font-size: 13.5px; color: var(--tertiary); line-height: 1.45; }
.msg-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.count { font: 500 11.5px/1 var(--mono); color: #5d5d63; }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--secondary); background: rgba(255,255,255,.06); transition: background .2s, color .2s, transform .2s var(--spring-snappy); }
.copy:hover { background: rgba(255,255,255,.11); color: var(--text); }
.copy:active { transform: scale(.96); }
.copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copy.done { color: #0b0c10; background: rgb(var(--c)); }
.out-foot { font-size: 13.5px; color: var(--tertiary); line-height: 1.5; }
.out-foot a { color: var(--secondary); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.out-foot a:hover { color: var(--text); }

/* Follow-up: when to send, as a small timeline */
.cadence { display: flex; align-items: center; gap: 0; margin: 2px 0 4px; }
.cadence span { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.08); }
.cadence span::after { content: attr(data-d); position: absolute; top: 10px; left: 0; translate: -50% 0; font: 500 10.5px/1 var(--mono); color: var(--tertiary); white-space: nowrap; }
.cadence span::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: var(--graphite-3); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.cadence span.on::before { background: rgb(var(--c)); box-shadow: 0 0 12px rgba(var(--c), .6); }
.cadence span:last-child { flex: 0; }
.timing { font-size: 14.5px; color: var(--secondary); margin-top: 16px; }

/* MARK: Profile checker: the score card */
.score-card { position: relative; padding: 22px; border-radius: 24px; background: radial-gradient(120% 100% at 0% 0%, rgba(var(--c), .12), transparent 60%), var(--graphite);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); animation: rise .5s var(--spring) both; }
.sc-top { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 112px; height: 112px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: rgba(255,255,255,.07); }
.ring .bar { stroke: rgb(var(--c)); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); filter: drop-shadow(0 0 8px rgba(var(--c), .5)); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.ring b small { display: block; font: 600 10.5px/1 var(--sys); letter-spacing: 0.09em; color: var(--tertiary); margin-top: 4px; text-align: center; }
.who { display: grid; gap: 4px; min-width: 0; flex: 1 1 200px; }
@media (max-width: 480px) { .sc-top { flex-wrap: wrap; } .ring { width: 96px; height: 96px; } .ring b { font-size: 30px; } }
.who-id { display: flex; align-items: center; gap: 10px; }
.who-id img { width: 36px; height: 36px; border-radius: 50%; background: var(--graphite-3); }
.who-id div { min-width: 0; }
.who-id strong { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-id span { font-size: 13px; color: var(--tertiary); }
.who p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--secondary); }
.parts { display: grid; gap: 2px; margin-top: 18px; }
.part { padding: 14px 0; box-shadow: inset 0 1px 0 var(--hair); }
.part-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; font-weight: 500; }
.part-top em { font: 500 12px/1 var(--mono); font-style: normal; color: var(--secondary); }
.meter { height: 4px; border-radius: 4px; background: rgba(255,255,255,.07); margin: 9px 0 10px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: rgb(var(--c)); transform-origin: left; animation: grow 1s var(--ease-out) both; }
@keyframes grow { from { transform: scaleX(0); } }
.part p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.part .fix { margin-top: 6px; color: var(--text); }
.part .fix::before { content: "Fix: "; color: rgb(var(--c)); font-weight: 600; }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share .copy { padding: 9px 14px; }
.cached { font-size: 12.5px; color: var(--tertiary); }

/* MARK: Lead finder: an example morning, the rest blurred */
.example { display: grid; gap: 8px; }
.lead { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--graphite); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); animation: rise .5s var(--spring) both; }
.lead:nth-child(2) { animation-delay: .08s; } .lead:nth-child(3) { animation-delay: .16s; } .lead:nth-child(4) { animation-delay: .24s; } .lead:nth-child(5) { animation-delay: .32s; }
.lead .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: var(--graphite-3); color: var(--secondary); }
.lead b { display: block; font-size: 15px; font-weight: 600; }
.lead span { display: block; font-size: 13px; color: var(--tertiary); line-height: 1.4; margin-top: 2px; }
.lead .sc { font: 600 15px/1 var(--sys); padding: 7px 10px; border-radius: 10px; background: rgba(var(--c), .12); color: rgb(var(--c)); }
.lead .sc.maybe { background: rgba(255,255,255,.06); color: var(--secondary); }
.lead.blur { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.lead-why { grid-column: 2 / -1; font-size: 13px; color: var(--secondary); line-height: 1.45; }
.lock { position: relative; margin-top: -54px; padding: 26px 18px 6px; text-align: center; background: linear-gradient(transparent, rgba(10,11,15,.96) 45%); border-radius: 0 0 18px 18px; font-size: 14px; color: var(--secondary); }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--secondary); }
.steps3 li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--sys); color: rgb(var(--c)); background: rgba(var(--c), .1); box-shadow: inset 0 0 0 1px rgba(var(--c), .25); }
.steps3 b { color: var(--text); font-weight: 600; }
.xbtn { display: inline-flex; align-items: center; gap: 10px; }
.xbtn svg { width: 16px; height: 16px; fill: currentColor; }

/* MARK: Bridge to Monty */
.bridge { max-width: 1120px; margin: clamp(70px, 9vw, 120px) auto 0; padding: 0 var(--gutter); }
.bridge-in { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
  border-radius: 28px; background: radial-gradient(80% 140% at 0% 50%, rgba(var(--c), .1), transparent 60%), rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bridge-in img { width: clamp(76px, 9vw, 112px); height: auto; filter: drop-shadow(0 12px 30px rgba(var(--c), .25)); }
.bridge h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.bridge p { margin: 8px 0 0; color: var(--secondary); font-size: 16px; line-height: 1.5; max-width: 34em; }
.bridge .cta { display: grid; justify-items: center; gap: 8px; }
.bridge .fine { font-size: 12.5px; text-align: center; }
@media (max-width: 860px) { .bridge-in { grid-template-columns: auto 1fr; } .bridge .cta { grid-column: 1 / -1; justify-items: start; } .bridge .fine { text-align: left; } }
@media (max-width: 480px) { .bridge-in { grid-template-columns: 1fr; } .bridge-in img { width: 72px; } }

/* MARK: The guide below the tool: how to use it, why it works, questions */
.guide { max-width: 760px; margin: clamp(80px, 10vw, 130px) auto 0; padding: 0 var(--gutter); }
.guide h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 18px; }
.guide h3 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -.02em; }
.guide p, .guide li { color: var(--secondary); font-size: 17px; line-height: 1.65; }
.guide p strong, .guide li strong { color: var(--text); font-weight: 600; }
.guide a:not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.guide a:not(.btn):hover { text-decoration-color: #fff; }
.guide ol, .guide ul { padding-left: 22px; }
.guide li { margin: 8px 0; }
.guide section + section { margin-top: clamp(56px, 7vw, 80px); }
.guide .pull { margin: 26px 0; padding: 18px 22px; border-radius: 18px; background: rgba(var(--c), .06); box-shadow: inset 0 0 0 1px rgba(var(--c), .16); color: var(--text); font-size: 17px; line-height: 1.55; }
.guide .sources { font-size: 13.5px; color: var(--tertiary); }
.guide .sources a { color: var(--secondary); }
.faq { margin-top: 8px; }
.faq details { box-shadow: inset 0 -1px 0 var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 500; letter-spacing: -.015em; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: transform .4s var(--spring), background .2s; }
.faq summary i::before { content: "+"; font: 400 18px/1 var(--sys); font-style: normal; }
.faq summary:hover i { background: rgba(255,255,255,.14); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: -4px 0 22px; font-size: 16px; }

/* MARK: More tools (and the hub's grid) */
.more { max-width: 1120px; margin: clamp(80px, 10vw, 130px) auto 0; padding: 0 var(--gutter); }
.more > h2 { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.03em; margin-bottom: 22px; }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tgrid.hub { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tgrid.hub .tcard { grid-column: span 2; }
.tgrid.hub .tcard.big { grid-column: span 3; min-height: 300px; }
@media (max-width: 960px) { .tgrid, .tgrid.hub { grid-template-columns: 1fr 1fr; } .tgrid.hub .tcard, .tgrid.hub .tcard.big { grid-column: auto; } .tgrid.hub .tcard.big:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .tgrid, .tgrid.hub { grid-template-columns: 1fr; } }
.tcard { --c: var(--c-monty); position: relative; display: grid; align-content: start; gap: 10px; min-height: 220px; padding: 24px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: transform .35s var(--spring-snappy), box-shadow .25s, background .25s; }
.tcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 100% 0%, rgba(var(--c), .14), transparent 65%); opacity: .6; transition: opacity .3s; }
.tcard:hover { transform: translateY(-3px); background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(var(--c), .3), 0 24px 60px -30px rgba(var(--c), .45); }
.tcard:hover::before { opacity: 1; }
.tcard[data-crew="hunter"] { --c: var(--c-hunter); } .tcard[data-crew="lookout"] { --c: var(--c-lookout); } .tcard[data-crew="warmup"] { --c: var(--c-warmup); } .tcard[data-crew="callprep"] { --c: var(--c-prep); }
.tcard .face { width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--c), .12); box-shadow: 0 0 0 1.5px rgba(var(--c), .4); }
.tcard .who-crew { font: 600 10.5px/1 var(--sys); letter-spacing: 0.112em; text-transform: uppercase; color: rgb(var(--c)); margin-top: 8px; }
.tcard h3 { font-size: 22px; line-height: 1.2; }
.tcard p { margin: 0; color: var(--secondary); font-size: 15px; line-height: 1.5; }
.tcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.cost { font-size: 12.5px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--secondary); }
.go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); transition: background .25s, transform .3s var(--spring-snappy); }
.go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tcard:hover .go { background: rgb(var(--c)); color: #0b0c10; transform: translateX(2px); }
.tcard.big h3 { font-size: clamp(26px, 2.6vw, 32px); }
.tcard .peek { margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-size: 14.5px; line-height: 1.5; color: var(--text); max-width: 34em; }
.tcard .peek em { display: block; font: 600 10.5px/1 var(--sys); font-style: normal; letter-spacing: 0.105em; text-transform: uppercase; color: rgb(var(--c)); margin-bottom: 8px; }

/* MARK: Template pages */
.search { position: relative; max-width: 460px; margin: 30px auto 0; }
.search svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--tertiary); stroke-width: 1.7; }
.search .inp { padding-left: 42px; border-radius: 999px; }
.niches { max-width: 1120px; margin: 40px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.niche { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: background .2s, box-shadow .2s, transform .3s var(--spring-snappy); }
.niche:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(var(--c), .3); transform: translateY(-2px); }
.niche b { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.niche span { font-size: 13.5px; color: var(--tertiary); line-height: 1.45; }
.niche-group { grid-column: 1 / -1; margin: 22px 0 4px; }
.niche-group:first-child { margin-top: 0; }
.tpl { max-width: 860px; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0 var(--gutter); display: grid; gap: 14px; }
.tpl .msg { padding: 22px 22px 16px; }
.tpl .msg p { font-size: 17px; }
.tpl .situation { font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; }
.dont { padding: 20px 22px; border-radius: 20px; background: rgba(255,120,120,.05); box-shadow: inset 0 0 0 1px rgba(255,120,120,.15); }
.dont .angle { color: #ff9b9b; }
.dont p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #d9d9de; text-decoration: line-through; text-decoration-color: rgba(255,120,120,.5); }
.dont .why { margin-top: 10px; font-size: 14px; color: var(--secondary); text-decoration: none; }
.cares { max-width: 860px; margin: clamp(40px, 5vw, 56px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cares > div { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.cares h2 { font-size: 18px; letter-spacing: -.015em; margin: 0 0 10px; }
.cares ul { margin: 0; padding-left: 18px; color: var(--secondary); font-size: 15px; line-height: 1.55; }
.cares li { margin: 6px 0; }
@media (max-width: 700px) { .cares { grid-template-columns: 1fr; } }
.related { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.related a { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--secondary); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: background .2s, color .2s; }
.related a:hover { background: rgba(255,255,255,.1); color: var(--text); }

@media (prefers-reduced-motion: reduce) { .msg, .score-card, .lead, .meter i { animation: none; } }