@layer base, frame, blocks, pages;
@layer base {
:root {
--red: #eb072a; --red-d: #b8041f; --navy: #060f9d; --navy-d: #040a6b; --sky: #00bee0; --sky-l: #e3f8fd;
--orange: #f78b04; --purple: #9f4cda; --yellow: #ffd200; --paper: #fff9ee; --ink: #12153a; --mute: #4f5478; --line: #dfe3f2;
--r: 18px; --head: "Paytone One", "Arial Rounded MT Bold", sans-serif; --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.04rem/1.6 var(--body); color: var(--ink); background: #fff; overflow-x: hidden; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
.wrap { inline-size: min(1240px, 100% - 32px); margin-inline: auto; }
}
@layer frame {
.strip { margin: 0; background: var(--navy); color: #fff; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
display: flex; gap: .4rem 2rem; justify-content: center; flex-wrap: wrap; padding: .45rem 16px; text-align: center; }
.strip span:first-child { color: var(--yellow); font-weight: 700; }
.bar { background: var(--sky); position: sticky; inset-block-start: 0; z-index: 20; box-shadow: 0 3px 0 rgba(4, 10, 107, .14); }
.bar__in { display: flex; align-items: center; gap: 1rem; padding-block: .55rem; flex-wrap: wrap; }
.bar__logo img { inline-size: 104px; }
.bar__tog { position: absolute; opacity: 0; pointer-events: none; }
.bar__burger { display: none; }
.bar__nav { display: flex; flex-wrap: wrap; gap: .45rem; flex: 1; }
.bar__nav a { text-decoration: none; color: var(--navy); background: #fff; border-radius: 999px; padding: .42rem .95rem; font-weight: 700; font-size: .93rem;
box-shadow: inset 0 -3px 0 var(--t, var(--navy)); }
.bar__nav a:hover, .bar__nav a[aria-current] { background: var(--navy); color: #fff; }
.bar__cta { margin-inline-start: auto; }
.bar__cta .buy { inline-size: 220px; }
@media (max-width: 1080px) {
.bar__burger { display: flex; flex-direction: column; gap: 5px; margin-inline-start: auto; padding: 10px; background: #fff; border-radius: 12px; cursor: pointer; }
.bar__burger i { display: block; inline-size: 24px; block-size: 3px; border-radius: 3px; background: var(--navy); }
.bar__nav { display: none; flex-basis: 100%; order: 5; padding-block: .4rem .7rem; }
.bar__tog:checked ~ .bar__nav { display: flex; }
.bar__tog:focus-visible + .bar__burger { outline: 3px solid var(--yellow); }
.bar__cta { flex-basis: 100%; order: 6; display: flex; justify-content: center; margin: 0 0 .2rem; }
.bar__cta .buy { inline-size: 200px; }
.bar__logo img { inline-size: 84px; }
}
.path ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: 0; margin: 1.1rem 0 1rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.path li + li::before { content: "›"; margin-inline-end: .9rem; color: var(--mute); }
.path a { color: var(--mute); text-decoration: none; }
.path [aria-current] { color: var(--ink); font-weight: 700; }
.foot { background: var(--navy); color: #d9dcff; padding-block: 3.2rem 0; margin-block-start: 0; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.foot__brand img { inline-size: 130px; margin-block-end: 1rem; }
.foot h2 { color: var(--yellow); font-size: 1.15rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.foot a { color: #fff; }
.foot address { font-style: normal; line-height: 1.7; }
.foot__big { font-family: var(--head); font-size: clamp(2.6rem, 9.5vw, 8.4rem); line-height: 1; margin: 2.4rem 0 0; text-align: center; color: var(--sky);
opacity: .9; white-space: nowrap; letter-spacing: -.01em; }
.foot__end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; border-block-start: 1px solid rgba(255, 255, 255, .18); padding-block: 1rem 1.4rem; font-size: .88rem; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } .foot__big { font-size: 9.4vw; } }
}
@layer blocks {
.buy { display: block; border: 0; padding: 0; background: none; inline-size: 260px; max-inline-size: 100%; transition: transform .15s; }
.buy:hover { transform: translateY(-2px); }
.buy:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 99px; }
.buy img { inline-size: 100%; }
.buy--wide { inline-size: 100%; }
.ghost { display: inline-block; border: 3px solid #fff; color: #fff; border-radius: 999px; padding: .55rem 1.3rem; font-weight: 700; text-decoration: none; }
.ghost:hover { background: #fff; color: var(--red); }
.sect { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.sect--tight { padding-block-start: 1.2rem; }
.sect--sky { background: var(--sky); }
.sect--paper { background: var(--paper); }
.lead { max-inline-size: 46rem; margin-block-end: 1.8rem; }
.lead h2 { display: inline-block; background: var(--yellow); color: var(--navy); padding: .3rem .9rem .4rem; border-radius: 12px; position: relative; margin-block-start: 14px; }
.lead h2::before { content: ""; position: absolute; inset-block-start: -12px; inset-inline-start: 18px; inline-size: 64px; block-size: 14px;
background: radial-gradient(circle at 12px 9px, var(--yellow) 9px, transparent 10px) 0 0 / 40px 14px repeat-x; }
.lead p { color: var(--mute); font-size: 1.08rem; }
.lead--light p { color: #fff; }
.split { display: grid; grid-template-columns: 1.08fr 1fr; min-block-size: 520px; }
.split__panel { background: var(--red); display: flex; align-items: center; padding: clamp(2rem, 5vw, 4.5rem); }
.split__text { max-inline-size: 38rem; color: #fff; }
.split h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.split__chips { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.split__chips li { background: rgba(255, 255, 255, .17); border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; font-weight: 700; }
.split__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.split__go .buy { inline-size: 290px; }
.split__pic { position: relative; min-block-size: 360px; }
.split__pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.split--short { min-block-size: 380px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__pic { min-block-size: 0; aspect-ratio: 4 / 3; } }
.ribbon img { inline-size: 100%; }
.shelves { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.shelf { --t: var(--navy); background: var(--t); color: #fff; text-decoration: none; border-radius: var(--r); padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column;
gap: .35rem; position: relative; margin-block-start: 12px; transition: transform .15s; }
.shelf::before, .tile::before { content: ""; position: absolute; inset-block-start: -12px; inset-inline: 14% 14%; block-size: 14px;
background: radial-gradient(circle at 50% 10px, var(--t) 10px, transparent 11px) center 0 / 25% 14px repeat-x; }
.shelf:hover { transform: translateY(-4px); }
.shelf__pic { background: #fff; border-radius: 50%; padding: 10px; inline-size: 78%; margin: 0 auto .6rem; aspect-ratio: 1; overflow: hidden; }
.shelf__pic img { border-radius: 50%; }
.shelf b { font-family: var(--head); font-weight: 400; font-size: 1.25rem; line-height: 1.15; }
.shelf span { font-size: .93rem; opacity: .95; }
.shelf em { font-style: normal; font-weight: 700; margin-block-start: auto; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: .15rem .7rem; align-self: flex-start; }
@media (max-width: 1080px) { .shelves { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .shelves { grid-template-columns: 1fr 1fr; } }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.1rem; }
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; gap: 1.4rem .8rem; } }
@media (max-width: 400px) { .tiles { grid-template-columns: 1fr; } }
.tile { --t: var(--navy); background: #fff; border-radius: var(--r); border: 3px solid var(--t); position: relative; display: flex; flex-direction: column; margin-block-start: 12px; }
.tile[hidden] { display: none; }
.tile__pic { display: block; padding: .8rem; }
.tile__pic img { border-radius: 12px; aspect-ratio: 1; object-fit: contain; inline-size: 100%; }
.tile__off { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; background: var(--red); color: #fff; font-style: normal; font-weight: 700; font-size: .8rem;
border-radius: 999px; padding: .15rem .6rem; z-index: 1; }
.tile__body { padding: 0 .9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.tile__name { font-size: 1.08rem; margin-block-end: .25rem; }
.tile__name a { color: var(--navy); text-decoration: none; }
.tile__use { color: var(--mute); font-size: .9rem; margin-block-end: .4rem; }
.tile .tag { margin-block-start: auto; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.chips span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--sky-l); color: var(--navy); border-radius: 6px; padding: .12rem .45rem; }
.score { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: .9rem; flex-wrap: wrap; }
.score__bar { inline-size: 84px; block-size: 15px; background: linear-gradient(90deg, var(--orange) var(--v), #d6d9e8 var(--v));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 15'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6-4.5 2.6 1-5.1L.2 5.3l5.1-.6z'/%3E%3Cuse href='%23s' x='17'/%3E%3Cuse href='%23s' x='34'/%3E%3Cuse href='%23s' x='51'/%3E%3Cuse href='%23s' x='68'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 15'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6-4.5 2.6 1-5.1L.2 5.3l5.1-.6z'/%3E%3Cuse href='%23s' x='17'/%3E%3Cuse href='%23s' x='34'/%3E%3Cuse href='%23s' x='51'/%3E%3Cuse href='%23s' x='68'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }
.score small { color: var(--mute); }
.tag { margin: 0 0 .7rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tag b { font-family: var(--head); font-weight: 400; font-size: 1.45rem; color: var(--red); }
.tag s { color: var(--mute); }
.off { font-style: normal; background: var(--red); color: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .82rem; font-weight: 700; }
.ages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ages__card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .3rem; }
.ages__card img { border-radius: var(--r); margin-block-end: .5rem; transition: transform .15s; }
.ages__card:hover img { transform: rotate(-1.5deg) scale(1.02); }
.ages__card b { font-family: var(--head); font-weight: 400; font-size: 1.3rem; color: var(--navy); }
.ages__card span { color: var(--mute); }
@media (max-width: 700px) { .ages { grid-template-columns: 1fr; } .ages__card { display: grid; grid-template-columns: 110px 1fr; column-gap: .9rem; }
.ages__card img { grid-row: span 2; margin: 0; } }
.why { background: linear-gradient(135deg, var(--sky), #0099d6); padding-block: clamp(2.6rem, 6vw, 4.4rem); color: #fff; }
.why .lead h2 { background: #fff; }
.why .lead h2::before { background: radial-gradient(circle at 12px 9px, #fff 9px, transparent 10px) 0 0 / 40px 14px repeat-x; }
.why__row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.why__row img { inline-size: 150px; border-radius: 50%; margin: 0 auto 1rem; }
.why__row h3 { color: #fff; font-size: 1.45rem; }
@media (max-width: 760px) { .why__row { grid-template-columns: 1fr; } }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 960px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .notes { grid-template-columns: 1fr; } }
.note { --t: var(--navy); margin: 0; background: #fff; border-radius: var(--r); padding: 1.3rem 1.3rem 1.1rem; border-inline-start: 8px solid var(--t); box-shadow: 0 6px 20px rgba(6, 15, 157, .08); }
.note__stars { color: var(--orange); letter-spacing: .1em; margin-block-end: .35rem; }
.note h3 { font-size: 1.12rem; }
.note blockquote { margin: 0 0 .8rem; }
.note figcaption { font-size: .88rem; color: var(--mute); }
.guide__cols { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 2.4rem; }
.guide__cols h3 { margin-block-start: .6rem; }
.guide__h { margin-block-start: 1.6rem; }
@media (max-width: 760px) { .guide__cols { grid-template-columns: 1fr; } }
.grid { inline-size: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6rem 0; background: #fff; border-radius: var(--r); overflow: hidden; border: 2px solid var(--line); }
.grid th { background: var(--navy); color: #fff; text-align: start; padding: .7rem .9rem; font-size: .9rem; }
.grid td { padding: .7rem .9rem; border-block-start: 1px solid var(--line); vertical-align: top; }
.grid td:first-child { font-weight: 700; color: var(--navy); }
@media (max-width: 700px) { .grid thead { display: none; } .grid tr { display: block; border-block-start: 2px solid var(--line); padding: .5rem 0; }
.grid td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; border: 0; padding: .3rem .9rem; }
.grid td::before { content: attr(data-h); font-weight: 700; color: var(--mute); font-size: .85rem; } }
.checks { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.checks li { padding-inline-start: 2rem; position: relative; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .25rem; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 5px;
background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center / 80% no-repeat; }
.folds { display: grid; gap: .6rem; max-inline-size: 56rem; }
.folds details, .qgroups details { background: #fff; border: 2px solid var(--line); border-radius: 14px; }
.folds summary, .qgroups summary { list-style: none; cursor: pointer; padding: .9rem 3.4rem .9rem 1.1rem; font-weight: 700; position: relative; color: var(--navy); }
.folds summary::-webkit-details-marker, .qgroups summary::-webkit-details-marker { display: none; }
.folds summary::after, .qgroups summary::after { content: ""; position: absolute; inset-inline-end: .8rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 30px; block-size: 30px;
border-radius: 50%; background: var(--sky-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23060f9d' stroke-width='2'/%3E%3C/svg%3E") center / 55% no-repeat;
transition: rotate .2s; }
.folds details[open] summary::after, .qgroups details[open] summary::after { rotate: 180deg; }
.folds details p, .qgroups details p { padding: 0 1.1rem 1rem; margin: 0; }
.reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.read { text-decoration: none; color: var(--ink); background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--line); }
.read img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 15%; inline-size: 100%; }
.read small, .read b, .read span { padding-inline: 1.1rem; }
.read small { margin-block-start: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--red); font-weight: 700; font-size: .78rem; }
.read b { font-family: var(--head); font-weight: 400; font-size: 1.25rem; color: var(--navy); margin-block: .2rem .4rem; line-height: 1.2; }
.read span { color: var(--mute); padding-block-end: 1.2rem; }
@media (max-width: 860px) { .reads { grid-template-columns: 1fr; } }
.closer { background: var(--navy); color: #fff; padding-block: clamp(2.6rem, 6vw, 4rem); }
.closer__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.closer h2 { color: #fff; }
.closer__kick { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.closer .buy { inline-size: 300px; }
.closer__pic { border-radius: var(--r); }
@media (max-width: 760px) { .closer__in { grid-template-columns: 1fr; } }
}
@layer pages {
.shelfhead { --t: var(--navy); display: grid; grid-template-columns: 1.15fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--t); color: #fff; }
.shelfhead__text { padding: clamp(1.6rem, 4vw, 3rem); }
.shelfhead h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.shelfhead__pic { position: relative; min-block-size: 300px; }
.shelfhead__pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 760px) { .shelfhead { grid-template-columns: 1fr; } .shelfhead__pic { min-block-size: 0; aspect-ratio: 16 / 9; } }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; padding-block: .8rem; margin-block-end: 1.4rem; border-block: 2px solid var(--line); }
.tools__set { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.tools__set button { border: 2px solid var(--t, var(--navy)); background: #fff; color: var(--navy); border-radius: 999px; padding: .3rem .85rem; font-weight: 700; font-size: .9rem; }
.tools__set button[aria-pressed="true"] { background: var(--t, var(--navy)); color: #fff; }
.tools__n { margin: 0; font-weight: 700; }
.tools__sort select { font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: .3rem .5rem; background: #fff; }
.set { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); padding-block: .4rem 3rem; }
@media (max-width: 860px) { .set { grid-template-columns: 1fr; } }
.gal__main { border: 3px solid var(--t); border-radius: var(--r); overflow: hidden; background: #fff; }
.gal__main img { inline-size: 100%; aspect-ratio: 1; object-fit: contain; }
.gal__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-block-start: .6rem; }
.gal__row button { border: 2px solid var(--line); border-radius: 10px; padding: 0; background: #fff; overflow: hidden; }
.gal__row button[aria-pressed="true"] { border-color: var(--t); }
.set__shelf a { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .82rem; color: var(--t); text-decoration: none; }
.set h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.set__hook { font-size: 1.15rem; }
.set__note { font-size: .84rem; color: var(--mute); }
.set .buy { max-inline-size: 420px; margin-block-end: 1rem; }
.swatch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.swatch span { font-weight: 700; margin-inline-end: .3rem; }
.swatch a { border: 2px solid var(--line); border-radius: 999px; padding: .2rem .8rem; text-decoration: none; font-weight: 700; }
.swatch a[aria-current] { border-color: var(--t); background: var(--t); color: #fff; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0 1.2rem; }
.facts div { background: var(--paper); border-radius: 12px; padding: .7rem .8rem; }
.facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.facts dd { margin: 0; font-weight: 700; color: var(--navy); }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }
.paper { max-inline-size: 860px; padding-block: .5rem 3.4rem; }
.paper__kick { text-transform: uppercase; letter-spacing: .14em; color: var(--red); font-weight: 700; margin-block-end: .3rem; }
.paper__lede { font-size: 1.18rem; }
.paper__pic { border-radius: var(--r); margin-block: 1rem 1.6rem; inline-size: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.paper h2 { margin-block-start: 1.6rem; }
.about { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.about img { border-radius: var(--r); margin-block-start: 1rem; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }
.tower { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.tower li { --t: var(--red); background: var(--t); color: #fff; border-radius: 10px; padding: .8rem 1rem; position: relative; display: grid; }
.tower li:nth-child(3) { color: var(--navy); }
.tower small { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; opacity: .9; }
.tower b { font-family: var(--head); font-weight: 400; font-size: 1.15rem; }
.tower li:first-child { margin-block-start: 12px; }
.tower li:first-child::before { content: ""; position: absolute; inset-block-start: -12px; inset-inline: 12%; block-size: 14px;
background: radial-gradient(circle at 50% 10px, var(--t) 10px, transparent 11px) center 0 / 25% 14px repeat-x; }
.qgroups { display: grid; gap: 1.6rem; }
.qgroups section { border-block-start: 8px solid var(--t); padding-block-start: .8rem; display: grid; gap: .5rem; }
.road { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.road li { --t: var(--red); background: var(--paper); border-radius: var(--r); padding: 1rem; border-block-start: 6px solid var(--t); }
.road i { font-style: normal; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--t); color: #fff;
font-family: var(--head); margin-block-end: .5rem; }
.road li:nth-child(3) i { color: var(--navy); }
.road b { display: block; color: var(--navy); }
@media (max-width: 760px) { .road { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .road { grid-template-columns: 1fr; } }
.ifthen { display: grid; gap: .7rem; margin: 1.2rem 0; }
.ifthen > div { display: grid; grid-template-columns: 1fr 1.3fr; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); }
.ifthen p { margin: 0; padding: .9rem 1rem; }
.ifthen small { display: block; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .74rem; }
.ifthen__if { background: var(--navy); color: #fff; font-weight: 700; }
.ifthen__if small { color: var(--yellow); }
.ifthen__then small { color: var(--red); }
@media (max-width: 560px) { .ifthen > div { grid-template-columns: 1fr; } }
.card { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--paper); border: 3px dashed var(--sky); border-radius: var(--r); margin: 1.2rem 0 1.4rem; }
.card__msg { padding: 1.4rem; border-inline-end: 2px solid var(--line); }
.card__mail { font-family: var(--head); font-size: clamp(1.1rem, 2.6vw, 1.6rem); word-break: break-all; }
.card__topics { padding-inline-start: 1.1rem; margin: 1rem 0 0; }
.card__addr { padding: 1.4rem; font-style: normal; line-height: 1.8; position: relative; }
.card__stamp { display: block; inline-size: 64px; block-size: 76px; margin: 0 0 .8rem auto; border-radius: 6px;
background: url(/look/mega-bloks-icon.png) center / 80% no-repeat, var(--sky); outline: 3px dotted var(--sky); outline-offset: 3px; }
@media (max-width: 640px) { .card { grid-template-columns: 1fr; } .card__msg { border-inline-end: 0; border-block-end: 2px solid var(--line); } }
.bags { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.bags section { border-radius: var(--r); padding: 1.2rem 1.3rem; background: var(--sky-l); }
.bags section + section { background: #ffe9ec; }
.bags h2 { font-size: 1.3rem; margin-block-start: 0; }
.bags ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .4rem; }
@media (max-width: 640px) { .bags { grid-template-columns: 1fr; } }
.pins { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; counter-reset: pin; }
.pins li { --t: var(--red); background: #fff; border: 2px solid var(--line); border-block-start: 10px solid var(--t); border-radius: 12px; padding: 1rem 1.1rem; counter-increment: pin; }
.pins b { display: block; color: var(--navy); font-family: var(--head); font-weight: 400; font-size: 1.12rem; }
.pins b::before { content: counter(pin) ". "; color: var(--red); }
@media (max-width: 600px) { .pins { grid-template-columns: 1fr; } }
}