/* Offer pages: Satunity's original dark/violet/cyan palette, scoped completely. */
.pkg-page { --pkg-accent: #bca5ff; background: #101116; padding-bottom: 5rem; overflow: clip; }
.pkg-page [hidden] { display: none !important; }
.pkg-page [id] { scroll-margin-top: 6.5rem; }
.pkg-page .section { padding-inline: var(--pad); }
.pkg-page button, .pkg-page input, .pkg-page select, .pkg-page textarea { font: inherit; }
.pkg-page button, .pkg-page a, .pkg-page select { -webkit-tap-highlight-color: transparent; }
.pkg-page :focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.pkg-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: clamp(3rem,6vw,7rem); align-items: center; padding-top: clamp(9rem,13vw,13rem); background: radial-gradient(ellipse at 80% 0%,rgba(146,116,255,.17),transparent 58%); }
.pkg-hero h1 { max-width: 900px; font-size: clamp(3.5rem,6.9vw,7.3rem); line-height: .95; letter-spacing: -.07em; margin: 1.8rem 0 2rem; text-wrap: balance; }
.pkg-lead { max-width: 650px; color: #bdbdc8; font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.7; }
.pkg-actions { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; margin: 2.3rem 0; }
.pkg-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.4rem; min-height: 48px; border: 1px solid var(--line); border-radius: 999px; font-size: .87rem; font-weight: 650; cursor: pointer; transition: transform .2s,box-shadow .2s,background .2s; text-decoration: none; }
.pkg-button:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(105,233,255,.12); }
.pkg-button--bright { background: var(--cyan); color: #101116; border-color: var(--cyan); }
.pkg-button--dark { background: #101116; color: #fff; border-color: #101116; }
.pkg-button--select { background: transparent; color: var(--paper); }
.pkg-button--select[aria-pressed="true"] { border-color: var(--pkg-accent); background: rgba(188,165,255,.12); }
.pkg-text-link { font-size: .86rem; text-decoration: underline; text-underline-offset: .3em; }
.pkg-trust { display: flex; flex-wrap: wrap; list-style: none; gap: 1.7rem; margin: 3rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); }
.pkg-trust li { color: var(--muted); font-size: .7rem; }
.pkg-trust strong { color: var(--paper); display: block; font-size: 1.5rem; font-weight: 600; }
.pkg-hero-card { color: #18122d; background: linear-gradient(135deg,#ddceff,#ac8cef); border: 1px solid rgba(255,255,255,.6); padding: clamp(1.6rem,3vw,3rem); border-radius: 2rem; box-shadow: 15px 22px 0 rgba(146,116,255,.09),0 35px 90px rgba(0,0,0,.35); transform: rotate(2deg); }
.pkg-eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 650; }
.pkg-volume { display: flex; align-items: flex-end; gap: 1.2rem; margin: 1.5rem 0; }
.pkg-volume strong { font-size: clamp(6rem,10vw,11rem); line-height: .76; letter-spacing: -.1em; font-weight: 600; }
.pkg-volume span { padding-bottom: .2rem; font-size: .92rem; }
.pkg-hero-card > p:not(.pkg-eyebrow):not(.pkg-micro) { font-size: .87rem; max-width: 320px; }
.pkg-hero-card__price { margin: 2rem 0 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(24,18,45,.2); }
.pkg-hero-card__price > span { display: block; font-size: .65rem; }
.pkg-hero-card__price strong { display: block; font-size: clamp(1.6rem,2.4vw,2.5rem); letter-spacing: -.04em; }
.pkg-hero-card__price small { font-size: .78rem; font-weight: 400; letter-spacing: 0; }
.pkg-hero-card .pkg-button { width: 100%; }
.pkg-micro { font-size: .7rem; line-height: 1.6; margin-bottom: 0; }
.pkg-section-nav { display: flex; gap: 2rem; padding: 1.5rem var(--pad); border-block: 1px solid var(--line); overflow-x: auto; }
.pkg-section-nav a { white-space: nowrap; color: #bdbdc8; font-size: .75rem; }
.pkg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.pkg-section-head > p { max-width: 350px; color: var(--muted); }
.pkg-page h2 { font-size: clamp(2.3rem,4.8vw,4.8rem); letter-spacing: -.055em; line-height: 1.05; margin: 1rem 0; }
.pkg-page h2 em { color: var(--pkg-accent); font-style: normal; }
.pkg-assistant { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem 3rem; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(188,165,255,.3); border-radius: 1.5rem; background: #191722; }
.pkg-assistant h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: .5rem 0; }
.pkg-assistant p:not(.kicker) { color: var(--muted); font-size: .82rem; }
.pkg-assistant__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.pkg-assistant__fields .pkg-button { grid-column: 1 / -1; }
.pkg-page label { display: grid; gap: .6rem; font-size: .75rem; color: #d8d6e0; }
.pkg-page label span { color: var(--muted); }
.pkg-page select, .pkg-page input, .pkg-page textarea { min-height: 48px; width: 100%; min-width: 0; background: #101116; color: var(--paper); padding: .85rem; border: 1px solid #45424e; border-radius: .65rem; font-size: .85rem; }
.pkg-page textarea { resize: vertical; }
.pkg-recommendation { grid-column: 1 / -1; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.pkg-plans { display: grid; gap: 1.3rem; align-items: stretch; }
.pkg-plans--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pkg-plans--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pkg-plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1.5rem; padding: clamp(1.4rem,2.5vw,2.6rem); background: linear-gradient(145deg,#1e1e27,#15151d); transition: border-color .25s,box-shadow .25s,transform .25s; }
.pkg-plan.is-selected { border-color: var(--pkg-accent); box-shadow: 0 0 0 1px var(--pkg-accent),0 20px 65px rgba(146,116,255,.12); }
.pkg-plan__top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.pkg-tag { padding: .4rem .7rem; font-size: .64rem; border-radius: 999px; background: rgba(188,165,255,.12); color: #d1bfff; }
.pkg-plan__index { color: #7c7a8b; font-size: .72rem; }
.pkg-plan h3 { font-size: clamp(2.3rem,3.5vw,3.7rem); letter-spacing: -.05em; margin: 1.8rem 0 .5rem; }
.pkg-plan__intro { color: var(--muted); font-size: .88rem; min-height: 4.4rem; }
.pkg-price { margin: 1.5rem 0 .6rem; }
.pkg-price strong { font-size: clamp(1.8rem,2.7vw,3rem); letter-spacing: -.045em; display: block; }
.pkg-price span { color: #bdbdc8; font-size: .85rem; }
.pkg-commitment { font-size: .75rem; color: #c5b7e8; min-height: 3.4rem; }
.pkg-plan__detail { font-size: .83rem; color: var(--muted); padding: 1.2rem 0; border-block: 1px solid var(--line); }
.pkg-plan ul { padding: 0; margin: .8rem 0 2rem; list-style: none; }
.pkg-plan li { display: flex; gap: .6rem; font-size: .8rem; margin: .9rem 0; color: #d4d2dc; }
.pkg-plan li span { color: var(--cyan); }
.pkg-plan__actions { display: grid; gap: .6rem; margin-top: auto; }
.pkg-pricing-note, .pkg-proof-note { max-width: 850px; color: var(--muted); font-size: .78rem; line-height: 1.7; margin-top: 1.7rem; }
.pkg-comparison { margin-top: 2.5rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.pkg-comparison summary { padding: 1.4rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pkg-comparison summary::-webkit-details-marker { display: none; }
.pkg-comparison[open] summary span { transform: rotate(45deg); }
.pkg-table-wrap { overflow-x: auto; }
.pkg-comparison table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .8rem; text-align: left; }
.pkg-comparison caption { text-align: left; padding: 1rem 1.4rem; color: var(--muted); }
.pkg-comparison th, .pkg-comparison td { padding: 1.2rem; vertical-align: top; border: 1px solid var(--line); min-width: 160px; }
.pkg-comparison thead { background: rgba(188,165,255,.08); }
.pkg-comparison td { color: var(--muted); }
.pkg-scope { background: #1b1924; }
.pkg-scope-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.pkg-scope-grid article { border-top: 1px solid #4a405e; padding: 1.3rem .8rem 1.3rem 0; }
.pkg-scope-grid h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.pkg-scope-grid p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.pkg-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pkg-proof-grid > a { border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden; }
.pkg-proof-grid > a > img { width: 100%; height: 340px; object-fit: cover; }
.pkg-proof-brand > div { height: 340px; display: grid; place-items: center; padding: 3rem; background: #edf4ff; }
.pkg-proof-brand img { width: 100%; height: auto; }
.pkg-proof-grid > a > span { padding: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; font-size: 1rem; }
.pkg-proof-grid small { color: var(--muted); }
.pkg-process { background: #eeece9; color: #17171e; border-radius: 3rem 3rem 0 0; }
.pkg-process .kicker { color: #5b419e; }
.pkg-process ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin: 3rem 0 0; }
.pkg-process li { border-top: 1px solid #bdb8c6; padding-top: 1rem; }
.pkg-process li > span { color: #6144a3; font-size: .72rem; }
.pkg-process h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.pkg-process li p { color: #595565; font-size: .9rem; }
.pkg-brief { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,7rem); align-items: start; }
.pkg-brief > div > p:not(.kicker) { color: var(--muted); line-height: 1.7; max-width: 540px; }
.pkg-brief-panel { padding: clamp(1.4rem,3vw,3rem); background: #1c1a25; border: 1px solid #4a405e; border-radius: 1.5rem; }
.pkg-selection { font-size: 1.4rem; color: var(--paper) !important; }
.pkg-brief-fields { display: grid; gap: 1.3rem; margin-bottom: 1.5rem; }
.pkg-brief-panel .pkg-button { width: 100%; }
.pkg-faq { padding-top: 0; }
.pkg-faq-list { max-width: 1000px; }
.pkg-faq details { border-bottom: 1px solid var(--line); }
.pkg-faq summary { cursor: pointer; padding: 1.5rem .5rem; font-size: clamp(1rem,1.5vw,1.2rem); }
.pkg-faq details p { color: var(--muted); max-width: 850px; padding: 0 .5rem 1rem; line-height: 1.8; }
.pkg-final { background: #251d39; text-align: center; }
.pkg-final .pkg-button { margin-top: 1.5rem; }
.pkg-final > p:last-child { max-width: 620px; color: #bcb2ce; font-size: .83rem; margin: 2rem auto 0; }
.pkg-dock { position: fixed; z-index: 80; left: 50%; bottom: max(1rem,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(640px,calc(100% - 2rem)); display: flex; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid rgba(188,165,255,.6); border-radius: 999px; background: rgba(24,21,34,.94); backdrop-filter: blur(18px); box-shadow: 0 8px 50px rgba(0,0,0,.4); }
.pkg-dock__logo { width: 40px; height: 40px; object-fit: contain; padding: 7px; border: 1px solid #bca5ff; border-radius: 50%; background: #f1f0ec; animation: pkg-logo-float 3s ease-in-out infinite; }
.pkg-dock > div { flex: 1; min-width: 0; }
.pkg-dock > div > span { display: block; font-size: .61rem; color: #bdb3d0; }
.pkg-dock strong { font-size: .87rem; display: block; }
.pkg-dock > a { border-radius: 999px; padding: 1rem 1.2rem; background: var(--cyan); color: #101116; font-weight: 650; font-size: .8rem; white-space: nowrap; }
@keyframes pkg-logo-float { 50% { transform: translateY(-3px) rotate(8deg); box-shadow: 0 0 18px rgba(188,165,255,.45); } }
@media (max-width: 1100px) { .pkg-hero { grid-template-columns: 1fr 1fr; gap: 2rem; } .pkg-plans--three { grid-template-columns: 1fr 1fr; } .pkg-plans--three .pkg-plan:last-child { grid-column: 1 / -1; } .pkg-plan__intro { min-height: auto; } }
@media (max-width: 800px) { .pkg-hero, .pkg-assistant, .pkg-brief { grid-template-columns: 1fr; } .pkg-hero-card { max-width: 550px; transform: none; } .pkg-hero h1 { max-width: 700px; } .pkg-section-head { display: block; } .pkg-section-head > p { max-width: 600px; } .pkg-scope-grid { grid-template-columns: 1fr 1fr; } .pkg-proof-grid > a > img, .pkg-proof-brand > div { height: 270px; } }
@media (max-width: 600px) { .pkg-hero { padding-top: 8rem; } .pkg-hero h1 { font-size: clamp(2.8rem,12vw,4.3rem); } .pkg-page h2 { font-size: clamp(2.1rem,9vw,3rem); } .pkg-plans, .pkg-scope-grid, .pkg-proof-grid, .pkg-process ol { grid-template-columns: 1fr; } .pkg-plans--three .pkg-plan:last-child { grid-column: auto; } .pkg-assistant { padding: 1.3rem; } .pkg-assistant__fields { grid-template-columns: 1fr; } .pkg-commitment { min-height: 0; } .pkg-section-nav { gap: 1.3rem; } .pkg-dock { gap: .6rem; padding: .65rem; width: calc(100% - 1.2rem); } .pkg-dock__logo { display: none; } .pkg-dock > div { padding-left: .4rem; } .pkg-dock strong { font-size: .76rem; } .pkg-dock > a { padding: .9rem; font-size: .73rem; } .pkg-proof-brand > div { padding: 2rem; } }
@media (max-width: 600px) { .pkg-dock { gap: .4rem; } .pkg-dock__logo { display: block; flex: 0 0 28px; width: 28px; height: 28px; padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .pkg-page *, .pkg-page *::before, .pkg-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }