@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&display=swap');
/* Additions: look switcher, comparison table, logo and language fields */
.looks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 clamp(18px, 2.4vw, 30px); font-family: var(--display); font-weight: 600; font-size: .95rem; }
.looks span { margin-right: 6px; color: #E7DCE4; }
.looks button { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--paper); background: transparent; border: 1.5px solid rgba(250, 250, 246, .35); border-radius: 999px; padding: 7px 13px 7px 8px; cursor: pointer; }
.looks button i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
.looks button[aria-pressed=true] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.looks button:hover { border-color: var(--paper); }

.cmp-wrap { overflow-x: auto; margin-top: 40px; }
.cmp { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 1rem; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1.5px solid var(--rule); }
.cmp thead th { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; border-bottom: 3px solid var(--ink); }
.cmp tbody th { font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--soft); width: 17%; }
.cmp .us { background: var(--fig); color: var(--paper); font-weight: 600; }
.cmp thead .us { border-radius: 6px 6px 0 0; border-bottom-color: var(--wheat); }
.cmp tbody tr:last-child .us { border-radius: 0 0 6px 6px; border-bottom: 0; }
.cmp-note { font-size: .9rem; color: var(--soft); margin: 14px 0 0; max-width: 46rem; }

select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1420' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; padding-right: 34px; }
select:focus { outline: 3px solid var(--wheat); outline-offset: 1px; border-color: var(--ink); }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-row input[type=file] { font: inherit; font-size: .92rem; max-width: 100%; }
.result-head .cta-row { gap: 10px; }
.result-head .btn { padding: 13px 18px; font-size: .95rem; }

/* ---------- look: bright and clean ---------- */
:root { --stone: #FFFFFF; --paper: #F4F6FB; --ink: #0F172A; --fig: #1E3A8A; --fig-deep: #172554; --wheat: #F59E0B; --olive: #2563EB; --soft: #475569; --rule: rgba(15, 23, 42, .12);
  --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --serif: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; }
body { font-size: 1.05rem; line-height: 1.62; }
h1, h2, h3 { letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; }
h3 { letter-spacing: -.015em; }
.mark img { width: 30px; height: 30px; border-radius: 7px; }
.mark b { color: #2563EB; font-weight: inherit; }
.btn { border-radius: 12px; background: #2563EB; border-color: #2563EB; color: #fff; box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .7); }
.btn:hover { background: #1D4ED8; border-color: #1D4ED8; }
.btn.ghost { background: #fff; color: var(--ink); border-color: #CBD5E1; box-shadow: none; }
.btn.ghost:hover { background: #F8FAFC; border-color: #94A3B8; }
.btn.gold { background: #FBBF24; border-color: #FBBF24; color: #0F172A; box-shadow: none; }
.btn.small { border-radius: 10px; }
.on-fig .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.linkbtn { color: #2563EB; }

.hero { text-align: center; padding-top: clamp(36px, 6vw, 80px); }
.hero h1 { margin: 0 auto; max-width: 15ch; font-size: clamp(2.4rem, 6.2vw, 5rem); line-height: 1.03; letter-spacing: -.04em; }
.hero-foot { display: block; }
.hero-foot p { max-width: 38rem; margin: 22px auto 26px; color: var(--soft); }
.hero .cta-row { justify-content: center; }
.band .lede { color: var(--soft); }

.table { background: linear-gradient(160deg, #1E3A8A, #312E81); border-radius: 28px; margin: 0 var(--gutter); }
.frame { border-radius: 14px; background: rgba(255, 255, 255, .08); }
.frame canvas { border-radius: 6px; }
.frame .note { border-radius: 6px 6px 0 0; }
.sheet { border-radius: 12px; transform: none; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.sheet i { color: #2563EB; }
.epigraph { color: #FCD34D; }
.epigraph cite { color: #C7D2FE; }
.looks { justify-content: center; }
.looks span { color: #C7D2FE; }
.baskets .cap::before { color: #FCD34D; }

.day h3, .steps li { border-top-color: #E2E8F0; }
.steps li::before { color: #2563EB; font-size: 3.4rem; }
.week canvas, .slides-row canvas { border-radius: 12px; box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .5); }
.reasons dt { font-size: 1.3rem; }
.cmp .us { background: #1E3A8A; }
.cmp thead .us { border-radius: 12px 12px 0 0; border-bottom-color: #FCD34D; }
.cmp tbody tr:last-child .us { border-radius: 0 0 12px 12px; }
.cmp thead th { border-bottom-color: #E2E8F0; }
.price-card { border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .5); }
.faq summary::after { color: #2563EB; }
.foot { border-top-color: #E2E8F0; }

input[type=text], input[type=email], textarea, select { border-radius: 10px; border-color: #CBD5E1; }
input:focus, textarea:focus, select:focus, :focus-visible { outline-color: #93C5FD; }
.panel { border-radius: 20px; border: 1px solid #E2E8F0; }
.swatch span { border-color: #CBD5E1; }
.swatch input:checked + span { border-color: #2563EB; box-shadow: inset 0 0 0 1.5px #2563EB; }
.empty { border-radius: 20px; border-color: #CBD5E1; background: #F8FAFC; }
.tabs { border-bottom-color: #E2E8F0; }
.tabs button { border-radius: 10px 10px 0 0; }
.tabs button[aria-selected=true] { background: #2563EB; }
.g canvas, .post canvas { border-radius: 12px; }
.copybox, .doc { border-radius: 14px; border: 1px solid #E2E8F0; }
.note-bar { border-radius: 10px; border-left: 0; background: #FEF3C7; }
.paywall { border-radius: 20px; background: linear-gradient(160deg, #1E3A8A, #312E81); }
.legal h1, .legal h2 { letter-spacing: -.02em; }
@media (max-width: 620px) { .table { border-radius: 20px; margin: 0 8px; } }
.studio > * { min-width: 0; }
.logo-row input[type=file] { min-width: 0; width: 100%; }
/* sections that set their own top and bottom padding still keep the side gutters */
.wrap.nav, .wrap.hero, .wrap.band, .wrap.foot { padding-left: var(--gutter); padding-right: var(--gutter); }