:root {
  --bg: #161614;
  --bg-deep: #10100f;
  --card: #1e1e1b;
  --elevated: #292925;
  --overlay: #34342f;
  --border: #3c3c35;
  --muted: #a9aaa4;
  --muted-2: #73756f;
  --text: #f5f5ef;
  --accent: #ff710b;
  --accent-soft: #ff9d42;
  --green: #31f65d;
  --cyan: #00e7f0;
  --yellow: #ffd343;
  --pink: #ff4ed8;
  --red: #ff3656;
  --radius: 16px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 89% 1%, rgba(255,113,11,.12), transparent 31rem), radial-gradient(circle at 0 100%, rgba(0,0,0,.42), transparent 35rem); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { overflow: hidden; }
.section-pad, .site-header, .site-footer { width: min(var(--max), calc(100% - 56px)); margin-inline: auto; }
.mono { font-family: "DM Mono", monospace; letter-spacing: .08em; font-size: .68rem; text-transform: uppercase; }
.eyebrow { color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: .67rem; letter-spacing: .17em; font-weight: 500; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,113,11,.14); }
.muted { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; padding: 0 19px; border: 1px solid transparent; border-radius: 9px; font-size: .83rem; font-weight: 800; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 12px 32px rgba(255,113,11,.18); }
.button-primary:hover { background: #ff8126; }
.button-ghost { color: var(--text); border-color: var(--border); background: rgba(255,255,255,.02); }
.button-ghost:hover { border-color: var(--accent); background: rgba(255,113,11,.07); }
.button-small { min-height: 39px; padding: 0 14px; font-size: .74rem; }
.button-full { width: 100%; margin-top: 25px; }
.apple-glyph { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #fff; font-size: .58rem; border: 1.5px solid #fff; border-radius: 5px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: .78rem; font-weight: 800; }
.text-link:hover { color: var(--accent-soft); }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 86px; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--accent); border-radius: 50%; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--accent); }
.brand-mark::before { width: 1px; height: 34px; }.brand-mark::after { width: 34px; height: 1px; }
.brand-mark span { width: 7px; height: 7px; border: 1.5px solid var(--accent-soft); border-radius: 50%; z-index: 1; background: var(--bg); }
.brand-name { font-size: .75rem; font-weight: 800; letter-spacing: .1em; }.brand-name b { color: var(--accent); }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: 70px; color: var(--muted); font-size: .77rem; font-weight: 700; }.desktop-nav a:hover { color: var(--text); }

.hero { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: 70px; align-items: center; min-height: 680px; padding-top: 83px; padding-bottom: 84px; }
.hero-copy { position: relative; z-index: 1; }.hero-copy .eyebrow { margin-bottom: 25px; }.hero h1 { max-width: 600px; margin: 0; font-size: clamp(3.5rem, 6vw, 6.25rem); line-height: .97; letter-spacing: -.065em; font-weight: 800; }.hero h1 em, h2 span { color: var(--accent); font-style: normal; }.hero-lede { max-width: 540px; margin: 29px 0 0; color: var(--muted); font-size: .98rem; line-height: 1.85; }.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 32px; }.hero-note { margin-top: 28px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: .64rem; letter-spacing: .03em; }.note-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border: 1px solid var(--border); border-radius: 50%; color: var(--accent-soft); font-size: .55rem; }
.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }.visual-grid { position: absolute; inset: -30px -60px; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent 3%, #000 28%, #000 78%, transparent 100%); }.scene-frame { position: relative; width: min(100%, 575px); aspect-ratio: 1.22; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,.38); transform: rotate(1.2deg); }.scene-frame img, .result-art img, .gallery-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }.scene-frame img { filter: saturate(.85) contrast(1.05); }.scene-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,.04), rgba(11,11,10,.55)); }.crosshair { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }.crosshair i { position: absolute; width: 15px; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 3px rgba(0,231,240,.6); }.crosshair i:nth-child(1) { left: 0; top: 21px; }.crosshair i:nth-child(2) { right: 0; top: 21px; }.crosshair i:nth-child(3) { left: 21px; top: 0; transform: rotate(90deg); }.crosshair i:nth-child(4) { left: 21px; bottom: 0; transform: rotate(90deg); }.crosshair b { position: absolute; left: 20px; top: 20px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }.crosshair-hero { width: 56px; height: 56px; }.crosshair-hero i { width: 19px; height: 2px; }.crosshair-hero i:nth-child(1), .crosshair-hero i:nth-child(2) { top: 27px; }.crosshair-hero i:nth-child(3) { left: 27px; }.crosshair-hero i:nth-child(4) { left: 27px; }.crosshair-hero b { left: 26px; top: 26px; }
.scene-caption { position: absolute; left: 19px; right: 19px; bottom: 17px; display: flex; justify-content: space-between; align-items: end; gap: 15px; }.scene-caption span { color: var(--cyan); font-size: .58rem; }.scene-caption strong { font-size: .72rem; font-weight: 700; }.hero-kicker { position: absolute; top: 17px; left: 6px; color: var(--accent-soft); }.coordinate { position: absolute; right: -33px; top: 28%; color: var(--muted-2); transform: rotate(90deg); }.floating-card { position: absolute; z-index: 2; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; background: rgba(30,30,27,.93); box-shadow: 0 17px 35px rgba(0,0,0,.28); }.setup-card { left: -35px; top: 19%; width: 194px; }.floating-card-top { display: flex; align-items: center; gap: 7px; color: var(--accent-soft); font-size: .55rem; }.floating-card strong { display: block; margin-top: 10px; font-size: .76rem; }.confidence { margin-left: auto; color: var(--green); font-family: "DM Mono", monospace; font-size: .61rem; }.mini-cross { display: inline-block; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; }.cyan { color: var(--cyan); }.app-card { right: -22px; bottom: 11%; display: flex; align-items: center; gap: 10px; width: 206px; }.app-card img { width: 32px; height: 32px; border-radius: 8px; }.app-card strong { margin: 0; font-size: .69rem; }.app-card .muted { font-size: .62rem; }.app-arrow { margin-left: auto; color: var(--accent-soft); }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 21px; padding-bottom: 21px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.proof-strip > div { display: flex; align-items: baseline; gap: 10px; }.proof-value { font-size: .9rem; font-weight: 800; }.proof-label { color: var(--muted-2); font-size: .66rem; }

.intro { padding-top: 145px; padding-bottom: 128px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.section-heading h2, .lab-heading h2, .gallery-heading h2, .guide-side h2, .seo-band h2, .download-cta h2 { margin: 15px 0 0; font-size: clamp(2.2rem, 4.1vw, 4rem); line-height: 1.04; letter-spacing: -.06em; }.intro-copy { max-width: 400px; margin: -27px 0 0 auto; color: var(--muted); font-size: .88rem; line-height: 1.8; }.feature-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 13px; margin-top: 54px; }.feature-card { min-height: 328px; padding: 23px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }.feature-card:hover { border-color: rgba(255,113,11,.55); }.feature-wide { background: linear-gradient(140deg, rgba(255,113,11,.13), var(--card) 48%); }.feature-index { color: var(--muted-2); }.feature-icon { position: relative; display: grid; place-items: center; width: 47px; height: 47px; margin-top: 54px; border-radius: 12px; color: var(--accent); background: rgba(255,113,11,.12); }.feature-icon::before, .feature-icon::after, .feature-icon span::before, .feature-icon span::after { content: ""; position: absolute; background: currentColor; }.icon-target::before { width: 21px; height: 1px; }.icon-target::after { width: 1px; height: 21px; }.icon-target span { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; }.icon-cross::before { width: 20px; height: 2px; }.icon-cross::after { width: 2px; height: 20px; }.icon-cross span { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }.icon-library span, .icon-library span::before, .icon-library span::after { width: 19px; height: 12px; border: 1px solid currentColor; border-radius: 2px; background: transparent; }.icon-library span { transform: translateY(5px); }.icon-library span::before { top: -6px; left: -4px; }.icon-library span::after { top: -12px; left: -8px; }.feature-card h3 { margin: 17px 0 9px; font-size: 1rem; }.feature-card p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.75; }.micro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }.micro-tags span, .keyword-row span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .57rem; }.mini-demo { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: var(--muted-2); font-size: .59rem; }.tiny { position: relative; left: auto; top: auto; transform: none; width: 22px; height: 22px; }.cyan-cross { color: var(--cyan); }.cyan-cross i { width: 7px; }.cyan-cross i:nth-child(1), .cyan-cross i:nth-child(2) { top: 10px; }.cyan-cross i:nth-child(3), .cyan-cross i:nth-child(4) { left: 10px; height: 7px; }.cyan-cross b { left: 9px; top: 9px; width: 3px; height: 3px; }.stack-lines { margin-top: 29px; }.stack-lines span { display: block; width: 100%; height: 3px; margin-top: 7px; border-radius: 3px; background: var(--overlay); }.stack-lines span:first-child { width: 68%; background: var(--accent); }

.setup-lab { padding: 110px 0 128px; border-top: 1px solid var(--border); }.lab-heading, .gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.lab-heading p { max-width: 350px; margin: 0 0 4px; color: var(--muted); font-size: .82rem; line-height: 1.8; }.lab-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13px; margin-top: 50px; }.panel, .result-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }.lab-controls { padding: 27px; }.control-group + .control-group { margin-top: 30px; }.control-group label { display: block; margin-bottom: 11px; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }.segmented button { min-height: 37px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.02); cursor: pointer; font-size: .68rem; font-weight: 700; }.segmented button:hover, .segmented button.is-active { border-color: var(--accent); color: var(--text); background: rgba(255,113,11,.12); }.color-options { display: flex; gap: 11px; }.color-swatch { width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }.color-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }.color-swatch.white { background: #f5f7fa; }.color-swatch.green { background: var(--green); }.color-swatch.cyan { background: var(--cyan); }.color-swatch.yellow { background: var(--yellow); }.color-swatch.pink { background: var(--pink); }.color-swatch.red { background: var(--red); }.lab-foot { display: flex; align-items: center; margin-top: 39px; padding-top: 17px; border-top: 1px solid var(--border); color: var(--muted); font-size: .64rem; }.lab-foot .status-dot { width: 5px; height: 5px; margin-left: 2px; }.lab-foot .mono { margin-left: auto; color: var(--muted-2); font-size: .57rem; }.result-card { overflow: hidden; }.result-art { position: relative; height: 245px; overflow: hidden; }.result-art img { filter: saturate(.9); }.result-label { position: absolute; left: 17px; bottom: 15px; color: rgba(255,255,255,.7); font-size: .56rem; }.crosshair-result { width: 53px; height: 53px; }.crosshair-result i { width: 17px; }.crosshair-result i:nth-child(1), .crosshair-result i:nth-child(2) { top: 25px; }.crosshair-result i:nth-child(3), .crosshair-result i:nth-child(4) { left: 25px; }.crosshair-result b { left: 24px; top: 24px; }.result-body { padding: 23px 25px 26px; }.result-overline { display: flex; align-items: center; }.result-overline .eyebrow { font-size: .59rem; }.result-body h3 { margin: 13px 0 8px; font-size: 1.45rem; letter-spacing: -.04em; }.result-body p { max-width: 500px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }.result-meta { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .59rem; text-transform: uppercase; }.dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--text); }.dot-red { background: var(--red); }

.gallery { padding: 118px 0 128px; }.gallery-heading { margin-bottom: 45px; }.gallery-grid { display: grid; grid-template-columns: 1.42fr 1fr 1fr; gap: 13px; }.gallery-tile { position: relative; height: 325px; overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }.gallery-tile img { filter: saturate(.78) contrast(1.05); transition: transform .7s ease, filter .7s ease; }.gallery-tile:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }.gallery-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8,8,7,.82) 100%); pointer-events: none; }.gallery-tile figcaption { position: absolute; z-index: 1; right: 16px; bottom: 16px; left: 16px; display: flex; align-items: end; gap: 11px; }.gallery-tile figcaption > span { color: var(--accent-soft); font-size: .62rem; }.gallery-tile figcaption strong, .gallery-tile figcaption span:not(.mono) { display: block; }.gallery-tile figcaption strong { font-size: .76rem; }.gallery-tile figcaption span:not(.mono) { margin-top: 3px; color: var(--muted); font-size: .62rem; }

.guide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; padding-top: 127px; padding-bottom: 132px; border-top: 1px solid var(--border); }.guide-side p { margin: 25px 0 28px; color: var(--muted); font-size: .81rem; }.steps { border-top: 1px solid var(--border); }.step { display: grid; grid-template-columns: 40px 1fr 30px; gap: 20px; align-items: start; padding: 25px 0; border-bottom: 1px solid var(--border); }.step-no { color: var(--accent); padding-top: 3px; }.step h3 { margin: 0 0 7px; font-size: .97rem; }.step p { max-width: 470px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.75; }.step-arrow { color: var(--muted-2); font-size: 1.05rem; }.step:hover .step-arrow { color: var(--accent); }
.seo-band { padding-top: 119px; padding-bottom: 117px; border-top: 1px solid var(--border); }.seo-band-inner { max-width: 765px; }.seo-band h2 { font-size: clamp(2.25rem, 4.8vw, 4.7rem); }.seo-band p { max-width: 700px; margin: 28px 0 25px; color: var(--muted); font-size: .88rem; line-height: 1.9; }.keyword-row { display: flex; flex-wrap: wrap; gap: 7px; }.keyword-row span { color: var(--accent-soft); border-color: rgba(255,113,11,.35); background: rgba(255,113,11,.05); }
.resources { padding-top: 116px; padding-bottom: 123px; border-top: 1px solid var(--border); }.resources .gallery-heading > p { max-width: 400px; margin: 0 0 5px; color: var(--muted); font-size: .8rem; line-height: 1.8; }.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 45px; }.resource-card { min-height: 245px; padding: 23px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); transition: transform .2s ease, border-color .2s ease; }.resource-card:hover { transform: translateY(-3px); border-color: rgba(255,113,11,.62); }.resource-card .mono { color: var(--accent-soft); }.resource-card h3 { max-width: 280px; margin: 49px 0 10px; font-size: 1rem; line-height: 1.4; }.resource-card p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.7; }.resource-card strong { display: block; margin-top: 21px; color: var(--accent-soft); font-size: .68rem; }
.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; padding-top: 122px; padding-bottom: 128px; border-top: 1px solid var(--border); }.faq-list { border-top: 1px solid var(--border); }.faq details { border-bottom: 1px solid var(--border); }.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: .88rem; font-weight: 700; }.faq summary::-webkit-details-marker { display: none; }.faq summary span { color: var(--accent); font-size: 1.25rem; font-weight: 400; }.faq details[open] summary span { transform: rotate(45deg); }.faq details p { max-width: 600px; margin: -4px 0 22px; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.download-cta { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 118px; padding-bottom: 126px; text-align: center; border-top: 1px solid var(--border); }.cta-glow { position: absolute; top: 30px; left: 50%; width: min(460px, 100vw); height: 300px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle, rgba(255,113,11,.15), transparent 68%); }.cta-icon { position: relative; width: 67px; height: 67px; margin-bottom: 26px; border-radius: 16px; box-shadow: 0 15px 36px rgba(0,0,0,.35); }.download-cta h2 { position: relative; font-size: clamp(2.7rem, 5.2vw, 5rem); }.download-cta p { position: relative; max-width: 400px; margin: 23px 0 27px; color: var(--muted); font-size: .87rem; }.download-cta .button { position: relative; }.cta-note { margin-top: 24px; color: var(--muted-2); font-size: .58rem; }
.site-footer { padding: 30px 0 25px; border-top: 1px solid var(--border); }.footer-top { display: flex; align-items: center; justify-content: space-between; }.footer-links { display: flex; gap: 24px; color: var(--muted); font-size: .67rem; font-weight: 700; }.footer-links a:hover { color: var(--text); }.footer-bottom { display: flex; justify-content: space-between; margin-top: 30px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: .56rem; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 960px) { .hero { gap: 30px; }.hero h1 { font-size: clamp(3.3rem, 7vw, 5rem); }.setup-card { left: -10px; }.app-card { right: -8px; }.guide, .faq { gap: 45px; } }
@media (max-width: 760px) { .section-pad, .site-header, .site-footer { width: min(var(--max), calc(100% - 34px)); }.site-header { min-height: 72px; }.desktop-nav { display: none; }.brand-name { font-size: .67rem; }.site-header .button { min-height: 35px; padding-inline: 11px; font-size: .66rem; }.hero { display: block; min-height: 0; padding-top: 66px; padding-bottom: 60px; }.hero h1 { font-size: clamp(3.5rem, 15vw, 5.2rem); }.hero-lede { font-size: .86rem; }.hero-actions { flex-wrap: wrap; gap: 18px; }.hero-note { line-height: 1.8; }.hero-visual { min-height: 410px; margin-top: 43px; }.scene-frame { width: calc(100% - 30px); }.floating-card { transform: scale(.9); }.setup-card { left: -15px; top: 14%; }.app-card { right: -16px; bottom: 8%; }.coordinate { display: none; }.proof-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; padding-top: 17px; padding-bottom: 17px; }.proof-strip > div { display: block; }.proof-label { display: block; margin-top: 3px; }.intro { padding-top: 85px; padding-bottom: 84px; }.section-heading { display: block; }.intro-copy { margin: 25px 0 0; }.feature-grid { grid-template-columns: 1fr; margin-top: 34px; }.feature-card { min-height: 0; }.feature-icon { margin-top: 34px; }.setup-lab { padding-top: 80px; padding-bottom: 85px; }.lab-heading, .gallery-heading { display: block; }.lab-heading p { margin-top: 23px; }.lab-layout { grid-template-columns: 1fr; margin-top: 34px; }.lab-controls { padding: 20px; }.gallery { padding-top: 83px; padding-bottom: 86px; }.gallery-heading .text-link { margin-top: 21px; }.gallery-grid { grid-template-columns: 1fr; }.gallery-tile, .tile-large { height: 250px; }.guide { display: block; padding-top: 84px; padding-bottom: 88px; }.guide-side p { margin-top: 22px; }.steps { margin-top: 52px; }.seo-band { padding-top: 83px; padding-bottom: 84px; }.seo-band p { font-size: .82rem; }.faq { display: block; padding-top: 84px; padding-bottom: 86px; }.faq-list { margin-top: 44px; }.download-cta { padding-top: 86px; padding-bottom: 92px; }.footer-top { align-items: start; gap: 20px; }.footer-links { flex-wrap: wrap; justify-content: end; gap: 9px 16px; }.footer-bottom { display: grid; gap: 8px; margin-top: 26px; } }
@media (max-width: 760px) { .resources { padding-top: 83px; padding-bottom: 85px; }.resources .gallery-heading > p { margin-top: 22px; }.resource-grid { grid-template-columns: 1fr; margin-top: 32px; }.resource-card { min-height: 0; }.resource-card h3 { margin-top: 34px; } }
@media (max-width: 390px) { .hero h1 { font-size: 3.25rem; }.hero-actions .button { width: 100%; }.hero-actions .text-link { margin-left: 4px; }.floating-card { transform: scale(.82); }.setup-card { left: -23px; }.app-card { right: -26px; }.segmented button { font-size: .6rem; }.color-options { justify-content: space-between; } }