applet, object, iframe, h4, h5, h6, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

::-moz-selection { /* Code for Firefox */
    color: var(--clr-white);
    background: var(--clr-text-dark);
}

::selection {
    color: var(--clr-white);
    background: var(--clr-text-dark);
}

.reduced-motion .reveal {
    opacity: 1 !important;
    transform: none !important;
}

.mobile-optimized-svg {
    display: block;
    shape-rendering: crispEdges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/****************************************************
-- @FONTFACE
****************************************************/

@font-face {
    font-family: 'Calibre';
    src: url('fonts/Calibre-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibre';
    src: url('fonts/Calibre-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibre';
    src: url('fonts/Calibre-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibre';
    src: url('fonts/Calibre-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/****************************************************
-- VARS
****************************************************/

:root {
    /* COLOURS */
    /* Brand colours */
    --clr-white: #FFFFFF;
    --clr-purple: #6833FF;
    --clr-pink: #FF56D0;

    /* Text */
    --clr-text-dark: #262629;
    --clr-text-light: #828287;
    --clr-text-lightest: #919191;

    /* Call to actions */
    --clr-text-hover: #9f9f9f;
    --clr-cta-primary: #1B30F1;
    --clr-cta-secondary: #D5DAFF;
    --clr-cta-secondary-hover: #bfc6fd;

    /* Other */
    --clr-bg: #F7F8FA;
    --clr-card-stroke: #EDEEF3;
    --clr-input-hover: #EBECEF;

    /* PADDING */
    --pad-200px: 12.5rem;
    --pad-150px: 9.375rem;
    --pad-100px: 6.25rem;
    --pad-80px: 5rem;
    --pad-60px: 3.75rem;
    --pad-40px: 2.5rem;
    --pad-32px: 2rem;
    --pad-20px: 1.25rem;
    --pad-12px: 0.75rem;

    /* BORDER RADIUS */
    --rad-30px: 1.875rem;
}

body {
    color: var(--clr-text-dark);
}

/****************************************************
-- GSAP ANIMATION STYLES
****************************************************/

.br {
    display: inline;
}

.reveal {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease-out, transform .2s ease-out;
}

body.no-scroll {
    overflow: hidden;
}

/****************************************************
-- GSAP ANIMATION PRECURSORS
****************************************************/

.hero-copy .main-subline,
.hero-copy .early-access {
    opacity: 0;
}

/****************************************************
-- TEXT STYLES
****************************************************/

h1 {
    font-size: 8.125rem;
    letter-spacing: -0.038em;
    line-height: 6.75rem;
    font-weight: 500;
    word-break: normal;
}

h2 {
    font-size: 5rem;
    letter-spacing: -0.0375em;
    font-weight: 500;
    line-height: 4.5rem;
}

h3 {
    font-size: 3.75rem;
    letter-spacing: -0.042em;
    color: var(--clr-text-dark);
    font-weight: 500;
}

h4 {
    font-size: 2.25rem;
    letter-spacing: -0.05em;
    color: var(--clr-text-dark);
    font-weight: 400;
}

h5 {
    font-size: 1.5rem;
    letter-spacing: -0.05em;
    color: var(--clr-text-dark);
    font-weight: 500;
}

a {
    text-decoration: none;
}

.body-copy {
    font-size: 1.675rem;
    letter-spacing: -0.035em;
    font-weight: 400;
    line-height: 2.1rem;
    color: var(--clr-text-light);
}

.large-body-copy {
    font-size: 2rem;
    color: var(--clr-text-dark);
    font-weight: 500;
    letter-spacing: -0.038em;
}

/****************************************************
-- BUTTON STYLES
****************************************************/

.btn-primary,
.btn-secondary,
button {
    font-family: inherit;
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-position: 100% 0;
}

/* Secondary */
.btn-secondary {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.5rem;
    display: inline-flex;
    line-height: 1;
    padding: 1rem 1.25rem 1.05rem;
    background: var(--clr-cta-secondary);
    color: var(--clr-cta-primary);
    border-radius: 0.75em;
    border: none;
    transition: 0.3s ease-in-out;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--clr-cta-secondary-hover);
}


/****************************************************
-- FORM INPUT STYLES
****************************************************/

/* FORM BASE */
#early-access-form form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    font-family: inherit;
}

/* Generic input style */
input[type="text"],
input[type="email"] {
    flex: 1;
    padding: 0.8rem 1rem;
    font-size: 1.5rem;
    font-family: inherit;
    letter-spacing: -0.022rem;
    border-radius: 0.75em;
    border: none;
    background: var(--clr-card-stroke);
    color: var(--clr-text-dark, #fff);
    outline: none;
    line-height: 1;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible {
    outline: none;
    background: var(--clr-input-hover);
}

input[type="text"]:hover,
input[type="email"]:hover {
    background: var(--clr-input-hover);
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--clr-card-stroke) inset !important;
    -webkit-text-fill-color: var(--clr-text-dark, #fff) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Placeholder */
input::placeholder {
    color: #babac4;
}

/* Shared button transition */
.btn-primary {
    transition: background 0.3s ease, color 0.3s ease;
}

/* Submitting state */
.btn-primary.submitting {
    background: #6833FF; /* same deep purple */
    color: var(--clr-white);
}

/* Submitted (success) state */
.btn-primary.submitted {
    background: #06F68E; /* success green */
    color: var(--clr-text-dark);
}

/* Spinner styling */
.btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Better internet subscribe form */
#better-internet .buttons form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
}

#better-internet .buttons input[type="email"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

#better-internet .buttons .btn-primary {
    flex: 0 0 auto;
    width: auto;
}


/****************************************************
-- NAV
****************************************************/

#navbar .mobile-only {
    display: none;
}

#navbar.scrolled {
    background: #F7F8FA;
}

#navbar.hidden {
    transform: translateY(-100%);
}

#navbar .logo {
    justify-self: start;
    z-index: 1001;
}

#navbar .links {
    justify-self: center;
    margin: 0 auto;
}

#navbar .btn-secondary {
    justify-self: end;
}

#navbar .links {
    display: flex;
    gap: 1.5rem;
}

#navbar .links a {
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--clr-text-lightest);
    letter-spacing: -0.03em;
    text-decoration: none;
    position: relative;
    transition: transform 0.2s ease-in-out;
}

#navbar .links a:hover {
    color: var(--clr-text-hover);
}

#navbar .links a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--clr-text-dark);
    bottom: -8px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

#navbar .links a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

#navbar .links a.active {
    color: var(--clr-text-dark);
}

/****************************************************
-- HERO SECTION
****************************************************/

#hero .main-bg {
    display: none;
}

#hero .hero-image {
    width: 100%;
    height: auto;
}

#hero .hero-image picture,
#hero .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* ensures image fills container without stretching */
}

#hero .early-access {
    max-width: 600px;
    margin: 0 auto;
}

#hero .hero-copy h1 {
    margin-bottom: 30px;
}

#hero .hero-copy p  {
    max-width: 1000px;
    margin: 0 auto var(--pad-60px);
}


/****************************************************
-- PROBLEM & SOLUTION CARDS
****************************************************/

#info-cards {
    text-align: center;
    max-width: 1540px;
    margin: 0 auto;
    padding: var(--pad-200px) var(--pad-100px) var(--pad-100px);
}

#info-cards h3 {
    margin-bottom: var(--pad-12px);
    color: var(--clr-text-lightest);
}

#info-cards h2 {
    max-width: 1240px;
    margin: 0 auto var(--pad-100px);
}

#info-cards .all-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
    column-gap: var(--pad-40px);
    row-gap: var(--pad-100px);
    justify-content: space-between;
    text-align: center;
}

#info-cards .all-cards .card {
    flex: 1 1 0;
    min-width: 0;
}

#info-cards .all-cards .card .card-image {
    border-radius: var(--rad-30px);
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 32px;
}

#info-cards .all-cards .card .card-image img {
    width: 100%;
    height: auto;
    display: block;
}

#info-cards .all-cards .card .large-body-copy {
    margin-bottom: var(--pad-20px);
}

/****************************************************
-- ORGANIZE SECTION
****************************************************/

#organize {
    max-width: 1540px;
    margin: 0 auto;
    padding: var(--pad-100px);
}

#organize .copy-video {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem;
    align-items: center;
}

#organize h3 {
    margin-bottom: var(--pad-40px);
}

#organize .copy-video .copy-container {
    grid-column: 1 / span 6;
}

#organize .copy-video .copy-container p:first-of-type {
    margin-bottom: var(--pad-40px);
}

#organize .copy-video .video {
    grid-column: 7 / span 6;
    border-radius: var(--rad-30px);
    overflow: hidden;
}

#organize .video img {
    width: 100%;
    height: auto;
    display: block;
}

/****************************************************
-- BEAUTIFUL CONTENT SECTION
****************************************************/

#beautiful-content {
    max-width: 1540px;
    margin: 0 auto;
    padding: var(--pad-100px);
}

#beautiful-content h2 {
    text-align: center;
    max-width: 960px;
    margin: 0 auto var(--pad-100px);
}

.bento-grid {
    gap: var(--pad-40px);
    row-gap: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "big-top   big-top   sm-top-1"
    "big-top   big-top   sm-top-2"
    "sm-bot-1  big-bot   big-bot"
    "sm-bot-2  big-bot   big-bot";
    max-width: 100%;
    margin: 0 auto;
}

/* Generic item box */
.bento-item {
    position: relative;
    width: 100%;
    border-radius: var(--rad-30px);
    overflow: hidden;
}

/* Maintain square shape regardless of grid row heights */
.bento-item::before {
    content: "";
    display: block;
    padding-top: 100%;
}

/* Optional content wrapper if you place images/text */
.bento-item > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Area assignments */
.big-top {
    grid-area: big-top;
    background-image: image-set(url("../images/bento-cards/Large-1-980.avif") type("image/avif") 1x, url("../images/bento-cards/Large-1-1960.avif") type("image/avif") 2x, url("../images/bento-cards/Large-1-980.webp") type("image/webp") 1x, url("../images/bento-cards/Large-1-1960.webp") type("image/webp") 2x, url("../images/bento-cards/Large-1-980.png") type("image/png") 1x, url("../images/bento-cards/Large-1-1960.png") type("image/png") 2x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sm-top-1 {
    grid-area: sm-top-1;
    background-image: image-set(url("../images/bento-cards/Small-1-460.avif") type("image/avif") 1x, url("../images/bento-cards/Small-1-920.avif") type("image/avif") 2x, url("../images/bento-cards/Small-1-460.webp") type("image/webp") 1x, url("../images/bento-cards/Small-1-920.webp") type("image/webp") 2x, url("../images/bento-cards/Small-1-460.png") type("image/png") 1x, url("../images/bento-cards/Small-1-920.png") type("image/png") 2x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sm-top-2 {
    grid-area: sm-top-2;
    background-image: image-set(url("../images/bento-cards/small-2-460.avif") type("image/avif") 1x, url("../images/bento-cards/small-2-920.avif") type("image/avif") 2x, url("../images/bento-cards/small-2-460.webp") type("image/webp") 1x, url("../images/bento-cards/small-2-920.webp") type("image/webp") 2x, url("../images/bento-cards/small-2-460.png") type("image/png") 1x, url("../images/bento-cards/small-2-920.png") type("image/png") 2x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/****************************************************
-- SPACES SECTION
****************************************************/

#spaces {
    max-width: 1540px;
    margin: 0 auto;
    padding: var(--pad-100px) var(--pad-100px) var(--pad-200px);
}

#spaces .spaces-image {
    max-width: 1170px;
    margin: 0 auto;
}

#spaces-image img {
    width: 100%;
    height: auto;
}

#spaces h2 {
    text-align: center;
    max-width: 960px;
    margin: 0 auto var(--pad-100px);
}

/****************************************************
-- USE CASES SECTION
****************************************************/

#many-use-cases {
    max-width: 1540px;
    margin: 0 auto;
    padding: var(--pad-20px);
    text-align: center;
}

#many-use-cases h3 {
   margin-bottom: var(--pad-80px);
}

#many-use-cases .text-cards,
#key-focus-areas .explore-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: var(--pad-40px);
    row-gap: var(--pad-100px);
}

#many-use-cases .text-cards .card,
#key-focus-areas .card {
    width: 100%;
    padding: 0;
    background: none;
}

#many-use-cases .text-cards .card .card-image,
#key-focus-areas .card-image {
    border-radius: var(--rad-30px);
    overflow: hidden;
    margin-bottom: var(--pad-40px);
}

#many-use-cases .text-cards .card .large-body-copy,
#key-focus-areas .card .large-body-copy {
    margin-bottom: var(--pad-12px);
}

#many-use-cases .text-cards .card img,
#key-focus-areas .card img {
    width: 100%;
    height: auto;
    display: block;
}


/****************************************************
-- BETTER INTERNET SECTION
****************************************************/

#better-internet {
    text-align: center;
    padding: var(--pad-200px) var(--pad-200px) 0 var(--pad-200px);
    max-width: 1540px;
    margin: 0 auto;
}

#better-internet h2 {
    margin: 0 auto var(--pad-32px);
    max-width: 800px;
}

#better-internet .body-copy {
    margin-bottom: var(--pad-60px);
}

#better-internet .buttons {
    display: flex;
    justify-content: center;
    gap: var(--pad-20px);
    margin: 0 auto;
    max-width: 600px;
}

#better-internet .animated-images {
    width: 100%;
    display: block;
    margin: var(--pad-100px) auto 0;
}

#better-internet .animated-images img {
    width: 100%;
    height: auto;
    display: block;
}

/****************************************************
-- FOOTER
****************************************************/

#footer {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: var(--pad-60px);
    position: relative;
}

#footer .footer-copy {
    font-size: 1rem;
    letter-spacing: -0.03125em;
    color: var(--clr-text-dark);
}

#footer .footer-logo {
    width: 120px;
    height: auto;
}

#footer .footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

#footer .footer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: var(--pad-200px) 0;
}

#footer .footer-content h3 {
    margin: var(--pad-60px) auto var(--pad-32px);
}

#footer .extras {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
}

#footer .extras .socials {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}


/****************************************************
-- GET EARLY ACCESS PAGE
****************************************************/

/* Remove hero section spacing on early access page */
#hero:has(+ #early-access-form) {
    padding: 0;
    margin: 0;
}

#early-access-form {
    max-width: 960px;
    margin: var(--pad-60px) auto 0;
    padding: 0 var(--pad-100px);
}

#early-access-form .btn-primary {
    margin-bottom: 60px;
    width: 100%;
    justify-content: center; /* centers text horizontally */
    text-align: center;      /* ensures proper text alignment */
}


#early-access-form .copy-container {
    width: 100%;
    margin-bottom: var(--pad-32px);
}

#early-access-form h1 {
    font-size: 5rem;
    letter-spacing: -0.0375em;
    font-weight: 500;
    line-height: 4.5rem;
    text-align: left;
    width: 100%;
}


/* Form styles */
#access-form input[type="text"],
#access-form input[type="email"] {
    width: 100%;
}

#access-form form {
    gap: 0;
}

#access-form  .form-option-container {
    margin-bottom: var(--pad-32px);
    position: relative;
}

#access-form .form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#access-form .form-label .form-label-text {
    font-size: 1.5rem;
    letter-spacing: -0.035em;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--clr-text-dark);
}

#access-form .required-text {
    font-size: 1.25rem;
    color: var(--clr-text-light);
    letter-spacing: -0.035em;
}

/* Pill selection */
.pill-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e5e6eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    gap: 0.75rem;
}

.pill:hover {
    border-color: #bbbec7;
}

/* Group image + name together */
.pill-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pill-content img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.pill-content span {
    color: var(--clr-text-dark);
    font-size: 20px;
    letter-spacing: -0.03em;
}

/* hide native checkbox */
.pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* custom SVG checkboxes */
.check-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* default: show unchecked, hide checked */
.check-icon--checked {
    display: none;
}

/* swap icons when checked */
.pill input[type="checkbox"]:checked ~ .check-icon--unchecked {
    display: none;
}

.pill input[type="checkbox"]:checked ~ .check-icon--checked {
    display: inline-block;
}

/* change border when checkbox is selected */
.pill:has(input[type="checkbox"]:checked) {
    border: 1px solid var(--clr-text-dark);
}

/* No image pill definitions */
.pill-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pill-content span {
    color: var(--clr-text-dark);
    font-size: 20px;
    letter-spacing: -0.03em;
}

.required-text.error {
    color: #ff4d4d !important;
    background: #f6e4e4;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}

/****************************************************
-- MAX-WIDTH: 1200PX
****************************************************/

@media screen and (max-width: 1200px) {

    /* Font sizes */
    h1 {
        font-size: 6rem;
        line-height: 5.5rem;
    }

    h2 {
        font-size: 4rem;
        line-height: 4rem;
    }

    h3 {
        font-size: 3rem;
    }

    #hero .hero-copy h1 {
        margin-bottom: var(--pad-12px);
    }

    .hero-copy {
        padding: var(--pad-100px) 0;
    }

    #info-cards {
        padding: var(--pad-150px) var(--pad-150px) var(--pad-100px)
    }

    #hero .main-subline {
        font-size: 1.6rem;
        line-height: 1.8rem;
        padding: 0 var(--pad-32px);
    }

    /* Problem and solution section */
    #info-cards .all-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pad-32px);
        row-gap: var(--pad-100px);
    }

    #organize h3 {
        max-width: 800px;
        margin: 0 auto var(--pad-40px);
    }

    /* Organize */
    #organize .copy-video {
        display: block;
        text-align: center;
    }

    #organize .copy-video .body-copy {
        margin-bottom: var(--pad-60px)
    }

    /* Beautiful content */
    .bento-grid {
        gap: var(--pad-32px);
    }

    /* Many uses cases */
    #many-use-cases .text-cards,
    #key-focus-areas .explore-cards {
        grid-template-columns: repeat(2, 2fr);
        gap: var(--pad-32px)
    }

    #many-use-cases .text-cards .card {
        text-align: center;
    }

    #many-use-cases .text-cards .card p {
        max-width: 80%;
        margin: 0 auto;
    }

    #many-use-cases .text-cards .card .large-body-copy {
        margin: 0 auto var(--pad-20px);
    }

    /* Better internet */
    #better-internet .animated-images {
        width: 100%;
    }
}



/****************************************************
-- MAX-WIDTH: 768PX
****************************************************/

@media screen and (max-width: 768px) {

    /* Hero copy */
    .hero-copy {
        padding: var(--pad-100px) 0 var(--pad-80px);
    }

    #hero .hero-copy h1 {
        margin-bottom: var(--pad-20px);
    }

    /* Padding reduction */
    #info-cards,
    #organize,
    #beautiful-content,
    #many-use-cases,
    #better-internet {
        padding: var(--pad-80px) var(--pad-40px);
    }

    #early-access-form {
        padding: 0 var(--pad-40px);
    }

    .reveal {
        opacity: 1;
        transform: translateY(5px);
        transition: opacity .2s ease-out, transform .2s ease-out;
    }

    /* Font sizes */
    h2 {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    #navbar {
        /*display: grid;*/
        padding: 10px 20px;
        /*grid-template-columns: 1fr auto auto;*/
        /*column-gap: 2rem;*/
    }

    #navbar .mobile-only {
        display: block;
    }

    #navbar .links a:hover::before {
        transform: scaleX(0);
    }

    /* Organize */
    #organize .copy-video {
        display: block;
        text-align: center;
    }

    #organize .copy-video .body-copy {
        margin-bottom: var(--pad-60px)
    }

    /* Many uses cases */
    #many-use-cases .text-cards,
    #key-focus-areas .explore-cards {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--pad-60px);
    }

    #many-use-cases .text-cards .card p {
        max-width: 100%;
    }
}

button.btn-primary {
    font-weight: 500; /* match your link button weight */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    appearance: none; /* remove Safari native bolding */
}

/****************************************************
-- MAX-WIDTH: 640PX
****************************************************/

@media screen and (max-width: 640px) {

    /* Logo */
    #navbar .logo {
        width: 30px;
        height: auto;
    }

    #navbar .logo img {
        width: 100%;
        height: auto;
    }

    /* Word break for animate-h1 */
    .br {
        display: block;
    }

    /* Text styles */
    h1 {
        font-size: 4.5rem;
        line-height: 4.5rem;
    }

    h2 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .animate-h1 {
        line-height: 3.3rem;
    }

    /* Many uses cases */
    #many-use-cases .text-cards,
    #key-focus-areas .explore-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Button styles */

    /* Problems & solutions */
    #info-cards {
        padding: var(--pad-60px) var(--pad-20px) var(--pad-40px);
    }

    #organize,
    #beautiful-content,
    #many-use-cases,
    #better-internet{
        padding: var(--pad-40px) var(--pad-20px);
    }

    #early-access-form {
        padding: 0 var(--pad-20px);
    }

    #info-cards h2,
    #beautiful-content h2,
    #many-use-cases h3 {
        margin-bottom: var(--pad-40px);
    }

    #better-internet .buttons {
        flex-direction: column;
        align-items: center;
    }

    /* text styles */
    .body-copy {
        font-size: 1.4rem;
        letter-spacing: -0.035em;
        font-weight: 400;
        line-height: 1.65rem;
        color: var(--clr-text-light);
    }

    .large-body-copy {
        font-size: 1.85rem;
        color: var(--clr-text-dark);
        font-weight: 500;
        letter-spacing: -0.038em;
    }

    #info-cards .all-cards .card .large-body-copy,
    #many-use-cases .text-cards .card .large-body-copy {
        margin-bottom: var(--pad-12px);
    }

    /* Problem and solution section */
    #info-cards .all-cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--pad-32px);
        row-gap: var(--pad-60px);
    }

    .bento-grid {
        gap: var(--pad-20px);
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
      "big-top  big-top"
      "sm-top-1 sm-top-2"
      "sm-bot-1 sm-bot-2"
      "big-bot  big-bot";
    }

    /* Better internet */
    #better-internet .animated-images {
        width: 100%;
    }

}

/****************************************************
-- HERO SECTION (copy + animation)
****************************************************/

@media (max-width: 419px) {
    #hero .hero-copy h1 {
        font-size: 3.5rem;
    }

    #hero .hero-copy {
        padding: var(--pad-150px) var(--pad-20px) var(--pad-80px)
    }
}