/* gt.css — Green Thumb / Omni palette: the GREEN + ORANGE of his original site (2_GREEN-THUMB … /Green Thumb Website/index.html, June 2026), on a LIGHT cream ground (his 2026-08-19 ruling: dark backgrounds banned on anything a customer reads — so the old dark-green heroes are NOT lifted; green is the type + band colour, orange the accent). Tokens are the original's, byte for byte where they existed. */ :root{ --green:#14604A; --green2:#1E7A5F; --deep:#0A2A21; --mint:#7FE0A6; --mint2:#9fe0ba; --cream:#faf9f5; --cream2:#FFFEFB; --ink:#141413; --muted:#59584f; --line:#e8e6dc; --tint:#EEF2EC; --amber:#d97757; --amber2:#e09b80; --amber-deep:#b5532f; --amber-ink:#7a3408; --amber-tint:#FBEFE7; --serif:'Fraunces',Georgia,serif; --sans:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif; /* aliases so the buy + dashboard pages (written on the paper tokens) restyle by token swap alone */ --paper:var(--cream); --paper-bright:var(--cream2); --paper-warm:var(--tint); --paper-deep:#E3E9E1; --gold:var(--amber); --gold-deep:var(--amber-deep); --green-2:var(--green2); --r-lg:18px; --r-md:12px; --shadow-card:0 18px 40px rgba(20,20,19,.06); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:86px} section,header{scroll-margin-top:86px} body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pp)' opacity='0.05'/%3E%3C/svg%3E")} h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.08;color:var(--green)} p{margin:0} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} section{padding:clamp(56px,7vw,96px) 0} .kick{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:16px} .lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch} .amber{color:var(--amber)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;min-height:48px;text-decoration:none;font-family:var(--sans)} .btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:var(--amber-deep);transform:translateY(-2px)} .btn-dark{background:var(--green);color:#fff}.btn-dark:hover{background:var(--green2)} .btn-out{background:transparent;border-color:var(--green);color:var(--green)}.btn-out:hover{background:var(--green);color:#fff} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none} /* reveal on scroll — lifted from the original */ [data-rv]{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.2,1)} [data-rv].in{opacity:1;transform:none} [data-rv].d1{transition-delay:.08s}[data-rv].d2{transition-delay:.16s}[data-rv].d3{transition-delay:.24s}[data-rv].d4{transition-delay:.32s} /* the green band — the original's .dark, kept as a BAND on a light page (never the page ground) */ .band{background:linear-gradient(165deg,#11503D,#08231B);color:var(--cream);border-radius:20px;padding:34px} .band h2,.band h3{color:#fff}.band .lead{color:#bcd3c6}.band .kick{color:var(--amber2)} /* tint card */ .card{background:var(--cream2);border:1px solid var(--line);border-radius:16px;padding:24px} /* floating leaves — lifted from the original hero */ .leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .leaf-p{position:absolute;bottom:-26px;opacity:0;will-change:transform,opacity;animation:floatUp linear infinite} .leaf-p svg{width:100%;height:auto;display:block} @keyframes floatUp{0%{opacity:0;transform:translateY(0) translateX(0) rotate(0deg)}12%{opacity:.55}82%{opacity:.45}100%{opacity:0;transform:translateY(-520px) translateX(34px) rotate(46deg)}} @media(max-width:600px){.leaf-p{display:none}} /* "We are …" morph — lifted from the original footer */ .we-row{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.3em;font-size:clamp(26px,4vw,52px);font-weight:600;line-height:1.18} .we-static{font-family:var(--sans);font-weight:600} .we-slot{display:inline-block;min-width:4ch} .we-slot .word{display:inline-block;animation:morphfade .45s} @keyframes morphfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* nav */ nav{position:sticky;top:0;z-index:50;background:rgba(250,250,245,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.25s} nav.scrolled{border-color:var(--line);box-shadow:0 1px 14px rgba(0,0,0,.05)} nav .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1} .bstack{display:flex;flex-direction:column;gap:3px}.bstack small{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep)} nav .nav-cta{display:flex;align-items:center;gap:14px} .menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:4px}.menu-btn span{display:block;width:20px;height:2px;background:var(--green);margin:4px 0;border-radius:2px;transition:.25s} .mnav{display:none;border-top:1px solid var(--line);background:rgba(250,250,245,.97);backdrop-filter:blur(12px)}.mnav.open{display:block}.mnav a{display:block;padding:14px 28px;font-size:16px;font-weight:600;color:var(--green);border-bottom:1px solid var(--line);text-decoration:none} @media(max-width:820px){nav .nav-links{display:none}.menu-btn{display:block}nav .nav-cta .btn{padding:10px 14px;font-size:13.5px}} nav .nav-links{display:flex;gap:22px} nav .nav-links a{font-size:13.5px;font-weight:600;color:#33403a;text-decoration:none;white-space:nowrap}nav .nav-links a:hover{color:var(--amber)} @media(max-width:820px){nav .nav-in{flex-wrap:wrap;height:auto;padding:10px 0;gap:8px 14px}nav .nav-links{order:3;width:100%;gap:14px;flex-wrap:wrap}nav .nav-links a{font-size:13px}} /* footer */ /* footer — lifted from the first Green Thumb site (2026-08-01): deep green, four columns, the 'We are' morph */ footer{background:var(--deep);color:#9fbfae;padding:54px 0 36px} footer .foot-we{padding:8px 0 38px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)} footer .we-static{color:#cfe2d7}footer .we-slot .word{color:#dceee3} footer .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:28px} footer .foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#7fa890;margin:0 0 10px;font-family:var(--sans)} footer .foot-col a{display:block;font-size:14px;color:#bcd3c6;padding:5px 0;text-decoration:none}footer .foot-col a:hover{color:#fff} footer .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:13px;color:#9fbfae} footer .soon{font-size:11px;background:rgba(217,119,87,.2);color:var(--amber2);border-radius:999px;padding:2px 7px;margin-left:6px} @media(max-width:760px){footer .foot-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-rv]{opacity:1!important;transform:none!important}} :where(a,button,[tabindex]):focus-visible{outline:2px solid var(--green2);outline-offset:3px} /* --- 2026-09-07 R4: page_eval fixes — controls inherit the font, visible keyboard focus, reduced motion honoured --- */ button,input,select,textarea{font:inherit} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-rv]{opacity:1;transform:none}} /* ===== R31 logo31 — R32: removed; its fixed height (.075em) collapsed every page's struck-O stroke to a 1.8 px dot. The pages' own .z0 rule (top 9% / bottom 9%) is the stroke. ===== */ /* R31 underline31 + its R32 hero rule: REMOVED R33 2026-09-29 on his word ('i don't want the underlines') */ /* R32b 2026-09-29 (his "the slash through the 0 is damn crooked"): the stroke sits on the LETTER's ink, measured by assets/z0.js; the values below are the fallback when the script has not run yet */ .z0::after{left:var(--z0x,50%)!important;top:var(--z0y,54%)!important;bottom:auto!important;width:var(--z0w,.075em)!important;height:var(--z0h,.9em)!important;min-width:0!important;transform:translate(-50%,-50%) rotate(28deg)!important;border-radius:1px} /* ===== R33 2026-09-29 (his 22:05) ===== */ /* (1) ONE PAGE WIDTH: home and industries were 1320, the rest 1180 — the top bar and the nav now start and end at the same place on every page */ .wrap{max-width:min(1320px,92vw)} /* (2) TEXTURE: the pricing page's top-section pattern (his 'the texture of pricing page top section is nice'), stronger, on every light section of every page */ html body header#top.hero,html body section.pain,html body section.whofor,html body section.hard,html body section.omni-do,html body section.retainer,html body section.nineband,html body section.cmp-hero,html body section.compared,html body section.calc,html body section.final,html body section.slots,html body section#sdr,html body section.contact,html body section.faq,html body section#industries,html body section#tiers,html body section#qualify,html body section.protect{background-image:repeating-radial-gradient(circle at 17% 23%,rgba(20,96,74,.085) 0 1px,transparent 1px 7px),repeating-radial-gradient(circle at 71% 64%,rgba(217,119,87,.075) 0 1px,transparent 1px 9px)!important} /* (3) DEPTH: each section sits under the one above it — the hero's own edge, as an inner top edge */ html body section.pain,html body section.whofor,html body section.hard,html body section.omni-do,html body section.retainer,html body section.nineband,html body section.cmp-hero,html body section.compared,html body section.calc,html body section.final,html body section.slots,html body section#sdr,html body section.contact,html body section.faq,html body section#industries,html body section#tiers,html body section#qualify,html body section.protect{box-shadow:inset 0 1px 0 rgba(10,42,33,.14),inset 0 26px 34px -26px rgba(10,42,33,.22)!important} /* (4) WHO IS OMNI FOR: its own ground (the hero's parchment), and a heading that reads as one (the short green line is the kickers' own mark) */ html body section.whofor{background-color:#EFE6D3;padding:76px 0 68px} .whofor h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;position:relative;padding-top:24px;margin:0 0 30px} .whofor h2::before{content:"";position:absolute;left:50%;top:0;width:44px;height:2px;margin-left:-22px;background:#14604A} /* (5) PICTURES: black and white until his references arrive (his 'make all pictures black and white') */ /* R33b his 23:14: 'for website on the desktop = make the picture colored when you hover on it' — grey at rest, colour under a desktop pointer */ .r32-ind img,.omni-do .ph img{filter:grayscale(1) contrast(1.05)!important;transition:filter .35s ease} @media (hover:hover) and (pointer:fine){.r32-ind a:hover img,.r32-ind figure:hover img,.omni-do .ph:hover img,.omni-do .do:hover .ph img{filter:none!important}} /* (6) READING: a small picture above each title */ .r32-ind .r32-blog .r32-bpic{display:block;height:112px;border-radius:10px;overflow:hidden;margin:0 0 6px;background:#e8e6dc} .r32-ind .r32-blog .r32-bpic img{display:block;width:100%;height:100%;object-fit:cover} /* ===== R33 impeccable 2026-09-30 — text that was too small or too faint (measured; 12 groups, 83 places) ===== */ /* too small: 9.5-10.5 px -> 11 px */ html body .brand .bstack small{font-size:11px!important} html body #qbGrid .qsrc,html body #qbGrid .qnew,html body #qbGrid .qreward small,html body #r28Phone .nb-src,html body .iql-chip,html body .r8p-pline,html body .r8p-lang{font-size:11px!important} /* too faint on a light ground: the same hue, darker */ html body #offices > h3,html body p.r8-kick,html body .omni-do .stp{color:#A84D29!important} /* was #e09b80, 2.2 to 1 -> 5.3 to 1 */ html body .iqlname .iql-exp u{color:#D4744F!important} /* large text: was 2.3 to 1 -> 3.25 to 1 (bar 3) */ html body .omni-do .num .ns{color:#6B746E!important} /* was #8a938d, 3.2 to 1 -> 4.8 to 1 */ html body #retainer .kick,html body #qbGrid .qwhen{color:#A54C2B!important} /* was #b5532f, 4.3 to 1 -> 4.9 to 1 */ html body .calc-gapword{color:#A54525!important} /* was #d97757, 2.8 to 1 -> 5.4 to 1 */ html body .r8p-lang{color:#B35026!important} /* was #c4572a, 4.4 to 1 -> 5.1 to 1 */ html body #top .globe-wrap[data-globe="v3"] .gv3-line .k-sup{color:#93491C!important} /* this round's own amber: 4.45 to 1 -> 5.3 to 1 */ /* too faint on a dark ground: the same hue, lighter */ html body .kala-kick{color:#E7B3A1!important} /* was #b5532f on #11503d, 1.9 to 1 -> 5.1 to 1 */ html body footer h4,html body footer h4 .omni0{color:#8BB09B!important} /* was #7fa890 on #123f32, 4.4 to 1 -> 4.9 to 1 */ /* ===== R34 2026-09-30 — the coral button: white words were 3.1 to 1 on #d97757; now the site's own deeper coral (bar 4.5) ===== */ html body .btn-amber{background:#b5532f!important;color:#fff!important} /* 4.95 to 1 */ html body .btn-amber:hover{background:#a54c2b!important} /* 5.72 to 1 */ html body .btn-amber b.free{background-color:transparent!important} /* the word sits on the button, not on its own patch */ /* ===== R34 2026-09-30 — small text read from the rules (text shown by animation was missed by the load-time probe) ===== */ html body .bstack small, html body .tier .ribbon, html body .copybtn, html body .cov-panel-seg-head, html body .doss .page .stamp, html body .doss .row .k, html body .hp figcaption, html body .langrow .lk, html body .r8graphs .rg-lab, html body .r8graphs .rg-mult small, html body .topbar .tb em, html body .iql-split .iql-chip, html body .r8p-av, html body .r8p-bubble, html body .r8p-cardhead, html body .r8p-co, html body .r8p-lang, html body .r8p-line, html body .r8p-pline, html body .r8p-role, html body .r8p-seen, html body .nb-src, html body .nb-tier, html body .qnew, html body .qreward small, html body .qsrc{font-size:11px!important} html body .doss .cover .more, html body .doss .cover .tab, html body .doss .page .sub, html body .doss .peek, html body .flip .tell, html body .lk, html body .lockbadge, html body .mailtabs .ap, html body .mailtabs button, html body .more-parts b, html body .omni-do .do .num .ns, html body .omni-do .do .stp, html body .omni-do .r8-kick, html body .plan .ribbon, html body .r8graphs .rg-name em, html body .r8graphs .rg-src, html body .r8p-copy, html body .r8p-sendbtn, html body .r8p-sheethead, html body .stepcard .side, html body .usp .lang span{font-size:12px!important} /* R34 2026-09-30 — the phone mock at 11 px: a label and its value never break inside a word */ html body .r8p-card{padding:12px 11px!important} html body .r8p-line{gap:6px!important} html body .r8p-line .r8p-k{white-space:nowrap!important;flex:none!important} html body .r8p-line .r8p-mask{white-space:nowrap!important;text-align:right!important;min-width:0} /* ===== R34 2026-09-30 — heading levels: the footer's column titles are paragraphs, three third-level headings are second-level; the look is pinned to what was measured before ===== */ html body footer p.foot-h{color:rgb(139, 176, 155)!important;font-size:13px!important;font-weight:700!important;letter-spacing:1.04px!important;line-height:normal!important;margin-bottom:10px!important;text-transform:uppercase!important} html body footer p.foot-h span.omni0{color:rgb(139, 176, 155)!important;font-size:13px!important;font-weight:700!important;letter-spacing:1.04px!important;line-height:normal!important;text-transform:uppercase!important} html body footer p.foot-h span.z0{color:rgb(139, 176, 155)!important;font-size:13px!important;font-weight:700!important;letter-spacing:1.04px!important;line-height:normal!important;text-transform:uppercase!important} html body h2.r34-h-contact{color:rgb(168, 77, 41)!important;font-family:"Plus Jakarta Sans", "DM Sans", system-ui, sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:1.44px!important;line-height:normal!important;margin-bottom:6px!important;margin-top:18px!important;text-transform:uppercase!important} html body h2.r34-h-iql{font-size:18px!important;letter-spacing:-0.27px!important;line-height:19.44px!important;margin-bottom:6px!important} html body h2.r34-h-iql u{font-size:18px!important;letter-spacing:-0.27px!important;line-height:19.44px!important} html body h2.r34-h-pricing{font-size:22px!important;letter-spacing:-0.33px!important;line-height:23.76px!important} /* ===== R34 2026-09-30 — long lines are shown as typed, not in capitals (30 characters or more); short labels keep their capitals ===== */ html body .r34-sent{text-transform:none!important;letter-spacing:.02em!important} html body .r32-ind .r32-voice figcaption,html body .r32-ind .r32-who{text-transform:none!important;letter-spacing:.02em!important} /* ===== R34 2026-09-30 — faint text the load-time probe never saw (every element on 9 pages scanned; each pair measured) ===== */ html body .r8phone{--muted:#5a655f!important;--acc:#b5502a!important} html body footer:not(:has(.foot-grid)),html body footer:not(:has(.foot-grid)) > .wrap,html body footer:not(:has(.foot-grid)) .omni0,html body footer:not(:has(.foot-grid)) .foot-contact-r17b,html body footer:not(:has(.foot-grid)) .foot-contact-r17b a{color:#cfe2d7!important} html body #qbGrid .qnew{background:#b5532f!important} html body #qbGrid .qsrc.reddit{color:#9c4526!important} html body #result .seal-line{color:#a54525!important} /* R34 2026-09-30 — the phone mock's running text: 12 px (the floor for text that is read, not a label) */ html body .r8p-pline,html body .r8p-bubble,html body .r8p-role{font-size:12px!important} /* the card's three label-and-value rows stay at 11 px: at 12 px the value left its card (seen in the crop, 2026-09-30) */ /* ===== R36 2026-09-30 — the PHONE footer program (his 16:51 'the footer in mobile phone website is too long - just on mobile the layout should be different'). Desktop untouched. ===== */ @media (max-width:760px){ html[data-device=phone] body footer{padding:34px 0 22px} html[data-device=phone] body footer .foot-we{padding:2px 0 20px;margin-bottom:20px} html[data-device=phone] body footer .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding-bottom:18px} html[data-device=phone] body footer .foot-grid > div:first-child{grid-column:1 / -1;max-width:none} html[data-device=phone] body footer .foot-grid > div:first-child p{margin-top:8px;font-size:13px;line-height:1.4} html[data-device=phone] body footer .foot-grid > .foot-col:nth-child(2){grid-column:1;grid-row:2 / span 2} /* Ømni: five links, left column */ html[data-device=phone] body footer .foot-grid > .foot-col:nth-child(3){grid-column:2;grid-row:2} /* Company */ html[data-device=phone] body footer .foot-grid > .foot-col:nth-child(4){grid-column:2;grid-row:3} /* Get started, under Company */ html[data-device=phone] body footer p.foot-h{margin-bottom:6px!important} html[data-device=phone] body footer .foot-col a{padding:3px 0;font-size:14px;line-height:1.35} html[data-device=phone] body footer .foot-col.foot-contact{grid-column:1 / -1;display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px;align-items:baseline} html[data-device=phone] body footer .foot-col.foot-contact p.foot-h{flex-basis:100%} html[data-device=phone] body footer .foot-col.foot-contact a{display:inline-block;padding:2px 0} html[data-device=phone] body footer .foot-col.foot-contact a[href^="mailto:"]{flex-basis:100%;word-break:break-all} html[data-device=phone] body footer .foot-col.foot-contact a[href="contact.html#offices"]{display:none} /* the bottom line already says Hyderabad · Bengaluru · Mumbai */ html[data-device=phone] body footer .foot-bottom{padding-top:16px;gap:6px;font-size:12px} } html body .plan .amt small{display:block;margin-top:2px;line-height:1.3} /* R36: the price label on its own line under the amount at every width (seen wrapping 'access' alone, 2026-09-30) */ /* R37 2026-09-30 — the phone audit's fixes (his 20:44). Phone only (device tag + width), the desktop untouched. */ @media(max-width:760px){ html[data-device=phone] body :is(small,.omni0,.z0,.soon,.st,.qpaid,.qnew,.qsrc,.nb-src,.nb-live,.r32-sub,.r8p-k,.r8p-seen,.r8p-mask,.qb-head b,.r28-header b,.deal small){font-size:12px!important} /* the 12 px floor: 238 texts sat at 11 / 11.5 px */ html[data-device=phone] body .tb{min-width:40px;min-height:40px;justify-content:center} /* the top-bar icons: a 40 px tap box (they were 27 px) */ html[data-device=phone] body footer .foot-col a{display:block;padding:5px 0;line-height:1.35} /* footer links: a 32 px tap height (they were 23–25 px; padding on an inline link adds no height, so block) */ html[data-device=phone] body footer .foot-col.foot-contact a{padding:4px 0} } /* R39 2026-10-02 — his rulings on the nine taste classes (R37 §8): rank 1 the dot keeps blinking (no rule here) · rank 2 "hide the numbers" · rank 3 "ok" (a tighter shadow) · rank 4 "ok" (the card inside a card flattened) · rank 5 "upon call of taste" (the taste call: the kicker hidden) · 6-9 kept */ .card,.usp,.plan,.tier{box-shadow:0 2px 6px -2px rgba(20,33,28,.12)!important} .usp .usp,.card .card,.iql-card .iql-card,.tile .tile{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important} .step-n,.num,.stepno,[class*="stepnum"],.iql-n{display:none!important} .kick.iql-kick,h1 + .kick,.hero .kick{display:none!important} /* R39 2026-10-02 — his "see if background has to be made a tad bit softer in some page - i don't want it interfering with readability": the sections where running text sits straight on the texture (no card under it) carry the same pattern at about two-thirds strength; heroes and card sections keep the full pattern. */ html body section.faq,html body section.contact,html body section.hard,html body section.protect,html body section#qualify,html body section.compared,html body section#tiers,html body section.buyq,html body section.r39-nine{background-image:repeating-radial-gradient(circle at 17% 23%,rgba(20,96,74,.055) 0 1px,transparent 1px 7px),repeating-radial-gradient(circle at 71% 64%,rgba(217,119,87,.048) 0 1px,transparent 1px 9px)!important} /* ===== R40 2026-10-02 — the contact bar (his "also contact bar thing - fix this please - i asked you many times"): two faults found by measuring every page: (1) the icons were green on the home page and coral on every other page — one colour now, declared beside the bar's ground #ECEAE1; (2) his 28 Sep order was never built: once "Intelligence is money" is on screen an underline comes in left to right, then leaves left to right. Same 8 s loop as the words. ===== */ .topbar .tb svg{color:#14604A!important} .topbar .tb-loop{position:relative;padding-bottom:3px} .topbar .tb-loop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#A4521F;transform:scaleX(0);transform-origin:left center;animation:r40line 8s infinite} @keyframes r40line{0%,66%{transform:scaleX(0);transform-origin:left center}76%,80%{transform:scaleX(1);transform-origin:left center}80.01%{transform:scaleX(1);transform-origin:right center}90%,100%{transform:scaleX(0);transform-origin:right center}} @media (prefers-reduced-motion:reduce){.topbar .tb-loop::after{animation:none;transform:scaleX(1)}} /* ===== R40 2026-10-02 — his "pricing cards - make them even please": the three cards were the same height but their rows were not on the same lines (description at 195 / 126 / 120 px, list at 305 / 215 / 176 px). Desktop program only: the price zone of every card takes the height of the tallest (two prices), and the tick list sits on one line above the button. ===== */ @media (min-width:900px){ html:not([data-device=phone]) .plans .plan:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-content:start;grid-template-rows:auto auto auto auto 1fr auto} html:not([data-device=phone]) .plans .plan:first-child>*{grid-column:1/-1} html:not([data-device=phone]) .plans .plan:first-child>.amt{grid-column:auto} html:not([data-device=phone]) .plans .plan:first-child>.btn{align-self:end} html:not([data-device=phone]) .plans .plan>.amt{font-size:34px} } /* ===== R40 2026-10-02 — finding 6 (off-screen): on a phone the MQL / SQL / IQL table was 640 px wide inside a 327 px box that hid its overflow, so the IQL column — ours — could not be seen. Phone program only: the table scrolls sideways inside its own box. ===== */ @media (max-width:760px){ table.iqlt{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%!important;width:100%!important;min-width:0!important} } html[data-device=phone] table.iqlt{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%!important;width:100%!important;min-width:0!important} /* R41 2026-10-03: the frozen bar never pushes a 360px phone wider than its screen (phone audit: buy.html right=389) */ @media(max-width:400px){.topbar{max-width:100vw;overflow:hidden;box-sizing:border-box}}