/* ============================================================
   franco-media.com - advertising rates page (TASK-N27, rulings DG2,
   DH, DI, DL5, DT3), Site Rebuild 2026.

   Loaded only on the three rates pages (FR, EN, RU), after
   page-header.css. Every rule is scoped under .rates. Pixel's D05
   named components (.stat/.stats, .pkg, .cmp and .pcard, .posdiag,
   .map .m, .hbadge, .step, .places, .proof, .cover, .langs, .faq,
   .val .total, .add .a, .bund .b) are written on TOKEN NAMES only:
   no hex value appears in this file, so the N28 re-point of the token
   values changes this page with no edit here. The pagehead (page-header.css),
   the .closing band and the ECF form override (shared-components.css)
   are not in this file.

   Breakpoints: 768px is the phone form of Pixel's phone board (cards
   stack, the table becomes one .pcard per package, the diagram becomes
   three stacked blocks A, B and C, the FAQ is one column); 1000px is a
   plain two-column fallback between the two boards. The two literals
   stay literals until N24 gives them tokens.
   ============================================================ */

.rates{font-family:var(--font-body);font-size:var(--size-body);line-height:1.65;color:var(--os-text);background:var(--os-bg);width:100%;box-sizing:border-box}
.rates *{box-sizing:border-box}
.rates :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0;padding:0}
.rates :where(ul,ol){list-style:none}
.rates :where(a){text-decoration:none;color:inherit}
.rates .wrap{max-width:var(--content-max);margin:0 auto;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.rates .disp{font-family:var(--font-display);font-weight:800;color:var(--os-heading)}
.rates .ico{display:inline-flex;flex:0 0 auto}
.rates .ico svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rates .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rates .sec{margin-top:66px}
.rates .band{margin-top:66px;padding:66px 0;background:var(--os-card);border-top:1px solid var(--os-line);border-bottom:1px solid var(--os-line)}
.rates .eyebrow{font-weight:700;font-size:13.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--os-link)}
.rates .h2{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.15;color:var(--os-heading);margin-top:8px}
.rates .h3{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.25;color:var(--os-heading)}
.rates .lead{font-size:20px;line-height:1.45}
.rates .cap{font-weight:700;font-size:var(--size-label);letter-spacing:1.8px;text-transform:uppercase;color:var(--os-muted)}
.rates .chip{display:inline-flex;align-self:flex-start;font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;color:var(--os-link);background:var(--os-tint);padding:4px 10px;border-radius:var(--radius-pill);line-height:1.65}
.rates .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:var(--radius-sm);font-weight:700;font-size:16px;line-height:1.2;border:2px solid var(--os-dark-teal);white-space:nowrap}
.rates .btn-fill{background:var(--os-dark-teal);color:var(--on-dark)}
.rates .btn-line{background:transparent;color:var(--os-dark-teal)}
.rates .btn .ico svg{width:17px;height:17px}
.rates .card{background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-card)}
.rates .claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.rates .claim .h2{font-size:32px;max-width:20ch}
.rates .claim p{margin-top:16px}
.rates .claim .acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.rates .what .h2{font-size:28px;line-height:1.15;margin-top:8px}
.rates .what>p{margin-top:14px}
.rates .pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.rates .pts li{padding:16px 18px}
.rates .pts li:last-child{grid-column:1 / -1}
.rates .pts li b{display:block;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.25;color:var(--os-heading)}
.rates .pts li span{display:block;margin-top:6px;font-size:15.5px;line-height:1.5}
.rates .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rates .stat{background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-card);padding:24px 22px 22px;display:flex;flex-direction:column;gap:4px}
.rates .stat .n{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1.05;letter-spacing:-1px;color:var(--os-heading)}
.rates .stat .l{font-weight:700;font-size:16px;line-height:1.3;color:var(--os-heading);margin-top:6px}
.rates .stat .d{font-size:14.5px;line-height:1.45;color:var(--os-muted)}
.rates .stat .rule{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--os-highlight);margin-bottom:12px}
.rates .stats3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rates .how2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.rates .how2 .card{padding:24px 26px}
.rates .how2 p{margin-top:8px}
.rates .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.rates .step{padding:20px 22px;display:flex;flex-direction:column;gap:8px;position:relative}
.rates .step .t{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.24;color:var(--os-heading)}
.rates .step p{font-size:15.5px;line-height:1.5}
.rates .vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.rates .vs .card{padding:22px 26px}
.rates .vs p{margin-top:8px;font-size:15.5px;line-height:1.55}
.rates .ninety{margin-top:18px;padding:22px 26px;background:var(--os-tint);border-radius:var(--radius-card);display:flex;align-items:center;gap:22px}
.rates .ninety .n{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-1px;color:var(--os-heading)}
.rates .ninety p{font-size:17.5px;line-height:1.5}
.rates .pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px;align-items:stretch}
.rates .pkg{background:var(--os-card);border:1px solid var(--os-line);border-top:6px solid var(--c);border-radius:var(--radius-card);padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.rates .pkg .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-height:30px} /* N38 (F4): the flag drops under the name instead of wrapping inside its pill */
.rates .pkg .name{display:inline-flex;font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);background:var(--t);color:var(--os-heading);line-height:1.65}
.rates .pkg .flag{display:inline-flex;white-space:nowrap;max-width:100%;font-weight:700;font-size:var(--size-label);letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-pill);background:var(--os-sunken);color:var(--os-heading);line-height:1.65}
.rates .pkg .flag.top1{background:var(--os-heading);color:var(--on-dark)}
.rates .pkg .price{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.8px;color:var(--os-heading);margin-top:6px}
.rates .pkg .price small{display:block;font-size:14.5px;letter-spacing:0;font-weight:700;color:var(--d);margin-top:4px;line-height:1.3}
.rates .pkg .per{font-size:14.5px;color:var(--os-muted);line-height:1.4}
.rates .pkg .pages{font-weight:700;font-size:16px;padding:10px 0;border-top:1px solid var(--os-line);border-bottom:1px solid var(--os-line);margin-top:4px}
.rates .pkg ul{display:flex;flex-direction:column;gap:9px;margin-top:2px;flex:1}
.rates .pkg li{display:flex;gap:9px;font-size:15.5px;line-height:1.4;align-items:flex-start}
.rates .pkg li .ico{color:var(--d);margin-top:2px}
.rates .pkg li .ico svg{width:16px;height:16px}
.rates .pkg .btn{margin-top:14px;width:100%;border-color:var(--os-dark-teal)}
.rates .pkg.ult{border:2px solid var(--pkg-ultimate);border-top:6px solid var(--pkg-ultimate);padding:19px 21px 23px;box-shadow:var(--shadow-raised)}
.rates .cmpwrap{margin-top:26px;overflow-x:auto;background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-card)}
.rates .cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.rates .cmp th,.rates .cmp td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--os-line);font-size:15.5px;line-height:1.4;vertical-align:middle}
.rates .cmp thead th{border-top:6px solid var(--c);background:var(--t);font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;color:var(--os-heading);padding-top:14px;padding-bottom:14px}
.rates .cmp thead th:first-child{background:var(--os-card);border-top:6px solid var(--os-card)}
.rates .cmp tbody th{font-weight:700;color:var(--os-heading);width:24%}
.rates .cmp td.price{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--os-heading)}
.rates .cmp tr:last-child th,.rates .cmp tr:last-child td{border-bottom:0}
.rates .cmp .yes{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--os-tint);color:var(--os-link);align-items:center;justify-content:center}
.rates .cmp .yes svg{width:15px;height:15px}
.rates .cmp .no{display:inline-flex;color:var(--os-muted)}
.rates .cmp .no svg{width:16px;height:16px}
.rates .cmp .ren th{display:table-cell}
.rates .cmp .ren td{font-weight:400}
.rates .cmp .rl{display:flex;align-items:center;gap:8px}
.rates .cmp .rl .ico svg{width:17px;height:17px;color:var(--os-link)}
.rates .hint{margin-top:10px;font-size:14.5px;color:var(--os-muted)}
.rates .pos{margin-top:26px;display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px;align-items:start;padding:32px}
.rates .posdiag{background:var(--os-bg);border:1px solid var(--os-line);border-radius:var(--radius-card);padding:16px}
.rates .sil{display:flex;flex-direction:column;gap:12px}
.rates .sil .bar{height:34px;border-radius:var(--radius-sm);background:var(--os-sunken);display:flex;align-items:center;padding:0 12px;gap:8px}
.rates .sil .bar i{display:block;width:9px;height:9px;border-radius:50%;background:var(--os-line)}
.rates .sil .bar b{margin-left:auto;display:block;width:90px;height:8px;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .sil .body{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:16px;align-items:start}
.rates .sil .main{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.rates .sil .zone{font-weight:700;font-size:var(--size-label);letter-spacing:1.8px;text-transform:uppercase;color:var(--os-muted);display:flex;align-items:center;gap:8px}
.rates .sil .zone:after{content:"";flex:1;height:1px;background:var(--os-line)}
.rates .sil .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rates .sil .tile{height:76px;border-radius:var(--radius-sm);background:var(--os-card);border:1px solid var(--os-line);padding:8px;display:flex;flex-direction:column;gap:5px}
.rates .sil .tile i{display:block;flex:1;border-radius:6px;background:var(--os-sunken)}
.rates .sil .tile b{display:block;height:6px;width:70%;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .sil .lines{display:flex;flex-direction:column;gap:7px;padding:2px 0}
.rates .sil .lines b{display:block;height:7px;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .ban{position:relative;aspect-ratio:6 / 5;border:2px solid var(--os-dark-teal);border-radius:var(--radius-sm);background:var(--os-tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.rates .ban .sz{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.2;color:var(--os-heading)}
.rates .ban .ad{font-weight:700;font-size:var(--size-label);letter-spacing:1.4px;text-transform:uppercase;color:var(--os-heading);line-height:1.3}
.rates .ban.w{width:230px;align-self:center}
.rates .bdg{position:absolute;left:-12px;top:-12px;width:30px;height:30px;border-radius:50%;background:var(--os-dark-teal);color:var(--on-dark);font-family:var(--font-display);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;border:2px solid var(--os-card)}
.rates .sil .rail{display:flex;flex-direction:column;gap:10px;position:relative;padding:14px 0 0}
.rates .railgrp{display:flex;flex-direction:column;gap:10px;border:2px solid var(--os-dark-teal);border-radius:var(--radius-card);padding:10px;position:relative;background:var(--os-card)}
.rates .railgrp .bdg{left:-14px;top:-14px}
.rates .legend{display:flex;flex-direction:column;gap:22px}
.rates .legend .it{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px}
.rates .legend .lb{width:34px;height:34px;border-radius:50%;background:var(--os-dark-teal);color:var(--on-dark);font-family:var(--font-display);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.rates .legend h3{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.25;color:var(--os-heading)}
.rates .legend p{margin-top:4px;font-size:15.5px;line-height:1.55}
.rates .map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.rates .map .m{background:var(--os-card);border:1px solid var(--os-line);border-top:6px solid var(--c);border-radius:var(--radius-card);padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.rates .map .m .name{display:inline-flex;align-self:flex-start;font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);background:var(--t);color:var(--os-heading);line-height:1.65}
.rates .map .m b{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.25;color:var(--os-heading);margin-top:4px}
.rates .map .m p{font-size:15.5px;line-height:1.5}
.rates .map .m.ult{border:2px solid var(--pkg-ultimate);border-top:6px solid var(--pkg-ultimate);padding:17px 19px 19px}
.rates .mapnote{margin-top:14px;font-size:15.5px}
.rates .val{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:26px}
.rates .val .vc{padding:26px 28px}
.rates .val .big{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.8px;color:var(--os-heading)}
.rates .val .small{font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;color:var(--os-muted)}
.rates .val .two{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.rates .val .two .big+.big{padding-top:8px;margin-top:6px;border-top:1px solid var(--os-line)}
.rates .val .with{background:var(--os-tint);border-color:var(--os-tint)}
.rates .val .with .big{margin-top:8px}
.rates .val p{margin-top:10px;font-size:15.5px}
.rates .val .vc.with .small{color:var(--os-link)}
.rates .items{display:flex;flex-direction:column;margin-top:10px}
.rates .items li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--os-line);font-size:15.5px;line-height:1.4}
.rates .items li:last-child{border-bottom:0}
.rates .items li b{font-family:var(--font-display);font-weight:800;color:var(--os-heading);white-space:nowrap;font-size:15px}
.rates .incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-top:14px}
.rates .incl li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.rates .incl li .ico{color:var(--os-link);margin-top:2px}
.rates .incl li .ico svg{width:16px;height:16px}
.rates .val .h3b{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--os-heading);margin-top:24px}
.rates .add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.rates .add .a{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.rates .add .a span.k{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--os-heading)}
.rates .add .a b{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.15;color:var(--os-heading);letter-spacing:-.4px}
.rates .add .a em{font-style:normal;font-size:14.5px;color:var(--os-muted);line-height:1.4}
.rates .addnote{margin-top:14px;font-size:15.5px}
.rates .two2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.rates .two2 .card{padding:22px 26px}
.rates .two2 p{margin-top:8px;font-size:15.5px;line-height:1.55}
.rates .printlead{max-width:70ch;margin-top:12px}
.rates .bund{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.rates .bund .b{padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.rates .bund .b .nm{font-weight:700;font-size:15.5px;color:var(--os-heading)}
.rates .bund .b .pr{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.6px;color:var(--os-heading)}
.rates .bund .b .pr small{font-size:15px;letter-spacing:0;margin-left:4px}
.rates .bund .b .tm{font-size:14.5px;color:var(--os-muted)}
.rates .acts2{margin-top:22px}
.rates .faq{margin-top:26px;max-width:880px;display:flex;flex-direction:column;gap:10px}
.rates .faq details{background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-card);padding:0 22px}
.rates .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.3;color:var(--os-heading)}
.rates .faq summary::-webkit-details-marker{display:none}
.rates .faq summary .ico{color:var(--os-link)}
.rates .faq summary .ico svg{width:20px;height:20px}
.rates .faq details[open] summary .ico{transform:rotate(180deg)}
.rates .faq details p{padding:0 0 20px;font-size:16px;line-height:1.65;max-width:70ch}
.rates .cont{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.rates .cont .tx p{margin-top:14px}
.rates .cont .tx ul{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.rates .cont .tx li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:16px}
.rates .cont .tx li .ico{color:var(--os-link);margin-top:2px}
.rates .cont .tx li .ico svg{width:18px;height:18px}
.rates .form{background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-card);box-shadow:var(--shadow-floating);padding:22px 30px 28px}
.rates .form input[type="text"],.rates .form input[type="email"],.rates .form input[type="tel"],.rates .form select,.rates .form textarea{font-family:var(--font-body);font-size:15.5px;line-height:1.4;color:var(--os-text);background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-sm);padding:0 14px;min-height:48px;width:100%}
.rates .form textarea{padding:12px 14px;min-height:110px;resize:none}
.rates .hbadge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--os-tint) 80%,var(--os-link) 20%);color:var(--os-link);flex:0 0 auto}
.rates .hbadge svg{width:28px;height:28px}
.rates .hbadge.sm{width:44px;height:44px;border-radius:var(--radius-sm)}
.rates .hbadge.sm svg{width:22px;height:22px}
.rates .step .top{display:flex;align-items:center;margin-bottom:6px}
.rates .step .top .ln{flex:1;height:1px;background:var(--os-line);margin:0 -22px 0 12px}
.rates .step:last-child .top .ln{display:none}
.rates .step:not(:last-child)::after{content:"";position:absolute;top:48px;right:-18px;width:18px;height:1px;background:var(--os-line)}
.rates .step:not(:first-child)::before{content:"";position:absolute;top:48px;left:0;width:22px;height:1px;background:var(--os-line)}
.rates .stat{position:relative}
.rates .stat .si{position:absolute;top:20px;right:20px;color:var(--os-muted)}
.rates .stat .si svg{width:22px;height:22px}
.rates .langs{display:flex;gap:8px;margin-top:18px}
.rates .proof{padding:24px 28px;display:flex;align-items:center;gap:22px}
.rates .proof .eyebrow{margin:0}
.rates .proof .t{margin-top:4px}
.rates .proof p.pg1{margin-top:4px;font-size:17.5px}
.rates .proof .q{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border:1px solid var(--os-line);border-radius:var(--radius-pill);background:var(--os-bg);font-size:15.5px;color:var(--os-text)}
.rates .proof .q .ico svg{width:16px;height:16px;color:var(--os-muted)}
.rates .places{margin-top:18px;padding:26px 26px 24px}
.rates .places .root{display:flex;justify-content:center}
.rates .pa{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--os-link);background:var(--os-tint);border-radius:var(--radius-card)}
.rates .pa b{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.2;color:var(--os-heading)}
.rates .pa .s{display:block;font-size:14.5px;line-height:1.4;color:var(--os-text)}
.rates .pa .l2{display:flex;gap:6px;margin-left:8px}
.rates .pa .l2 .chip{background:var(--os-card)}
.rates .stem{width:2px;height:20px;background:var(--os-link);margin:0 auto}
.rates .tree{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rates .tree .n{position:relative;padding-top:20px}
.rates .tree .n:before{content:"";position:absolute;top:0;left:50%;width:2px;height:20px;margin-left:-1px;background:var(--os-link)}
.rates .tree .n:after{content:"";position:absolute;top:0;left:-9px;right:-9px;height:2px;background:var(--os-link)}
.rates .tree .n:first-child:after{left:50%}
.rates .tree .n:last-child:after{right:50%}
.rates .tree .lab{margin-top:10px;font-weight:700;font-size:15px;line-height:1.3;color:var(--os-heading);text-align:center}
.rates .sp{background:var(--os-bg);border:1px solid var(--os-line);border-radius:var(--radius-md);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:128px}
.rates .sp .h{display:block;height:36px;border-radius:8px;background:var(--os-sunken)}
.rates .sp .l{display:block;height:6px;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .sp .g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rates .sp .g i{display:block;height:44px;border-radius:8px;background:var(--os-sunken)}
.rates .sp .r{display:block;height:24px;border-radius:8px;background:var(--os-sunken)}
.rates .sp .hl{background:var(--os-tint);border:2px solid var(--os-link)}
.rates .places .key{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:14.5px;color:var(--os-muted)}
.rates .places .key i{display:inline-block;width:16px;height:12px;border-radius:4px;background:var(--os-tint);border:2px solid var(--os-link)}
.rates .places .note2{margin-top:6px;text-align:center;font-size:15.5px}
.rates .add .a .hbadge{margin-bottom:6px}
.rates .map .m .mh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rates .val .total{margin-top:16px;padding:16px 18px;background:var(--os-tint);border-radius:var(--radius-md);font-size:16px;line-height:1.5}
.rates .val .total b{font-family:var(--font-display);font-weight:800;color:var(--os-heading)}
.rates .print{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;margin-top:26px}
.rates .cover{margin:0;display:flex;flex-direction:column;gap:10px}
.rates .cover .ph{aspect-ratio:5 / 7;border-radius:var(--radius-card);background:var(--os-sunken);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;color:var(--os-muted)}
.rates .cover figcaption{font-size:14.5px;line-height:1.45;color:var(--os-muted)}
.rates .faq{margin-top:26px;max-width:none;display:block;columns:2;column-gap:18px}
.rates .faq details{break-inside:avoid;margin:0 0 10px}
.rates .faq summary{justify-content:flex-start;gap:12px}
.rates .faq summary .qi{color:var(--os-link)}
.rates .faq summary .qi svg{width:22px;height:22px}
.rates .faq summary .qt{flex:1}
.rates .faq summary .chev{color:var(--os-link)}
.rates .faq details[open] summary .ico{transform:none}
.rates .faq details[open] summary .chev{transform:rotate(180deg)}
.rates .faq details p{max-width:none}

/* package colour variables, token names only */
.rates .pe{--c:var(--pkg-essential);--t:var(--pkg-essential-tint);--d:var(--pkg-essential-dark)}
.rates .pb{--c:var(--pkg-business);--t:var(--pkg-business-tint);--d:var(--pkg-business-dark)}
.rates .pp{--c:var(--pkg-premium);--t:var(--pkg-premium-tint);--d:var(--pkg-premium-dark)}
.rates .pu{--c:var(--pkg-ultimate);--t:var(--pkg-ultimate-tint);--d:var(--pkg-ultimate-dark)}

/* ---------- additions the markup needs (no design value changed) ---------- */
.rates [id]{scroll-margin-top:calc(var(--topbar-height) + 16px)}
.rates .claim .lead{margin-top:16px}
.rates .lead-pkgs{margin-top:12px;max-width:62ch}
.rates .lead-ban{margin-top:12px;max-width:66ch}
.rates .how-h2{max-width:26ch}
.rates .bund-h{margin-top:32px}
.rates .val .big{display:block}
.rates .cover img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}
.rates .print.nocover{grid-template-columns:minmax(0,1fr)}
.rates .step .t{display:block}
.rates .faq summary .ico:first-child{color:var(--os-link)}
.rates .faq summary .ico:first-child svg{width:22px;height:22px}
.rates .faq summary .ico:last-child svg{width:20px;height:20px}
.rates .faq summary .ico:last-child{color:var(--os-link)}
.rates .faq details[open] summary .ico:last-child{transform:rotate(180deg)}
.rates .btn:focus-visible,.rates .faq summary:focus-visible,.rates .cmpwrap:focus-visible{outline:3px solid var(--os-dark-teal);outline-offset:3px}

/* ---------- phone-only components, hidden on the desktop board ---------- */
.rates .pcards{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.rates .pcard{background:var(--os-card);border:1px solid var(--os-line);border-top:6px solid var(--c);border-radius:var(--radius-card);padding:16px 18px 6px}
.rates .pcard.ult{border:2px solid var(--pkg-ultimate);border-top:6px solid var(--pkg-ultimate);padding:15px 17px 5px}
.rates .pcard .name{display:inline-flex;font-weight:700;font-size:var(--size-label);letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);background:var(--t);color:var(--os-heading);line-height:1.65}
.rates .pcard dl{margin:8px 0 0}
.rates .pcard dl div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--os-line);font-size:15.5px;line-height:1.4}
.rates .pcard dl div:last-child{border-bottom:0}
.rates .pcard dt{font-weight:700;color:var(--os-heading)}
.rates .pcard dd{margin:0;text-align:right}
.rates .pcard dd.pr{font-family:var(--font-display);font-weight:800;color:var(--os-heading)}
.rates .pcard .yes{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--os-tint);color:var(--os-link);align-items:center;justify-content:center}
.rates .pcard .yes svg{width:15px;height:15px}
.rates .pcard .no{display:inline-flex;color:var(--os-muted)}
.rates .pcard .no svg{width:16px;height:16px}
.rates .renew{margin-top:14px;padding:16px 18px;display:flex;gap:10px;align-items:flex-start}
.rates .renew .ico{color:var(--os-link);margin-top:2px}
.rates .renew .ico svg{width:17px;height:17px}
.rates .renew p{font-size:15.5px}
.rates .renew b{display:block;color:var(--os-heading)}
.rates .vd{display:flex;flex-direction:column;gap:14px;padding:14px}
.rates .vd .blk{background:var(--os-card);border:1px solid var(--os-line);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.rates .vd .blk .railgrp{width:176px;align-self:center}
.rates .vd .blk .ban.w{width:176px}
.rates .vd .blk .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rates .vd .blk .tile{height:62px;border-radius:var(--radius-sm);background:var(--os-card);border:1px solid var(--os-line);padding:7px;display:flex;flex-direction:column;gap:5px}
.rates .vd .blk .tile i{display:block;flex:1;border-radius:6px;background:var(--os-sunken)}
.rates .vd .blk .tile b{display:block;height:6px;width:70%;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .vd .blk .lines{display:flex;flex-direction:column;gap:7px}
.rates .vd .blk .lines b{display:block;height:7px;border-radius:var(--radius-pill);background:var(--os-line)}
.rates .vd .zone{font-weight:700;font-size:var(--size-label);letter-spacing:1.8px;text-transform:uppercase;color:var(--os-muted);display:flex;align-items:center;gap:8px}
.rates .vd .zone:after{content:"";flex:1;height:1px;background:var(--os-line)}
.rates .pcards,.rates .posdiag.vd{display:none}
.rates .cmp .vh,.rates .pcard .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- between the two boards (769px to 1000px): two columns ---------- */
@media (max-width:1000px){
	.rates .pkgs,.rates .map,.rates .add,.rates .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
	.rates .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
	.rates .claim,.rates .cont,.rates .val,.rates .pos,.rates .print{grid-template-columns:minmax(0,1fr)}
	.rates .tree{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
	.rates .step:not(:last-child)::after,.rates .step:not(:first-child)::before{display:none}
}

/* ---------- phone, Pixel's 390px board ---------- */
@media (max-width:768px){
	.rates .wrap{padding-left:var(--page-gutter-mobile);padding-right:var(--page-gutter-mobile)}
	.rates .sec{margin-top:40px}
	.rates .band{margin-top:40px;padding:40px 0}
	.rates .h2{font-size:25px}
	.rates .lead{font-size:17.5px}
	.rates .claim{grid-template-columns:minmax(0,1fr);gap:28px}
	.rates .claim .h2{max-width:none;font-size:25px}
	.rates .what .h2{font-size:25px}
	.rates .pts{grid-template-columns:minmax(0,1fr)}
	.rates .stat{padding:18px 16px 16px}
	.rates .stat .n{font-size:34px}
	.rates .stat .l{font-size:15px}
	.rates .stats3{grid-template-columns:minmax(0,1fr)}
	.rates .ninety{padding:18px 20px;gap:16px}
	.rates .ninety .n{font-size:36px}
	.rates .ninety p{font-size:16px}
	.rates .pkg .btn{min-height:48px}
	.rates .pos{grid-template-columns:minmax(0,1fr);padding:18px;gap:24px}
	.rates .val .vc{padding:22px 20px}
	.rates .val .big{font-size:28px}
	.rates .items li{flex-direction:column;gap:2px}
	.rates .add{grid-template-columns:minmax(0,1fr)}
	.rates .bund .b .pr{font-size:28px}
	.rates .faq{columns:1}
	.rates .faq details{padding:0 18px}
	.rates .faq summary{font-size:16px;min-height:56px;padding:6px 0}
	.rates .form{padding:14px 18px 22px}
	.rates .form input,.rates .form select,.rates .form textarea{font-size:16px}
	.rates .step .top .ln{display:none}
	.rates .proof{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
	.rates .places{padding:20px 16px}
	.rates .pa{flex-wrap:wrap}
	.rates .pa .l2{margin-left:0}
	.rates .tree{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
	.rates .tree .n{padding-top:0}
	.rates .print{grid-template-columns:minmax(0,1fr);gap:24px}
	.rates .cover{max-width:180px}
	.rates .claim .acts .btn{width:100%}
	.rates .stats,.rates .stats3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.rates .how2,.rates .vs,.rates .two2,.rates .val,.rates .house,.rates .bund,.rates .cont,.rates .pkgs,.rates .map,.rates .steps,.rates .incl{grid-template-columns:minmax(0,1fr)}
	.rates .how2 .card,.rates .vs .card,.rates .two2 .card{padding:20px 20px}
	.rates .acts2 .btn{width:100%;white-space:normal;text-align:center;padding:12px 20px}
	.rates .step::before,.rates .step::after{display:none !important}
	.rates .tree .n:before,.rates .tree .n:after{display:none}
	.rates .pcards{display:flex}
	.rates .posdiag.vd{display:flex}
	.rates .posdiag-desk,.rates .cmpwrap,.rates .hint{display:none}
}

/* ===== D05d colour pass (FD), TASK-N32, 09-10-2026: Pixel's layer, merged unchanged ===== */
/* ============================================================
   D05d, rates page colour pass and two photos (rulings EV2, EV3, FB, FC)
   Pixel, 08-10-2026, revised the same day (ruling FD). A layer on top of
   rates.css, scoped under .rates.
   Token names only. The two tints that tokens.css does not carry are
   named color-mix recipes, accepted by Brain on 08-10-2026. No hex.
   Buttons and package cards are not touched by this file.
   ============================================================ */

/* ---------- 0 - the two named mixes and the four grounds ---------- */
.rates{
  --rt-tint-golden:color-mix(in srgb,var(--os-golden-orange) 18%,white);   /* golden tint, surfaces only */
  --rt-tint-caramel:color-mix(in srgb,var(--os-burnt-caramel) 18%,white);  /* caramel tint, surfaces only */
}
/* the rotation, in this order everywhere: pearl aqua, vanilla, golden, caramel */
.rates .add .a:nth-child(4n+1),.rates .stats .stat:nth-child(4n+1),.rates .tree .n:nth-child(4n+1),.rates .steps .step:nth-child(4n+1){--g:var(--os-tint)}
.rates .add .a:nth-child(4n+2),.rates .stats .stat:nth-child(4n+2),.rates .tree .n:nth-child(4n+2),.rates .steps .step:nth-child(4n+2){--g:var(--os-tint-warm)}
.rates .add .a:nth-child(4n+3),.rates .stats .stat:nth-child(4n+3),.rates .tree .n:nth-child(4n+3),.rates .steps .step:nth-child(4n+3){--g:var(--rt-tint-golden)}
.rates .add .a:nth-child(4n+4),.rates .stats .stat:nth-child(4n+4),.rates .tree .n:nth-child(4n+4),.rates .steps .step:nth-child(4n+4){--g:var(--rt-tint-caramel)}

/* ---------- A1 - add-on icon tiles: the badge takes the ground, the icon stays dark teal ---------- */
.rates .add .a .hbadge{background:var(--g);color:var(--os-link)}

/* ---------- A1b - "How it works" step badges join the rotation (ruling FD); the Proof badge keeps its N31c pearl-aqua mix ---------- */
.rates .steps .step .hbadge{background:var(--g);color:var(--os-link)}

/* ---------- A2 - stat tiles: the corner icon becomes a small tinted badge ---------- */
.rates .stat .si{top:18px;right:18px;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--g);color:var(--os-link);display:flex;align-items:center;justify-content:center}
.rates .stat .si svg{width:20px;height:20px}
.rates .stat .n{padding-right:48px}

/* ---------- A2 - the four-places diagram ---------- */
/* the article node: golden tint ground, golden orange edge (non-text mark) */
.rates .pa{background:var(--rt-tint-golden);border:2px solid var(--os-golden-orange)}
/* the four places: each silhouette on its own ground */
.rates .tree .sp{background:var(--g);border-color:transparent}
/* "your article" inside each place, and the key: golden orange fill, burnt caramel edge for the 3:1 boundary */
.rates .sp .hl,.rates .sp .g i.hl,.rates .places .key i{background:var(--os-golden-orange);border:2px solid var(--os-burnt-caramel)}

/* ---------- A3 - section eyebrows: the D06 pill, ink text, coloured dot ---------- */
.rates .eyebrow.eb{display:inline-flex;align-items:center;gap:9px;background:var(--eb-t);color:var(--os-heading);font-size:var(--size-eyebrow);letter-spacing:var(--ls-eyebrow);padding:5px 15px 5px 9px;border-radius:var(--radius-pill);line-height:1.5}
.rates .eyebrow.eb .dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--eb-c);box-shadow:0 0 0 2px var(--os-card)}
.rates .eyebrow.eb + .h2{margin-top:14px}
.rates .eb-aqua{--eb-t:var(--os-tint);--eb-c:var(--os-accent)}
.rates .eb-vanilla{--eb-t:var(--os-tint-warm);--eb-c:var(--os-dark-teal)}
.rates .eb-golden{--eb-t:var(--rt-tint-golden);--eb-c:var(--os-golden-orange)}
.rates .eb-caramel{--eb-t:var(--rt-tint-caramel);--eb-c:var(--os-burnt-caramel)}

/* ---------- A4 - FAQ: one dark cyan marker on the open item ---------- */
.rates .faq details[open]>summary{position:relative}
.rates .faq details[open]>summary::before{content:"";position:absolute;left:-22px;top:50%;width:4px;height:24px;margin-top:-12px;border-radius:0 var(--radius-pill) var(--radius-pill) 0;background:var(--os-accent)}

/* ---------- B - the two photos (white or page ground only, never a tint) ---------- */
.rates .photo{margin:0}
.rates .photo img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border-radius:var(--radius-card)}
.rates .photo figcaption{margin-top:10px;font-size:var(--size-small);line-height:1.45;color:var(--os-muted)}
/* (a) beside "Organic search versus Google Ads": photo left, the two cards stacked right */
.rates .vsrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:stretch}
.rates .vsrow .vs{margin-top:0;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
/* (b) introducing the four packages: heading and lead left, photo right, the same 551 px as (a) (ruling FD) */
.rates .pkgintro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}

@media (max-width:768px){
  .rates .vsrow{grid-template-columns:minmax(0,1fr)}
  .rates .vsrow .vs{grid-auto-rows:auto}
  .rates .pkgintro{grid-template-columns:minmax(0,1fr);gap:20px}
  .rates .stat .si{top:14px;right:14px;width:34px;height:34px}
  .rates .stat .si svg{width:18px;height:18px}
  .rates .stat .n{padding-right:40px}
  .rates .faq details[open]>summary::before{left:-18px}
}