/* AltoReport page components. Tokens (colours, radii, fonts) come from /assets/site.css;
   nothing here redefines them. Loaded by every page after site.css. */

/* ---- hero: dark first screen, blue glow, vertical-light texture (CSS only) ---- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(79,70,229,.62),rgba(79,70,229,.18) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(79,70,229,.16),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(79,70,229,0) 0,rgba(79,70,229,0) 14px,rgba(99,102,241,.34) 44px,rgba(165,180,252,.2) 49px,rgba(79,70,229,.06) 78px,rgba(79,70,229,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%);}
.hero .copy{max-width:900px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,9vw,58px); line-height:1.08; letter-spacing:-.03em; font-weight:800; color:#fff; text-wrap:balance;}
.hero .lead{margin:24px auto 0; max-width:60ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.kw{display:inline-block; font-weight:600; line-height:1.25; padding:1px 8px 2px; margin:0 1px; border-radius:7px; border:1px solid transparent;}
.kw-b{color:#c7d2fe; background:rgba(129,140,248,.2); border-color:rgba(165,180,252,.3);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.kw-v{color:#c4b2ff; background:rgba(167,139,250,.22); border-color:rgba(196,178,255,.32);}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.hero .actions,.final .actions{justify-content:center;}
@media(max-width:520px){ .actions .btn{width:100%; white-space:normal; text-align:center; line-height:1.25; padding-top:12px; padding-bottom:12px;} }

/* inline objects in the headline, set at cap height */
.ob{display:inline-block; vertical-align:baseline; position:relative;}
.ob-toggle{width:1.52em; height:.8em; vertical-align:-.04em; margin:0 .12em; border-radius:99px; background:linear-gradient(180deg,#6366f1,#4f46e5); box-shadow:0 0 .9em rgba(79,70,229,.75), inset 0 .04em .06em rgba(255,255,255,.35), 0 0 0 .03em rgba(165,180,252,.4);}
@media(prefers-reduced-motion:no-preference){
  .ob-toggle{animation:tgTrack .45s .7s var(--ease) both;}
  .ob-toggle::after{animation:tgKnob .45s .7s var(--ease) both;}
    @keyframes tgTrack{from{background:#2a3142; box-shadow:0 0 0 rgba(79,70,229,0), inset 0 .04em .06em rgba(255,255,255,.12), 0 0 0 .03em rgba(255,255,255,.14);}}
  @keyframes tgKnob{from{left:.08em;}}
}

/* illustration frame under the hero: three example panels in a large rounded frame with a blue rim light */
.hframe{position:relative; margin:64px auto 0; max-width:1040px; border-radius:30px; padding:10px; background:linear-gradient(160deg,rgba(165,180,252,.5),rgba(129,140,248,.22) 40%,rgba(79,70,229,.1)); box-shadow:0 0 0 1px rgba(165,180,252,.18), 0 40px 140px -30px rgba(79,70,229,.65), 0 0 90px -10px rgba(79,70,229,.35);}
.hframe-in{border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#121a2c,#0c111e); border:1px solid rgba(255,255,255,.08); text-align:left;}
.hframe-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; padding:14px 18px; border-bottom:1px solid var(--dline);}
.hframe-bar .pill{min-height:30px; padding:0 12px; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff;}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.7);}
.hframe-body{display:grid; gap:16px; padding:16px;}
@media(min-width:900px){ .hframe-body{grid-template-columns:1fr 1.05fr .9fr; gap:20px; padding:28px; align-items:stretch;} }
@media(max-width:560px){ .hframe{padding:6px; border-radius:24px; margin-top:48px;} .hframe-in{border-radius:19px;} }

/* two-column reading blocks */
.two{display:grid; gap:20px;}
@media(min-width:900px){ .two{grid-template-columns:1fr 1fr; gap:24px;} }
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px 24px;}
@media(min-width:640px){ .cmp{padding:40px 40px 32px;} }
.cmp h3{display:flex; align-items:center; gap:12px; font-size:24px; line-height:1.2; letter-spacing:-.03em; font-weight:800; margin-bottom:16px;}
.cmp h3 .badge-ico{display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:11px; background:var(--accent); color:#fff;}
.cmp.no h3 .badge-ico{background:var(--ink);}
.cmp h3 .badge-ico .ico{width:18px; height:18px;}
.list li{display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--line); color:var(--body);}
.list li:first-child{border-top:0;}
.list li .ico{margin-top:2px; color:var(--accent);}
.cmp.no li .ico{color:var(--muted);}
.list a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px;}

/* problem cards and scope cards */
.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden;}
@media(min-width:760px){ .grid{grid-template-columns:repeat(2,1fr);} .grid.g3{grid-template-columns:repeat(3,1fr);} }
.grid .c{background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:8px;}
@media(min-width:900px){ .grid .c{padding:32px;} }
.grid .c .pi{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; background:var(--soft); border:1px solid var(--soft-line); color:var(--accent); margin-bottom:8px;}
.grid .c .pi svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.grid .c h3{font-size:19px; letter-spacing:-.02em; line-height:1.3;}
.grid .c p{color:var(--muted); font-size:15px; line-height:1.55;}
@media(min-width:900px){ .scopes{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* steps: icon tile, mono pill, display heading */
.steps{margin-top:40px;}
.steps li{position:relative; display:grid; grid-template-columns:48px 1fr; gap:0 20px; padding:0 0 36px;}
.steps li:last-child{padding-bottom:0;}
.steps li:not(:last-child)::after{content:""; position:absolute; left:23px; top:56px; bottom:8px; width:2px; background:linear-gradient(var(--soft-line),var(--line));}
.st-ico{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--soft); border:1px solid var(--soft-line); color:var(--accent);}
.st-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.st-pill{display:inline-block; font-family:var(--mono); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); background:var(--soft); border:1px solid var(--soft-line); border-radius:999px; padding:6px 10px; margin-top:4px;}
.steps h3{font-size:22px; line-height:1.2; letter-spacing:-.025em; font-weight:800; margin-top:12px;}
.steps p{margin-top:6px; color:var(--muted); max-width:52ch;}

/* compliance band (dark) */
.rules{display:grid; gap:16px; margin-top:40px;}
@media(min-width:900px){ .rules{grid-template-columns:repeat(2,1fr); gap:20px;} }
.rule{background:var(--d1); border:1px solid var(--dline); border-radius:18px; padding:22px;}
.rule .art{display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-on-dark); margin-bottom:8px;}
.rule h3{font-size:19px; letter-spacing:-.02em; line-height:1.3; color:#fff;}
.rule p{margin-top:6px; color:var(--dtext2); font-size:15px; line-height:1.55;}
.dark .actions{margin-top:32px;}
.dark a.ul{color:#fff;}
.dark .src{margin-top:20px; font-size:13.5px; color:rgba(255,255,255,.7); max-width:70ch;}


/* offer: three packages, no prices */
.pkgs{display:grid; gap:16px;}
@media(min-width:900px){ .pkgs{grid-template-columns:repeat(3,minmax(0,1fr));} }
.pkg{position:relative; padding:30px 24px 24px; background:var(--surface); border:1px solid var(--line); border-radius:22px; display:flex; flex-direction:column; overflow:hidden;}
.pkg::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-lt));}
.pkg h3{font-size:24px; letter-spacing:-.03em; line-height:1.2; font-weight:800;}
.pkg .for{margin-top:8px; font-size:14.5px; color:var(--muted);}
.pkg ul{margin:20px 0 24px; display:grid; gap:10px; font-size:15px; line-height:1.45; color:var(--body); flex:1;}
.pkg ul li{position:relative; padding-left:28px;}
.pkg ul li::before{content:""; position:absolute; left:0; top:2px; width:18px; height:18px; background:var(--accent); -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");}
.pkg .price{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink);}
.offer-note{margin-top:24px; max-width:70ch; color:var(--body);}

/* comparison table */
.cmp-table{margin-top:8px;}
.cmp-table table{border-collapse:collapse; width:100%; min-width:760px; font-size:14.5px; line-height:1.5;}
.cmp-table th,.cmp-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
.cmp-table thead th{background:var(--tint); font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink);}
.cmp-table tbody th{font-weight:600; color:var(--ink); background:#fff; width:22%;}
.cmp-table td.us,.cmp-table thead th.us{background:var(--soft); color:var(--ink);}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0;}
.tw-note{margin-top:14px; font-size:14px; color:var(--muted); max-width:70ch;}

/* optional product note */
@media(min-width:900px){ .optional{grid-template-columns:1.4fr auto; padding:36px 40px; gap:40px;} }

/* faq */
.faq-grid{display:grid; gap:40px;}
@media(min-width:900px){ .faq-grid{grid-template-columns:1fr 1.6fr; gap:80px;} .faq-grid .head{position:sticky; top:112px; align-self:start; margin-bottom:0;} }
.faq{display:grid; gap:12px;}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:18px;}
.faq details[open]{border-color:var(--soft-line); background:var(--tint);}
.faq summary{list-style:none; cursor:pointer; min-height:64px; padding:16px 20px; font-family:var(--display); font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.015em; display:flex; justify-content:space-between; gap:16px; align-items:center; border-radius:18px;}
.faq summary:hover{color:var(--accent-dk);}
.faq summary::-webkit-details-marker{display:none;}
.faq .pm{flex:none; width:30px; height:30px; border:1.5px solid currentColor; border-radius:10px; position:relative;}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:7px; right:7px; top:50%; height:2px; margin-top:-1px; background:currentColor;}
.faq .pm::after{transform:rotate(90deg); transition:transform .2s var(--ease);}
.faq details[open] .pm::after{transform:rotate(0);}
.faq details[open] .pm{background:var(--accent); border-color:var(--accent); color:#fff;}
.faq .ans{padding:0 20px 20px; max-width:64ch; color:var(--body);}
.faq .ans a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px;}
.faq-inner{margin:24px 0 0;}

/* final cta */
.final{text-align:center; padding:96px 0;}
@media(min-width:900px){ .final{padding:136px 0;} }
.final::before{content:""; position:absolute; left:50%; bottom:-40%; width:1000px; height:700px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(79,70,229,.34),transparent); pointer-events:none;}
.final .wrap{position:relative; z-index:1;}
.final h2{font-size:clamp(34px,5.4vw,56px); line-height:1.06; letter-spacing:-.035em; font-weight:800; max-width:18ch; margin:0 auto; text-wrap:balance;}
.final p{margin:20px auto 0; max-width:50ch; font-size:18px; color:var(--dtext2);}

/* floating action bar: appears after the hero, hides near the closing band, dismissible */

/* inner pages: notice about the source of a rule */
.src-note{font-size:14px; line-height:1.55; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:28px;}
.related{margin-top:56px;}
.related h2{font-family:var(--display); font-size:clamp(22px,2.6vw,28px); letter-spacing:-.025em; font-weight:800; margin:0 0 20px;}
.rd .cta-box{margin:40px 0 0; padding:28px 24px; border-radius:22px; background:var(--soft); border:1px solid var(--soft-line);}
.rd .cta-box h2{margin:0 0 8px; padding:0; border:0; font-size:clamp(22px,2.6vw,28px);}
.rd .cta-box p{max-width:60ch;}
.rd .cta-box .btn{margin-top:8px; color:#fff;}
.rd .cta-box .btn-wa{color:#04170f;}
.rd a.btn{text-decoration:none;}
.fn{font-size:13.5px; color:var(--muted);}

@media(prefers-reduced-motion:reduce){
}


/* inline links in the footer note keep a 44px touch target */
.ft small a{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; background:none; color:#fff;}


/* home "Não fazemos": the norm's list and the house rules are separate lists */

/* breadcrumb links: a 44px hit area around a 24px link */
.crumb a{display:inline-flex; align-items:center; min-height:24px;}
.crumb a::after{inset:-10px -8px;}

/* wide tables: a visible cue that they scroll sideways */
.tw{background:linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,linear-gradient(to right,rgba(10,13,20,.18),rgba(10,13,20,0)) left center/14px 100% no-repeat scroll,linear-gradient(to left,rgba(10,13,20,.18),rgba(10,13,20,0)) right center/14px 100% no-repeat scroll,var(--surface);}
.tw-hint{display:none; margin:0 0 8px; font-size:13px; color:var(--muted);}
@media(max-width:899px){ .tw-hint{display:block;} }
@media(max-width:640px){
  .rd .tw table{min-width:0;}
  .rd .tw .arts{white-space:normal;}
  .rd th,.rd td{padding:10px 12px;}
}


/* ---- headline objects: decorative, their text comes from CSS ---- */
.ob-kpi,.ob-pdf{font-family:var(--display); font-weight:800; font-size:.5em; letter-spacing:0; line-height:1; padding:.32em .6em .36em; border-radius:.45em; vertical-align:.32em; margin:0 .18em; white-space:nowrap;}
.ob-kpi{background:rgba(18,183,106,.16); color:#5fe0a1; border:1px solid rgba(95,224,161,.38);}
.ob-kpi::before{content:"+12%";}
.ob-pdf{background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 0 .9em rgba(79,70,229,.7), inset 0 .06em .08em rgba(255,255,255,.3);}
.ob-pdf::before{content:"PDF";}
.hero h1{max-width:20ch; margin:0 auto;}

/* ---- demo 1: from sources to a delivered report (hero frame) ---- */
.dm{border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.dm .k{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.dm-src{background:rgba(255,255,255,.05); border:1px solid var(--dline); color:#fff;}
.dm-src .k,.dm-out .k{color:var(--accent-on-dark);}
.dm-src li{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:10px 0; border-top:1px solid var(--dline); font-size:14px; line-height:1.35;}
.dm-src li:first-of-type{border-top:0;}
.dm-src li b{font-weight:600;}
.dm-src li small{grid-column:1; font-size:12.5px; color:rgba(255,255,255,.7);}
.dm-src li .st{grid-row:1 / span 2; grid-column:2; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5fe0a1;}
.dm-src li .st::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--live);}
.dm-src li .st::after{content:"synced";}
.dm-rep{background:#fff; color:var(--ink); padding:0; overflow:hidden;}
.dm-rep .bar{background:var(--accent); color:#fff; padding:12px 16px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.dm-rep .bar small{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#e0e7ff;}
.dm-rep .bar b{font-family:var(--display); font-size:15px;}
.dm-rep .bar .by{text-align:right; flex:none;}
.dm-rep .in{padding:14px 16px 16px; display:grid; gap:12px;}
.kp{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.kp div{background:var(--tint); border-radius:10px; padding:8px 10px; min-width:0;}
.kp span{display:block; font-size:11.5px; color:var(--muted);}
.kp b{display:block; font-family:var(--display); font-size:18px; line-height:1.2;}
.kp i{font-style:normal; font-size:11.5px; font-weight:600; color:#0b7a4b;}
.kp i.dn{color:#b4232a;}
.bars{display:flex; align-items:flex-end; gap:6px; height:54px; padding:0 2px; border-bottom:1px solid var(--line);}
.bars span{flex:1; background:linear-gradient(180deg,#818cf8,#4f46e5); border-radius:4px 4px 0 0; transform-origin:bottom;}
.sum{background:var(--soft); border:1px solid var(--soft-line); border-radius:10px; padding:10px 12px;}
.sum .k{color:var(--accent-dk); display:block; margin-bottom:6px;}
.sum p{font-size:12.5px; line-height:1.5; color:var(--body);}
.dm-out{background:rgba(255,255,255,.05); border:1px solid var(--dline); color:#fff;}
.dm-out li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--dline); font-size:14px; line-height:1.35;}
.dm-out li:first-of-type{border-top:0;}
.dm-out .chip{flex:none; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; color:#c7d2fe; background:rgba(129,140,248,.18); border:1px solid rgba(165,180,252,.35);}
.dm-out .chip.ok{color:#5fe0a1; background:rgba(18,183,106,.16); border-color:rgba(95,224,161,.35);}
.dm-out .chip.ok::after{content:"approved"}
.dm-out .chip.rv::after{content:"ready"}
.dm-out .chip.sc::after{content:"monthly"}
.dm-out .chip.pd::after{content:"branded"}
@media(prefers-reduced-motion:no-preference){
  .dm-src li{animation:dmIn .5s var(--ease) both;}
  .dm-src li:nth-of-type(1){animation-delay:.5s}.dm-src li:nth-of-type(2){animation-delay:.9s}.dm-src li:nth-of-type(3){animation-delay:1.3s}.dm-src li:nth-of-type(4){animation-delay:1.7s}
  .bars span{animation:dmGrow .7s var(--ease) both;}
  .bars span:nth-child(1){animation-delay:2.1s}.bars span:nth-child(2){animation-delay:2.2s}.bars span:nth-child(3){animation-delay:2.3s}.bars span:nth-child(4){animation-delay:2.4s}.bars span:nth-child(5){animation-delay:2.5s}.bars span:nth-child(6){animation-delay:2.6s}.bars span:nth-child(7){animation-delay:2.7s}
  .sum p{animation:dmWipe 1.6s 2.9s steps(28,end) both;}
  .dm-out li{animation:dmIn .5s var(--ease) both;}
  .dm-out li:nth-of-type(1){animation-delay:3.6s}.dm-out li:nth-of-type(2){animation-delay:4s}.dm-out li:nth-of-type(3){animation-delay:4.4s}.dm-out li:nth-of-type(4){animation-delay:5.2s}
  .dm-out .chip.ok{animation:dmPop .5s 5.2s var(--ease) both;}
  @keyframes dmIn{from{opacity:0; transform:translateY(8px);}}
  @keyframes dmGrow{from{transform:scaleY(0);}}
  @keyframes dmWipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  @keyframes dmPop{from{transform:scale(.7); opacity:0;}}
}

/* ---- demo 2: the client review thread ---- */
.split2{display:grid; gap:40px; align-items:center;}
@media(min-width:900px){ .split2{grid-template-columns:1fr 1fr; gap:72px;} }
.thread{background:var(--tint); border:1px solid var(--line); border-radius:22px; padding:20px; display:grid; gap:12px;}
.thread .tk{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.bub{max-width:88%; padding:12px 14px; border-radius:14px; font-size:14.5px; line-height:1.45; background:#fff; border:1px solid var(--line);}
.bub small{display:block; font-size:12px; color:var(--muted); margin-bottom:3px;}
.bub.me{justify-self:end; background:var(--soft); border-color:var(--soft-line);}
.tstat{display:flex; flex-wrap:wrap; gap:8px;}
.tchip{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid var(--line-strong); color:var(--body); background:#fff;}
.tchip.rv::after{content:"revision requested";}
.tchip.ok{color:var(--ok-ink); background:var(--ok-bg); border-color:var(--ok-line);}
.tchip.ok::after{content:"approved by the client";}
@media(prefers-reduced-motion:no-preference){
  .bub{animation:dmIn .6s var(--ease) both;}
  .bub:nth-of-type(1){animation-delay:.3s}.bub:nth-of-type(2){animation-delay:1.3s}
  .tchip.rv{animation:dmIn .5s 2.0s var(--ease) both;}
  .tchip.ok{animation:dmPop .5s 3.2s var(--ease) both;}
}

/* ---- sources band (dark) ---- */
.srcs{display:grid; gap:16px; margin-top:40px;}
@media(min-width:900px){ .srcs{grid-template-columns:repeat(2,1fr); gap:20px;} }
.srcs .rule ul{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;}
.srcs .rule li{font-size:13.5px; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--dline); color:rgba(255,255,255,.9);}
.problems .c h3{font-size:19px;}
.tiers .pkg .price{font-size:34px; letter-spacing:-.03em;}
.tiers .pkg .price small{font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0;}
.tiers .pkg.hi{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.tiers .pkg .hint{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); margin-bottom:8px;}
.tiers .pkg .btn{margin-top:auto;}
.early{margin-top:24px; padding:16px 20px; border-radius:14px; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); max-width:70ch; font-size:15px;}
.rd .cmp-table table{min-width:600px;}