/* Desain diturunkan dari situs HUT ke-16 Rene Turos Group (reneturos.id/16tahun). */
@font-face{font-family:'RTG Display';src:url('assets/fonts/poppins-black.woff') format('woff');font-weight:900;font-display:swap}
@font-face{font-family:'RTG Sans';src:url('assets/fonts/plus-jakarta-sans-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'RTG Sans';src:url('assets/fonts/plus-jakarta-sans-bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'RTG Sans';src:url('assets/fonts/plus-jakarta-sans-italic.woff') format('woff');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'RTG Sans';src:url('assets/fonts/plus-jakarta-sans-bold-italic.woff') format('woff');font-style:italic;font-weight:700;font-display:swap}

:root{
  --navy:#142f69;--orange:#fa7420;--green:#087e55;--cream:#fcf6ec;
  --ink:#192d49;--muted:#606b79;--line:#142f692b;
  --display:'RTG Display',Arial,sans-serif;--body:'RTG Sans',Arial,sans-serif;
  color-scheme:light;
}

/* Dasar */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);background-color:#fff;background-image:radial-gradient(circle at 1px 1px,#c7a87714 .6px,transparent .9px),radial-gradient(circle at 2px 3px,#d5b98d0d .45px,transparent .8px);background-size:9px 9px,17px 17px;font:15px/1.7 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin-top:0}
h2{font-size:clamp(30px,3.25vw,44px);line-height:1.2;letter-spacing:-1.8px;font-weight:800}
h3{line-height:1.3}
:focus-visible{outline:3px solid var(--green);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:20px;background:var(--navy);color:#fff;padding:10px 20px;z-index:100}
.skip-link:focus{top:12px}
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-icon .solid{fill:currentColor;stroke:none}

/* Bilah atas */
.topbar{max-width:1280px;min-height:100px;padding:18px 48px;display:flex;justify-content:space-between;align-items:center;gap:26px;margin:auto;border-bottom:1px solid #142f691c}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{width:140px;height:54px;object-fit:contain}
.topbar nav{display:flex;gap:30px;font-size:13px;font-weight:600}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--green)}
.nav-cta{display:flex;gap:12px;align-items:center;font-weight:700;font-size:13px;border:1px solid var(--navy);border-radius:5px;padding:8px 15px;white-space:nowrap}
.nav-cta:hover{background:var(--navy);color:#fff}
.nav-cta .ui-icon{width:16px;height:16px}

/* Tombol dan label */
.eyebrow{font-size:14px;font-weight:700;letter-spacing:1px;line-height:1.65;color:var(--green);margin-bottom:22px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:46px;padding:11px 20px;border:1px solid var(--navy);border-radius:5px;font-size:14px;font-weight:700;white-space:nowrap;transition:transform .2s,background .2s}
.primary{background:var(--navy);color:#fff;box-shadow:3px 3px 0 #142f6924}
.primary:hover{background:#24487f;transform:translateY(-2px)}
.secondary{color:var(--navy)}
.secondary:hover{background:#edf1f6}
.primary .ui-icon,.secondary .ui-icon{width:18px;height:18px}
.text-link{font-size:13px;font-weight:700;display:inline-flex;gap:16px;align-items:center}
.text-link:hover{color:var(--green)}
.text-link .ui-icon{width:17px;height:17px}
.section-wrap{max-width:1184px;padding:80px 0;margin:auto}

/* Hero */
.hero{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;padding:62px 48px 70px;gap:40px;min-height:656px;align-items:center;overflow:hidden}
.hero h1{margin:0 0 26px;color:var(--navy);line-height:.96;letter-spacing:-4px;font-weight:700}
.headline-number{display:block;font-size:clamp(88px,10.5vw,140px);transform:rotate(-2deg);transform-origin:left bottom;margin-bottom:5px}
.headline-orange{display:block;color:var(--orange);font-size:clamp(42px,4.55vw,61px);letter-spacing:-2.5px;white-space:nowrap}
.headline-small{display:block;font:700 clamp(17px,1.75vw,23px)/1.4 var(--body);letter-spacing:-.6px;margin-top:16px;text-wrap:balance}
.hero-description{max-width:470px;color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:26px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px}
.mobile-br{display:none}

/* Kolase hero */
.hero-art{position:relative;height:500px;margin-bottom:46px;isolation:isolate}
.art-halo{position:absolute;inset:28px -12px 0;background:radial-gradient(circle,#dfb48248 1.5px,transparent 1.8px);background-size:9px 9px;border-radius:50%;transform:rotate(-12deg);z-index:-1}
.art-paper{position:absolute;inset:90px 70px 30px 10px;background:var(--orange);transform:rotate(-6deg);clip-path:polygon(2% 0,97% 1%,100% 99%,0 96%);padding:46px 30px 30px;color:var(--cream)}
.art-paper>span{display:block;font:900 20px/1 var(--display);letter-spacing:2px}
.art-paper>strong{display:block;font-size:26px;line-height:1.2;letter-spacing:-1px;margin-top:8px}
.manuscript{position:absolute;left:9%;bottom:-6px;height:42%;width:auto;aspect-ratio:4/5;background:#fff;border:1px solid #142f6926;box-shadow:6px 8px 0 #142f6920;transform:rotate(4deg);padding:7% 8%;z-index:2}
.manuscript small{display:block;font-size:9px;font-weight:800;letter-spacing:2px;color:var(--orange)}
.manuscript b{display:block;font-size:14px;line-height:1.25;color:var(--navy);margin:6px 0 10px;letter-spacing:-.3px}
.manuscript i{display:block;height:46%;background:repeating-linear-gradient(#142f6924 0 2px,transparent 2px 11px)}
.manuscript em{position:absolute;right:-14%;bottom:12%;font:900 13px/1 var(--display);font-style:normal;letter-spacing:1px;color:var(--green);border:2.5px solid var(--green);padding:7px 10px 6px;transform:rotate(-14deg);background:#ffffffd9}
/* Foto dipotong tepat di tepi bawah kertas oranye: pembungkus punya posisi dan kemiringan yang sama
   dengan .art-paper, dan clip-path hanya memotong di garis tepi bawahnya (atas dan samping tetap bebas). */
.writer-clip{position:absolute;inset:90px 70px 30px 10px;transform:rotate(-6deg);clip-path:polygon(-100% -200%,200% -200%,200% 102%,-100% 93%);z-index:3;pointer-events:none}
.writer{position:absolute;right:-13%;bottom:-14%;width:66%;max-width:none;transform:rotate(6deg);transform-origin:50% 100%;filter:drop-shadow(5px 6px 0 #142f6915)}
/* Desktop: pulpen "menulis" di lembar naskah, HP: di pojok kanan atas; keduanya dengan garis tulisan. */
.art-pen{position:absolute;left:31%;bottom:15%;color:var(--green);font-size:84px;line-height:1;z-index:4}
.art-pen .ui-icon{display:block;stroke-width:1.5}
.yuk-sticker{position:absolute;left:-4px;top:0;z-index:4;width:132px;height:132px;border-radius:50%;background:var(--green);color:#fff;border:6px solid var(--cream);outline:1px dashed var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);text-align:center;box-shadow:4px 6px 0 #142f6916;line-height:1}
.yuk-sticker{animation:yuk-wiggle 3.2s ease-in-out infinite;transform-origin:50% 55%}
.hero-art:hover .yuk-sticker{animation-duration:1.1s}
@keyframes yuk-wiggle{
  0%,100%{transform:rotate(-12deg) translateY(0) scale(1)}
  20%{transform:rotate(-4deg) translateY(-6px) scale(1.04)}
  40%{transform:rotate(-15deg) translateY(0) scale(1)}
  55%{transform:rotate(-8deg) translateY(-3px) scale(1.02)}
  70%{transform:rotate(-12deg) translateY(0) scale(1)}
}
.yuk-sticker strong{font:900 34px/1 var(--display);letter-spacing:-1px}
.yuk-sticker span{font-size:14px;font-weight:800;letter-spacing:1px;margin-top:4px}
/* Keterangan di bawah boks oranye, tepat di bawah foto; miring mengikuti boks. */
.art-caption{position:absolute;top:calc(100% - 26px);left:70%;margin:0;font-size:13px;font-weight:700;letter-spacing:.5px;line-height:1.5;text-align:center;white-space:nowrap;transform:translateX(-50%) rotate(-6deg);transform-origin:50% 0;z-index:5}
.caption-line{display:block}

/* Strip logo penerbit */
.publisher-strip{display:block;padding:20px 0;white-space:nowrap;background:var(--cream);border-block:1px solid #efe3cf;overflow:hidden}
.publisher-track{display:flex;width:max-content;animation:strip-scroll 40s linear infinite}
.publisher-group{display:flex;flex:0 0 auto;align-items:center;justify-content:space-around;gap:44px;min-width:100vw;padding-inline:22px}
.publisher-group{--k:40px}
.publisher-group>img{flex-shrink:0}
.publisher-group>.ui-icon{width:15px;height:15px;color:var(--green)}
.publisher-strip:hover .publisher-track,.publisher-strip:focus-within .publisher-track{animation-play-state:paused}
@keyframes strip-scroll{to{transform:translateX(-50%)}}

/* Logo penerbit: tinggi = --k × 1/√(rasio lebar:tinggi), jadi luas tampak tiap logo kira-kira sama. */
.logo{display:block;height:calc(var(--k,40px) * var(--f,1));width:auto;max-width:100%}
.logo-milestone{--f:0.513}
.logo-rene-islam{--f:0.739}
.logo-renebook{--f:0.54}
.logo-renekids{--f:0.926}
.logo-reneluv{--f:0.823}
.logo-turos-pustaka{--f:0.626}
.logo-wali-pustaka{--f:0.803}

/* Tentang BPS */
.about{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.about h2{margin-bottom:24px}
.marker{color:var(--green)}
.about-copy>p:not(.eyebrow){font-size:15px;color:var(--muted);line-height:1.9}
.about-copy strong{color:var(--navy)}
.note{display:flex;gap:18px;border-top:1px dashed #142f6945;padding-top:24px;margin-top:26px}
.note>span{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;font-size:27px;background:var(--orange);color:#fff;transform:rotate(-6deg)}
.note p{font-size:14px;line-height:1.8;margin:0;color:var(--muted)}
.note a{color:var(--green);font-weight:700;text-decoration:underline}

/* Mockup BPS di seksi Tentang */
.bps-card{position:relative;background:#fff;border:9px solid #fff;outline:1px solid #142f691f;box-shadow:5px 7px 0 #142f691a;transform:rotate(-2deg);padding:26px 26px 44px}
.bps-bar{display:flex;align-items:center;gap:7px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #142f691c;font-size:12px;font-weight:700;color:var(--navy)}
.bps-bar i{width:10px;height:10px;border-radius:50%;background:#dcdedb}
.bps-bar i:first-child{background:var(--orange)}
.bps-bar span{margin-left:10px}
.bps-label{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--muted);margin:0 0 10px}
.bps-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.bps-pick>span{display:grid;place-items:center;height:62px;border:1px solid #142f6926;border-radius:5px;padding:8px}
.bps-pick>span.is-on{border:2px solid var(--green);background:#e8f1e9}
.bps-pick .ui-icon{font-size:22px;color:var(--muted)}
.bps-pick{--k:32px}
.bps-file{display:flex;align-items:center;gap:14px;border:1px dashed #142f6950;border-radius:5px;padding:14px 16px}
.bps-file .ui-icon{font-size:30px;color:var(--orange)}
.bps-file b{display:block;font-size:13px;color:var(--navy)}
.bps-file small{display:block;font-size:11px;color:var(--muted)}
.bps-file em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:var(--green);white-space:nowrap}
.photo-label{position:absolute;bottom:-14px;left:15px;color:#fff;background:var(--green);transform:rotate(2deg);padding:8px 13px;font-size:11px;font-weight:800;letter-spacing:1.2px}

/* Alur */
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px}
.section-heading .eyebrow{margin-bottom:12px}
.section-heading h2{margin-bottom:0}
.section-heading>p{max-width:300px;color:var(--muted);font-size:14px;line-height:1.9;margin:0}
.section-heading strong{color:var(--navy)}
.how{padding-top:32px}
.steps{padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0 32px;border-block:1px solid #142f6933}
.steps>li{padding:28px 24px 28px 0;margin-right:24px;border-right:1px solid var(--line)}
.steps>li:last-child{border:0;margin-right:0;padding-right:0}
.step-label{display:flex;align-items:center;justify-content:space-between;font:900 36px/1.2 var(--display);color:var(--orange);margin-bottom:25px}
.step-label .ui-icon{font-size:24px;color:var(--green)}
.steps h3{font-size:18px;font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.steps p{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:0}
.steps strong{color:var(--navy)}

/* Lini penerbit */
.imprints{padding-top:20px}
.imprint-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.imprint{display:flex;flex-direction:column;background:#fff;border:1px solid #142f6926;border-radius:6px;box-shadow:5px 5px 0 #142f690d;padding:24px 22px;transition:transform .2s,box-shadow .2s}
.imprint:hover{transform:translateY(-3px);box-shadow:6px 8px 0 #142f6914}
.imprint-logo{height:58px;display:flex;align-items:center;margin-bottom:18px}
.imprint-logo{--k:58px}
.imprint h3{font-size:19px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.imprint>p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.imprint .text-link{color:var(--green);margin-top:auto;padding-top:14px;border-top:1px dashed #142f6940}
.imprint-help{background:var(--navy);color:var(--cream);border-color:var(--navy);background-image:radial-gradient(#ffffff0a 1.5px,transparent 1.5px);background-size:12px 12px}
.imprint-help .big{font:900 46px/1 var(--display);color:var(--orange);margin-bottom:16px}
.imprint-help h3{color:#fff}
.imprint-help>p{color:#ccd6eb}
.imprint-help .text-link{color:#ffad68;margin-top:auto}

/* Ketentuan (blok navy) */
.terms-area{background:var(--navy);color:var(--cream);background-image:radial-gradient(#ffffff07 1.5px,transparent 1.5px);background-size:12px 12px}
.terms-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:90px}
.terms-intro .eyebrow{color:#ffb778}
.terms-intro h2{margin-bottom:26px}
.terms-intro h2>span{color:#ffad68}
.sticker{background:var(--orange);color:var(--navy);padding:15px 25px 18px;display:inline-flex;flex-direction:column;transform:rotate(-3deg);box-shadow:5px 5px 0 #091e4e;margin-bottom:25px}
.sticker small{font-weight:800;font-size:11px;letter-spacing:2px}
.sticker strong{font:900 42px/1.4 var(--display);letter-spacing:-2px}
.sticker>span{font-size:13px;font-weight:700}
.terms-intro>p{font-size:14px;line-height:1.9;max-width:360px;color:#ccd6eb}
.terms-list{border-top:1px solid #ffffff40}
.terms-list details{border-bottom:1px solid #ffffff40;padding:19px 0}
.terms-list summary{cursor:pointer;display:flex;align-items:center;gap:15px;font-size:16px;font-weight:700;list-style:none}
.terms-list summary::-webkit-details-marker{display:none}
.terms-list summary>span{font-size:12px;color:#ffad68}
.terms-list summary>i{margin-left:auto;font-style:normal}
.terms-list summary>i:before{content:'+';font-weight:400;font-size:23px}
.terms-list details[open] summary>i:before{content:'−'}
.terms-list details>p{margin:12px 30px 0;font-size:14px;line-height:1.9;color:#ccd6eb}
.terms-list strong{color:#fff}
.terms-more{display:inline-flex;margin-top:28px;color:#ffad68}

/* Penutup dan footer */
.closing{text-align:center;padding-block:74px 66px}
.closing-badge{display:inline-grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--orange);color:#fff;font-size:44px;transform:rotate(-8deg);box-shadow:5px 5px 0 #142f691f;margin-bottom:28px}
.closing h2{font-size:clamp(36px,4vw,52px);margin-bottom:20px}
.closing h2>span{color:var(--green)}
.closing>p:not(.eyebrow){color:var(--muted);font-size:15px}
.closing .primary{margin-top:8px}
.closing-contact{display:block;color:var(--muted);font-size:13px;margin-top:24px}
.closing-contact a{color:var(--green);font-weight:700}
.closing-contact a:hover{text-decoration:underline}
.footer{max-width:1184px;margin:auto;border-top:1px solid var(--line);padding:27px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}
.footer .brand img{width:142px;height:53px}
.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-weight:700;color:var(--ink)}
.footer nav a:hover{color:var(--green)}

/* Halaman ketentuan */
.page-hero{max-width:1184px;margin:auto;padding:64px 0 40px}
.page-hero h1{font-size:clamp(40px,5vw,66px);line-height:1.05;letter-spacing:-2.5px;color:var(--navy);margin:0 0 22px}
.page-hero h1>span{color:var(--orange)}
.page-hero>p:not(.eyebrow){max-width:620px;color:var(--muted);font-size:15px;line-height:1.85}
.page-hero a:not(.chip){color:var(--green);font-weight:700;text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #142f6940;border-radius:30px;padding:8px 16px;font-size:13px;font-weight:700;background:#fff}
.chip:hover{border-color:var(--green);color:var(--green)}
.rule{display:grid;grid-template-columns:320px 1fr;gap:60px;padding:56px 0;border-top:1px solid var(--line);max-width:1184px;margin:auto}
.rule-side{position:sticky;top:28px;align-self:start}
.rule-side{--k:64px}
.rule-side .logo{margin-bottom:20px}
.rule-side h2{font-size:30px;letter-spacing:-1px;margin-bottom:14px}
.rule-side p{font-size:14px;color:var(--muted);line-height:1.85}
.rule-side .text-link{color:var(--green)}
.rule-body{display:grid;gap:22px}
.rule-card{background:#fff;border:1px solid #142f6926;border-radius:6px;box-shadow:5px 5px 0 #142f690d;padding:28px 30px}
.rule-card h3{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;margin-bottom:16px}
.rule-card h3 .num{background:var(--orange);color:var(--navy);width:34px;height:34px;display:grid;place-items:center;font-size:13px;transform:rotate(-4deg);flex-shrink:0}
.rule-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rule-card li{position:relative;padding-left:28px;font-size:14px;line-height:1.75}
.rule-card li .ui-icon{position:absolute;left:0;top:4px;color:var(--green);font-size:17px}
.rule-card li.plus .ui-icon{color:var(--orange)}
.note-band{background:var(--navy);color:var(--cream);background-image:radial-gradient(#ffffff07 1.5px,transparent 1.5px);background-size:12px 12px}
.note-band .section-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding-block:56px}
.note-band p{margin:0;font-size:15px;line-height:1.85;color:#ccd6eb}
.note-band p strong{color:#fff}
.note-band .eyebrow{color:#ffb778;margin-bottom:6px}
.note-band .primary{background:var(--orange);border-color:var(--orange);color:var(--navy);box-shadow:4px 4px 0 #091e4e}

/* Responsif */
@media(min-width:1500px){.hero{padding-block:86px;min-height:740px}}
@media(max-width:1240px){
  .imprint-grid{grid-template-columns:repeat(3,1fr)}
  .imprint-help{grid-column:span 2}
  .section-wrap,.footer,.page-hero,.rule{margin-inline:48px}
  .about{gap:50px}.terms-layout{gap:60px}.hero{gap:24px}
  .headline-orange{font-size:4.5vw}
}
@media(max-width:960px){
  .topbar{padding-inline:28px}.topbar nav{gap:18px;font-size:12px}.brand img{width:124px}
  .hero{padding:50px 28px;gap:20px}.hero-art{height:450px}
  .hero h1{letter-spacing:-3px}
  .art-paper,.writer-clip{inset:70px 30px 40px 0}
  .art-paper{padding:26px 22px}.art-paper>strong{font-size:22px}.art-paper>span{font-size:17px}
  .yuk-sticker{width:112px;height:112px}.yuk-sticker strong{font-size:28px}
  .art-pen{font-size:70px}
  .art-caption{font-size:12px;left:74%;top:calc(100% - 34px)}
  .section-wrap,.footer,.page-hero,.rule{margin-inline:28px}
  .section-wrap{padding-block:60px}
  .about{gap:35px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps>li{padding:25px;margin:0}
  .steps>li:nth-child(even){border-right:0}
  .steps>li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .imprint-grid{grid-template-columns:repeat(2,1fr)}
  .imprint-help{grid-column:auto}
  .imprint>p{font-size:14px}
  .terms-layout{gap:40px}
  .rule{grid-template-columns:1fr;gap:26px}.rule-side{position:static}
  .note-band .section-wrap{grid-template-columns:1fr;gap:20px}
  .note-band .primary{justify-self:start}
}
@media(max-width:680px){
  .topbar{min-height:80px;padding:14px 21px;gap:15px}
  .brand img{width:114px;height:41px}
  .topbar nav{display:none}
  .nav-cta{font-size:12px;padding:6px 11px;gap:8px;min-height:36px;border-radius:4px}
  .nav-cta .ui-icon{width:14px;height:14px}
  .eyebrow{font-size:13px;letter-spacing:.6px;line-height:1.7;margin-bottom:18px}
  h2{font-size:31px;letter-spacing:-1.2px}
  .hero{grid-template-columns:1fr;padding:38px 23px 45px;gap:0;min-height:0}
  /* HP: label + judul, lalu kolase, lalu deskripsi dan tombol. */
  .hero-copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero-description{order:4}
  .hero-actions{order:5}
  .hero h1{margin-bottom:30px;letter-spacing:-3px}
  .headline-number{font-size:108px}
  .headline-orange{font-size:clamp(36px,11vw,47px)}
  .headline-small{font-size:20px;letter-spacing:-.5px;margin-top:13px}
  .hero-description,.about-copy>p:not(.eyebrow),.note p,.section-heading>p,.steps p,.imprint>p,.terms-intro>p,.terms-list details>p,.closing>p:not(.eyebrow),.page-hero>p:not(.eyebrow),.rule-side p,.rule-card li,.note-band p{font-size:clamp(15px,4.1vw,16px);line-height:1.75}
  .hero-actions{gap:16px}
  .mobile-line{display:block}
  .hero-actions .primary{width:100%}
  .hero-actions .text-link{width:100%;justify-content:center;gap:10px;padding:4px 0}
  .hero-art{order:3;height:auto;aspect-ratio:100/118;width:100%;max-width:425px;justify-self:center;margin-bottom:64px}
  .art-paper,.writer-clip{inset:14% 8% 5% 0}
  .art-paper{padding:clamp(38px,11vw,50px) 18px 18px}
  .art-paper>strong{font-size:clamp(17px,5vw,21px)}.desktop-br{display:none}.mobile-br{display:inline}.art-paper>span{font-size:clamp(14px,4.4vw,17px)}
  .manuscript{left:5%;bottom:-2%;height:36%;padding:5% 6%}
  .manuscript small{font-size:8px}
  .manuscript b{font-size:11px;margin:4px 0 6px}
  .manuscript em{font-size:10px;padding:5px 7px 4px;right:-20%}
  .writer{width:80%;right:-6%;bottom:-15%}
  .art-pen{font-size:clamp(54px,16vw,72px);top:8%;right:2%;left:auto;bottom:auto;z-index:1}
  .yuk-sticker{top:0;width:clamp(84px,25vw,108px);height:clamp(84px,25vw,108px);border-width:5px}
  .yuk-sticker strong{font-size:clamp(22px,6.4vw,28px)}
  .yuk-sticker span{font-size:12px}
  .art-caption{font-size:11px;letter-spacing:.3px;left:70%;top:calc(100% - 4%)}
  .publisher-strip{padding:18px 0}
  .publisher-group{gap:28px;padding-inline:14px}
  .publisher-group{--k:32px}
  .publisher-group>.ui-icon{width:13px;height:13px}
  .section-wrap,.footer,.page-hero,.rule{margin-inline:23px}
  .section-wrap{padding-block:49px}
  .about{grid-template-columns:1fr;gap:44px}
  .bps-card{order:2;margin-inline:5px;padding:18px 16px 38px;border-width:7px}
  .bps-pick{gap:8px;--k:27px}.bps-pick>span{height:52px}
  .section-heading{display:block}
  .section-heading>p{max-width:100%;margin-top:20px}
  .steps{grid-template-columns:1fr;margin-top:25px}
  .steps>li,.steps>li:last-child,.steps>li:nth-child(-n+2){border-right:0;padding:28px 0;display:grid;grid-template-columns:49px 1fr;column-gap:17px;border-bottom:1px solid var(--line)}
  .steps>li:last-child{border-bottom:0}
  .step-label{grid-row:1/4;display:block;font-size:30px;margin:0}
  .step-label .ui-icon{display:none}
  .steps h3{font-size:19px}
  .how>.primary,.closing .primary{width:100%}
  .imprint-grid{grid-template-columns:1fr;margin-top:28px}
  .terms-layout{grid-template-columns:1fr;gap:23px}
  .sticker strong{font-size:37px}
  .terms-list summary{font-size:16px;line-height:1.5}
  .terms-list details{padding-block:22px}
  .terms-list details>p{margin:16px 0 0 26px}
  .closing h2{font-size:33px;letter-spacing:-1.3px}
  .footer{display:grid;grid-template-columns:1fr;justify-items:start;gap:14px}
  .footer nav{justify-content:flex-start}
  .page-hero{padding-top:44px}
  .page-hero h1{letter-spacing:-1.5px}
  .rule{padding:44px 0}
  .rule-card{padding:22px 20px}
}
@media(max-width:370px){
  .headline-number{font-size:92px}
  .headline-small{font-size:18px}
  .primary,.secondary{gap:16px;padding-inline:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important}
  .publisher-strip{white-space:normal}
  .publisher-track{width:100%;animation:none}
  .publisher-group{width:100%;min-width:0;flex-wrap:wrap;justify-content:center;gap:14px 24px;padding-inline:20px}
  .publisher-group+.publisher-group{display:none}
  .yuk-sticker{animation:none}
}