/* Company name vs trademark guide. Page-scoped: every rule sits under .cn-page */
.cn-page{--cn-display:'Arimo',Arial,'Helvetica Neue',Helvetica,sans-serif;--cn-ink:var(--ink,#181113);--cn-red:var(--red,#E0162B);--cn-deep:var(--red-deep,#7E0B17);--cn-dark:var(--red-dark,#B30F20);--cn-blush:var(--red-tint,#FBE7EA);--cn-canvas:var(--canvas,#F4EDEE);--cn-line:var(--line,#E7DCDE);--cn-muted:var(--muted,#6E6468)}
.cn-page main{color:var(--cn-ink)}
.cn-page main section{scroll-margin-top:90px}
.cn-page main a{text-underline-offset:3px}
.cn-page .cn-d{font-family:var(--cn-display);font-weight:700;letter-spacing:-0.025em;line-height:1.06;text-wrap:balance}
.cn-page :focus-visible{outline:3px solid var(--cn-red);outline-offset:3px;border-radius:4px}
.cn-page .cn-on-red :focus-visible{outline-color:#fff}

/* Buttons: site .btn provides shape, these set colour on red sections */
.cn-btn--light{background:#fff;color:var(--cn-dark);box-shadow:0 16px 34px -16px rgba(60,0,8,.6)}
.cn-btn--light:hover{background:var(--cn-blush);color:var(--cn-dark);transform:translateY(-2px)}
.cn-btn--ghost{background:transparent;border-color:rgba(255,255,255,.85);color:#fff}
.cn-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}

/* Hero */
.cn-hero{background:radial-gradient(120% 140% at 88% 18%,#F23A4C 0%,var(--cn-red) 42%,var(--cn-dark) 100%);color:#fff;padding:clamp(36px,5vw,72px) 0 clamp(64px,8vw,120px);overflow:hidden}
.cn-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.cn-back{font-size:16px;margin:0 0 clamp(28px,4vw,48px)}
.cn-back a{color:#fff;font-weight:700;text-decoration:none}
.cn-back a:hover{text-decoration:underline}
.cn-hero h1{font-size:clamp(40px,5.6vw,72px);margin:0 0 28px;color:#fff}
.cn-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:34em;margin:0 0 20px;color:rgba(255,255,255,.92)}
.cn-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;margin:0 0 32px;color:rgba(255,255,255,.8)}
.cn-meta a{color:#fff;font-weight:700}
.cn-hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.cn-vs{margin:0;container-type:inline-size;width:100%;display:grid;justify-items:center;gap:clamp(8px,1.2vw,16px);text-align:center}
.cn-vs-name{font-family:var(--cn-display);font-weight:700;font-size:clamp(38px,17cqi,96px);line-height:.95;max-width:100%;letter-spacing:-0.035em;color:#fff}
.cn-vs-word{font-family:var(--cn-display);font-weight:700;font-size:clamp(18px,1.6vw,22px);color:rgba(255,255,255,.75)}
.cn-vs-mark{position:relative;display:block;width:clamp(150px,15vw,220px);aspect-ratio:1}
.cn-vs-mark svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.cn-vs-mark circle{fill:none;stroke:#fff;stroke-width:9}
.cn-vs-mark>span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--cn-display);font-weight:700;font-size:clamp(76px,7.6vw,112px);line-height:1;color:#fff;padding-top:0}

@media (prefers-reduced-motion:no-preference){
  .cn-vs-name{animation:cn-rise .7s cubic-bezier(.2,.8,.2,1) .15s both}
  .cn-vs-word{animation:cn-fade .5s ease-out .75s both}
  .cn-vs-mark circle{stroke-dasharray:579;stroke-dashoffset:579;animation:cn-draw 1s cubic-bezier(.6,0,.2,1) 1.05s forwards}
  .cn-vs-mark>span{animation:cn-pop-r .55s cubic-bezier(.3,1.6,.5,1) 1.85s both}
}
@keyframes cn-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cn-draw{to{stroke-dashoffset:0}}
@keyframes cn-pop-r{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
@keyframes cn-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Short answer */
.cn-answer{background:#fff;padding:clamp(64px,8vw,112px) 0}
.cn-answer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.cn-answer h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 24px}
.cn-answer p{font-size:18px;line-height:1.65;max-width:36em;margin:0 0 16px}
.cn-quote{margin:0;padding:6px 0 6px 28px;border-left:5px solid var(--cn-red)}
.cn-quote p{font-family:var(--cn-display);font-weight:700;font-size:clamp(21px,2.1vw,27px);line-height:1.3;color:var(--cn-dark);margin:0 0 14px;max-width:none;letter-spacing:-0.015em}
.cn-quote footer{font-size:14px;color:var(--cn-muted)}
.cn-src{font-size:14px;color:var(--cn-muted);margin-top:20px}
.cn-src a{color:inherit}

/* Bento */
.cn-gaps{background:linear-gradient(160deg,var(--cn-red) 0%,var(--cn-dark) 100%);color:#fff;padding:clamp(64px,8vw,112px) 0}
.cn-gaps-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:40px}
.cn-gaps h2{font-size:clamp(32px,4.2vw,54px);margin:0;color:#fff}
.cn-gaps-head p{font-size:18px;line-height:1.55;margin:0;max-width:30em;color:rgba(255,255,255,.92)}
.cn-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);gap:14px;grid-template-areas:"a a b b" "c d f f" "e e f f"}
.cn-tile{position:relative;overflow:hidden;border-radius:18px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;box-shadow:0 22px 44px -26px rgba(60,0,8,.55)}
.cn-tile h3{font-family:var(--cn-display);font-weight:700;font-size:clamp(20px,1.8vw,24px);line-height:1.15;margin:0 0 12px;letter-spacing:-0.02em}
.cn-tile p{font-size:16px;line-height:1.55;margin:0;max-width:34em}
.cn-tile--a{grid-area:a;background:#fff;color:var(--cn-ink);border-radius:28px}
.cn-tile--b{grid-area:b;background:var(--cn-deep);color:#fff}
.cn-tile--c{grid-area:c;background:var(--cn-blush);color:var(--cn-ink)}
.cn-tile--d{grid-area:d;background:var(--cn-ink);color:#fff}
.cn-tile--e{grid-area:e;background:#fff;color:var(--cn-ink);flex-direction:row;align-items:center;gap:24px}
.cn-tile--f{grid-area:f;background:var(--cn-deep);color:#fff;justify-content:space-between;gap:24px}
.cn-tile--b p,.cn-tile--d p,.cn-tile--f p{color:rgba(255,255,255,.88)}
.cn-tile--b h3,.cn-tile--d h3,.cn-tile--f h3{color:#fff}

.cn-plates{display:grid;gap:12px;margin:18px 0 24px}
.cn-tile--a>p{font-size:17px}
.cn-plate{display:flex;justify-content:space-between;align-items:center;gap:12px;border:2px solid var(--cn-ink);border-radius:12px;padding:14px 18px}
.cn-plate strong{font-family:var(--cn-display);font-weight:700;font-size:clamp(19px,2vw,26px);line-height:1.1;overflow-wrap:anywhere;letter-spacing:-0.02em}
.cn-plate small{font-size:13px;color:var(--cn-muted);text-align:right}
.cn-plate--new{border-color:var(--cn-red)}
.cn-plate .cn-chip{flex:none;font-size:14px;font-weight:700;color:#fff;border-radius:999px;padding:6px 14px;text-align:center}
.cn-chip--no{background:var(--cn-ink)}
.cn-chip--yes{background:var(--cn-red)}
.cn-bigr{position:absolute;right:-18px;bottom:-70px;font-size:260px;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);pointer-events:none}
.cn-tile--b>*:not(.cn-bigr){position:relative;max-width:30em}
.cn-tile .cn-figure{font-family:var(--cn-display);font-weight:700;font-size:clamp(36px,3.2vw,46px);line-height:1;color:var(--cn-red);margin:0 0 14px;overflow-wrap:anywhere;letter-spacing:-0.03em}
.cn-cross{flex:none;width:72px;height:72px;border-radius:14px;background:var(--cn-red);position:relative}
.cn-cross::before,.cn-cross::after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.cn-cross::before{width:42%;height:13%}
.cn-cross::after{width:13%;height:42%}
.cn-no{flex:none;font-family:var(--cn-display);font-weight:700;font-size:clamp(88px,10vw,148px);line-height:.8;color:#fff;letter-spacing:-0.04em}
.cn-gaps .cn-src{color:rgba(255,255,255,.8);margin-top:28px}

@media (prefers-reduced-motion:no-preference){
  .cn-ready .cn-bento .cn-tile{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .cn-ready .cn-bento:not(.is-in) .cn-tile{opacity:0;transform:translateY(28px) scale(.98)}
  .cn-ready .cn-bento:not(.is-in) .cn-chip{opacity:0;transform:scale(.6)}
  .cn-ready .cn-bento.is-in .cn-chip--no{animation:cn-pop .45s cubic-bezier(.3,1.6,.5,1) .9s both}
  .cn-ready .cn-bento.is-in .cn-chip--yes{animation:cn-pop .45s cubic-bezier(.3,1.6,.5,1) 1.5s both}
}
@keyframes cn-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* Comparison */
.cn-compare{background:#fff;padding:clamp(64px,8vw,112px) 0}
.cn-compare h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 14px}
.cn-compare-intro{font-size:18px;margin:0 0 32px;color:var(--cn-muted)}
.cn-table-wrap{border:0;border-radius:var(--radius-lg,18px);overflow:hidden;box-shadow:var(--shadow-sm)}
.cn-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;text-align:left}
.cn-table th,.cn-table td{padding:18px 22px;vertical-align:top;border-top:1px solid var(--cn-line)}
.cn-table thead th{border-top:0;background:var(--cn-ink);color:#fff;font-family:var(--cn-display);font-weight:700;font-size:19px}
.cn-table thead th span{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;margin-right:10px;border-radius:999px;background:#fff;color:var(--cn-ink);font-family:'Arimo',sans-serif;font-size:13px;font-weight:700;vertical-align:3px}
.cn-table thead th:last-child span{background:var(--cn-red);color:#fff}
.cn-table tbody th{width:22%;font-weight:700}
.cn-table td:last-child{background:var(--cn-blush)}
.cn-fine{font-size:14px;color:var(--cn-muted);margin-top:16px}
.cn-fine a{color:inherit}

/* Comic strip */
.cn-case{background:var(--cn-canvas);padding:clamp(64px,8vw,112px) 0}
.cn-case h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 10px}
.cn-case-intro{font-size:18px;color:var(--cn-muted);margin:0 0 36px}
.cn-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cn-panel{position:relative;background:#fff;border:2px solid var(--cn-ink);padding:24px 22px 28px;min-height:250px}
.cn-panel+.cn-panel{margin-left:-2px}
.cn-panel:first-child{border-radius:18px 0 0 18px}
.cn-panel:last-child{border-radius:0 18px 18px 0;background:var(--cn-red);color:#fff}
.cn-month{display:block;font-family:var(--cn-display);font-weight:700;font-size:30px;line-height:1;margin-bottom:16px;letter-spacing:-0.02em}
.cn-panel p{margin:0;font-size:16px;line-height:1.55}
.cn-letter{position:absolute;right:14px;bottom:14px;transform:rotate(-8deg);font-family:var(--cn-display);font-weight:700;font-size:13px;color:var(--cn-red);border:2px solid currentColor;border-radius:5px;padding:3px 8px;text-transform:uppercase;letter-spacing:.04em}
.cn-fix{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:28px;padding:28px 32px;background:#fff;border-radius:18px;box-shadow:var(--shadow-sm)}
.cn-fix h3{font-family:var(--cn-display);font-weight:700;font-size:23px;margin:0 0 6px;letter-spacing:-0.02em}
.cn-fix p{margin:0;font-size:16px;line-height:1.55;max-width:44em}
@media (prefers-reduced-motion:no-preference){
  .cn-ready .cn-strip .cn-panel{transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 260ms)}
  .cn-ready .cn-strip:not(.is-in) .cn-panel{opacity:0;transform:translateY(18px) rotate(-1deg)}
  .cn-ready .cn-strip:not(.is-in) .cn-letter{opacity:0}
  .cn-ready .cn-strip.is-in .cn-letter{animation:cn-stamp2 .4s cubic-bezier(.3,1.5,.5,1) 1.1s both}
}
@keyframes cn-stamp2{0%{opacity:0;transform:rotate(-8deg) scale(2)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}

/* Steps */
.cn-steps{background:#fff;padding:clamp(64px,8vw,112px) 0}
.cn-steps h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 40px;max-width:16em}
.cn-step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.cn-step-list li{border-top:2px solid var(--cn-ink);padding-top:18px}
.cn-num{display:block;font-family:var(--cn-display);font-weight:700;font-size:88px;line-height:.8;color:var(--cn-red);margin-bottom:18px;letter-spacing:-0.04em}
.cn-step-list h3{font-family:var(--cn-display);font-weight:700;font-size:21px;line-height:1.2;margin:0 0 10px;letter-spacing:-0.02em}
.cn-step-list p{margin:0;font-size:16px;line-height:1.6}

/* FAQ */
.cn-faq{background:var(--cn-canvas);padding:clamp(64px,8vw,112px) 0}
.cn-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.cn-faq h2{font-size:clamp(30px,3.8vw,46px);margin:0}
.cn-faq details{border-bottom:2px solid var(--cn-ink)}
.cn-faq details:first-child{border-top:2px solid var(--cn-ink)}
.cn-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--cn-display);font-weight:700;font-size:clamp(18px,1.6vw,21px);line-height:1.3;letter-spacing:-0.01em}
.cn-faq summary::-webkit-details-marker{display:none}
.cn-plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--cn-ink);transition:transform .3s ease,background-color .3s ease}
.cn-plus::before,.cn-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--cn-ink);transform:translate(-50%,-50%)}
.cn-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.cn-faq details[open] .cn-plus{transform:rotate(45deg);background:var(--cn-red);border-color:var(--cn-red)}
.cn-faq details[open] .cn-plus::before,.cn-faq details[open] .cn-plus::after{background:#fff}
.cn-faq-a{padding:0 56px 24px 0}
.cn-faq-a p{margin:0 0 10px;font-size:17px;line-height:1.6}
.cn-faq-a .cn-src{margin:0}
@media (prefers-reduced-motion:no-preference){.cn-faq details[open] .cn-faq-a{animation:cn-fade .35s ease-out}}

/* Closing CTA and sources */
.cn-cta{background:radial-gradient(110% 130% at 10% 0%,#F23A4C 0%,var(--cn-red) 45%,var(--cn-dark) 100%);color:#fff;padding:clamp(64px,8vw,112px) 0}
.cn-cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,6vw,96px);align-items:end}
.cn-cta h2{font-size:clamp(32px,4.2vw,54px);margin:0 0 20px;color:#fff}
.cn-cta p{font-size:18px;line-height:1.55;max-width:34em;margin:0 0 28px;color:rgba(255,255,255,.92)}
.cn-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cn-related{list-style:none;margin:0;padding:0}
.cn-related li{border-top:1px solid rgba(255,255,255,.4)}
.cn-related li:last-child{border-bottom:1px solid rgba(255,255,255,.4)}
.cn-related a{display:block;padding:16px 0;color:#fff;font-weight:700;text-decoration:none}
.cn-related a:hover{text-decoration:underline}
.cn-sources{background:#fff;padding:56px 0 72px}
.cn-sources h2{font-family:var(--cn-display);font-weight:700;font-size:22px;margin:0 0 8px;letter-spacing:-0.02em}
.cn-sources>.wrap>p{font-size:15px;color:var(--cn-muted);margin:0 0 20px}
.cn-sources ol{columns:2;column-gap:48px;margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.cn-sources li{break-inside:avoid;margin-bottom:8px}
.cn-sources a{color:var(--cn-dark)}
.cn-disclaimer{margin-top:28px!important;font-size:14px!important}

/* Responsive */
@media (max-width:1000px){
  .cn-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b b" "c d" "e e" "f f"}
  .cn-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-panel{border-radius:0!important}
  .cn-panel:nth-child(odd){margin-left:0}
  .cn-panel:nth-child(n+3){margin-top:-2px}
  .cn-panel:first-child{border-radius:18px 0 0 0!important}
  .cn-panel:nth-child(2){border-radius:0 18px 0 0!important}
  .cn-panel:nth-child(3){border-radius:0 0 0 18px!important}
  .cn-panel:last-child{border-radius:0 0 18px 0!important}
  .cn-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .cn-hero-grid,.cn-answer-grid,.cn-gaps-head,.cn-faq-grid,.cn-cta-grid{grid-template-columns:minmax(0,1fr)}
  .cn-sources ol{columns:1}
}
@media (max-width:640px){
  .cn-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .cn-tile--e{flex-direction:column;align-items:flex-start}
  .cn-no{font-size:88px}
  .cn-strip{grid-template-columns:minmax(0,1fr)}
  .cn-panel{margin-left:0!important;min-height:0;padding-bottom:48px}
  .cn-panel+.cn-panel{margin-top:-2px}
  .cn-panel:first-child{border-radius:18px 18px 0 0!important}
  .cn-panel:nth-child(2),.cn-panel:nth-child(3){border-radius:0!important}
  .cn-panel:last-child{border-radius:0 0 18px 18px!important}
  .cn-step-list{grid-template-columns:minmax(0,1fr)}
  .cn-num{font-size:72px}
  .cn-faq-a{padding-right:0}
  .cn-table{min-width:0}
  .cn-table thead{display:none}
  .cn-table tr,.cn-table tbody th,.cn-table td{display:block;width:auto}
  .cn-table tbody th{background:var(--cn-ink);color:#fff;padding:12px 18px}
  .cn-table tbody tr:first-child th{border-top:0}
  .cn-table td{border-top:0;padding:10px 18px 14px}
  .cn-table td::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--cn-dark);margin-bottom:2px}
}
@media print{.cn-hero,.cn-gaps,.cn-cta{background:#fff!important;color:#000!important}}
