@font-face { font-family:'Plan Bebas'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/bebas-neue-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Plan Knewave'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/knewave-latin-400.woff2') format('woff2'); }

body[data-page='subscriptions'] { --container:1120px; --plan-cutout:polygon(0 0,100% 0,100% 32%,35% 32%,74% 100%,34% 100%); background:#0c0e12; }
body[data-page='subscriptions'] .site-header { border:0; background:#0c0e12f5; }
body[data-page='subscriptions'] .site-header:empty { min-height:76px; }
body[data-page='subscriptions'] .header-inner { min-height:76px; gap:28px; }
body[data-page='subscriptions'] .site-nav { gap:24px; }
body[data-page='subscriptions'] .site-nav a { padding-block:24px; }
.subscription-page { padding-bottom:110px; overflow-x:clip; }
.subscription-page h1,.subscription-page h2 { text-wrap:initial; }
.plan-eyebrow { display:block; color:#9cc5ce; font:700 10px/1.4 var(--body); letter-spacing:.14em; }
.plan-button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-height:46px; padding:11px 23px; border:1px solid #a5f3fc; border-radius:999px; background-color:#61dbea; background-image:linear-gradient(180deg,#ffffff40,#ffffff00); color:#09262c; font:700 12px/1 var(--body); box-shadow:inset 0 1px 0 #e4fdff80,0 0 18px #4ddcf226; transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s; }
.plan-button:hover { background-color:#a5f3fc; box-shadow:inset 0 1px 0 #fff9,0 0 24px #4ddcf24d; transform:translateY(-2px); }
.plan-button>span { font-size:20px; line-height:1; }

.plan-hero { position:relative; isolation:isolate; height:660px; overflow:hidden; border-radius:6px; background:#0e1116; }
.plan-hero::before { content:''; position:absolute; inset:0 0 0 43%; background:radial-gradient(ellipse at 60% 44%,#319eaf20,transparent 70%); pointer-events:none; }
.plan-hero__copy { position:relative; z-index:3; width:53%; padding:78px 0 0 40px; }
.plan-hero h1 { margin-top:22px; font:400 112px/.81 'Plan Bebas',var(--display); letter-spacing:-.025em; }
.plan-hero h1 em { display:inline-block; margin-top:8px; color:#80effb; font:400 59px/.95 'Plan Knewave',var(--display); letter-spacing:-.045em; transform:rotate(-6deg); transform-origin:left center; text-shadow:0 0 18px #4ddcf238; white-space:nowrap; }
.plan-hero__copy>p { max-width:375px; margin-top:24px; color:#b9c7cc; font-size:13px; line-height:1.75; }
.plan-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:27px; }
.plan-hero__actions .plan-button { min-width:190px; }
.plan-hero__price { color:#f0f8f9; font-size:20px; font-weight:600; letter-spacing:-.04em; white-space:nowrap; }
.plan-hero__copy>small { display:block; margin-top:11px; color:#9bb3bc; font-size:10px; }
.plan-hero__scene { position:absolute; z-index:1; inset:0 0 0 45%; }
.plan-hero__shape { position:absolute; top:104px; left:38px; width:690px; height:425px; transform:rotate(13deg); filter:drop-shadow(0 0 30px #4edbed3d); }
.plan-hero__shape::before { content:''; display:block; width:100%; height:100%; border-radius:53px; clip-path:var(--plan-cutout); background:linear-gradient(145deg,#b2f8ff,#63dcea 43%,#2e8eab); }
.plan-hero__scene>img { position:absolute; z-index:1; width:785px; max-width:none; left:-46px; bottom:-19px; filter:saturate(.65) drop-shadow(-16px 12px 25px #0008); }
.plan-hero__scene::after { content:''; position:absolute; z-index:2; inset:78% 0 0; background:linear-gradient(transparent,#0e1116); pointer-events:none; }
.plan-hero__scene-label { position:absolute; z-index:3; right:21px; bottom:76px; color:#d2e4e8; font:700 9px var(--body); letter-spacing:.14em; }
.plan-hero__rail { position:absolute; z-index:5; right:0; bottom:0; left:0; display:flex; align-items:center; gap:22px; min-height:58px; padding:0 40px; border-top:1px solid #ffffff1e; background:#0e1116dc; color:#c3d0d4; font:600 10px var(--body); letter-spacing:.07em; }
.plan-hero__rail>span:first-child { margin-right:auto; color:#93a9b1; font-size:9px; letter-spacing:.13em; }
.plan-hero__rail b,.plan-hero__plus { color:#61dbea; }
.plan-hero__rail-end { margin-left:20px; color:#8ca4ad; font-size:9px; }

.plan-included { padding-top:100px; }
.plan-section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:35px; }
.plan-section-heading h2 { margin-top:17px; font:400 78px/.88 'Plan Bebas',var(--display); letter-spacing:-.018em; }
.plan-section-heading h2 span { color:#61dbea; }
.plan-section-heading>p { max-width:360px; margin-bottom:4px; color:#aebcc3; font-size:14px; line-height:1.75; }
.plan-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.plan-resource { min-width:0; overflow:hidden; border:1px solid #2a353e; border-radius:8px; background:#161b22; transition:border-color .25s,box-shadow .25s,transform .25s; }
.plan-resource:hover { border-color:#5ca8b6; box-shadow:0 18px 38px #0007,0 0 24px #4ddcf21b; transform:translateY(-3px); }
.plan-resource__visual { position:relative; isolation:isolate; display:block; height:260px; overflow:hidden; background:#14212a; }
.plan-resource__visual::before { content:''; position:absolute; z-index:2; inset:0; background:linear-gradient(0deg,#111b22dd,transparent 44%); pointer-events:none; }
.plan-resource__visual>img { width:100%; height:100%; object-fit:cover; }
.plan-resource--garage .plan-resource__visual>img { object-position:52% center; filter:saturate(.84) brightness(.83); }
.plan-resource__visual>span:last-child { position:absolute; z-index:3; left:20px; bottom:16px; color:#e7f6f8; font:700 10px var(--body); letter-spacing:.13em; }
.plan-resource--notify .plan-resource__visual { background:radial-gradient(ellipse at 76% 45%,#4ea7b53b,transparent 58%),#14212a; }
.plan-resource__shape { position:absolute; z-index:0; top:18px; right:-48px; width:360px; height:230px; clip-path:polygon(0 35%,100% 0,100% 70%,15% 100%); transform:rotate(-8deg); background:linear-gradient(145deg,#a4f2f9,#4dbdd0 53%,#216580); }
.plan-resource--notify .plan-resource__visual>img { position:absolute; z-index:1; width:208px; max-width:none; height:auto; right:42px; bottom:-142px; object-fit:contain; filter:saturate(.78) drop-shadow(-10px 10px 17px #0009); }
.plan-resource--notify .plan-resource__visual::after { content:'STAY IN THE LOOP.'; position:absolute; z-index:2; top:56px; left:24px; max-width:230px; color:#f0f8f9; font:400 55px/.86 'Plan Bebas',var(--display); text-shadow:0 5px 14px #09141aca; }
.plan-resource__body { display:flex; flex-direction:column; align-items:start; min-height:208px; padding:24px; }
.plan-resource__label { color:#8fced7; font:700 9px var(--body); letter-spacing:.13em; }
.plan-resource h3 { margin-top:8px; font:400 42px/.9 'Plan Bebas',var(--display); text-transform:uppercase; }
.plan-resource h3>span { color:#61dbea; }
.plan-resource__body>p { max-width:450px; margin-top:11px; color:#adbac1; font-size:12px; line-height:1.7; }
.plan-resource__body>a { display:inline-flex; align-items:center; gap:10px; min-height:38px; margin-top:auto; padding-top:12px; color:#bcebf0; font-size:11px; font-weight:700; }
.plan-resource__body>a:hover { color:#effcff; }
.plan-resource__body>a>span { font-size:18px; }

.plan-offer { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; min-height:420px; margin-top:100px; overflow:hidden; border:1px solid #2a343d; border-radius:8px; background:#161b22; }
.plan-offer::before,.plan-offer::after { content:''; position:absolute; z-index:1; top:13px; width:160px; height:3px; border-radius:50%; background:#a3f3ff; box-shadow:0 0 14px #68e7ff99,0 0 38px 9px #4dc9e02b; pointer-events:none; }
.plan-offer::before { left:-35px; transform:rotate(12deg); }
.plan-offer::after { right:-35px; transform:rotate(-12deg); }
.plan-offer__copy,.plan-offer__purchase { position:relative; z-index:2; padding:54px; }
.plan-offer__copy h2 { margin-top:27px; font:400 83px/.87 'Plan Bebas',var(--display); }
.plan-offer__copy h2>span { color:#61dbea; }
.plan-offer__copy>p { max-width:400px; margin-top:18px; color:#b1bec5; font-size:13px; line-height:1.7; }
.plan-offer__copy>a { display:inline-flex; align-items:center; gap:12px; min-height:38px; margin-top:24px; color:#c9edf1; font-size:11px; font-weight:700; }
.plan-offer__copy>a:hover { color:#fff; }
.plan-offer__copy>a>span { font-size:18px; }
.plan-offer__purchase { display:flex; flex-direction:column; align-items:start; justify-content:center; border-left:1px solid #2b3941; background:#1a242b; }
.plan-offer__purchase>img { width:48px; height:54px; object-fit:contain; margin-bottom:22px; }
.plan-offer__purchase>strong { display:block; margin-top:14px; color:#edf9fb; font-size:43px; font-weight:500; letter-spacing:-.06em; line-height:1.1; }
.plan-offer__purchase>p { max-width:365px; margin-top:12px; color:#b5c5cc; font-size:12px; line-height:1.7; }
.plan-offer__purchase>.plan-button { min-width:250px; margin-top:26px; }

.plan-faq { display:grid; grid-template-columns:300px minmax(0,1fr); gap:80px; padding-top:105px; }
.plan-faq__intro h2 { margin-top:16px; font:400 72px/.88 'Plan Bebas',var(--display); }
.plan-faq__intro h2>span { color:#61dbea; }
.plan-faq__intro>p { max-width:250px; margin-top:20px; color:#aebdc4; font-size:13px; line-height:1.7; }
.plan-faq__intro>a { display:inline-flex; align-items:center; gap:10px; min-height:42px; margin-top:17px; color:#bfebf0; font-size:11px; font-weight:700; }
.plan-faq__intro>a:hover { color:#fff; }
.plan-faq__intro>a>span { font-size:18px; }
.plan-faq .faq-list { display:grid; align-content:start; gap:8px; margin:0; border:0; }
.plan-faq .faq-item { border:1px solid #27333b; border-radius:6px; background:#151b22; }
.plan-faq .faq-item summary { min-height:68px; padding:16px 20px; font-size:13px; }
.plan-faq .faq-item summary::before { content:'?'; display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; margin-right:13px; border-radius:50%; background:#273d46; color:#9beaf3; font-size:11px; font-weight:700; }
.plan-faq .faq-item summary>span { margin-left:auto; }
.plan-faq .faq-item p { margin:0; padding:0 21px 20px 53px; color:#b5c3c9; font-size:12px; line-height:1.7; }
.plan-faq .faq-item[open]:not(.is-closing) { border-color:#4d8690; box-shadow:inset 2px 0 #61dbea,0 0 18px #4ddcf214; }

@media(max-width:1100px) {
  .plan-hero h1 { font-size:99px; }
  .plan-hero h1 em { font-size:53px; }
  .plan-hero__scene>img { width:710px; left:-58px; }
  .plan-hero__shape { width:600px; }
  .plan-offer__copy,.plan-offer__purchase { padding:43px; }
  .plan-offer__copy h2 { font-size:73px; }
}
@media(max-width:900px) {
  .plan-hero { height:595px; }
  .plan-hero__copy { width:57%; padding:65px 0 0 30px; }
  .plan-hero h1 { font-size:82px; }
  .plan-hero h1 em { font-size:44px; }
  .plan-hero__scene { left:44%; }
  .plan-hero__scene>img { width:590px; left:-58px; bottom:-8px; }
  .plan-hero__shape { top:110px; left:5px; width:520px; height:330px; }
  .plan-hero__rail { padding-inline:30px; }
  .plan-hero__rail-end { display:none; }
  .plan-included { padding-top:75px; }
  .plan-section-heading h2 { font-size:66px; }
  .plan-resource__visual { height:220px; }
  .plan-offer { margin-top:75px; }
  .plan-offer__copy,.plan-offer__purchase { padding:32px; }
  .plan-offer__copy h2 { font-size:62px; }
  .plan-offer__purchase>strong { font-size:35px; }
  .plan-faq { gap:38px; padding-top:78px; }
}
@media(max-width:650px) {
  .subscription-page { padding-bottom:75px; }
  .plan-hero { height:835px; }
  .plan-hero__copy { width:100%; padding:35px 24px 0; }
  .plan-hero h1 { margin-top:18px; font-size:82px; }
  .plan-hero h1 em { font-size:43px; }
  .plan-hero__copy>p { max-width:310px; margin-top:15px; font-size:12px; }
  .plan-hero__actions { gap:12px 18px; margin-top:18px; }
  .plan-hero__price { font-size:18px; }
  .plan-hero__scene { inset:410px 0 55px; }
  .plan-hero__shape { top:105px; left:35px; width:450px; height:285px; }
  .plan-hero__scene>img { width:630px; left:50%; bottom:-55px; transform:translateX(-50%); }
  .plan-hero__scene-label { right:15px; bottom:16px; font-size:8px; }
  .plan-hero__rail { gap:12px; justify-content:center; min-height:54px; padding-inline:18px; }
  .plan-hero__rail>span:first-child { display:none; }
  .plan-included { padding-top:64px; }
  .plan-section-heading { display:block; margin-bottom:24px; }
  .plan-section-heading h2 { font-size:65px; }
  .plan-section-heading>p { margin-top:15px; font-size:12px; }
  .plan-resource-grid { grid-template-columns:1fr; gap:14px; }
  .plan-resource__visual { height:235px; }
  .plan-resource__body { min-height:210px; padding:22px; }
  .plan-offer { display:block; margin-top:66px; }
  .plan-offer__copy,.plan-offer__purchase { padding:32px 24px; }
  .plan-offer__copy h2 { font-size:67px; }
  .plan-offer__purchase { border-top:1px solid #2b3941; border-left:0; }
  .plan-offer__purchase>img { display:none; }
  .plan-offer__purchase>strong { font-size:38px; }
  .plan-offer__purchase>.plan-button { width:100%; }
  .plan-faq { grid-template-columns:1fr; gap:27px; padding-top:70px; }
  .plan-faq__intro h2 { font-size:65px; }
}
@media(max-width:370px) {
  .plan-hero { height:865px; }
  .plan-hero h1 { font-size:72px; }
  .plan-hero h1 em { font-size:38px; }
  .plan-hero__scene { top:440px; }
  .plan-hero__scene>img { width:575px; }
  .plan-hero__shape { left:12px; width:390px; }
  .plan-section-heading h2 { font-size:58px; }
  .plan-resource--notify .plan-resource__visual::after { font-size:48px; }
  .plan-offer__copy h2 { font-size:58px; }
}
@media(prefers-reduced-motion:reduce) {
  .plan-button,.plan-resource { transition:none; }
  .plan-button:hover,.plan-resource:hover { transform:none; }
}
