/* ============================================================ TubePilot — SEO / 流入ページ kit Loads AFTER tp.css. All accents driven by --accent. Pick a direction by adding dir-a / dir-b / dir-c to . ============================================================ */ /* ---------- direction tokens ---------- */ body.dir-a { --accent:#d946ef; --accent-2:#2dd4ee; --accent-rgb:217,70,239; --accent-soft:#f6c8f4; background: radial-gradient(140% 100% at 50% -10%, #14091f 0%, #07070d 55%); } body.dir-b { --accent:#2dd4ee; --accent-2:#8b5cf6; --accent-rgb:45,212,238; --accent-soft:#c2f0fb; background: radial-gradient(140% 100% at 50% -10%, #0a1320 0%, #07070d 55%); } body.dir-c { --accent:#f0c14b; --accent-2:#d946ef; --accent-rgb:240,193,75; --accent-soft:#ffe6b0; background: radial-gradient(140% 100% at 50% -10%, #1a1206 0%, #07070d 52%); } .acc { color: var(--accent) !important; } /* ---------- nav brand as link ---------- */ .tp-brand { text-decoration:none; } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; } .hero .tp-wrap.tp-section { padding-left:28px; padding-right:28px; } .hero .tp-glow.a { width: 600px; height: 600px; background: var(--accent); left: -180px; top: -200px; opacity:.26; } .hero .tp-glow.b { width: 540px; height: 540px; background: var(--accent-2); right: -170px; top: 80px; opacity:.24; } .hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center; min-width:0; } .hero-grid.rev { grid-template-columns: .92fr 1.08fr; } .hero-grid > *, .panel, .mega, .hero-sub { min-width:0; } @media (max-width: 980px){ .hero-grid, .hero-grid.rev { grid-template-columns: 1fr; } } .mega { font-family:var(--ff-display); font-weight:900; line-height:1.05; letter-spacing:-.02em; font-size: clamp(36px, 4.9vw, 66px); margin:18px 0 0; } .mega .ln { display:block; } .mega, .mega .ln, .tp-h2 { word-break:auto-phrase; overflow-wrap:normal; line-break:strict; text-wrap:balance; } .mega .strike { position:relative; color:var(--muted); white-space:nowrap; } .mega .strike::after { content:""; position:absolute; left:-2%; right:-2%; top:54%; height:6px; background:var(--accent); transform:rotate(-3deg); border-radius:4px; box-shadow:0 0 16px var(--accent); } .mega .neon { color:#fff; text-shadow: 0 0 18px rgba(var(--accent-rgb),.5), 0 0 40px rgba(var(--accent-rgb),.35); } .mega .grad { background:linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .mega .acccol { color:var(--accent); text-shadow:0 0 22px rgba(var(--accent-rgb),.35); } .hero-sub { max-width: 520px; margin-top: 24px; font-size:17px; } .hero-sub .hero-line { display:block; } .hero-sub .hero-line + .hero-line { margin-top:2px; } .hero-cta { display:flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } .hero-sub b, .callout b { color:#fff; } .seo-coupon-offer { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:12px 16px; border:1px solid rgba(var(--accent-rgb),.45); border-radius:14px; background:linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(255,190,77,.08)); color:#fff; box-shadow:0 18px 44px rgba(0,0,0,.24); } .seo-coupon-offer span { font-size:13px; font-weight:800; color:var(--accent-soft); } .seo-coupon-offer .campaign-copy { min-width:0; flex:1 1 260px; } .seo-coupon-offer strong { font-size:14px; } .seo-coupon-offer code { margin-left:6px; padding:5px 8px; border:1px solid rgba(255,190,77,.55); border-radius:8px; background:rgba(255,190,77,.12); color:#ffe58a; font-family:var(--ff-mono); letter-spacing:.08em; } .search-intent-title .intent-line { display:block; } .search-intent-title .intent-keyword { white-space:nowrap; } @supports not (word-break:auto-phrase) { .mega, .mega .ln, .tp-h2 { word-break:keep-all; } } /* ---------- generic framed panel (used by all directions) ---------- */ .panel { background:linear-gradient(168deg, rgba(var(--accent-rgb),.07), rgba(255,255,255,.02)); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:22px; box-shadow:0 50px 120px -40px rgba(var(--accent-rgb),.4); } .panel.flush { padding:0; overflow:hidden; } .panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-weight:700; } .panel-pill { font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.4); padding:5px 11px; border-radius:999px; } .win-bar { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); } .win-bar .dot { width:11px; height:11px; border-radius:50%; } .win-bar .d1{background:#ff5f57;} .win-bar .d2{background:#febc2e;} .win-bar .d3{background:#28c840;} .win-bar .name { margin-left:8px; font-family:var(--ff-mono); font-size:12px; color:var(--muted); } .win-bar .live { margin-left:auto; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.4); padding:4px 10px; border-radius:999px; } .panel-body { padding:20px; } /* before/after (dir A motif) */ .crossed { color:var(--muted-2); text-decoration: line-through; text-decoration-color: var(--accent); padding:10px 14px; border:1px dashed var(--line-2); border-radius:10px; margin-bottom:9px; font-size:14px; } .arrow-lab { display:flex; align-items:center; gap:10px; color:var(--accent); font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; margin:14px 0 10px; } .arrow-lab::before, .arrow-lab::after { content:""; height:1px; background:var(--line-2); flex:1; } .good { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--accent); background:rgba(var(--accent-rgb),.08); border-radius:10px; margin-bottom:9px; font-size:14px; font-weight:700; } .good .gdot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); margin-top:6px; flex:0 0 auto; } /* source row (dir B) */ .src { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); } .src .ico { width:38px; height:38px; border-radius:9px; background:var(--grad-magenta); flex:0 0 auto; position:relative; } .src .ico::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; } .src .meta b { display:block; font-size:14px; } .src .meta span { font-size:12px; color:var(--muted); } .src .act { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--accent); cursor:pointer; border:1px solid rgba(var(--accent-rgb),.4); padding:8px 13px; border-radius:999px; transition:.18s; white-space:nowrap; } .src .act:hover { background:rgba(var(--accent-rgb),.1); } /* filter chips (dir B) */ .filters { display:flex; gap:8px; margin:18px 0 14px; flex-wrap:wrap; } .filt { font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); cursor:pointer; transition:.16s; } .filt.on { color:#07070d; background:var(--accent); border-color:transparent; } /* result rows (dir B) */ .row { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; transition:.18s; cursor:pointer; } .row:hover { border-color:var(--line-2); background:rgba(255,255,255,.03); transform:translateX(2px); } .row .score { font-family:var(--ff-mono); font-weight:700; font-size:13px; color:var(--accent); width:34px; flex:0 0 auto; } .row .txt { font-size:14px; font-weight:700; line-height:1.45; flex:1; } .row .txt .sub { display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:3px; } .row .tag { font-size:10.5px; font-family:var(--ff-mono); letter-spacing:.08em; color:var(--muted); border:1px solid var(--line-2); padding:3px 8px; border-radius:6px; flex:0 0 auto; align-self:center; } .row .copy { font-size:11px; color:var(--muted); border:1px solid var(--line-2); padding:6px 10px; border-radius:8px; flex:0 0 auto; align-self:center; } .row.hide { display:none; } .row .chk { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--accent); flex:0 0 auto; align-self:center; display:grid; place-items:center; color:var(--accent); font-size:12px; font-weight:700; } /* thumbnail cells (thumbnail topic) */ .thumbgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .tcell { aspect-ratio:16/9; border-radius:12px; position:relative; overflow:hidden; } .tcell.g1 { background:linear-gradient(135deg,#d946ef,#6d28d9);} .tcell.g2 { background:linear-gradient(135deg,#2dd4ee,#3b82f6);} .tcell.g3 { background:linear-gradient(135deg,#f5b23f,#e2683e);} .tcell.g4 { background:linear-gradient(135deg,#34d399,#0ea5a3);} .tcell::after { content:""; position:absolute; width:54px; height:54px; border-radius:50%; right:16%; top:20%; background:radial-gradient(circle,#fff,rgba(255,255,255,0) 65%); opacity:.5; filter:blur(2px); } .tcell .tt { position:absolute; left:10px; bottom:8px; right:10px; font-family:var(--ff-display); font-weight:900; font-size:14px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); line-height:1.15; } .tcell .tnum { position:absolute; top:8px; left:8px; font-family:var(--ff-mono); font-size:10.5px; background:rgba(0,0,0,.5); padding:2px 8px; border-radius:6px; } /* anatomy (dir C) */ .anat .full { font-family:var(--ff-display); font-weight:900; font-size:20px; line-height:1.5; padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.25); } .anat .full .p1 { background:rgba(245,178,63,.18); color:#ffe6b0; border-radius:5px; padding:0 4px; } .anat .full .p2 { background:rgba(217,70,239,.18); color:#f6c8f4; border-radius:5px; padding:0 4px; } .anat .full .p3 { background:rgba(45,212,238,.16); color:#c2f0fb; border-radius:5px; padding:0 4px; } .legend { display:grid; gap:10px; margin-top:16px; } .leg { display:flex; align-items:flex-start; gap:11px; font-size:13px; } .leg .sw { width:14px; height:14px; border-radius:4px; flex:0 0 auto; margin-top:3px; } .leg b { font-size:13.5px; } .leg span { color:var(--muted); display:block; } .sw.a{background:rgba(245,178,63,.6);} .sw.b{background:rgba(217,70,239,.6);} .sw.c{background:rgba(45,212,238,.6);} /* library (dir C) */ .libtabs { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; } .libtab { font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); cursor:pointer; transition:.16s; } .libtab.on { color:#07070d; background:var(--accent); border-color:transparent; } .lib { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; } @media (max-width:760px){ .lib { grid-template-columns:1fr; } } .formula { border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; background:var(--card); } .formula.hide { display:none; } .formula .ftype { font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--accent); } .formula .fpat { font-size:15.5px; font-weight:700; margin:8px 0; line-height:1.5; } .formula .fpat .v { color:var(--accent-2); } .formula .fex { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin-top:4px; } /* ---------- stats row ---------- */ .stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; } @media (max-width:760px){ .stat-row { grid-template-columns:1fr; } } .stat { border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:var(--card); } .stat .big { font-family:var(--ff-display); font-weight:900; font-size:25px; color:var(--accent); } .stat .big.alt { color:var(--accent-2); } .stat p { color:var(--muted); font-size:14px; margin:8px 0 0; } /* ---------- 4-up cards ---------- */ .cards4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; } @media (max-width:980px){ .cards4 { grid-template-columns:repeat(2,1fr);} } @media (max-width:540px){ .cards4 { grid-template-columns:1fr;} } .acard { border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); } .acard .ai { font-size:22px; margin-bottom:12px; } .acard h3 { font-size:16.5px; margin:0; } .acard p { color:var(--muted); font-size:13.5px; margin:8px 0 0; } /* ---------- 3-up "types" ---------- */ .types { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; } @media (max-width:760px){ .types { grid-template-columns:1fr; } } .tcard2 { border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); } .tcard2 .lab { font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--accent); } .tcard2 p { font-size:16px; font-weight:700; margin:10px 0 0; line-height:1.5; } .tcard2 p .v { color:var(--accent-2); } /* ---------- flow ---------- */ .flow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; } @media (max-width:980px){ .flow { grid-template-columns:repeat(2,1fr);} } @media (max-width:540px){ .flow { grid-template-columns:1fr;} } .step { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; } .step .n { width:36px; height:36px; border-radius:50%; background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.4); color:var(--accent); font-family:var(--ff-mono); font-weight:700; display:grid; place-items:center; margin-bottom:16px; } .step h3 { font-size:17px; margin:0 0 8px;} .step p { color:var(--muted); font-size:14px; margin:0; } /* ---------- two col lists ---------- */ .twocol { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px; } @media (max-width:760px){ .twocol { grid-template-columns:1fr; } } .listcard { border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:var(--card); } .listcard h3 { font-size:18px; margin:0 0 14px; } .listcard ul { list-style:none; padding:0; margin:0; } .listcard li { padding:10px 0 10px 28px; position:relative; color:var(--ink-soft); font-size:14.5px; border-top:1px solid var(--line); } .listcard li:first-child { border-top:none; } .listcard li::before { content:"\2713"; position:absolute; left:0; top:10px; color:var(--accent); font-weight:700; } .listcard.tpl li::before { content:"\203A"; color:var(--accent-2); font-size:17px; top:8px; } /* ---------- callout ---------- */ .callout { border:1px solid rgba(var(--accent-rgb),.4); border-radius:var(--r-lg); padding:26px 28px; background:radial-gradient(120% 200% at 0% 0%, rgba(var(--accent-rgb),.12), transparent 60%), var(--card); font-size:16px; line-height:1.7; } /* ---------- related ---------- */ .related-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; } @media (max-width:760px){ .related-row { grid-template-columns:1fr 1fr; } } .related-row a { display:block; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); font-size:14px; font-weight:700; transition:.18s; } .related-row a:hover { border-color:var(--line-2); transform:translateY(-2px); color:#fff; } /* ---------- cta band ---------- */ .cta-band { border:1px solid rgba(var(--accent-rgb),.4); border-radius:var(--r-xl); padding:52px; position:relative; overflow:hidden; text-align:center; background: radial-gradient(120% 160% at 50% 0%, rgba(var(--accent-rgb),.2), transparent 62%), var(--panel); } /* ---------- faq ---------- */ .faq-item { border:1px solid var(--line); border-radius:var(--r); margin-top:12px; background:var(--card); overflow:hidden; } .faq-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; font-weight:700; } .faq-q .ico { color:var(--accent); transition:.25s; font-size:20px; } .faq-item.open .faq-q .ico { transform:rotate(45deg); } .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq-a p { padding:0 22px 22px; margin:0; color:var(--muted); font-size:14.5px; } /* ---------- video embed ---------- */ .seo-video-card { border:1px solid rgba(var(--accent-rgb),.4); border-radius:var(--r-xl); overflow:hidden; background: radial-gradient(120% 160% at 80% 0%, rgba(var(--accent-rgb),.16), transparent 62%), var(--panel); box-shadow:0 24px 76px rgba(0,0,0,.32); } .seo-video-frame { position:relative; width:100%; aspect-ratio:16 / 9; background:#050612; } .seo-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* ---------- footer links ---------- */ .tp-foot a:hover { color:#fff; } /* ---------- SEO UX redesign blocks ---------- */ .seo-screen-slot { position:relative; margin:0; min-height:390px; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-xl); background: radial-gradient(80% 70% at 78% 82%, rgba(var(--accent-rgb),.22), transparent 60%), linear-gradient(168deg, rgba(var(--accent-rgb),.08), rgba(255,255,255,.025)); box-shadow:0 50px 120px -42px rgba(var(--accent-rgb),.48); } .seo-screen-slot img { display:block; width:100%; height:100%; min-height:390px; object-fit:cover; } .seo-screen-slot.has-shot .seo-screen-placeholder { display:none; } .seo-screen-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:24px; } .seo-screen-placeholder .slot-top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .seo-screen-placeholder h2 { margin:0; font-size:18px; line-height:1.5; } .seo-screen-placeholder .slot-pill { flex:0 0 auto; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.48); border-radius:999px; padding:5px 11px; } .seo-screen-placeholder .slot-lines { display:grid; gap:10px; } .seo-screen-placeholder .ghost-line, .seo-screen-placeholder .good-line { border-radius:10px; padding:12px 14px; font-size:14px; } .seo-screen-placeholder .ghost-line { color:var(--muted-2); border:1px dashed var(--line-2); text-decoration:line-through; text-decoration-color:var(--accent); } .seo-screen-placeholder .good-line { display:flex; align-items:flex-start; gap:10px; color:#fff; border:1px solid rgba(var(--accent-rgb),.75); background:rgba(var(--accent-rgb),.1); font-weight:800; } .seo-screen-placeholder .good-line::before { content:""; width:8px; height:8px; flex:0 0 auto; margin-top:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 12px var(--accent-2); } .seo-screen-note { margin:0; color:var(--muted); font-size:12px; line-height:1.7; } .seo-ux-section { position:relative; } .seo-ux-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; } .seo-ux-card { min-width:0; border:1px solid var(--line-2); border-radius:16px; padding:20px; background:rgba(255,255,255,.035); } .seo-ux-card h3 { margin:0 0 12px; font-size:19px; } .seo-ux-card p { margin:0; color:var(--muted); line-height:1.8; } .seo-ux-card ul, .seo-ux-flow ol { margin:0; padding-left:1.15em; color:var(--muted); line-height:1.85; } .seo-ux-card li + li, .seo-ux-flow li + li { margin-top:7px; } .seo-ux-flow { margin-top:24px; padding:24px; border:1px solid var(--line-2); border-radius:18px; background:linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(255,255,255,.025)); } .seo-ux-flow h3 { margin:0 0 16px; font-size:22px; } .seo-ux-outcome { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:18px; } .seo-next-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .seo-next-links a { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(var(--accent-rgb),.42); border-radius:999px; color:#fff; text-decoration:none; background:rgba(var(--accent-rgb),.08); font-weight:800; } .seo-next-links a::after { content:"→"; color:var(--accent); } @media (max-width: 860px) { .seo-ux-grid, .seo-ux-outcome { grid-template-columns:1fr; } .seo-screen-slot, .seo-screen-slot img { min-height:330px; } } /* ---------- mobile fit fixes ---------- */ .good, .crossed, .row .txt, .related-row a { overflow-wrap:anywhere; } @media (max-width: 620px) { html, body { width:100%; max-width:100%; overflow-x:hidden; } .tp-wrap { padding-left:20px; padding-right:20px; } .tp-nav .tp-wrap, .hero .tp-wrap.tp-section, section .tp-wrap, footer .tp-wrap { width:100%; max-width:100%; } .tp-section { padding:72px 0; } .tp-section.tight { padding:56px 0; } .tp-nav-in { height:64px; gap:12px; } .tp-brand { font-size:18px; flex:1 1 auto; min-width:0; } .tp-logo { width:36px; height:36px; flex:0 0 auto; } .tp-navlinks { gap:10px; flex:0 0 auto; min-width:0; } .tp-navlinks .tp-btn { display:none; } .tp-navlinks .tp-btn { max-width:120px; padding:11px 16px; overflow:hidden; text-overflow:ellipsis; } .hero .tp-wrap.tp-section { padding:48px 20px 72px !important; } .hero-grid { width:100%; max-width:100%; gap:30px; overflow:hidden; } .hero-grid > * { width:100%; max-width:100%; } .mega { max-width:350px; font-size:clamp(23px, 6.2vw, 24px); line-height:1.2; letter-spacing:0; overflow-wrap:normal; word-break:auto-phrase; line-break:strict; white-space:normal; } .mega .ln { display:block; overflow-wrap:normal; word-break:auto-phrase; line-break:strict; white-space:normal; } .mega .ln::after { content:none; } .hero-sub { max-width:350px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; word-break:break-all; line-break:anywhere; } .hero-cta { display:grid; grid-template-columns:1fr; max-width:100%; } .hero-cta .tp-btn { width:100%; justify-content:center; white-space:normal; text-align:center; } .seo-coupon-offer { display:flex; width:100%; align-items:flex-start; } .seo-coupon-offer .campaign-copy { flex-basis:100%; } .seo-coupon-offer strong { flex:1 1 100%; overflow-wrap:anywhere; word-break:break-all; line-break:anywhere; } .seo-coupon-offer code { margin-left:0; } .seo-screen-slot { width:100%; max-width:100%; min-height:0; border-radius:20px; } .seo-screen-slot img { min-height:260px; } .seo-screen-placeholder { position:relative; padding:20px; } .seo-screen-placeholder .slot-top { display:grid; grid-template-columns:1fr; justify-items:start; align-items:flex-start; } .seo-screen-placeholder h2 { font-size:17px; overflow-wrap:anywhere; word-break:break-all; line-break:anywhere; } .seo-screen-placeholder .ghost-line, .seo-screen-placeholder .good-line { font-size:13px; overflow-wrap:anywhere; } .panel { width:100%; max-width:100%; padding:18px; border-radius:20px; overflow:hidden; } .panel-head { align-items:flex-start; gap:10px; } .panel-pill { display:none; } .panel * { min-width:0; } .good { display:grid; grid-template-columns:8px minmax(0, 1fr); align-items:start; line-height:1.5; } .good, .crossed { max-width:100%; font-size:13px; overflow-wrap:anywhere; word-break:break-all; } .tp-h2, .tp-h3, .stat p, .tcard2 p, .listcard li, .callout, .faq-q, .faq-a p { overflow-wrap:normal; word-break:auto-phrase; line-break:strict; } .tp-h2 { max-width:350px; font-size:clamp(23px, 6.2vw, 24px); line-height:1.25; } .stat-row, .types, .twocol, .cards4, .flow { margin-top:28px; } .related-row { grid-template-columns:1fr; } .cta-band { padding:34px 20px; } .tp-eyebrow { font-size:11px; letter-spacing:.16em; } }