:root {
    --green:#25a27c;
    --white:#FFFFFF;
    --dark:#28292C;
    --muted:rgba(255,255,255,.66);
    --line:rgba(255,255,255,.13);
    --surface:rgba(255,255,255,.035);
    --radius:24px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}

body {
    margin:0;
    background:var(--dark);
    color:var(--white);
    font-family:Segoe UI,Arial,sans-serif;
    line-height:1.65
}

button,input,a {
    -webkit-tap-highlight-color:transparent
}

button,input {
    font:inherit
}

button,a {
    touch-action:manipulation
}

a {
    color:inherit;
    text-decoration:none
}

button {
    cursor:pointer
}

button:disabled {
    cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid var(--green);
    outline-offset:5px
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    line-height:1.12;
    letter-spacing:-.04em
}

p {
    color:var(--muted)
}

.wrap {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.skip {
    position:fixed;
    left:12px;
    top:-100px;
    background:var(--white);
    color:var(--dark);
    padding:12px;
    z-index:100
}

.skip:focus {
    top:12px
}

.topline {
    border-bottom:1px solid var(--line);
    font-size:12px;
    padding:8px 0;
    color:var(--muted)
}

.topline .wrap {
    display:flex;
    justify-content:space-between;
    gap:16px
}

.dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--green);
    border-radius:50%;
    margin-right:8px
}

.header {
    position:sticky;
    top:0;
    background:rgba(40,41,44,.96);
    backdrop-filter:blur(16px);
    z-index:20;
    border-bottom:1px solid var(--line)
}

.nav {
    min-height:82px;
    display:flex;
    align-items:center;
    gap:36px
}

.brand {
    font-size:27px;
    font-weight:850;
    letter-spacing:-1.5px
}

.brand span {
    color:var(--green)
}

.links {
    display:flex;
    align-items:center;
    gap:27px;
    margin-left:auto;
    font-size:14px
}

.links a:hover,.footer a:hover {
    color:var(--green)
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:50px;
    padding:12px 23px;
    border-radius:12px;
    border:1px solid transparent;
    background:var(--green);
    color:var(--dark);
    font-weight:750;
    transition:transform .2s,background .2s
}

.button:hover {
    transform:translateY(-2px);
    background:var(--white)
}

.button.outline {
    background:transparent;
    color:var(--white);
    border-color:var(--line)
}

.button.outline:hover {
    border-color:var(--green);
    background:var(--surface)
}

.menu {
    display:none;
    margin-left:auto;
    background:transparent;
    border:1px solid var(--line);
    border-radius:10px;
    color:white;
    padding:8px 12px
}

.hero {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:70px;
    align-items:center;
    padding:82px 0 70px
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--green);
    font-size:12px;
    font-weight:750;
    margin-bottom:22px
}

.pill {
    display:inline-flex;
    border:1px solid var(--line);
    padding:6px 12px;
    border-radius:100px;
    letter-spacing:.5px;
    font-size:11px;
    color:var(--white);
    margin-bottom:26px
}

.hero h1 {
    font-size:clamp(48px,5.6vw,76px);
    max-width:650px
}

.hero h1 span {
    color:var(--green)
}

.hero p {
    font-size:17px;
    max-width:460px;
    margin-top:25px
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}

.micro {
    font-size:12px!important;
    margin-top:18px!important
}

.visual {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:540px;
    border-radius:40px;
    background:radial-gradient(ellipse at center,rgba(37,162,124,.19),transparent 68%)
}

.orbit {
    position:absolute;
    width:390px;
    height:390px;
    border:1px solid rgba(37,162,124,.25);
    border-radius:50%
}

.orbit:after {
    content:'';
    position:absolute;
    inset:30px;
    border:1px dashed var(--line);
    border-radius:50%
}

.phone {
    position:relative;
    width:270px;
    background:var(--dark);
    border:7px solid rgba(255,255,255,.19);
    border-radius:39px;
    padding:34px 16px 20px;
    box-shadow:0 28px 65px rgba(0,0,0,.3);
    transform:rotate(-5deg)
}

.phone:before {
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    height:7px;
    width:65px;
    border-radius:20px;
    background:rgba(255,255,255,.2)
}

.phone-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px
}

.phone-head strong {
    font-size:20px;
    letter-spacing:-1px
}

.avatar {
    border:1px solid var(--line);
    border-radius:50%;
    width:30px;
    height:30px;
    display:grid;
    place-items:center
}

.phone-banner {
    margin:22px 0;
    background:var(--green);
    color:var(--dark);
    border-radius:17px;
    padding:20px 15px
}

.phone-banner small {
    font-size:9px;
    letter-spacing:2px
}

.phone-banner h3 {
    font-size:27px;
    margin:10px 0
}

.phone-banner p {
    font-size:10px;
    color:var(--dark);
    margin:0
}

.phone-row {
    display:flex;
    gap:7px;
    margin-bottom:20px
}

.phone-row span {
    font-size:9px;
    border:1px solid var(--line);
    padding:5px 8px;
    border-radius:7px
}

.phone-row span:first-child {
    border-color:var(--green);
    color:var(--green)
}

.mock-item {
    border-top:1px solid var(--line);
    padding:13px 0;
    font-size:11px;
    display:flex;
    justify-content:space-between
}

.mock-item b {
    color:var(--green)
}

.phone-foot {
    font-size:9px;
    text-align:center;
    color:var(--muted);
    margin-top:15px
}

.float {
    position:absolute;
    right:0;
    bottom:88px;
    background:var(--dark);
    border:1px solid var(--line);
    border-radius:16px;
    padding:15px 20px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    font-size:13px
}

.float span {
    display:block;
    font-size:10px;
    color:var(--muted)
}

.strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:26px 0;
    gap:24px
}

.strip article {
    display:flex;
    gap:15px;
    align-items:center
}

.icon {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex-shrink:0;
    border-radius:12px;
    background:rgba(37,162,124,.1);
    color:var(--green);
    font-size:21px
}

.strip strong {
    font-size:14px
}

.strip p {
    font-size:12px
}

.section {
    padding:90px 0
}

.section-top {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:35px
}

.section h2 {
    font-size:clamp(32px,4vw,46px)
}

.section-top>p {
    max-width:330px;
    font-size:14px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.card {
    padding:30px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface)
}

.card .number {
    color:var(--green);
    font-size:12px;
    letter-spacing:2px;
    display:block;
    margin-bottom:45px
}

.card h3 {
    font-size:23px;
    margin-bottom:15px
}

.card p {
    font-size:14px
}

.card a {
    display:inline-block;
    margin-top:25px;
    font-size:13px;
    color:var(--white);
    border-bottom:1px solid var(--green)
}

.guide {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:30px;
    padding:45px;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px
}

.guide p {
    font-size:14px;
    margin-top:20px
}

.tabs {
    display:inline-flex;
    gap:5px;
    padding:5px;
    border:1px solid var(--line);
    border-radius:13px;
    margin-top:28px
}

.tabs button {
    background:transparent;
    border:0;
    color:var(--muted);
    padding:9px 20px;
    border-radius:8px;
    font-weight:600
}

.tabs button[aria-selected=true] {
    background:var(--green);
    color:var(--dark)
}

.steps {
    list-style:none;
    padding:0;
    margin:0;
    counter-reset:step
}

.steps li {
    counter-increment:step;
    position:relative;
    padding:0 0 25px 53px;
    min-height:65px
}

.steps li:last-child {
    padding-bottom:0
}

.steps li:before {
    content:counter(step,decimal-leading-zero);
    position:absolute;
    left:0;
    top:0;
    color:var(--green);
    border:1px solid var(--line);
    border-radius:50%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    font-size:11px
}

.steps h3 {
    font-size:17px;
    letter-spacing:-.02em
}

.steps p {
    font-size:13px;
    margin-top:8px
}

.notice {
    margin-top:28px;
    padding:15px 18px;
    border-left:2px solid var(--green);
    background:rgba(37,162,124,.06);
    font-size:12px;
    color:var(--muted)
}

[hidden] {
    display:none!important
}

.faq-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:70px
}

.search {
    width:100%;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:12px;
    color:var(--white);
    padding:14px 16px;
    margin-top:25px
}

.faq-list details {
    border-bottom:1px solid var(--line);
    padding:20px 0
}

.faq-list summary {
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-weight:600;
    font-size:15px
}

.faq-list summary::-webkit-details-marker {
    display:none
}

.faq-list summary:after {
    content:'+';
    color:var(--green);
    font-size:22px;
    line-height:1
}

.faq-list details[open] summary:after {
    content:'−'
}

.faq-list details p {
    font-size:14px;
    margin-top:15px;
    padding-right:25px
}

.support {
    border-radius:30px;
    padding:44px;
    background:var(--green);
    color:var(--dark);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.support h2 {
    font-size:35px
}

.support p {
    color:var(--dark);
    margin-top:12px;
    font-size:14px
}

.support .button {
    background:var(--dark);
    color:var(--white);
    white-space:nowrap
}

.footer {
    margin-top:75px;
    border-top:1px solid var(--line);
    padding:35px 0 25px
}

.footer-top,.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px
}

.footer-top p {
    font-size:12px;
    max-width:430px;
    margin-top:12px
}

.footer-links {
    display:flex;
    gap:22px;
    font-size:13px
}

.footer-bottom {
    border-top:1px solid var(--line);
    margin-top:30px;
    padding-top:22px;
    color:var(--muted);
    font-size:11px
}

.age {
    border:1px solid var(--line);
    border-radius:50%;
    width:34px;
    height:34px;
    display:inline-grid;
    place-items:center;
    margin-right:8px
}

.to-top {
    position:fixed;
    bottom:22px;
    right:22px;
    border:1px solid var(--line);
    background:var(--dark);
    color:var(--white);
    width:45px;
    height:45px;
    border-radius:13px;
    z-index:15
}

.status {
    font-size:12px;
    color:var(--muted);
    margin-top:14px
}

.dialog {
    border:1px solid var(--line);
    background:var(--dark);
    color:var(--white);
    border-radius:24px;
    padding:32px;
    width:min(490px,calc(100% - 32px))
}

.dialog::backdrop {
    background:rgba(0,0,0,.65)
}

.dialog h2 {
    font-size:26px;
    margin-bottom:18px
}

.dialog p {
    font-size:14px;
    margin:15px 0
}

.dialog .button {
    width:100%;
    margin-top:12px
}

.dialog-close {
    float:right;
    background:transparent;
    border:0;
    color:white;
    font-size:24px
}

.dialog-list {
    color:var(--muted);
    font-size:14px;
    padding-left:20px
}

.label {
    font-size:11px;
    color:var(--muted);
    letter-spacing:1px
}

@media(min-width:1450px) {
    .hero {
    padding:110px 0 90px
}


}

@media(max-width:950px) {
    .links {
    gap:16px
}

.nav {
    gap:20px
}

.hero {
    gap:25px
}

.visual {
    min-height:490px
}

.orbit {
    width:310px;
    height:310px
}

.float {
    right:-5px
}

.guide,.faq-layout {
    gap:35px
}

.card {
    padding:24px
}

.guide {
    padding:30px
}


}

@media(max-width:760px) {
    .wrap {
    width:calc(100% - 32px)
}

.topline .wrap span:last-child {
    display:none
}

.nav {
    min-height:70px;
    flex-wrap:wrap;
    gap:0
}

.brand {
    font-size:25px
}

.menu {
    display:block
}

.links {
    display:none;
    width:100%;
    margin:0;
    padding:20px 0;
    align-items:stretch;
    flex-direction:column;
    gap:20px
}

.links.open {
    display:flex
}

.hero {
    grid-template-columns:1fr;
    padding:45px 0
}

.hero h1 {
    font-size:51px
}

.hero p {
    font-size:15px
}

.visual {
    min-height:465px;
    margin-top:5px
}

.float {
    right:5%;
    bottom:45px
}

.strip {
    grid-template-columns:1fr;
    gap:20px
}

.cards {
    grid-template-columns:1fr
}

.card .number {
    margin-bottom:22px
}

.section {
    padding:60px 0
}

.section-top {
    display:block
}

.section-top>p {
    margin-top:20px;
    max-width:none
}

.guide,.faq-layout {
    grid-template-columns:1fr;
    gap:35px
}

.guide {
    padding:26px 22px
}

.support {
    padding:30px 25px;
    align-items:start;
    flex-direction:column
}

.support h2 {
    font-size:30px
}

.footer-top,.footer-bottom {
    align-items:start;
    flex-direction:column;
    gap:20px
}

.footer-links {
    flex-wrap:wrap
}

.footer-bottom {
    padding-right:45px
}

.section h2 {
    font-size:35px
}

.actions .button {
    flex:1;
    padding:12px 16px
}

.phone {
    transform:rotate(-4deg)
}

.hero .eyebrow {
    margin-bottom:16px
}


}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}

*,*:before,*:after {
    transition:none!important
}


}

/* Dynamic experience layer — brand palette remains unchanged. */
.reading-progress {
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:100%;
    transform:scaleX(0);
    transform-origin:left;
    background:var(--green);
    z-index:60;
    pointer-events:none
}

body {
    background-image:url("assets/background.svg");
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat
}

.hero h1 span {
    background:linear-gradient(100deg,var(--green),var(--white),var(--green));
    background-size:220% auto;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    animation:shimmer 9s linear infinite
}

@keyframes shimmer {
    to {
    background-position:220% center
}


}

.orbit {
    animation:orbit-breathe 7s ease-in-out infinite
}

.float {
    animation:float-card 6s ease-in-out infinite
}

@keyframes orbit-breathe {
    50% {
    transform:scale(1.08);
    opacity:.5
}


}

@keyframes float-card {
    50% {
    transform:translateY(-12px)
}


}

.phone {
    transition:transform .35s ease;
    will-change:transform
}

.visual {
    isolation:isolate
}

.visual:before {
    content:'';
    position:absolute;
    inset:12%;
    background:radial-gradient(circle,rgba(37,162,124,.18),transparent 65%);
    filter:blur(24px);
    z-index:-1
}

.card {
    position:relative;
    overflow:hidden;
    transition:transform .3s,border-color .3s,box-shadow .3s
}

.card:before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(280px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(37,162,124,.12),transparent 70%);
    opacity:0;
    transition:opacity .3s;
    pointer-events:none
}

.card:hover {
    transform:translateY(-7px);
    border-color:rgba(37,162,124,.6);
    box-shadow:0 22px 50px rgba(0,0,0,.16)
}

.card:hover:before {
    opacity:1
}

.card>* {
    position:relative
}

.links a[aria-current=location] {
    color:var(--green)
}

.links a.button[aria-current=location] {
    color:var(--dark);
    box-shadow:0 0 0 3px rgba(37,162,124,.18)
}

.experience {
    margin-top:75px;
    padding:35px;
    border:1px solid var(--line);
    border-radius:30px;
    background:linear-gradient(135deg,rgba(37,162,124,.09),var(--surface));
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px
}

.experience h2 {
    font-size:35px
}

.experience p {
    margin-top:15px;
    font-size:14px
}

.checklist {
    display:grid;
    gap:10px;
    margin-top:22px
}

.check-item {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid var(--line);
    padding:13px;
    border-radius:12px;
    font-size:13px;
    cursor:pointer;
    transition:background .2s,border-color .2s
}

.check-item:has(input:checked) {
    border-color:var(--green);
    background:rgba(37,162,124,.08)
}

.check-item input {
    accent-color:var(--green);
    width:18px;
    height:18px;
    flex-shrink:0
}

.check-progress {
    height:6px;
    border:0;
    border-radius:10px;
    width:100%;
    accent-color:var(--green);
    margin-top:22px
}

.check-progress::-webkit-progress-bar {
    background:rgba(255,255,255,.12);
    border-radius:10px
}

.check-progress::-webkit-progress-value {
    background:var(--green);
    border-radius:10px;
    transition:width .3s
}

.check-progress::-moz-progress-bar {
    background:var(--green)
}

.check-head {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.text-button {
    border:0;
    background:transparent;
    color:var(--muted);
    text-decoration:underline;
    font-size:12px;
    padding:5px
}

.experience-note {
    border-left:1px solid var(--line);
    padding-left:40px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.experience-note h3 {
    font-size:25px
}

.experience-note .button {
    align-self:flex-start;
    margin-top:24px
}

.phone-row button {
    font:inherit;
    font-size:9px;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--line);
    padding:5px 8px;
    border-radius:7px
}

.phone-row button[aria-pressed=true] {
    border-color:var(--green);
    color:var(--green);
    background:rgba(37,162,124,.08)
}

.phone-screen {
    min-height:125px
}

.phone-screen h4 {
    font-size:13px;
    margin:0 0 10px
}

.phone-screen p {
    font-size:11px;
    margin:0 0 14px
}

.phone-screen a {
    font-size:11px;
    color:var(--green);
    border-bottom:1px solid var(--green)
}

.tools {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:23px
}

.tool-button {
    border:1px solid var(--line);
    border-radius:9px;
    padding:8px 12px;
    background:var(--surface);
    color:var(--muted);
    font-size:12px
}

.tool-button:hover {
    border-color:var(--green);
    color:var(--white)
}

kbd {
    font:inherit;
    border:1px solid var(--line);
    border-radius:4px;
    padding:1px 5px;
    margin-left:6px;
    font-size:10px
}

.quick-links {
    display:grid;
    gap:8px;
    margin-top:20px
}

.quick-links a {
    display:flex;
    justify-content:space-between;
    border:1px solid var(--line);
    padding:13px 15px;
    border-radius:10px;
    font-size:14px
}

.quick-links a:hover {
    background:var(--green);
    color:var(--dark)
}

.quick-links small {
    color:inherit;
    opacity:.65
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translate(-50%,20px);
    width:max-content;
    max-width:calc(100% - 110px);
    padding:12px 20px;
    border:1px solid var(--green);
    border-radius:12px;
    background:var(--dark);
    font-size:13px;
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,transform .2s;
    box-shadow:0 10px 40px rgba(0,0,0,.25)
}

.toast.visible {
    opacity:1;
    transform:translate(-50%,0)
}

.reveal-pending {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .65s ease,transform .65s ease
}

.reveal-pending.is-visible {
    opacity:1;
    transform:none
}

body.calm *,body.calm *:before,body.calm *:after {
    animation:none!important;
    transition:none!important
}

body.calm .reveal-pending {
    opacity:1;
    transform:none
}

body.calm .phone {
    transform:rotate(-5deg)!important
}

html.calm-scroll {
    scroll-behavior:auto
}

@media(max-width:760px) {
    .experience {
    grid-template-columns:1fr;
    padding:25px 20px;
    gap:30px;
    margin-top:50px
}

.experience-note {
    border-left:0;
    border-top:1px solid var(--line);
    padding:25px 0 0
}

.experience h2 {
    font-size:30px
}

.toast {
    bottom:80px;
    max-width:calc(100% - 32px)
}

.tools kbd {
    display:none
}


}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
    animation:none!important
}

.reveal-pending {
    opacity:1;
    transform:none
}

.phone {
    transform:rotate(-5deg)!important
}


}

@media print {
    .header,.topline,.tools,.to-top,.reading-progress,.visual,.toast,dialog {
    display:none!important
}

body {
    background:white;
    color:#28292C
}

.reveal-pending {
    opacity:1;
    transform:none
}

p,.eyebrow {
    color:#28292C
}

.section {
    padding:25px 0
}

.guide,.experience,.faq-layout {
    display:block
}

details p {
    display:block!important
}

.footer {
    margin-top:25px
}


}


/* Keyboard focus must never land on an invisible reveal panel. */
.reveal-pending:focus-within { opacity: 1; transform: none; }
.noscript-message { padding: 16px; border-bottom: 1px solid var(--green); }
@media (max-width: 360px) {
  .hero h1 { font-size: 43px; }
  .orbit { width: 260px; height: 260px; }
  .float { right: 0; }
}
@media print {
  .faq-list details[hidden] { display: block !important; }
  #panel-android[hidden], #panel-ios[hidden] { display: block !important; margin-top: 24px; }
  .card, .guide, .experience { break-inside: avoid; }
}
.site-logo { display: block; max-width: 190px; max-height: 52px; object-fit: contain; }

/* Gallery, phone handoff and mobile navigation. */
.hero { position:relative; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0 -2% 0 40%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse,rgba(37,162,124,.17),transparent 68%); animation:ambient-light 10s ease-in-out infinite alternate; }
@keyframes ambient-light { from { opacity:.45; transform:translateY(-16px); } to { opacity:1; transform:translateY(16px); } }
.phone-screen { animation:screen-enter .35s ease-out; }
@keyframes screen-enter { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:none; } }
.device-recommendation { color:#7de1bd; font-size:13px; margin:18px 0 0; }
.actions .recommended { box-shadow:0 0 0 3px rgba(37,162,124,.2),0 8px 32px rgba(37,162,124,.16); }
.card { box-shadow:0 14px 40px rgba(0,0,0,.12); }
.strip .icon { display:grid; place-items:center; flex-shrink:0; font-family:Arial,sans-serif; }
.showcase { padding-top:50px; }
.gallery-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:28px 0 18px; }
.gallery-toolbar > span { color:var(--muted); font-size:13px; }
.gallery-toolbar button:disabled { opacity:.3; }
.preview-gallery { position:relative; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--green) transparent; padding:4px 3px 20px; }
.preview-gallery:focus-visible { outline:2px solid var(--green); outline-offset:6px; }
.preview-card { flex:0 0 calc((100% - 48px) / 3); min-width:0; scroll-snap-align:start; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(37,162,124,.08),rgba(40,41,44,.85)); box-shadow:0 16px 36px rgba(0,0,0,.15); }
.preview-top { display:flex; justify-content:space-between; color:#8dcdb8; font-size:11px; letter-spacing:.12em; margin-bottom:20px; }
.preview-display { height:320px; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:25px; background:#222629; overflow:hidden; box-shadow:0 12px 30px #0003; }
.preview-brand { display:block; font-weight:700; font-size:16px; margin-bottom:24px; }
.preview-feature { padding:18px; background:linear-gradient(130deg,#25a27c,#155e50); border-radius:16px; margin-bottom:12px; }
.preview-feature small { font-size:9px; letter-spacing:.12em; }
.preview-feature h3 { font-size:25px; margin:10px 0; }
.preview-feature > span { font-size:10px; }
.preview-line { display:flex; justify-content:space-between; padding:12px 0; font-size:12px; border-bottom:1px solid var(--line); }
.preview-pills { display:flex; gap:10px; margin-bottom:18px; }
.preview-pills span { padding:5px 16px; border:1px solid var(--line); border-radius:20px; font-size:11px; }
.preview-pills span:first-child { background:var(--green); }
.preview-step { display:flex; align-items:center; gap:14px; padding:17px 0; font-size:12px; border-bottom:1px solid var(--line); }
.preview-step b { color:#65d7ad; }
.preview-search { border:1px solid var(--line); border-radius:10px; padding:12px; font-size:11px; color:var(--muted); margin-bottom:12px; }
.preview-tag { margin-top:18px; color:#65d7ad; font-size:11px; }
.preview-card > h3 { margin:24px 0 10px; font-size:21px; }
.preview-card > p { font-size:14px; }
.handoff { display:grid; grid-template-columns:1fr 240px; align-items:center; gap:48px; padding:40px; margin-bottom:60px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(115deg,rgba(37,162,124,.13),rgba(40,41,44,.75)); }
.handoff h2 { font-size:clamp(28px,4vw,42px); margin:12px 0 18px; }
.handoff .micro { margin:12px 0 22px; }
.page-qr { padding:12px; border:1px solid var(--line); border-radius:18px; font-size:13px; text-align:center; color:var(--muted); }
.page-qr canvas { width:100%; height:auto; display:block; border-radius:4px; }
.mobile-dock { display:none; }
@media (max-width:1000px) { .preview-card { flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:760px) {
  body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .preview-card { flex-basis:85%; padding:20px; }
  .showcase { padding-top:25px; }
  .handoff { grid-template-columns:1fr; padding:24px; gap:24px; margin-bottom:36px; }
  .page-qr { width:220px; justify-self:center; }
  .mobile-dock { position:fixed; z-index:50; bottom:0; left:0; right:0; display:flex; padding:8px 16px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(30,34,35,.97); backdrop-filter:blur(18px); }
  .mobile-dock a { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:50px; font-size:11px; color:var(--muted); border-radius:12px; }
  .mobile-dock a > span { font-size:20px; line-height:1.2; }
  .mobile-dock a[aria-current] { color:#7de1bd; background:rgba(37,162,124,.12); }
  .to-top { bottom:calc(88px + env(safe-area-inset-bottom)); }
  .toast { bottom:calc(90px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { .hero::before,.phone-screen { animation:none; } }
@media print { .mobile-dock,.handoff,.showcase { display:none!important; } body { padding-bottom:0; } }

/* Compact layout for the simplified guide. */
.topline { display:none; }
.hero { display:block; min-height:0; padding-top:64px; padding-bottom:48px; }
.hero::before { display:none; }
.hero > div { max-width:680px; }
.hero h1 { font-size:clamp(36px,6vw,60px); line-height:1.12; letter-spacing:-1.5px; }
.hero p { max-width:560px; }
.section { padding-top:56px; padding-bottom:56px; }
.guide { padding:32px; gap:36px; border-radius:16px; }
.guide h2,.faq-layout h2,.support h2 { font-size:clamp(26px,4vw,36px); line-height:1.2; }
.faq-layout { gap:40px; }
.support { padding:32px; border-radius:16px; }
.footer { margin-top:48px; padding-bottom:24px; }
body { padding-bottom:0; }
@media(max-width:760px) {
 .hero { padding-top:40px; padding-bottom:32px; }
 .guide,.support { padding:24px; }
 .section { padding-top:40px; padding-bottom:40px; }
 .faq-layout { gap:24px; }
}