/* TAM Local Patient Flood funnel prototype - shared stylesheet. Palette: TAM indigo, green, off-white, charcoal, restrained pale tints. Fonts: native system-ui stack (fast, readable on all platforms). Visual system: editorial funnel styling with alternating pale section surfaces, selective word emphasis, connected step visuals, accessible FAQ accordions (native details/summary, JS-enhanced), and a non-obstructive sticky mobile CTA (JS-gated, hidden without JS). Launch mode: add class="launch-mode" to (or load with ?mode=launch) to hide every .proto-only prototype badge from review output. */ :root{ --paper: #FBFAF6; /* off-white page background */ --surface: #FFFFFF; --ink: #1E2030; /* charcoal near-black */ --ink-soft: #2A2C3C; --muted: #666876; --line: #E4E1D8; --line-strong: #D5D1C6; --indigo-950: #151630; --indigo-900: #1C1D49; --indigo-800: #25275F; --indigo-700: #303373; --indigo-600: #3B3E88; --indigo-500: #46499F; /* primary action */ --indigo-400: #7375C7; --indigo-100: #EAEAFB; --indigo-50: #F4F4FC; --green-700: #1C6A40; --green-600: #238451; --green-300: #6ECF94; --green-100: #EAF6EF; --green-50: #F3FAF6; --amber-700: #A46A0F; --shadow-sm: 0 1px 2px rgba(30,32,48,.06), 0 2px 8px rgba(30,32,48,.06); --shadow-md: 0 4px 14px rgba(30,32,48,.10), 0 2px 4px rgba(30,32,48,.06); --shadow-lg: 0 18px 50px rgba(30,32,48,.14); --radius: 16px; --radius-sm: 8px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--paper); color:var(--ink-soft); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-weight:800; color:var(--ink); line-height:1.1; letter-spacing:-.01em; margin:0 0 .25em; } h2{ font-size:clamp(1.5rem, 2.4vw, 1.95rem); } p{ margin:.35em 0; } ul{ margin:.35em 0; padding-left:1.25em; } li{ margin:.25em 0; } a{ color:var(--indigo-600); } canvas, a img, svg{ display:block; max-width:100%; } .container{ max-width:1120px; margin:0 auto; padding:0 20px; } .section{ padding:72px 0; border-top:1px solid var(--line); } .section:first-of-type{ border-top:0; padding-top:64px; } .section--tint{ background:var(--indigo-50); } .section--tint-green{ background:var(--green-50); } .section--white{ background:var(--surface); } .eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:var(--indigo-600); margin-bottom:.6rem; } .center{ text-align:center; } .center > *{ margin-left:auto; margin-right:auto; } .lead{ max-width:52rem; font-size:1.06rem; } .center.lead{ margin-left:auto; margin-right:auto; } .kicker{ font-size:1rem; } .muted{ color:var(--muted); } .small{ font-size:.87rem; } .tiny{ font-size:.8rem; } .maxw{ max-width:60rem; } .mx-auto{ margin-left:auto; margin-right:auto; } .mt{ margin-top:1rem; } .mt2{ margin-top:1.6rem; } .mt3{ margin-top:2.2rem; } .mb0{ margin-bottom:0; } .m0{ margin:0; } /* Selective word emphasis (editorial marker, not a pill) */ .hl{ font-style:normal; color:var(--green-700); background:linear-gradient(transparent 68%, rgba(35,132,81,.20) 68%); padding:0 .04em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .hl--on-dark{ color:#9FE3BC; background:linear-gradient(transparent 68%, rgba(110,207,148,.32) 68%); } .hero h1 em, h1 em, h2 em, h3 em{ font-style:normal; } /* Buttons */ .btn{ display:inline-block; font-family:inherit; font-size:1.02rem; font-weight:700; line-height:1.2; text-decoration:none; text-align:center; color:#fff; background:var(--indigo-500); border:2px solid var(--indigo-500); border-radius:999px; padding:.95rem 1.9rem; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; box-shadow:var(--shadow-md); } .btn:hover{ background:var(--indigo-700); border-color:var(--indigo-700); } .btn:focus-visible{ outline:3px solid var(--indigo-400); outline-offset:2px; } .btn:active{ transform:translateY(1px); } .btn--ghost{ background:transparent; color:var(--indigo-700); border-color:var(--line-strong); box-shadow:none; } .btn--ghost:hover{ background:var(--indigo-50); border-color:var(--indigo-700); color:var(--indigo-800); } .btn--lg{ font-size:1.08rem; padding:1.05rem 2.1rem; } .btn--block{ display:block; width:100%; } .btn[disabled], .btn--disabled, button[disabled]{ background:#A6A8BB; border-color:#A6A8BB; color:#EFF0F5; box-shadow:none; cursor:not-allowed; pointer-events:auto; } /* Badge/support chips */ .badge{ display:inline-block; font-size:.74rem; font-weight:700; color:var(--green-700); background:var(--green-100); border-radius:999px; padding:.35rem .8rem; letter-spacing:.02em; } .badge--indigo{ color:var(--indigo-700); background:var(--indigo-100); } .badge--amber{ color:var(--amber-700); background:#FDF3DE; } .badge--outline{ color:var(--muted); background:transparent; border:1px solid var(--line-strong); } /* Prototype-only chrome: hidden in launch mode */ .proto-only{ } body.launch-mode .proto-only{ display:none !important; } /* header */ .site-header{ padding:18px 0; background:transparent; } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; } .brand img{ height:44px; width:auto; } .brand span{ font-weight:800; letter-spacing:.03em; color:var(--ink); font-size:1rem; } /* hero (tightened, editorial) */ .hero{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; } .hero-copy{ padding:0; min-width:0; } .hero-copy h1{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing:-.02em; } .hero-copy .lead{ font-size:1.02rem; } .hero-img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; min-width:0; } .hero-img img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-img-figcaption{ position:absolute; bottom:0; left:0; right:0; padding:.7rem 1rem; font-size:.75rem; color:#F4F3F7; background:linear-gradient(0deg, rgba(20,21,43,.75), rgba(20,21,43,0)); } .cred-cue{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:.86rem; color:var(--muted); font-weight:600; } .cred-cue img{ height:20px; width:auto; flex:0 0 auto; } /* five-asset visual path */ .pathflow{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px 20px; box-shadow:var(--shadow-sm); margin-top:28px; } .pathflow__lead{ margin:0 0 16px; font-weight:700; color:var(--ink); font-size:.95rem; text-align:center; } .pathflow__lead strong{ color:var(--green-700); } .pathflow__steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .pf-step{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; } .pf-step:not(:first-child)::before{ content:""; position:absolute; top:21px; left:-14px; width:14px; height:2px; background:var(--line-strong); } .pf-step:not(:first-child)::after{ content:"\203A"; position:absolute; top:13px; left:-19px; color:var(--indigo-400); font-size:.95rem; line-height:1; font-weight:800; } .pf-icon{ width:42px; height:42px; border-radius:50%; background:var(--paper); border:2px solid var(--indigo-100); color:var(--indigo-700); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:0 0 auto; } .pf-step--bridge .pf-icon{ background:var(--green-600); border-color:var(--green-600); color:#fff; } .pf-label{ font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.25; } .pf-step--bridge .pf-label{ color:var(--green-700); } /* six-step simple-shift path (index) */ .path{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; } .path .step{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--indigo-500); border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); } .step-num{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; background:var(--indigo-50); border:1px solid var(--indigo-100); color:var(--indigo-700); font-weight:800; font-size:.85rem; display:inline-flex; align-items:center; justify-content:center; } .path .step--bridge{ border-left-color:var(--green-600); border-color:#D8EADF; background:var(--green-50); } .path .step--bridge .step-num{ background:var(--green-600); color:#fff; border-color:var(--green-600); } /* three-move timeline */ .moves{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:26px; } .move{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; box-shadow:var(--shadow-sm); } .move-num{ display:inline-block; font-size:2.2rem; font-weight:800; line-height:1; color:var(--indigo-100); -webkit-text-stroke:1px var(--indigo-400); letter-spacing:-.02em; margin-bottom:.5rem; } .move h3{ font-size:1.12rem; } .move p{ margin:.15em 0; } .move--gate{ border-top:3px solid var(--green-600); background:var(--green-50); border-color:#D8EADF; } .move--gate .move-num{ color:var(--green-100); -webkit-text-stroke:1px var(--green-600); } .move-gate-note{ display:inline-block; margin-top:.5rem; font-size:.78rem; font-weight:700; color:var(--green-700); background:var(--green-100); border-radius:999px; padding:.3rem .7rem; } /* two-column tile grids */ .tiles2{ list-style:none; padding-left:0; margin:1.3rem 0 0; display:grid; grid-template-columns:1fr; gap:12px; } .tile{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 16px; box-shadow:var(--shadow-sm); } .tile-num{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--indigo-50); border:1px solid var(--indigo-100); color:var(--indigo-700); font-weight:800; font-size:.8rem; margin-top:1px; } .tile--before{ background:#F5F4EF; } .tile--after{ background:var(--green-50); border-color:#D8EADF; } .tile--for{ background:var(--green-50); border-color:#D8EADF; } .tile--not{ background:#F5F4EF; } .tile h2, .tile h3{ font-size:1.2rem; margin-top:0; } .tile ul{ margin:.2em 0 0; padding-left:1.15em; } .tile .tile-label{ display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; } .tile--before .tile-label, .tile--not .tile-label{ color:var(--muted); } .tile--after .tile-label, .tile--for .tile-label{ color:var(--green-700); } /* check lists */ ul.checks{ list-style:none; padding-left:0; } .checks li{ position:relative; padding-left:1.6em; } .checks li::before{ content:"\2713"; position:absolute; left:0; top:.05em; color:var(--green-600); font-weight:800; } .tiles2.checks li{ padding:15px 16px 15px 2.7em; } .tiles2.checks li::before{ left:16px; top:15px; } /* proof cards with qualifier labels */ .proof-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; align-items:stretch; } .proof-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; } .proof-label{ align-self:flex-start; display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; border-radius:999px; padding:.32rem .7rem; margin-bottom:.7rem; } .proof-label--product{ color:var(--indigo-700); background:var(--indigo-100); } .proof-label--process{ color:var(--green-700); background:var(--green-100); } .proof-label--adjacent{ color:var(--amber-700); background:#FDF3DE; } .proof-card h3{ font-size:1.08rem; margin-bottom:.35rem; } .proof-card p{ margin:.3em 0; } .proof-card blockquote{ margin:.8rem 0 .6rem; } /* FAQ accordion (native details/summary; JS closes siblings) */ .faq{ border-top:1px solid var(--line-strong); margin-top:18px; } .faq-item{ border-bottom:1px solid var(--line-strong); } .faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px; font-weight:700; color:var(--ink); font-size:1.05rem; line-height:1.3; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; flex:0 0 auto; font-weight:400; font-size:1.5rem; line-height:1; color:var(--indigo-600); transition:transform .15s ease; } .faq-item[open] summary::after{ content:"\2212"; transform:rotate(180deg); } .faq-item summary:focus-visible{ outline:3px solid var(--indigo-400); outline-offset:2px; border-radius:4px; } .faq-a{ padding:0 4px 20px; max-width:58rem; } .faq-a p{ margin:.2em 0; } .faq-item[open] .faq-a{ animation:faqIn .16s ease; } @keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } /* sticky mobile purchase bar (course page; JS-gated, hidden without JS) */ .sticky-cta{ display:none; } .sticky-cta__bar{ background:#FFFFFF; border-top:1px solid var(--line-strong); box-shadow:0 -6px 18px rgba(30,32,48,.14); padding:9px 12px; display:flex; align-items:center; gap:8px; } .sticky-cta__dismiss{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; border:1px solid var(--line-strong); background:transparent; color:var(--muted); font-size:1.15rem; line-height:1; cursor:pointer; font-family:inherit; padding:0; } .sticky-cta__dismiss:focus-visible{ outline:3px solid var(--indigo-400); outline-offset:2px; } .sticky-cta__price{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; color:var(--ink); font-weight:800; } .sticky-cta__price b{ color:var(--green-700); font-size:1.05rem; font-weight:800; } .sticky-cta__sub{ font-size:.68rem; font-weight:700; color:var(--muted); } .sticky-cta__btn{ margin-left:auto; flex:0 0 auto; padding:.6rem .8rem; font-size:.88rem; white-space:nowrap; } /* Founder Edition bridge card (escalation) */ .bridge-card{ background:var(--indigo-950); color:#E7E7F4; border-radius:20px; padding:34px 30px; box-shadow:var(--shadow-lg); border-top:4px solid var(--green-600); } .bridge-card h2{ color:#FFFFFF; } .bridge-card .eyebrow{ color:var(--indigo-400); } .bridge-card .muted{ color:#BCBDD6; } .bridge-facts{ display:flex; flex-wrap:wrap; gap:10px; margin:1rem 0 1.2rem; list-style:none; padding:0; } .bridge-fact{ border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:.4rem .85rem; font-size:.85rem; color:#E7E7F4; font-weight:600; } .bridge-fact b{ color:#9FE3BC; } .bridge-card .ph-tag{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#E8D9A6; } /* cards / two column */ .card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); } .split{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch; } .split .text h2{ font-size:1.65rem; } /* blockquote */ blockquote{ margin:1.4rem 0; padding:1.1rem 1.4rem; border-left:4px solid var(--indigo-600); background:var(--indigo-50); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink); } .citation{ font-size:.84rem; color:var(--muted); margin-top:.4rem; } /* tables */ table{ width:100%; border-collapse:collapse; font-size:.95rem; } th, td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; } th{ color:var(--ink); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } td.fix{ color:var(--green-700); font-weight:800; white-space:nowrap; } /* modal */ .tam-modal[hidden]{ display:none; } .tam-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; } .tam-modal__backdrop{ position:absolute; inset:0; background:rgba(20,21,43,.6); } .tam-modal__dialog{ position:relative; background:#fff; max-width:480px; width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(8px); animation:slideIn .18s ease forwards; outline:none; } @keyframes slideIn{ from{ transform:translateY(12px); opacity:.7;} to{ transform:translateY(0); opacity:1;} } .tam-modal__body{ padding:0; } .mh{ padding:1.6rem 1.6rem 1.2rem; } .mh .modal-kicker{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--green-700); } .mh h2{ font-size:1.5rem; margin:.35rem 0 .6rem; } .modal-body{ padding:0 1.6rem; } .modal-foot{ padding:.8rem 1.6rem 1.4rem; display:block; } .modal-close{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--ink); font-size:1.2rem; cursor:pointer; font-family:inherit; } /* form */ .field{ margin-bottom:16px; } .field label{ display:block; font-weight:700; color:var(--ink); font-size:.95rem; margin-bottom:.35rem; } .field input{ width:100%; padding:.85rem 1rem; font-size:1rem; border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--ink); font-family:inherit; } .field input:focus{ outline:2px solid var(--indigo-400); outline-offset:0; border-color:transparent; } .field input:disabled{ background:#EDECE6; color:#8B8C99; border-color:var(--line); cursor:not-allowed; -webkit-text-fill-color:#8B8C99; opacity:1; } .field .error-msg{ display:none; color:#B3261E; font-size:.85rem; margin-top:.4rem; font-weight:600; } .field.has-error input{ border-color:#B3261E; background:#FEF7F6; } .field.has-error .error-msg{ display:block; } .field-hint{ font-size:.8rem; color:var(--muted); margin-top:.3rem; } /* callout / notice */ .notice{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:12px; font-size:.95rem; } .notice--amber{ background:#FDF3DE; color:#5B3C08; border:1px solid #F1DCA4; } .notice--indigo{ background:var(--indigo-50); color:var(--indigo-900); border:1px solid var(--indigo-100); } .notice--gray{ background:#F3F3F0; color:var(--muted); border:1px solid var(--line-strong); } .notice--block{ display:flex; flex-direction:column; align-items:stretch; margin:.6rem 0; } .notice .notice-label{ text-transform:uppercase; font-size:.71rem; font-weight:900; letter-spacing:.08em; margin-bottom:.2rem; display:block; } /* dark band (reset attention) */ .dark-band{ background:var(--indigo-950); color:#E7E7F4; } .dark-band h2,.dark-band h3{ color:#FFFFFF; } .dark-band .muted{ color:#BCBDD6; } .dark-band .eyebrow{ color:var(--indigo-400); } .dark-band .btn{ background:var(--green-600); border-color:var(--green-600); } .dark-band .btn:hover{ background:var(--green-700); border-color:var(--green-700); } .dark-band .btn--ghost{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.5); } .dark-band .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#FFFFFF; color:#FFFFFF; } /* footer */ .footer{ background:var(--ink); color:#C9C9DA; padding:56px 0 60px; margin-top:64px; font-size:.92rem; } .footer a{ color:#C9C9DA; } .footer .tiny{ font-size:.8rem; color:#A4A5BE; margin-top:18px; } .footer-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px; } /* price line */ .price-line{ font-size:1.5rem; font-weight:800; color:var(--green-700); margin:.1rem 0; } /* placeholder tag */ .ph-tag{ display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.76rem; color:var(--amber-700); background:#FDF3DE; border:1px solid #F1DCA4; border-radius:8px; padding:.3rem .6rem; margin:.2rem 0; word-break:break-word; line-height:1.35; } /* video placeholder */ .video-holder{ border:2px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:30px 22px; } .video-holder__title{ font-size:1.15rem; font-weight:800; color:var(--ink); } .video-holder__play{ width:64px; height:64px; border-radius:50%; background:var(--indigo-50); border:1px solid var(--indigo-100); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; font-size:1.3rem; } /* acknowledgment row */ .ack-row{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; margin:.2rem 0 1rem; color:var(--ink-soft); } .ack-row input{ margin-top:.3rem; flex:0 0 auto; } /* ---------- responsive ---------- */ @media (min-width: 760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } .tiles2{ grid-template-columns:1fr 1fr; } .moves{ grid-template-columns:1fr 1fr 1fr; gap:34px; } .move:not(:first-child)::before{ content:"\203A"; position:absolute; top:26px; left:-25px; color:var(--indigo-400); font-size:1.15rem; line-height:1; font-weight:800; } .proof-grid{ grid-template-columns:1fr 1fr 1fr; } .path{ grid-template-columns:1fr 1fr; } } @media (min-width: 820px){ .hero{ grid-template-columns:1.06fr .94fr; gap:36px; } .hero-img{ aspect-ratio:4/4.6; } } @media (max-width: 760px){ body{ font-size:16px; } .section{ padding:40px 0; } /* 12-18% tighter than desktop for scan speed */ .section:first-of-type{ padding-top:32px; } .hero{ gap:20px; } .hero-img{ aspect-ratio:16/10; } .split{ grid-template-columns:1fr; gap:20px; } .btn--lg{ width:100%; } .footer-grid{ grid-template-columns:1fr; } .mh h2{ font-size:1.35rem; } .tam-modal{ align-items:flex-end; padding:0; } .tam-modal__dialog{ max-width:100%; border-radius:var(--radius) var(--radius) 0 0; } .video-holder{ min-height:240px; } /* five-asset path becomes a vertical connected rail */ .pathflow__steps{ grid-template-columns:1fr; gap:0; } .pf-step{ flex-direction:row; justify-content:flex-start; text-align:left; gap:12px; padding:8px 0; } .pf-step:not(:first-child)::before{ left:20px; top:-8px; width:2px; height:16px; } .pf-step:not(:first-child)::after{ content:""; } .pf-label{ font-size:.9rem; } /* sticky mobile purchase bar: only with JS, only when shown */ html.js .sticky-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:900; transform:translateY(110%); transition:transform .2s ease; } html.js .sticky-cta.is-visible{ transform:translateY(0); } html.js .sticky-cta.is-dismissed{ display:none; } body.has-sticky-cta{ padding-bottom:92px; } /* clearance so the bar never covers the footer */ } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .btn, .sticky-cta, .faq-item summary::after{ transition:none; } .tam-modal__dialog, .faq-item[open] .faq-a{ animation:none; } }