/* AdsMédicos shared 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(0,85,254,.62),rgba(0,85,254,.18) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(0,85,254,.16),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(0,85,254,0) 0,rgba(0,85,254,0) 14px,rgba(20,90,255,.34) 44px,rgba(120,170,255,.2) 49px,rgba(0,85,254,.06) 78px,rgba(0,85,254,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:#9cc0ff; background:rgba(59,130,246,.2); border-color:rgba(139,180,255,.3);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.kw-v{color:#c4b2ff; background:rgba(139,92,246,.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,#2f7bff,#0055fe); box-shadow:0 0 .9em rgba(0,85,254,.75), inset 0 .04em .06em rgba(255,255,255,.35), 0 0 0 .03em rgba(139,180,255,.4);}
.ob-toggle::after{content:""; position:absolute; top:.08em; left:calc(100% - .72em); width:.64em; height:.64em; border-radius:50%; background:#fff; box-shadow:0 .05em .12em rgba(0,0,0,.35);}
@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(0,85,254,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(150,190,255,.5),rgba(59,130,246,.22) 40%,rgba(0,85,254,.1)); box-shadow:0 0 0 1px rgba(139,180,255,.18), 0 40px 140px -30px rgba(0,85,254,.65), 0 0 90px -10px rgba(0,85,254,.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;} }
.ex{border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.ex .k{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.ex-ad{background:#fff; color:var(--ink);}
.ex-ad .k{color:var(--muted);}
.ex-ad .adl{display:inline-flex; align-self:flex-start; font-size:12px; font-weight:700; border:1.5px solid var(--ink); border-radius:6px; padding:1px 6px;}
.ex-ad b{font-family:var(--display); font-size:17px; line-height:1.25; letter-spacing:-.02em; color:#1a4fd6;}
.ex-ad p{font-size:14px; line-height:1.45; color:var(--body);}
.ex-ad small{font-size:12.5px; color:var(--muted);}
.ex-rv{background:rgba(255,255,255,.05); border:1px solid var(--dline); color:#fff;}
.ex-rv .k{color:var(--accent-on-dark);}
.ex-rv ul{display:grid; gap:10px; font-size:14px; line-height:1.4; color:rgba(255,255,255,.88);}
.ex-rv li{display:flex; gap:10px; align-items:flex-start;}
.ex-rv li svg{flex:none; width:18px; height:18px; margin-top:1px; fill:none; stroke:var(--live); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.ex-wa{background:#e7e0d7; color:#111;}
.ex-wa .k{color:#4a4339;}
.ex-wa .msg{align-self:flex-start; max-width:92%; background:#fff; border-radius:12px 12px 12px 3px; padding:10px 12px; font-size:14px; line-height:1.4; box-shadow:0 1px 1px rgba(0,0,0,.12);}
.ex-wa .msg.out{align-self:flex-end; background:#d9fdd3; border-radius:12px 12px 3px 12px;}
.ex-wa .msg i{display:block; font-style:normal; font-size:11px; color:#667781; margin-top:4px; text-align:right;}

/* 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;}
.scopes{display:grid; gap:16px;}
@media(min-width:900px){ .scopes{grid-template-columns:repeat(2,minmax(0,1fr));} }
.scope{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 24px;}
.scope h3{font-size:22px; letter-spacing:-.025em; line-height:1.2; margin-bottom:6px;}
.scope .what{color:var(--body); margin-bottom:14px;}
.scope dl{display:grid; gap:10px; margin:0;}
.scope dt{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk);}
.scope dd{margin:2px 0 0; color:var(--body); font-size:15px; line-height:1.5;}
.scope a.more{display:inline-flex; align-items:center; min-height:44px; margin-top:12px; font-weight:600; color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px;}

/* 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;}

/* calculator as a section card */
.calc-sec .calc-card{margin-top:0;}
.calc-formula{margin-top:18px; padding:14px 18px; border-radius:14px; background:var(--tint); border:1px solid var(--line); font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--body); overflow-x:auto;}
.calc-ex{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6b4400; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:999px; padding:6px 12px; margin-bottom:18px;}
.calc-card .stats.s5{grid-template-columns:1fr;}
@media(min-width:760px){ .calc-card .stats.s5{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(min-width:1000px){ .calc-card .stats.s5{grid-template-columns:repeat(4,minmax(0,1fr));} .calc-card .stats.s5 .wide{grid-column:span 4;} }

/* 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 */
.optional{display:grid; gap:20px; align-items:center; background:var(--soft); border:1px solid var(--soft-line); border-radius:22px; padding:28px 24px;}
@media(min-width:900px){ .optional{grid-template-columns:1.4fr auto; padding:36px 40px; gap:40px;} }
.optional h2{font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-.025em; font-weight:800;}
.optional p{margin-top:10px; color:var(--body); max-width:62ch;}

/* 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(0,85,254,.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 */
.mbar{position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:60; display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 24px); padding:8px 8px 8px 20px; border-radius:20px; background:rgba(14,18,28,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 50px -12px rgba(0,0,0,.7); color:#fff; transform:translate(-50%,24px); opacity:0; visibility:hidden; transition:opacity .25s ease,transform .25s var(--ease),visibility 0s .25s;}
.mbar.on{transform:translate(-50%,0); opacity:1; visibility:visible; transition:opacity .25s ease,transform .25s var(--ease),visibility 0s;}
.mbar .mtxt{font-size:14px; line-height:1.35; color:rgba(255,255,255,.82);}
.mbar .btn{min-height:44px; padding:0 18px; font-size:15px; border-radius:14px;}
.mbar .mx{flex:none; width:44px; height:44px; margin:0 -2px 0 0; border:0; background:transparent; color:rgba(255,255,255,.7); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.mbar .mx:hover{background:rgba(255,255,255,.1); color:#fff;}
.mbar .mx svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
@media(max-width:560px){ .mbar{padding:6px 6px 6px 14px; gap:8px; left:12px; right:12px; width:auto; max-width:none; transform:translate(0,24px);} .mbar.on{transform:none;} .mbar .mtxt{display:none;} .mbar .btn{flex:1;} }
body:has(.ads-cc:not([hidden])) .mbar{display:none;}

/* 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;}
.rd .arts{font-family:var(--mono); font-size:.82em; color:var(--accent-dk); white-space:nowrap;}
.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);}
.dark .cmp,.dark .scope{color:var(--ink);}

@media(prefers-reduced-motion:reduce){
  .mbar{transition:none;}
}

/* calculator notes on the home page (inner pages use .pg .note) */
.calc-sec .note{font-size:13.5px; line-height:1.55; color:var(--muted); margin:18px 0 0;}
.calc-sec .calc-formula strong{color:var(--ink); font-family:var(--display);}

/* 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;}

/* calculator form controls on the home page: the same rules site.css scopes to body.pg main */
.calc-sec label{display:block; font-weight:600; color:var(--ink); font-size:15px; line-height:1.35; margin:0 0 8px;}
.calc-sec label .hint{display:block; font-weight:400; color:var(--muted); font-size:13px; line-height:1.4; margin-top:3px;}
.calc-sec input[type=number],.calc-sec input[type=text],.calc-sec input[type=email],.calc-sec select,.calc-sec textarea{width:100%; min-height:var(--field-h); padding:0 16px; border:1.5px solid var(--line-strong); border-radius:12px; font:inherit; font-size:16px; color:var(--ink); background:var(--tint); transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease; -moz-appearance:textfield;}
.calc-sec textarea{padding:12px 16px; min-height:120px; resize:vertical; line-height:1.5;}
.calc-sec input.has-pre{padding-left:42px;}
.calc-sec input.has-suf{padding-right:40px;}
.calc-sec input[type=number]:hover,.calc-sec input[type=text]:hover,.calc-sec input[type=email]:hover,.calc-sec select:hover,.calc-sec textarea:hover{border-color:var(--accent);}
.calc-sec input[type=number]:focus-visible,.calc-sec input[type=text]:focus-visible,.calc-sec input[type=email]:focus-visible,.calc-sec select:focus-visible,.calc-sec textarea:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent); background:#fff;}
.calc-sec input[type=range]{width:100%; height:44px; margin:0; accent-color:var(--accent); cursor:pointer;}
.calc-sec input[type=range]:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:8px;}
.calc-sec input[type=checkbox]{width:22px; height:22px; margin:0; accent-color:var(--accent); flex:none;}

/* home "Não fazemos": the norm's list and the house rules are separate lists */
.cmp h4.lst{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); margin:4px 0 0;}
.cmp h4.lst:not(:first-of-type){margin-top:18px;}

/* 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;}
}