/* Stortslurf UK — Tutorial Video Guide (route-specific) */
.ss-tutorial-page { background:#fff; color:var(--brand-dark); }
.ss-tutorial-page h1,.ss-tutorial-page h2,.ss-tutorial-page h3 { font-family:var(--font-heading); }
.ss-tutorial-hero { background:linear-gradient(118deg,#123c40 0%,var(--brand-dark) 57%,#286c6b 100%); color:#fff; overflow:hidden; position:relative; }
.ss-tutorial-hero::after { border:1px solid rgba(143,216,206,.22); border-radius:50%; content:''; height:34rem; pointer-events:none; position:absolute; right:-12rem; top:-11rem; width:34rem; }
.ss-tutorial-hero .container { position:relative; z-index:1; }
.ss-tutorial-breadcrumb { align-items:center; color:rgba(255,255,255,.72); display:flex; font-size:.875rem; gap:9px; padding:22px 0 0; }
.ss-tutorial-breadcrumb a { color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:3px; }
.ss-tutorial-breadcrumb a:hover,.ss-tutorial-breadcrumb a:focus-visible { color:#fff; }
.ss-tutorial-hero-grid { align-items:center; display:grid; gap:clamp(34px,6vw,86px); grid-template-columns:minmax(0,1.04fr) minmax(320px,.86fr); padding:62px 0 72px; }
.ss-tutorial-hero-copy { max-width:640px; }
.ss-tutorial-eyebrow { color:#a6e5dc; display:inline-block; font-family:var(--font-heading); font-size:.76rem; font-weight:800; letter-spacing:.14em; line-height:1.2; text-transform:uppercase; }
.ss-tutorial-eyebrow--teal { color:var(--brand-teal-dark); }
.ss-tutorial-hero h1 { color:#fff; font-size:clamp(2.45rem,4.5vw,4.4rem); font-weight:900; letter-spacing:-.04em; line-height:.98; margin:16px 0 20px; max-width:710px; text-transform:uppercase; }
.ss-tutorial-lead { color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.6; max-width:60ch; }
.ss-tutorial-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.ss-tutorial-btn-outline { background:transparent; border:2px solid rgba(255,255,255,.63); color:#fff; }
.ss-tutorial-btn-outline:hover,.ss-tutorial-btn-outline:focus-visible { background:#fff; border-color:#fff; color:var(--brand-dark); }
.ss-tutorial-hero-points { display:grid; gap:9px; list-style:none; margin:28px 0 0; padding:0; }
.ss-tutorial-hero-points li { align-items:center; color:rgba(255,255,255,.86); display:flex; font-size:.94rem; gap:9px; }
.ss-tutorial-hero-points svg { color:#9be2d7; flex:0 0 auto; }
.ss-tutorial-video-card { appearance:none; background:#173a3f; border:0; border-radius:18px; box-shadow:0 23px 55px rgba(0,0,0,.32); color:#fff; cursor:pointer; display:block; overflow:hidden; padding:0; position:relative; text-align:left; width:100%; }
.ss-tutorial-video-card:focus-visible,.ss-tutorial-video-trigger:focus-visible,.ss-tutorial-modal-close:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.ss-tutorial-video-card picture,.ss-tutorial-video-card img { display:block; height:100%; min-height:350px; object-fit:cover; width:100%; }
.ss-tutorial-video-scrim { background:linear-gradient(0deg,rgba(10,32,36,.86) 0%,rgba(12,40,44,.05) 62%); inset:0; position:absolute; transition:background .2s ease; }
.ss-tutorial-video-card:hover .ss-tutorial-video-scrim { background:linear-gradient(0deg,rgba(10,32,36,.92) 0%,rgba(12,40,44,.18) 66%); }
.ss-tutorial-play { align-items:center; background:var(--brand-yellow); border-radius:50%; color:var(--brand-dark); display:flex; height:72px; justify-content:center; left:50%; padding-left:4px; position:absolute; top:45%; transform:translate(-50%,-50%); transition:transform .2s ease,background .2s ease; width:72px; }
.ss-tutorial-video-card:hover .ss-tutorial-play { background:#ffbc37; transform:translate(-50%,-50%) scale(1.08); }
.ss-tutorial-video-label { bottom:24px; display:flex; flex-direction:column; gap:4px; left:26px; position:absolute; }
.ss-tutorial-video-label strong { font-size:1.1rem; line-height:1.2; }
.ss-tutorial-video-label small { color:rgba(255,255,255,.78); font-size:.85rem; }
.ss-tutorial-section { padding:clamp(64px,8vw,112px) 0; }
.ss-tutorial-overview { background:#fff; }
.ss-tutorial-overview-grid { align-items:center; display:grid; gap:clamp(34px,8vw,100px); grid-template-columns:minmax(0,1.12fr) minmax(280px,.72fr); }
.ss-tutorial-overview h2,.ss-tutorial-section-heading h2,.ss-tutorial-safety-copy h2,.ss-tutorial-final-cta h2 { color:var(--brand-dark); font-size:clamp(2rem,3.8vw,3.35rem); font-weight:900; letter-spacing:-.035em; line-height:1; margin:13px 0 16px; text-transform:uppercase; }
.ss-tutorial-overview p,.ss-tutorial-section-heading p,.ss-tutorial-safety-copy p { color:#4b6165; font-size:1.05rem; line-height:1.68; max-width:61ch; }
.ss-tutorial-note { background:#ecf7f6; border-left:4px solid var(--brand-teal); border-radius:0 12px 12px 0; display:flex; gap:15px; padding:23px; }
.ss-tutorial-note>svg { color:var(--brand-teal-dark); flex:0 0 auto; margin-top:1px; }
.ss-tutorial-note strong { font-size:1rem; }
.ss-tutorial-note p { color:#3f565a; font-size:.93rem; line-height:1.55; margin:5px 0 0; }
.ss-tutorial-steps-section { background:var(--brand-gray-light); }
.ss-tutorial-section-heading { margin:0 auto 42px; max-width:720px; text-align:center; }
.ss-tutorial-section-heading p { margin:0 auto; }
.ss-tutorial-steps { display:grid; gap:1px; grid-template-columns:repeat(5,1fr); list-style:none; margin:0; padding:0; }
.ss-tutorial-step { background:#fff; border-top:4px solid transparent; min-height:248px; padding:27px 24px 26px; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.ss-tutorial-step:hover { border-color:var(--brand-yellow); box-shadow:0 10px 23px rgba(15,59,64,.1); transform:translateY(-4px); z-index:1; }
.ss-tutorial-step-number { color:var(--brand-teal); display:block; font-family:var(--font-heading); font-size:1.05rem; font-weight:900; letter-spacing:.04em; margin-bottom:25px; }
.ss-tutorial-step h3 { color:var(--brand-dark); font-size:1.2rem; line-height:1.08; margin:0 0 11px; }
.ss-tutorial-step h3 em { color:var(--brand-teal-dark); display:block; font-family:var(--font-body); font-size:.76rem; font-style:normal; font-weight:700; line-height:1.3; margin-top:7px; text-transform:uppercase; }
.ss-tutorial-step p { color:#52696d; font-size:.9rem; line-height:1.55; margin:0; }
.ss-tutorial-safety-section { background:var(--brand-dark); color:#fff; }
.ss-tutorial-safety-grid { align-items:center; display:grid; gap:clamp(32px,8vw,112px); grid-template-columns:1fr minmax(320px,.75fr); }
.ss-tutorial-safety-copy h2 { color:#fff; }
.ss-tutorial-safety-copy p { color:rgba(255,255,255,.75); }
.ss-tutorial-text-link { color:var(--brand-teal-dark); display:inline-block; font-weight:800; margin-top:23px; text-decoration:underline; text-decoration-color:rgba(61,139,139,.45); text-underline-offset:5px; }
.ss-tutorial-text-link:hover,.ss-tutorial-text-link:focus-visible { color:var(--brand-teal); }
.ss-tutorial-safety-copy .ss-tutorial-text-link { color:#a6e5dc; text-decoration-color:rgba(166,229,220,.4); }
.ss-tutorial-safety-list { display:grid; gap:14px; list-style:none; margin:0; padding:0; }
.ss-tutorial-safety-list li { align-items:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:rgba(255,255,255,.92); display:flex; font-size:1rem; gap:12px; line-height:1.4; padding:18px; }
.ss-tutorial-safety-list svg { color:#8fd8ce; flex:0 0 auto; }
.ss-tutorial-kit-section { background:#fff; }
.ss-tutorial-section-heading--split { align-items:end; display:flex; justify-content:space-between; max-width:none; text-align:left; }
.ss-tutorial-section-heading--split .ss-tutorial-text-link { flex:0 0 auto; margin-bottom:9px; }
.ss-tutorial-kit-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.ss-tutorial-kit-card { border:1px solid #d9e5e5; border-radius:12px; display:flex; flex-direction:column; min-height:250px; padding:27px; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.ss-tutorial-kit-card:hover { border-color:var(--brand-teal); box-shadow:0 12px 30px rgba(24,60,64,.1); transform:translateY(-3px); }
.ss-tutorial-kit-kicker { color:var(--brand-teal-dark); font-family:var(--font-heading); font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ss-tutorial-kit-card h3 { color:var(--brand-dark); font-size:1.4rem; line-height:1.08; margin:16px 0 11px; }
.ss-tutorial-kit-card p { color:#566d70; font-size:.95rem; line-height:1.55; margin:0; }
.ss-tutorial-kit-card a { color:var(--brand-teal-dark); font-weight:800; margin-top:auto; padding-top:23px; text-decoration:underline; text-underline-offset:4px; }
.ss-tutorial-kit-card a:hover,.ss-tutorial-kit-card a:focus-visible { color:var(--brand-teal); }
.ss-tutorial-final-cta { background:#f5a623; color:var(--brand-dark); padding:clamp(55px,7vw,82px) 0; }
.ss-tutorial-final-cta-inner { align-items:center; display:flex; gap:35px; justify-content:space-between; }
.ss-tutorial-final-cta .ss-tutorial-eyebrow { color:#32565a; }
.ss-tutorial-final-cta h2 { margin-bottom:10px; }
.ss-tutorial-final-cta p { font-size:1.04rem; margin:0; }
.ss-tutorial-final-actions { align-items:center; display:flex; flex:0 0 auto; flex-direction:column; gap:13px; }
.ss-tutorial-final-actions .btn { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; min-width:170px; }
.ss-tutorial-final-actions .btn:hover,.ss-tutorial-final-actions .btn:focus-visible { background:#102c2f; border-color:#102c2f; }
.ss-tutorial-cta-link { color:#21494e; font-size:.92rem; font-weight:800; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.ss-tutorial-cta-link:hover,.ss-tutorial-cta-link:focus-visible { color:#102c2f; }
.ss-tutorial-modal { align-items:center; background:rgba(7,24,27,.88); display:flex; inset:0; justify-content:center; padding:24px; position:fixed; z-index:2147483647; }
.ss-tutorial-modal[hidden] { display:none; }
.ss-tutorial-modal-dialog { max-width:1000px; position:relative; width:100%; }
.ss-tutorial-modal-close { align-items:center; background:#fff; border:0; border-radius:50%; color:var(--brand-dark); cursor:pointer; display:flex; height:44px; justify-content:center; position:absolute; right:-15px; top:-15px; width:44px; z-index:2; }
.ss-tutorial-modal-close:hover { background:var(--brand-yellow); }
.ss-tutorial-modal-frame { aspect-ratio:16/9; background:#000; box-shadow:0 22px 65px rgba(0,0,0,.44); overflow:hidden; }
.ss-tutorial-modal-frame iframe { border:0; display:block; height:100%; width:100%; }
@media (max-width:1080px) { .ss-tutorial-steps { grid-template-columns:repeat(3,1fr); } .ss-tutorial-step { min-height:218px; } }
@media (max-width:820px) { .ss-tutorial-hero-grid,.ss-tutorial-overview-grid,.ss-tutorial-safety-grid { grid-template-columns:1fr; } .ss-tutorial-hero-grid { padding:45px 0 56px; } .ss-tutorial-video-card { max-width:590px; } .ss-tutorial-video-card picture,.ss-tutorial-video-card img { min-height:300px; } .ss-tutorial-section-heading--split { align-items:flex-start; flex-direction:column; gap:2px; } .ss-tutorial-section-heading--split .ss-tutorial-text-link { margin-bottom:0; } .ss-tutorial-final-cta-inner { align-items:flex-start; flex-direction:column; } .ss-tutorial-final-actions { align-items:flex-start; } }
@media (max-width:640px) { .ss-tutorial-breadcrumb { padding-top:16px; } .ss-tutorial-hero h1 { font-size:clamp(2.3rem,11vw,3.2rem); } .ss-tutorial-hero-actions { align-items:stretch; flex-direction:column; } .ss-tutorial-hero-actions .btn { min-height:52px; width:100%; } .ss-tutorial-video-card picture,.ss-tutorial-video-card img { min-height:250px; } .ss-tutorial-video-label { bottom:18px; left:19px; } .ss-tutorial-play { height:62px; width:62px; } .ss-tutorial-steps { grid-template-columns:1fr; } .ss-tutorial-step { min-height:0; padding:24px 22px; } .ss-tutorial-step-number { margin-bottom:15px; } .ss-tutorial-kit-grid { grid-template-columns:1fr; } .ss-tutorial-kit-card { min-height:0; } .ss-tutorial-final-cta h2 { font-size:2.2rem; } .ss-tutorial-modal { padding:15px; } .ss-tutorial-modal-close { right:-5px; top:-50px; } }
@media (prefers-reduced-motion:reduce) { .ss-tutorial-video-card,.ss-tutorial-play,.ss-tutorial-step,.ss-tutorial-kit-card { transition:none; } }