@import url('assets/fonts.css');
:root{--max:1160px;--radius:14px;--shadow:0 18px 50px rgba(19,55,76,.14);--ink:#172b3a;--muted:#5f7180;--line:#dce7ed;--red:#cc1f1f;--red-dark:#aa1717;--blue:#036fa3;--blue-soft:#eaf4f8;--surface:#f7fafc}*{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Poppins,Arial,sans-serif;background:#fff;line-height:1.55}a{color:inherit}.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.header-inner{height:78px;display:flex;align-items:center;gap:30px}.brand img{width:147px;height:auto;display:block}.desktop-nav{display:flex;gap:28px;margin-left:auto;font-size:13px;font-weight:700}.desktop-nav a{text-decoration:none}.desktop-nav a:hover,.text-link:hover,.site-footer a:hover{color:var(--blue)}.menu-toggle{display:none}.mobile-nav{display:none}.hero{overflow:hidden;background:linear-gradient(135deg,#f8fbfd,#e7f1f6);padding:78px 0 68px}.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:center}.eyebrow{margin:0 0 14px;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.16em}.hero h1{max-width:690px;margin:0;color:#102534;font-size:clamp(38px,5.2vw,66px);line-height:1.08;letter-spacing:-.045em}.hero-lead{max-width:650px;margin:23px 0 28px;color:var(--muted);font-size:18px;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 20px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:800;transition:.2s ease}.button:hover{transform:translateY(-2px)}.button:focus-visible,.text-link:focus-visible,.site-footer a:focus-visible,summary:focus-visible,.menu-toggle:focus-visible{outline:3px solid #f2a000;outline-offset:3px}.button-primary{background:var(--red);color:#fff;box-shadow:0 10px 22px rgba(204,31,31,.2)}.button-primary:hover{background:var(--red-dark)}.button-outline{border:1px solid var(--blue);color:var(--blue);background:#fff}.text-link{color:var(--blue);font-size:13px;font-weight:800;text-decoration:none}.proof-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;color:#657783;font-size:11px;font-weight:600}.proof-row span .lucide{width:15px;height:15px;color:#16815c;stroke-width:2.5}.hero-visual{position:relative;min-height:430px;display:grid;place-items:center}.glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(3,111,163,.18),rgba(3,111,163,0) 68%)}.product-box{position:relative;z-index:2;width:min(320px,70%);filter:drop-shadow(22px 25px 24px rgba(16,50,69,.25));transform:rotate(5deg)}.floating-note{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);font-size:11px;font-weight:800}.note-one{top:53px;right:0}.note-two{bottom:55px;left:7px}.note-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--red);background:#fff0f0;font-size:17px}.note-icon.blue{color:var(--blue);background:var(--blue-soft)}.trust-strip{border-bottom:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0}.trust-grid div{display:flex;align-items:center;justify-content:center;gap:13px;border-right:1px solid var(--line)}.trust-grid div:last-child{border:0}.trust-grid strong{color:var(--red);font-size:22px}.trust-grid span{color:var(--muted);font-size:12px;font-weight:700}.section{padding:96px 0}.section-tint{background:var(--blue-soft)}.section-intro{max-width:700px;margin-bottom:40px}.section h2{margin:0 0 16px;color:#102534;font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-.035em}.section-intro>p:last-child,.feature-grid>div>p:not(.eyebrow),.cta-panel p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.7}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.benefit-card,.compare-card{padding:29px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 5px 20px rgba(19,55,76,.05)}.icon-tile{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:13px;font-size:23px;font-weight:800}.icon-tile.red{background:#fff0f0;color:var(--red)}.icon-tile.blue{background:#e8f4fa;color:var(--blue)}.icon-tile.green{background:#e8f7f1;color:#16815c}.benefit-card h3,.compare-card h3{margin:0 0 10px;font-size:19px}.benefit-card p,.compare-card li{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:start}.feature-grid>div>p:not(.eyebrow){margin:0 0 27px}.feature-list{list-style:none;padding:0;margin:0;border-top:1px solid #c9dce5}.feature-list li{display:flex;gap:22px;padding:21px 0;border-bottom:1px solid #c9dce5}.feature-list li>span{color:var(--red);font-size:12px;font-weight:900;padding-top:3px}.feature-list strong{font-size:16px}.feature-list p{margin:5px 0 0;color:var(--muted);font-size:13px}.workflow-list{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid #c9dce5}.workflow-list li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid #c9dce5}.workflow-list li>span{flex:0 0 25px;color:var(--red);font-size:12px;font-weight:900;padding-top:3px}.workflow-list strong{font-size:15px}.workflow-list p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.6}.workflow-card{padding-bottom:24px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.workflow-card .window-bar{background:#f8fbfd}.workflow-status{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:28px 25px 18px}.workflow-status .status-dot{grid-row:span 2;width:12px;height:12px;border-radius:50%;background:#16815c;box-shadow:0 0 0 6px #e8f7f1}.workflow-status strong{font-size:16px}.workflow-status small{color:var(--muted);font-size:12px}.workflow-meter{height:9px;margin:0 25px 20px;border-radius:999px;background:#e5eef2;overflow:hidden}.workflow-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#16815c)}.workflow-card>p{margin:0 25px;color:var(--muted);font-size:12px;line-height:1.6}.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}.check-list li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px}.check-list li .lucide{flex:0 0 auto;width:19px;height:19px;margin-top:1px;padding:3px;border-radius:50%;background:#e8f7f1;color:#16815c;stroke-width:3}.playlist-card{border-radius:15px;background:#fff;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}.window-bar{display:flex;align-items:center;gap:7px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.window-bar>span{width:8px;height:8px;border-radius:50%;background:#dd6c6c}.window-bar>span:nth-child(2){background:#e4b45f}.window-bar>span:nth-child(3){background:#62b18a}.window-bar strong{margin-left:9px}.playlist-body{padding:20px}.playlist-row{display:flex;align-items:center;gap:13px;padding:15px 10px;border-bottom:1px solid var(--line)}.playlist-row:last-child{border-bottom:0}.playlist-row.active{background:#f3f8fb;border-radius:9px}.playlist-row .play{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#fff0f0;color:var(--red);font-size:12px}.playlist-row .play .lucide{width:16px;height:16px;stroke-width:2}.playlist-row div{flex:1}.playlist-row strong,.playlist-row small{display:block}.playlist-row strong{font-size:13px}.playlist-row small{margin-top:2px;color:var(--muted);font-size:11px}.playlist-row b{display:inline-flex;color:#16815c}.playlist-row b .lucide{width:17px;height:17px;stroke-width:2.6}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare-card ul{padding-left:20px;display:grid;gap:10px;margin:20px 0}.compare-card.featured{border:2px solid var(--red);position:relative}.badge{display:inline-flex;margin-bottom:17px;padding:5px 9px;border-radius:99px;background:#fff0f0;color:var(--red);font-size:10px;font-weight:900;letter-spacing:.07em}.legal-note{padding-top:0}.notice{padding:24px 28px;border-left:4px solid var(--red);background:#fff8f8;border-radius:0 11px 11px 0}.notice strong{font-size:15px}.notice p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.narrow{max-width:850px}.faq-section{padding-top:28px}.faq-section h2{margin-bottom:27px}.faq-section details{padding:20px 0;border-bottom:1px solid var(--line)}summary{cursor:pointer;color:#102534;font-size:15px;font-weight:800}.faq-section details p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.final-cta{padding-top:55px}.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:48px 54px;border-radius:16px;background:#102534;color:#fff;box-shadow:var(--shadow)}.cta-panel h2{max-width:650px;color:#fff}.cta-panel p:not(.eyebrow){max-width:620px;margin:0;color:#c4d1d8}.site-footer{padding:25px 0;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:12px}.footer-inner{display:flex;justify-content:space-between;gap:20px}.site-footer nav{display:flex;gap:20px}.site-footer a{color:var(--blue);font-weight:700;text-decoration:none}@media(max-width:800px){.container{width:min(var(--max),calc(100% - 28px))}.header-inner{height:68px}.brand img{width:124px}.desktop-nav{display:none}.menu-toggle{display:inline-flex;margin-left:auto;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:700 12px Poppins,Arial,sans-serif}.mobile-nav{position:absolute;top:62px;left:14px;right:14px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.mobile-nav.is-open{display:grid}.mobile-nav a{padding:12px;text-decoration:none;font-size:13px;font-weight:700}.hero{padding:46px 0 30px}.hero-grid,.feature-grid,.audience-grid{grid-template-columns:1fr;gap:18px}.hero h1{font-size:39px}.hero-lead{margin:17px 0 22px;font-size:15px;line-height:1.6}.hero-actions{gap:12px}.button{min-height:48px}.proof-row{gap:8px;margin-top:21px;font-size:10px}.hero-visual{min-height:220px;margin-top:5px}.product-box{width:220px}.glow{width:270px;height:270px}.note-one{top:22px;right:0}.note-two{bottom:20px;left:0}.floating-note{padding:10px 11px;font-size:10px}.trust-grid{grid-template-columns:1fr;gap:14px;padding:18px 0}.trust-grid div{justify-content:flex-start;border:0}.section{padding:70px 0}.benefit-grid,.compare-grid{grid-template-columns:1fr}.feature-grid{gap:35px}.cta-panel{display:block;padding:32px 25px}.cta-panel .button{margin-top:22px}.footer-inner{display:block}.site-footer nav{margin-top:11px}.site-footer nav a{display:inline-block}.section h2{font-size:31px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}

/* Readability pass: shorter line lengths and clearer visual rhythm for long-form LP copy. */
.section-intro > p:last-child,
.hero-lead,
.answer-panel > p,
.feature-grid > div > p:not(.eyebrow),
.two-column > div > p:not(.eyebrow),
.product-grid > div > p:not(.eyebrow),
.decision-grid > div > p:not(.eyebrow),
.audience-grid > div > p:not(.eyebrow),
.visual-copy > p:not(.eyebrow),
.cta-panel p:not(.eyebrow),
.notice p { max-width: 68ch; }
.benefit-card p,
.compare-card p,
.compare-card li,
.feature-list p,
.workflow-list span,
.workflow-list p,
.steps span,
.check-list span,
.decision-list span,
.boundary-list span { max-width: 58ch; }
.section h2 { max-width: 24ch; }
.faq-section details p { max-width: 72ch; }
@media (max-width: 800px) { .section h2 { max-width: none; } }

/* Content update: decision-oriented workflow and criteria comparison. */
.workflow-product-copy { padding: 26px 25px 4px; }
.workflow-product-copy .eyebrow { margin-bottom: 9px; font-size: 10px; }
.workflow-product-copy h3 { margin: 0 0 10px; color: #102534; font-size: 20px; line-height: 1.2; }
.workflow-product-copy p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 5px 20px rgba(19,55,76,.05); }
.comparison-table { width: 100%; min-width: 700px; border-collapse: collapse; color: var(--ink); font-size: 14px; }
.comparison-table th, .comparison-table td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-table thead th { background: #f8fbfd; color: #102534; font-size: 13px; font-weight: 800; }
.comparison-table tbody th { width: 27%; color: #102534; font-weight: 800; }
.comparison-table tbody td { color: var(--muted); }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-product-bridge { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 22px; padding: 25px 28px; border: 1px solid #f1c2c2; border-radius: var(--radius); background: #fff8f8; }
.comparison-product-bridge h3 { margin: 0 0 7px; font-size: 19px; }
.comparison-product-bridge p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
@media (max-width: 800px) {
  .workflow-product-copy { padding: 22px 20px 2px; }
  .comparison-table { min-width: 650px; font-size: 13px; }
  .comparison-table th, .comparison-table td { padding: 14px 16px; }
  .comparison-product-bridge { display: block; padding: 23px 20px; }
  .comparison-product-bridge .button { margin-top: 20px; }
}

/* PC Fresh family transfer: product-specific YouTube page keeps its own copy,
   links and approved artwork while sharing the blue/rose visual language. */
:root {
  --navy: #032d4e;
  --navy-2: #00466d;
  --blue: #075b7d;
  --cyan: #bcecff;
  --accent: #c94f88;
  --accent-dark: #a83d6e;
  --accent-gradient: linear-gradient(135deg, #c94f88 0%, #ee5d7a 100%);
  --green: #2f9b68;
  --ink-strong: #0b2f48;
  --shadow-md: 0 18px 48px rgba(14,46,64,.11);
  --shadow-lg: 0 26px 76px rgba(14,46,64,.16);
  --shadow-cta: 0 12px 28px rgba(201,79,136,.25);
}
html { overflow-x: hidden; }
body { background: #f7fbfd; overflow-x: hidden; }
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(16px); border-bottom-color: rgba(220,231,237,.9); }
.header-inner { min-height: 76px; gap: 24px; }
.brand img { width: 142px; }
.desktop-nav { gap: 21px; font-size: 12px; font-weight: 600; }
.desktop-nav a { position: relative; padding: 28px 0; color: var(--ink); }
.desktop-nav a::after { content: ''; position: absolute; right: 0; bottom: 20px; left: 0; height: 2px; border-radius: 2px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--accent-dark); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { align-items: center; justify-content: center; gap: 7px; border-radius: 999px; }
.menu-toggle svg, .button svg, .text-link svg, .proof-row svg, .floating-note svg, .compare-card svg, .quickcheck svg { width: 16px; height: 16px; stroke-width: 2; }
.button { gap: 10px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button-primary { background: var(--accent-gradient); box-shadow: var(--shadow-cta); }
.button-primary:hover { background: linear-gradient(135deg,#b74478 0%,#dd4e70 100%); box-shadow: 0 14px 32px rgba(168,61,110,.3); }
.button-outline { min-height: 44px; border-color: var(--navy-2); border-radius: 999px; color: var(--navy-2); }
.button-outline:hover { background: var(--navy-2); color: #fff; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .17em; line-height: 1.25; }
.hero { position: relative; padding: 96px 0 86px; color: #fff; background: radial-gradient(circle at 80% 18%,rgba(188,236,255,.2),transparent 28%),radial-gradient(circle at 16% 115%,rgba(0,151,198,.24),transparent 35%),linear-gradient(122deg,var(--navy) 0%,var(--navy-2) 52%,var(--blue) 100%); }
.hero { isolation: isolate; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -12%; bottom: -50%; width: 650px; height: 650px; border: 1px solid rgba(188,236,255,.14); border-radius: 50%; box-shadow: 0 0 0 34px rgba(188,236,255,.025),0 0 0 88px rgba(188,236,255,.02); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; grid-template-columns: minmax(0,.94fr) minmax(440px,1.06fr); gap: 56px; }
.hero .eyebrow { color: var(--cyan); }
.hero h1 { max-width: 670px; color: #fff; font-size: clamp(39px,5.2vw,68px); font-weight: 600; letter-spacing: -.055em; }
.hero-lead { max-width: 620px; color: rgba(246,253,255,.86); font-size: 17px; }
.text-link { color: #fff; }
.text-link:hover { color: var(--cyan); }
.proof-row { gap: 14px 20px; margin-top: 34px; color: rgba(236,250,255,.82); }
.proof-row span { display: inline-flex; align-items: center; gap: 7px; }
.proof-row svg { color: var(--cyan); }
.hero-visual { min-height: 505px; isolation: isolate; }
.hero-visual::before { content: ''; position: absolute; width: 490px; height: 195px; top: 30%; left: 5%; border: 1px solid rgba(188,236,255,.28); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
.hero-visual::after { content: ''; position: absolute; width: 380px; height: 150px; top: 42%; left: 16%; border: 1px solid rgba(238,93,122,.42); border-radius: 50%; transform: rotate(22deg); pointer-events: none; }
.glow { inset: 9% 4% 4% 8%; width: auto; height: auto; background: radial-gradient(circle,rgba(188,236,255,.29),rgba(188,236,255,.08) 38%,transparent 70%); filter: blur(4px); }
.hero-orbit { display: none; }
.hero-product-frame { position: absolute; z-index: 3; left: 12%; bottom: 4%; width: 255px; height: 430px; display: grid; place-items: end center; }
.product-box { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(18px 28px 20px rgba(0,20,39,.34)); transform: none; }
.floating-note { z-index: 4; padding: 10px 13px; border: 1px solid rgba(224,250,255,.34); border-radius: 999px; background: rgba(3,45,78,.68); box-shadow: 0 12px 28px rgba(0,20,39,.24); color: #fff; backdrop-filter: blur(10px); }
.note-icon, .note-icon.blue { width: 26px; height: 26px; border-radius: 50%; background: transparent; color: var(--cyan); }
.note-two .note-icon { color: #ee5d7a; }
.trust-strip { border-bottom-color: var(--line); }
.trust-grid { padding: 23px 0; }
.trust-grid strong { color: var(--accent); font-size: 23px; font-weight: 600; }
.trust-grid span { color: var(--muted); font-size: 12px; font-weight: 600; }
.section { padding: 104px 0; }
.section-tint { background: #eef7fa; }
.section h2 { color: var(--ink-strong); font-size: clamp(30px,4vw,47px); font-weight: 600; letter-spacing: -.05em; }
.section-intro > p:last-child, .feature-grid > div > p:not(.eyebrow), .cta-panel p:not(.eyebrow), .notice p { color: var(--muted); font-size: 16px; }
.direct-answer { padding: 84px 0; background: #fff; }
.answer-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: center; padding-left: 34px; border-left: 2px solid var(--accent); }
.answer-panel > div:last-child { padding: 30px 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); }
.quickcheck h3 { margin: 0 0 19px; color: var(--ink-strong); font-size: 19px; }
.quickcheck ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; list-style: none; padding: 0; margin: 0; }
.quickcheck li { display: flex; gap: 10px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.quickcheck svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }
.benefit-card { min-height: 305px; padding: 30px; border-radius: 22px; box-shadow: 0 8px 24px rgba(20,50,68,.05); }
.benefit-card:hover { transform: translateY(-5px); border-color: #bddae6; box-shadow: var(--shadow-md); }
.card-number { display: block; margin-bottom: 24px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.icon-tile { width: 52px; height: 52px; margin-bottom: 23px; border-radius: 16px; }
.icon-tile svg { width: 24px; height: 24px; stroke-width: 1.8; }
.icon-tile.red { background: #fbeaf2; color: var(--accent-dark); }
.icon-tile.blue { background: #eaf8fc; color: var(--navy-2); }
.icon-tile.green { background: #eaf7ef; color: #267f59; }
.feature-grid { gap: 78px; }
.workflow-card, .playlist-card { border-radius: 22px; box-shadow: var(--shadow-lg); }
.comparison-section { background: #fff; }
.compare-grid { gap: 16px; }
.compare-card { min-height: 260px; padding: 32px; border-radius: 22px; box-shadow: 0 8px 24px rgba(20,50,68,.05); }
.compare-card.featured { border: 2px solid rgba(201,79,136,.55); }
.compare-card h3 { color: var(--ink-strong); font-size: 25px; font-weight: 600; letter-spacing: -.05em; }
.compare-card ul { display: grid; gap: 12px; list-style: none; padding: 0; margin: 20px 0 24px; }
.compare-card li { display: flex; gap: 10px; align-items: flex-start; }
.compare-card li svg { flex: 0 0 auto; margin-top: 4px; color: var(--accent); }
.compare-card:first-child li svg { color: var(--muted); }
.compare-card-label { display: block; margin-bottom: 10px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.badge { background: #fbeaf2; color: var(--accent-dark); }

/* Workflow comparison: same decision-friendly visual language as the PC Fresh reference. */
#vergleich {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(122deg, #032d4e 0%, #005b82 52%, #075b7d 100%) !important;
}
#vergleich:before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(122deg, #032d4e 0%, #005b82 52%, #075b7d 100%);
  opacity: 1;
  pointer-events: none;
}
#vergleich:after { display: none; }
#vergleich > .container { position: relative; z-index: 2; }
#vergleich .section-intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
#vergleich .section-intro h2 {
  max-width: none;
  margin-inline: auto;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,22,48,.28);
}
#vergleich .section-intro > p:last-child {
  color: rgba(247,253,255,.92);
  text-shadow: 0 1px 8px rgba(0,22,48,.3);
}
#vergleich .eyebrow { color: #bcecff; }
#vergleich .compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
#vergleich .compare-card {
  min-height: 286px;
  padding: 30px 32px 28px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(20,42,57,.12);
}
#vergleich .compare-card--browser {
  border: 1px solid rgba(211,222,228,.95);
  background: rgba(247,249,250,.94);
}
#vergleich .compare-card--software {
  border: 2px solid rgba(47,155,104,.82);
  background: linear-gradient(145deg,#f5fcf8 0%,#eaf7ef 100%);
  box-shadow: 0 20px 44px rgba(0,75,108,.14), 0 0 0 4px rgba(47,155,104,.08);
}
#vergleich .compare-card-label {
  margin-bottom: 12px;
  color: #77858d;
  line-height: 1.3;
}
#vergleich .compare-card--software .compare-card-label { color: #267f59; }
#vergleich .compare-card h3 {
  margin: 0 0 22px;
  color: #24343d;
  font-size: clamp(22px,2.2vw,29px);
  font-weight: 600;
}
#vergleich .compare-card--software h3 { color: #003b62; }
#vergleich .compare-card ul { display: grid; gap: 14px; padding: 0; margin: 0; }
#vergleich .compare-card li {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  color: #53636c;
  font-size: 14px;
  line-height: 1.55;
}
#vergleich .compare-card--software li { color: #294e5e; font-weight: 600; }
#vergleich .compare-card li svg {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #a8b6bd;
  stroke-width: 2.2;
}
#vergleich .compare-card--software li svg {
  color: #2f9b68;
  filter: drop-shadow(0 2px 5px rgba(47,155,104,.22));
}
#vergleich .compare-vs {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-inline: -9px;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: #032d4e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(0,32,57,.28), 0 0 0 1px rgba(243,107,33,.48);
  z-index: 2;
}
#vergleich .compare-example {
  max-width: 980px;
  margin: 28px auto 0;
  padding: 27px 30px;
  border-top: 1px solid rgba(188,236,255,.28);
  border-bottom: 1px solid rgba(188,236,255,.28);
  background: rgba(3,45,78,.62);
  box-shadow: 0 14px 34px rgba(0,22,48,.16), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
#vergleich .compare-example .eyebrow { color: var(--red); }
#vergleich .compare-example h3 { margin: 0 0 10px; color: #fff; }
#vergleich .compare-example p:not(.eyebrow) {
  max-width: 70ch;
  margin: 0 0 20px;
  color: rgba(247,253,255,.92);
}
#vergleich .compare-example .button-outline {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px rgba(244,16,43,.22);
}
#vergleich .compare-example .button-outline:hover { border-color: var(--red-dark); background: var(--red-dark); color: #fff; }
@media (max-width: 800px) {
  #vergleich .compare-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  #vergleich .compare-card { min-height: 0; }
  #vergleich .compare-vs { width: 48px; height: 48px; margin: -9px auto; border-width: 3px; font-size: 11px; }
  #vergleich .compare-example { padding: 24px 22px; }
  #vergleich .compare-example .button-outline { width: 100%; }
}
@media (max-width: 520px) {
  #vergleich .compare-card { padding: 26px 22px 24px; border-radius: 18px; }
  #vergleich .compare-card h3 { margin-bottom: 19px; font-size: 24px; }
  #vergleich .compare-card ul { gap: 12px; }
}
.notice { padding: 35px 42px; border: 1px solid rgba(188,236,255,.7); border-left: 4px solid var(--cyan); border-radius: 22px; background: linear-gradient(135deg,var(--navy),var(--navy-2)); box-shadow: var(--shadow-md); color: #fff; }
.notice strong { color: #fff; }
.notice p { color: rgba(242,252,255,.83); }
.faq-section { background: #f7fbfd; }
.faq-section details { display: inline-block; vertical-align: top; width: calc(50% - 10px); margin: 0 16px 16px 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(20,50,68,.05); overflow: hidden; }
.faq-section details:nth-of-type(even) { margin-right: 0; }
.faq-section summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 70px; padding: 18px 21px; list-style: none; }
.faq-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); stroke-width: 2; }
.faq-section details[open] { border-color: rgba(201,79,136,.45); }
.faq-section details[open] .faq-icon { transform: rotate(45deg); }
.faq-section details p { margin: 0; padding: 0 21px 21px; }
.cta-panel { padding: 50px 56px; border-radius: 22px; background: radial-gradient(circle at 88% 20%,rgba(188,236,255,.18),transparent 28%),linear-gradient(120deg,var(--navy),var(--navy-2)); box-shadow: var(--shadow-lg); }
.cta-panel h2 { color: #fff; }
.cta-panel p:not(.eyebrow) { color: rgba(239,251,255,.78); }
.site-footer { padding: 52px 0 18px; border-top: 0; background: linear-gradient(135deg,#061b2d 0%,#072d48 58%,#08415d 100%); color: #b5c1c7; }
.footer-inner { display: grid; grid-template-columns: minmax(250px,1.45fr) repeat(2,minmax(160px,.7fr)); gap: 42px; }
.footer-brand img { width: 124px; display: block; margin-bottom: 18px; }
.footer-logo-frame { display: block; width: 124px; padding: 8px 10px; margin-bottom: 18px; border-radius: 10px; background: #fff; }
.footer-logo-frame img { width: 100%; margin: 0; }
.footer-brand p { max-width: 34ch; margin: 0; line-height: 1.7; }
.footer-column { display: grid; align-content: start; gap: 6px; }
.footer-column h2 { margin: 0 0 8px; color: #f4f8fa; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.footer-column a, .footer-column span { min-height: 28px; color: #b5c1c7; font-size: 13px; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 16px; border-top: 1px solid rgba(180,235,255,.18); color: #9ab6c4; font-size: 11px; }

/* Once-only, calm reveals. The no-JS state stays fully visible. */
.reveal-ready [data-reveal="pending"] { opacity: 0; transform: translateY(22px); }
.reveal-ready [data-reveal="pending"].is-revealed { opacity: 1; transform: translateY(0); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay,0ms); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal-ready [data-reveal="pending"] { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .container { width: min(var(--max), calc(100% - 32px)); }
  .header-inner { min-height: 68px; }
  .brand img { width: 104px; }
  .mobile-nav { top: 62px; left: 16px; right: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); }
  .mobile-nav a { padding: 13px; color: var(--ink-strong); font-size: 12px; font-weight: 700; }
  .hero { padding: 70px 0 58px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: clamp(38px,10vw,52px); }
  .hero-lead { font-size: 15px; }
  .hero-visual { min-height: 330px; }
  .hero-visual::before { width: 270px; height: 270px; top: 10%; left: 10%; }
  .hero-visual::after { width: 210px; height: 120px; top: 34%; left: 18%; }
  .hero-product-frame { left: 50%; bottom: 0; width: 210px; height: 300px; transform: translateX(-50%); }
  .note-one { top: 14px; right: 0; }
  .note-two { bottom: 14px; left: 0; }
  .trust-grid { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .trust-grid div { justify-content: flex-start; border: 0; }
  .section { padding: 80px 0; }
  .answer-panel { grid-template-columns: 1fr; gap: 40px; padding-left: 22px; }
  .answer-panel > div:last-child { padding: 24px; }
  .quickcheck ul { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .audience-grid { grid-template-columns: 1fr; gap: 40px; }
  .compare-grid { grid-template-columns: 1fr; }
  .faq-section details { display: block; width: 100%; margin: 0 0 12px; }
  .cta-panel { display: block; padding: 34px 26px; }
  .cta-panel .button { margin-top: 22px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 6px; }
}
@media (max-width: 360px) {
  .container { width: min(var(--max), calc(100% - 24px)); }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: 35px; }
  .hero-actions .button { width: 100%; padding-inline: 13px; }
  .hero-actions .text-link { margin-inline: auto; }
  .hero-visual { min-height: 285px; }
  .hero-product-frame { width: 175px; height: 250px; }
  .floating-note { padding: 8px 9px; font-size: 9px; }
  .floating-note .note-icon { width: 22px; height: 22px; }
  .section h2 { font-size: 30px; }
  .benefit-card, .compare-card { padding: 24px; }
  .cta-panel { padding: 28px 20px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* Final YouTube brand accent: requested primary red. */
:root {
  --red: #F4102B;
  --red-dark: #C70D23;
  --accent: #F4102B;
  --accent-dark: #C70D23;
  --accent-end: #F4102B;
  --accent-gradient: linear-gradient(135deg, #F4102B 0%, #F4102B 100%);
  --shadow-cta: 0 12px 28px rgba(244, 16, 43, .25);
}
.button-primary { background: #F4102B; box-shadow: 0 12px 28px rgba(244, 16, 43, .25); }
.button-primary:hover { background: #C70D23; box-shadow: 0 14px 32px rgba(199, 13, 35, .3); }
.button:focus-visible, .text-link:focus-visible, .site-footer a:focus-visible, summary:focus-visible, .menu-toggle:focus-visible { outline-color: #F4102B; }
.desktop-nav a::after { background: #F4102B; }
.hero-visual::after { border-color: rgba(244, 16, 43, .42); }
.note-two .note-icon { color: #F4102B; }
.icon-tile.red, .badge, .playlist-row .play { background: #FFE9ED; }
.icon-tile.red, .playlist-row .play, .badge { color: #C70D23; }
.compare-card.featured { border-color: rgba(244, 16, 43, .55); }
.faq-section details[open] { border-color: rgba(244, 16, 43, .45); }

/* User-supplied transparent hero artwork replaces the former product box. */
.hero-product-frame.hero-art-frame {
  left: -18px;
  bottom: -2px;
  width: min(620px, 112%);
  height: auto;
  display: block;
}
.hero-product-frame.hero-art-frame .hero-art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(10px 22px 20px rgba(0,20,39,.3));
}
@media (max-width: 800px) {
  .hero-product-frame.hero-art-frame {
    left: 50%;
    bottom: -2px;
    width: min(430px, 112%);
    transform: translateX(-50%);
  }
}
@media (max-width: 360px) {
  .hero-product-frame.hero-art-frame { width: min(350px, 112%); }
}
/* Shared PC Fresh footer treatment across the landing-page set. */
.site-footer {
  padding: 52px 0 18px;
  border-top: 0;
  background: linear-gradient(135deg, #061b2d 0%, #072d48 58%, #08415d 100%);
  color: #b5c1c7;
  font-size: 13px;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(250px, 1.45fr) repeat(3, minmax(120px, .7fr));
  gap: 42px;
}
.footer-brand img { width: 124px; display: block; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; margin: 0; color: #b5c1c7; line-height: 1.7; }
.footer-column { display: grid; align-content: start; gap: 6px; }
.footer-column h2 { margin: 0 0 8px; color: #f4f8fa; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.footer-column a, .footer-column span { min-height: 28px; color: #b5c1c7; font-size: 13px; font-weight: 500; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 16px; border-top: 1px solid rgba(180,235,255,.18); color: #9ab6c4; font-size: 11px; }
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 30px; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: grid; gap: 6px; }
}