/* ══════════════════════════════════════════════════════════════════════════ css/trustpilot.css — TRUSTPILOT (fw-tp) /trustpilot, built 8 Oct 2026 (Manage › Success Stories › Reviews › Trustpilot). Kept by hand, no Trustpilot API or widget: the TrustScore as Trustpilot shows it and reviews copied word for word with our reply, every one linked to the original. Its idea is IN THE OPEN, and it is its own page (not Google Reviews): §1 the opening beside the TRUSTSCORE BOARD (score, count, the share of each star as a row of bars, the day checked, read-all link) §2 WHAT PATIENTS SAY: an ALIGNED GRID of three (every row ends level, the reviewer pinned to the foot, our reply folded under "Read our reply"), a STARS FILTER that goes straight to the critical ones, the first six until Show all §3 why these reviews can be trusted beside a photograph §4 how to leave a review as an INFOGRAPHIC TIMELINE: clay icons on one dotted line, the steps alternating above and below it §5 the questions beside the closing invitation, one band PALETTE: green is this page's voice (words in --mt-ink, never --mt on white), gold for the stars and the star-share bars, pink for the actions. Our own stars: never Trustpilot's green star logo, which is theirs. Bar and star widths are classes (.fw-tp-w0..100, .fw-tp-f0..100), never an inline width. No boxes, no radius on photographs, no inline styles. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-tp-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5.4vh, 60px); --gap:clamp(28px, 5vw, 80px); --glow:0 8px 20px -8px color-mix(in srgb, var(--pk-dd) 70%, transparent); --glow-lg:0 14px 28px -10px color-mix(in srgb, var(--pk-dd) 75%, transparent); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-tp{display:block;position:relative;background:var(--wh)} .fw-tp em{font-family:var(--ff);font-style:normal} .fw-tp .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-tp-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-tp-sec{position:relative;padding:var(--sec) 0} .fw-tp-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-tp-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-tp-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-tp-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;min-width:0} .fw-tp-head--row > .fw-tp-sub{flex:0 1 38%;min-width:280px;text-align:right} .fw-tp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-ink)} .fw-tp-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-tp-sample{margin-left:4px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none} .fw-tp-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-tp-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-tp-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(150deg, var(--pk-d), var(--pk-dd));box-shadow:var(--glow);color:var(--wh);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-tp-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:var(--glow-lg)} .fw-tp-btn .fw-ico{width:18px;height:18px} .fw-tp-btn .bi-arrow-right,.fw-tp-link .bi-arrow-right{transition:transform .25s var(--ease)} .fw-tp-btn:hover .bi-arrow-right,.fw-tp-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-tp-link{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;font-size:14.5px;font-weight:600;color:var(--pk-dd);transition:color .2s var(--ease)} .fw-tp-link .fw-ico{width:18px;height:18px} .fw-tp-link:hover{color:var(--pk-ink)} /* ══════════════════════════════════════════════════════════════ 00b · STARS AND SHARES — a pale row with the gold row clipped over it ══════════════════════════════════════════════════════════════ */ .fw-tp-stars{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:2px;color:var(--g2);white-space:nowrap;vertical-align:middle} .fw-tp-stars::before{content:"\2605\2605\2605\2605\2605"} .fw-tp-stars__on{position:absolute;top:0;bottom:0;left:0;overflow:hidden;color:var(--go)} .fw-tp-stars__on::before{content:"\2605\2605\2605\2605\2605"} .fw-tp-stars--lg{font-size:24px;letter-spacing:3px} .fw-tp-f0{width:0%} .fw-tp-f2{width:2%} .fw-tp-f4{width:4%} .fw-tp-f6{width:6%} .fw-tp-f8{width:8%} .fw-tp-f10{width:10%} .fw-tp-f12{width:12%} .fw-tp-f14{width:14%} .fw-tp-f16{width:16%} .fw-tp-f18{width:18%} .fw-tp-f20{width:20%} .fw-tp-f22{width:22%} .fw-tp-f24{width:24%} .fw-tp-f26{width:26%} .fw-tp-f28{width:28%} .fw-tp-f30{width:30%} .fw-tp-f32{width:32%} .fw-tp-f34{width:34%} .fw-tp-f36{width:36%} .fw-tp-f38{width:38%} .fw-tp-f40{width:40%} .fw-tp-f42{width:42%} .fw-tp-f44{width:44%} .fw-tp-f46{width:46%} .fw-tp-f48{width:48%} .fw-tp-f50{width:50%} .fw-tp-f52{width:52%} .fw-tp-f54{width:54%} .fw-tp-f56{width:56%} .fw-tp-f58{width:58%} .fw-tp-f60{width:60%} .fw-tp-f62{width:62%} .fw-tp-f64{width:64%} .fw-tp-f66{width:66%} .fw-tp-f68{width:68%} .fw-tp-f70{width:70%} .fw-tp-f72{width:72%} .fw-tp-f74{width:74%} .fw-tp-f76{width:76%} .fw-tp-f78{width:78%} .fw-tp-f80{width:80%} .fw-tp-f82{width:82%} .fw-tp-f84{width:84%} .fw-tp-f86{width:86%} .fw-tp-f88{width:88%} .fw-tp-f90{width:90%} .fw-tp-f92{width:92%} .fw-tp-f94{width:94%} .fw-tp-f96{width:96%} .fw-tp-f98{width:98%} .fw-tp-f100{width:100%} .fw-tp-w0{width:0%} .fw-tp-w1{width:1%} .fw-tp-w2{width:2%} .fw-tp-w3{width:3%} .fw-tp-w4{width:4%} .fw-tp-w5{width:5%} .fw-tp-w6{width:6%} .fw-tp-w7{width:7%} .fw-tp-w8{width:8%} .fw-tp-w9{width:9%} .fw-tp-w10{width:10%} .fw-tp-w11{width:11%} .fw-tp-w12{width:12%} .fw-tp-w13{width:13%} .fw-tp-w14{width:14%} .fw-tp-w15{width:15%} .fw-tp-w16{width:16%} .fw-tp-w17{width:17%} .fw-tp-w18{width:18%} .fw-tp-w19{width:19%} .fw-tp-w20{width:20%} .fw-tp-w21{width:21%} .fw-tp-w22{width:22%} .fw-tp-w23{width:23%} .fw-tp-w24{width:24%} .fw-tp-w25{width:25%} .fw-tp-w26{width:26%} .fw-tp-w27{width:27%} .fw-tp-w28{width:28%} .fw-tp-w29{width:29%} .fw-tp-w30{width:30%} .fw-tp-w31{width:31%} .fw-tp-w32{width:32%} .fw-tp-w33{width:33%} .fw-tp-w34{width:34%} .fw-tp-w35{width:35%} .fw-tp-w36{width:36%} .fw-tp-w37{width:37%} .fw-tp-w38{width:38%} .fw-tp-w39{width:39%} .fw-tp-w40{width:40%} .fw-tp-w41{width:41%} .fw-tp-w42{width:42%} .fw-tp-w43{width:43%} .fw-tp-w44{width:44%} .fw-tp-w45{width:45%} .fw-tp-w46{width:46%} .fw-tp-w47{width:47%} .fw-tp-w48{width:48%} .fw-tp-w49{width:49%} .fw-tp-w50{width:50%} .fw-tp-w51{width:51%} .fw-tp-w52{width:52%} .fw-tp-w53{width:53%} .fw-tp-w54{width:54%} .fw-tp-w55{width:55%} .fw-tp-w56{width:56%} .fw-tp-w57{width:57%} .fw-tp-w58{width:58%} .fw-tp-w59{width:59%} .fw-tp-w60{width:60%} .fw-tp-w61{width:61%} .fw-tp-w62{width:62%} .fw-tp-w63{width:63%} .fw-tp-w64{width:64%} .fw-tp-w65{width:65%} .fw-tp-w66{width:66%} .fw-tp-w67{width:67%} .fw-tp-w68{width:68%} .fw-tp-w69{width:69%} .fw-tp-w70{width:70%} .fw-tp-w71{width:71%} .fw-tp-w72{width:72%} .fw-tp-w73{width:73%} .fw-tp-w74{width:74%} .fw-tp-w75{width:75%} .fw-tp-w76{width:76%} .fw-tp-w77{width:77%} .fw-tp-w78{width:78%} .fw-tp-w79{width:79%} .fw-tp-w80{width:80%} .fw-tp-w81{width:81%} .fw-tp-w82{width:82%} .fw-tp-w83{width:83%} .fw-tp-w84{width:84%} .fw-tp-w85{width:85%} .fw-tp-w86{width:86%} .fw-tp-w87{width:87%} .fw-tp-w88{width:88%} .fw-tp-w89{width:89%} .fw-tp-w90{width:90%} .fw-tp-w91{width:91%} .fw-tp-w92{width:92%} .fw-tp-w93{width:93%} .fw-tp-w94{width:94%} .fw-tp-w95{width:95%} .fw-tp-w96{width:96%} .fw-tp-w97{width:97%} .fw-tp-w98{width:98%} .fw-tp-w99{width:99%} .fw-tp-w100{width:100%} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING — beside the TrustScore board ══════════════════════════════════════════════════════════════ */ .fw-tp .fw-tp-mast{position:relative;padding-bottom:clamp(24px, 4vh, 44px)} .fw-tp-mast__grid{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);align-items:center;gap:clamp(30px, 6vw, 110px)} .fw-tp-mast__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-tp-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0} .fw-tp-mast__copy .fw-crumb{margin-bottom:4px} .fw-tp .fw-tp-h1{margin:0;font-size:clamp(36px, 6.4vh, 64px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-tp .fw-tp-mast .fw-tp-h1 span{display:block;-webkit-text-fill-color:transparent;background:linear-gradient(100deg, var(--mt-dd) 0%, var(--mt-ink) 40%, var(--pk-dd) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .fw-tp-lead{margin:0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-tp-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px} .fw-tp-sample{margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11px;font-weight:700;letter-spacing:0;text-transform:none} /* the board: no box; a soft green light behind, rules between its parts */ .fw-tp-board{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(18px, 3vh, 28px) 0 clamp(18px, 3vh, 28px) clamp(22px, 3vw, 44px)} .fw-tp-board::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--fade-v)} .fw-tp-board::after{content:"";position:absolute;inset:-10% -6% -10% 10%;z-index:-1;background:radial-gradient(60% 55% at 45% 40%, var(--mt-bg), transparent 70%)} .fw-tp-board__k{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-ink)} .fw-tp-board__top{display:flex;align-items:center;gap:18px} .fw-tp-board__n{font-family:var(--ff);font-size:clamp(60px, 9vh, 84px);font-weight:700;line-height:.85;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums} .fw-tp-board__of{display:flex;flex-direction:column;gap:6px} .fw-tp-board__of small{font-size:14px;font-weight:600;color:var(--g6)} .fw-tp-bars{display:grid;gap:9px;margin:4px 0 0;padding:0;list-style:none} .fw-tp-bars li{display:grid;grid-template-columns:62px minmax(0, 1fr) 44px;align-items:center;gap:12px} .fw-tp-bars__k{font-size:13px;font-weight:600;color:var(--g7)} .fw-tp-bars__track{position:relative;height:8px;border-radius:999px;background:var(--g1);overflow:hidden} .fw-tp-bars__track i{position:absolute;top:0;bottom:0;left:0;border-radius:999px;background:linear-gradient(90deg, var(--go-d), var(--go-2))} .fw-tp-bars li b{font-size:13px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums} .fw-tp-board__d{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;font-weight:600;color:var(--g5)} .fw-tp-board__d .fw-ico{width:15px;height:15px} .fw-tp-board__read{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--bl-d)} .fw-tp-board__read:hover{color:var(--bl-dd)} .fw-tp-board__more{margin:0;padding-top:10px;border-top:1px dashed var(--g2);font-size:13px;color:var(--g6)} .fw-tp-board__more a{font-weight:600;color:var(--g7)} /* ══════════════════════════════════════════════════════════════ 02 · WHAT PATIENTS SAY — two columns, our reply, a stars filter ══════════════════════════════════════════════════════════════ */ .fw-tp-reviews{background:linear-gradient(180deg, var(--mt-wash), var(--wh) 60%)} .fw-tp-reviews .fw-tp-head--row{align-items:center} .fw-tp-reviews__lede{margin:-10px 0 16px} .fw-tp-chips{display:flex;flex-wrap:wrap;gap:8px} .fw-tp-chips button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 15px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);font-size:13.5px;font-weight:600;color:var(--g7);white-space:nowrap;cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)} .fw-tp-chips button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--g1);color:var(--g7);font-size:12px;font-weight:700} .fw-tp-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--mt-d)} .fw-tp-chips button.is-on{background:var(--mt-ink);color:var(--wh);box-shadow:var(--mt-glow-sm)} .fw-tp-chips button.is-on span{background:var(--wh);color:var(--mt-ink)} .fw-tp-list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:0 clamp(24px, 3vw, 48px);align-items:stretch} .fw-tp-rev{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;padding:28px 0 26px} .fw-tp-rev[hidden]{display:none} /* a fade rule above each review, a short green-to-gold mark on it, a quiet quote mark */ .fw-tp-rev::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tp-rev::after{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;border-radius:999px;background:linear-gradient(90deg, var(--mt-d), var(--go))} .fw-tp-rev.is-featured::after{width:72px} .fw-tp-rev__top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .fw-tp-rev__top::after{content:"\201C";position:absolute;top:-14px;right:0;font-family:Georgia, serif;font-size:64px;line-height:1;color:var(--mt-l2)} .fw-tp-rev__ver{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 7px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:12px;font-weight:700} .fw-tp-rev__ver .fw-ico{width:14px;height:14px} .fw-tp-rev__date{flex-basis:100%;font-size:12.5px;font-weight:600;color:var(--g5)} .fw-tp-rev__title{margin:2px 0 0;font-family:var(--ff);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .fw-tp-rev__body{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:15px;line-height:1.65;color:var(--g7)} /* the foot sits at the bottom of every review, so a row of reviews ends level */ .fw-tp-rev__foot{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:16px;border-top:1px dashed var(--g2)} .fw-tp-rev__by{display:grid;grid-template-columns:40px minmax(0, 1fr);align-items:center;gap:12px} .fw-tp-rev__av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg, var(--mt-l), var(--mt-l2));color:var(--mt-ink);font-size:15px;font-weight:700} .fw-tp-rev__who{display:flex;flex-direction:column;gap:2px;min-width:0} .fw-tp-rev__who b{font-size:14.5px;font-weight:700;color:var(--ink)} .fw-tp-rev__who small{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12.5px;line-height:1.45;color:var(--g6)} .fw-tp-rev__who small img{width:17px;height:12px;margin-right:2px;border-radius:2px;object-fit:cover} .fw-tp-rev__names{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0} .fw-tp-rev__names a{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:var(--g7)} .fw-tp-rev__names a:hover{color:var(--pk-dd)} .fw-tp-rev__names .fw-ico{width:14px;height:14px;flex:none;color:var(--mt-ink)} .fw-tp-rev__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px} .fw-tp-rev__reply summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--mt-ink)} .fw-tp-rev__reply summary::-webkit-details-marker{display:none} .fw-tp-rev__reply summary .fw-ico{width:15px;height:15px} .fw-tp-rev__reply summary .bi{font-size:11px;transition:transform .25s var(--ease)} .fw-tp-rev__reply[open]{flex-basis:100%;order:2} .fw-tp-rev__reply[open] summary .bi{transform:rotate(180deg)} .fw-tp-rev__reply p{position:relative;margin:10px 0 0;padding:0 0 0 16px;font-size:14px;line-height:1.6;color:var(--g6)} .fw-tp-rev__reply p::before{content:"";position:absolute;top:2px;bottom:2px;left:0;width:3px;border-radius:999px;background:linear-gradient(180deg, var(--mt-d), var(--mt-l2))} .fw-tp-rev__reply small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mt-ink)} .fw-tp-rev__check{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;font-weight:600;color:var(--bl-d)} .fw-tp-rev__check:hover{color:var(--bl-dd)} .fw-tp-more{display:flex;justify-content:center;margin-top:14px} .fw-tp-more[hidden]{display:none} .fw-tp-more button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--mt-edge);font-size:14px;font-weight:600;color:var(--mt-ink);cursor:pointer;transition:background .2s var(--ease)} .fw-tp-more button:hover{background:var(--mt-l)} /* ══════════════════════════════════════════════════════════════ 03 · WHY THESE REVIEWS CAN BE TRUSTED — beside a photograph ══════════════════════════════════════════════════════════════ */ .fw-tp-facts__grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:var(--gap);align-items:stretch} .fw-tp-facts__grid.is-text{grid-template-columns:minmax(0, 1fr)} .fw-tp-facts__pic{position:relative;margin:0;min-height:clamp(320px, 46vh, 460px);overflow:hidden} .fw-tp-facts__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%} .fw-tp-facts__main{display:flex;flex-direction:column;justify-content:center} .fw-tp-fact{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(22px, 3vw, 44px);margin:0;padding:0;list-style:none} .fw-tp-fact li{position:relative;display:grid;grid-template-columns:56px minmax(0, 1fr);align-items:start;gap:14px;padding:18px 0} .fw-tp-fact li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tp-fact__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--mt-ink);background:var(--mt-l)} .fw-tp-fact__ico.is-clay{background:var(--wh);box-shadow:inset 0 0 0 2px var(--mt-l2)} .fw-tp-fact__ico img{display:block;width:74%;height:74%;object-fit:contain} .fw-tp-fact__ico .fw-ico{width:24px;height:24px} .fw-tp-fact p{margin:5px 0 0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · HOW TO LEAVE A REVIEW — numbered steps, the write link beside ══════════════════════════════════════════════════════════════ */ .fw-tp-how{background:linear-gradient(180deg, var(--pk-wash), var(--wh))} .fw-tp-how .fw-tp-head--row{align-items:center} .fw-tp-tl{--dot:100px;--gapx:clamp(16px, 2.4vw, 40px);display:grid;grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr));grid-template-rows:auto var(--dot) auto;column-gap:var(--gapx);margin:0;padding:0;list-style:none} .fw-tp-tl--1{--n:1}.fw-tp-tl--2{--n:2}.fw-tp-tl--3{--n:3}.fw-tp-tl--4{--n:4}.fw-tp-tl--5{--n:5}.fw-tp-tl--6{--n:6} .fw-tp-tl li{position:relative;display:grid;grid-row:1 / 4;grid-template-rows:subgrid;justify-items:center;min-width:0;text-align:center} /* the line through every icon: each step draws its piece, reaching across the gap */ .fw-tp-tl li::before{content:"";grid-row:2;grid-column:1;align-self:center;justify-self:stretch;height:4px;margin-right:calc(var(--gapx) * -1);border-radius:999px;background:repeating-linear-gradient(90deg, var(--mt-l2) 0 16px, transparent 16px 26px)} .fw-tp-tl li:first-child::before{margin-left:50%} .fw-tp-tl li:last-child::before{margin-right:50%} .fw-tp-tl__dot{position:relative;z-index:1;grid-row:2;grid-column:1;display:grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;color:var(--mt-ink);background:var(--wh);box-shadow:inset 0 0 0 2px var(--mt-l2), 0 0 0 8px var(--wh), 0 18px 32px -18px color-mix(in srgb, var(--mt-dd) 55%, transparent);transition:transform .35s var(--ease-pop)} .fw-tp-tl li.is-up .fw-tp-tl__dot{box-shadow:inset 0 0 0 2px var(--pk-l2), 0 0 0 8px var(--wh), 0 18px 32px -18px color-mix(in srgb, var(--pk-dd) 55%, transparent)} .fw-tp-tl li:hover .fw-tp-tl__dot{transform:scale(1.06)} .fw-tp-tl__dot img{display:block;width:70%;height:70%;object-fit:contain} .fw-tp-tl__dot .fw-ico{width:32px;height:32px} .fw-tp-tl__text{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;max-inline-size:100%;padding:0 4px} /* a short stem joins the text to its icon */ .fw-tp-tl__text::before{content:"";position:absolute;left:50%;width:2px;height:22px;background:var(--g2)} .fw-tp-tl li.is-down .fw-tp-tl__text{grid-row:3;align-self:start;padding-top:34px} .fw-tp-tl li.is-down .fw-tp-tl__text::before{top:6px} .fw-tp-tl li.is-up .fw-tp-tl__text{grid-row:1;align-self:end;padding-bottom:34px} .fw-tp-tl li.is-up .fw-tp-tl__text::before{bottom:6px} .fw-tp-tl__n{padding:3px 12px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .fw-tp-tl li.is-up .fw-tp-tl__n{background:var(--pk-l);color:var(--pk-ink)} .fw-tp-tl p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · QUESTIONS AND YOUR EXPERIENCE — one band ══════════════════════════════════════════════════════════════ */ .fw-tp-end{background:linear-gradient(180deg, var(--mt-wash), var(--wh) 70%)} .fw-tp-end__grid{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:var(--gap);align-items:stretch} .fw-tp-end__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-tp-end__qa{display:flex;flex-direction:column;gap:8px} .fw-tp-end__qa .fw-tp-h2{margin-bottom:10px} .fw-tp-end__story{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:100%} /* the photo grows with the questions beside it, so both columns end level */ .fw-tp-end__pic{position:relative;flex:1 1 auto;width:100%;min-height:clamp(240px, 32vh, 320px);margin:0 0 8px;overflow:hidden} .fw-tp-end__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .fw-tp-qa details{position:relative} .fw-tp-qa details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tp-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-tp-qa summary::-webkit-details-marker{display:none} .fw-tp-qa summary:hover,.fw-tp-qa details[open] summary{color:var(--mt-ink)} .fw-tp-qa summary .bi{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--mt-l);color:var(--mt-ink);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-tp-qa details[open] summary .bi{transform:rotate(45deg);background:var(--mt-ink);color:var(--wh)} .fw-tp-qa p{margin:0 46px 15px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · RESPONSIVE (the phone is designed as an app) ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-tp-fact{grid-template-columns:minmax(0, 1fr)} .fw-tp-list{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:1024px){ .fw-tp-mast__grid,.fw-tp-facts__grid,.fw-tp-end__grid{grid-template-columns:minmax(0, 1fr)} .fw-tp-board{padding-left:0} .fw-tp-board::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px;background:var(--fade)} .fw-tp-head--row{align-items:flex-start} .fw-tp-head--row > .fw-tp-sub{flex-basis:100%;text-align:left} .fw-tp-facts__pic{min-height:0;aspect-ratio:16/9} .fw-tp-tl,.fw-tp-tl--3,.fw-tp-tl--4,.fw-tp-tl--5,.fw-tp-tl--6{--dot:76px;grid-template-columns:minmax(0, 1fr);grid-template-rows:none;row-gap:0} .fw-tp-tl li{grid-row:auto;grid-template-rows:none;grid-template-columns:var(--dot) minmax(0, 1fr);justify-items:start;align-items:center;column-gap:18px;padding:12px 0;text-align:left} .fw-tp-tl li::before{display:none} .fw-tp-tl li + li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-tp-tl__dot{grid-row:1;grid-column:1} .fw-tp-tl li.is-up .fw-tp-tl__text,.fw-tp-tl li.is-down .fw-tp-tl__text{grid-row:1;grid-column:2;align-self:center;align-items:flex-start;padding:0} .fw-tp-tl__text::before{display:none} .fw-tp-end__pic{flex:none;min-height:0;aspect-ratio:16/9} } @media (max-width:760px){ .fw-tp-list{grid-template-columns:minmax(0, 1fr)} } @media (max-width:640px){ .fw-tp-page{--pad:14px} .fw-tp .fw-tp-h1{font-size:clamp(32px, 9vw, 42px)} .fw-tp-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-tp-act .fw-tp-btn{width:100%} .fw-tp-chips{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none} .fw-tp-chips::-webkit-scrollbar{display:none} .fw-tp-rev__reply{margin-left:6px} .fw-tp-qa p{margin-right:0} }