@font-face {
    font-family: 'AvenirNext';
    src: url('/https/intertabs.com/assets/font/AvenirNextRegular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNext';
    src: url('/https/intertabs.com/assets/font/AvenirNextMedium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNext';
    src: url('/https/intertabs.com/assets/font/AvenirNextDemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNext';
    src: url('/https/intertabs.com/assets/font/AvenirNextBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@keyframes breatheButton {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    60% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

:root {
    --red: rgb(255, 176, 163);
    --orange: rgb(255, 211, 167);
    --yellow: rgb(255, 235, 153);
    --green: rgb(187, 246, 198);
    --teal: rgb(178, 245, 245);
    --blue: rgb(168, 218, 255);
    --purple: rgb(212, 189, 255);
    --pink: rgb(255, 168, 197);

    --red-text: rgba(255, 119, 97);
    --red-transparent: rgba(255, 176, 163, 0.3);

    --primary: black;
    --primary-transparent: rgba(0, 0, 0, 0.05);
    --primary-transparent-2: rgba(0, 0, 0, 0.1);
    --primary-invert: white;
    --primary-invert-transparent: rgba(255, 255, 255, 0.8);
    --dark-gray: rgb(80, 80, 80);
    --secondary-gray: rgb(160, 160, 160);
    --tertiary-gray: rgb(190, 190, 190);
    --quaternary-gray: rgb(220, 220, 220);
    --quinary-gray: rgb(230, 230, 230);

    --light-background-1: rgb(242, 242, 242);
    --light-background-2: rgb(250, 250, 250);

    --active-color: rgb(248, 248, 248);

    --large-title: 80px;
    --subtitle: 30px;
    --body: 18px;
}

/* Lucide icons (lucide.dev, ISC license) are stroked outlines: color them with `color`, not `fill`.
   Their stroke-width="2" attribute is the default; a class rule's stroke-width overrides it. */
svg.lucide {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body {
    font-family: AvenirNext, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    color: var(--primary);
    background: var(--primary-invert);
}

a {
    text-decoration: none;
    color: var(--primary);
}

b {
    font-weight: 600;
}

button {
    font-family: AvenirNext, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.alert {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1000;
    transition: 0.25s ease-in-out;
}

.alert-on {
    opacity: 1;
    pointer-events: auto;
}

.alert-background {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-invert);
    opacity: 0.5;
}

.alert-box {
    width: calc(100% - 70px);
    max-width: 400px;
    padding: 15px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: var(--primary-invert);
    border: 1px solid var(--red-transparent);
    display: flex;
    flex-direction: column;
    align-items: center;

    opacity: 0;
    transform: translateY(50px);
    transition: 0.25s ease-in-out;
}

.alert-on .alert-box {
    opacity: 1;
    transform: translateY(0px);
}

.alert-box-title {
    font-size: 24px;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    color: var(--primary);
}

.alert-box-content {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
    color: var(--primary);
}

.alert-box-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
}

.alert-box-button-primary {
    all: unset;
    width: calc(100% - 24px);
    cursor: pointer;
    padding: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
    text-align: center;
    color: var(--primary);
    border: 2px solid var(--primary);
    background-color: transparent;
    transition: 0.25s ease-in-out;
}

.alert-box-button-primary:hover {
    background-color: var(--primary);
    color: var(--primary-invert);
}

.alert-box-button-secondary {
    all: unset;
    width: calc(100% - 28px);
    cursor: pointer;
    padding: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    text-align: center;
    color: var(--primary);
    background-color: var(--primary-transparent);
    transition: 0.25s ease-in-out;
}

.alert-box-button-secondary:hover {
    background-color: var(--primary-transparent-2);
}

header {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: 0.25s ease-in-out;
    background-color: var(--primary-invert);
    z-index: 100;
}

header:after {
    content: '';
    position: absolute;
    bottom: 0;

    height: 3px;
    background-color: var(--red-transparent);
    width: calc(100%);
}

.header-section-mobile {
    position: fixed;
    top:  calc(var(--header-height) + 10px);
    right: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 16px;
    opacity: 0;
    transform-origin: top right;
    transform: scale(0.7);
    pointer-events: none;
    transition: 0.25s ease-in-out;

    background-color: var(--primary-invert);
    /* Above the header and everything on the page. */
    z-index: 104;
}

.header-mobile-button, .header-mobile-button-primary {
    width: calc(100% - 24px);
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
    cursor: pointer;
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 10px;
    transition: 0.25s ease-in-out;
}

.header-mobile-button-primary {
    display: flex;
    width: fit-content;
    background-color: var(--primary);
    color: var(--primary-invert);
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 10px;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: calc(100% - 40px);
    max-width: 960px;
    padding: 20px;
    padding-top: 8px;
    padding-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
}

.header-tabs, .header-tabs-mobile {
    display: flex;
}

.header-tabs-mobile {
    display: none;
}

.header-tab {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 8px;
    border-radius: 12px 12px 0px 0px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 16px;
    margin-right: 8px;
    background-color: var(--red-transparent);
}

/* The curves where the tab flares into the header line: each square is tab-coloured except for a
   quarter circle cut from its top outer corner. Transparent, not painted over, so nothing beside
   the tab is covered (it moves over its neighbours during page transitions). */
.tab-left-square,
.tab-right-square {
    position: absolute;
    bottom: 0px;
    left: -14px;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 0 0, transparent 13.5px, var(--red-transparent) 14px);
}

.tab-right-square {
    left: auto;
    right: -14px;
    background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--red-transparent) 14px);
}

.header-logo {
    display: flex;
    height: 21px;
}

.header-tab-logo {
    display: flex;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
}

.header-tab-button, .header-button, .header-button-secondary {    
    display: flex;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
    cursor: pointer;

    padding: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-radius: 10px;
    background-color: transparent;
    margin-right: 8px;

    transition: 0.25s ease-in-out;

    z-index: 103;
}

.header-tab-button:hover, .header-button-secondary:hover, .header-mobile-button:hover {
    background-color: var(--primary-transparent);
}

.header-buttons {
    display: flex;
    align-items: center;
}

.more-button {
    display: none;
    margin-right: 0%;
    padding-left: 11px;
    padding-right: 11px;
}

.more-icon {
    width: 17px;
    height: 17px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;

    position: relative;
}

.more-top, .more-middle, .more-bottom {
    position: absolute;
    width: 15px;
    border: 1px solid var(--primary);
    border-radius: 1px;
    background-color: var(--primary);
    transition: 0.25s ease-in-out;
}

.more-top {
    top: 3px;
}

.more-middle {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.more-bottom {
    bottom: 3px;
}

.more-icon-selected .more-top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.more-icon-selected .more-middle {
    width: 0px;
}

.more-icon-selected .more-bottom {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.header-button {
    color: var(--primary-invert);
    background-color: var(--primary);
    margin-right: 0%;

    outline: 1px solid transparent;
}

.header-button:hover, .header-mobile-button-primary:hover {
    animation: breatheButton 1.5s ease-in-out infinite;
}

/* Icon sizes and stroke widths (in Lucide's 24-unit grid) match the SF Symbols the site used before
   Lucide: the glyph's drawn size and line thickness. Lucide draws each glyph inside padding, so the
   negative margins keep each icon taking up only the space its glyph did. */
.get-started-icon, .right-chevron-icon {
    color: var(--primary);
    /* The buttons are flex rows that stretch their items; centered, the icon sits where the old
       stretched SF Symbol's glyph did. */
    align-self: center;
}

.get-started-icon {
    width: 22px;
    height: 22px;
    margin: -5.5px;
    margin-left: 2.5px;
    stroke-width: 2;
}

.right-chevron-icon {
    width: 24px;
    height: 24px;
    margin: -5px -8px -5px 0;
    stroke-width: 2;
}

.get-started-button, .dashboard-button {
    color: var(--primary);
    background-color: transparent;
    padding: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    border: 2px solid var(--primary);
    margin-right: 0%;

    outline: 1px solid transparent;
}

.get-started-button:hover, .dashboard-button:hover { 
    animation: none;
    background-color: var(--primary-transparent);
}

.get-started-button:hover .get-started-icon {
    animation: getStartedArrowAnimation 1.2s ease-in-out infinite;
}

.dashboard-button:hover .right-chevron-icon {
    animation: rightChevronAnimation 1.2s ease-in-out infinite;
}

@keyframes getStartedArrowAnimation {
    10% {
        transform: translateY(0px);
        opacity: 1;
    }
    49% {
        transform: translateX(10px) translateY(-10px);
        opacity: 0;
    }
    51% {
        transform: translateX(-10px) translateY(10px);
        opacity: 0;
    }
    90% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes rightChevronAnimation {
    10% {
        transform: translateY(0px);
        opacity: 1;
    }
    49% {
        transform: translateX(10px);
        opacity: 0;
    }
    51% {
        transform: translateX(-10px);
        opacity: 0;
    }
    90% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.dashboard-section, .pricing-section, .features-page-section, .privacy-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 40px);
    max-width: 1000px;
    padding: 20px;
    min-height: calc(100vh - 40px - var(--header-height));
    margin-top: var(--header-height);
}

.pricing-section {
    padding-bottom: 40px;
}

.pricing-description {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 10px;
    margin-bottom: 60px;
    /* Same size as the home page subtitle (.v2-subtitle). */
    font-size: calc(var(--subtitle) * 0.8);
    line-height: 1.35;
    font-weight: 400;
    color: var(--primary);
    text-align: left;
}

.pricing-plans {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
}

.pricing-plan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 50px);
    padding: 24px;
    padding-top: 20px;
    border-radius: 20px;
    background-color: var(--primary-invert);
    border: 1px solid var(--red-transparent);
}

.pricing-plan-premium {
    padding: 22px;
    padding-top: 18px;
    border: 3px solid var(--primary);
}

.pricing-plan-title {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    color: var(--primary);
}

.pricing-plan-price {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pricing-plan-price-value {
    font-size: 40px;
    font-weight: 500;
}

.pricing-plan-price-description {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 7px;
    color: var(--secondary-gray);
}

.pricing-plan-button-primary, .pricing-plan-button-secondary {
    cursor: pointer;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: auto;
    border-radius: 10px;
    background-color: var(--primary);
    color: var(--primary-invert);

    transition: 0.25s ease-in-out;
}

.pricing-plan-button-primary:hover {
    animation: breatheButton 1.5s ease-in-out infinite;
}

.pricing-plan-button-secondary {
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: var(--primary-invert);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.pricing-plan-button-secondary:hover {
    background-color: var(--primary);
    color: var(--primary-invert);
}

.title-section {
    width: calc(100% - 80px);
    max-width: 960px;
    min-height: calc(100vh - 80px - var(--header-height));
    padding: 40px;
    margin-top: var(--header-height);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.title-image,
.title-background {
    position: absolute;
    top: calc(var(--header-height) - 3px);
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height) + 3px);
    z-index: -1;
}

.title-background {
    background: linear-gradient(180deg, var(--red-transparent) 30%, transparent 100%);
    z-index: -2;
}

.title-image {
    height: 100%;
    max-height: 900px;
    background-image: url('/https/intertabs.com/assets/title-image.png');
    background-size: auto calc(100% - var(--header-height));
    background-position: 100% 3px;
    background-repeat: no-repeat;
}

.title-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.title {
    width: 60%;
    font-size: var(--large-title);
    margin-top: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
    text-align: left;
}

.dashboard-title, .pricing-title, .features-page-title, .privacy-title {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 60px;
    margin-bottom: 60px;
    font-size: calc(var(--large-title) * 0.8);
    font-weight: 700;
    color: var(--primary);
    text-align: left;
}

.features-page-title {
    text-align: center;
}

.pricing-title {
    margin-bottom: 0%;
}

.privacy-container {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 24px;
}

.dashboard-tabs {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.dashboard-tab {
    display: flex;
    flex-direction: column;
    width: calc(100% - 22px);
    gap: 20px;
    padding: 10px;
    padding-top: 8px;
    border-radius: 20px;
    margin-bottom: auto;
    background-color: var(--primary-invert);
    border: 1px solid var(--red-transparent);
}

.dashboard-tab-title {
    padding: 10px;
    padding-bottom: 0%;
    font-size: 20px;
    font-weight: 500;
    color: var(--primary);
}

.dashboard-tab-content {
    width: calc(100% - 20px);
    padding: 10px;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-tab-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.dashboard-tab-item-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
}

.dashboard-tab-item-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-gray);
}

.dashboard-upgrade, .dashboard-manage, .dashboard-manage-activation {
    position: relative;
    cursor: pointer;
    width: calc(100% - 44px);
    padding: 12px;
    margin: 8px;
    margin-top: 0%;
    border-radius: 10px;
    color: var(--primary);
    border: 2px solid var(--primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(45deg, transparent 50%, var(--primary-transparent) 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;

    transition: 0.25s ease-in-out;
}

.dashboard-manage-activation {
    cursor: auto;
}

.dashboard-upgrade:hover, .dashboard-manage:hover {
    background-position: 100% 0%;
}

.dashboard-upgrade-title, .dashboard-manage-title {
    width: calc(100% - 4px);
    padding-left: 2px;
    padding-right: 2px;
    font-size: 16px;
    font-weight: 500;
}

.dashboard-upgrade-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dashboard-upgrade-price {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
}

.dashboard-upgrade-price-value {
    font-size: 30px;
    font-weight: 500;
}

.dashboard-upgrade-price-description {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--secondary-gray);
}

.dashboard-upgrade-price-from {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-left: 2px;
    margin-top: 4px;
    color: var(--primary);
}

.dashboard-upgrade-features, .pricing-plan-features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-upgrade-feature, .pricing-plan-feature {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
}

.get-activation-code-button {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    width: 22px;
    height: 22px;
    transition: 0.25s ease-in-out;
}

.get-activation-code-button:hover {
    opacity: 0.5;
}

.dashboard-activation-codes {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.dashboard-activation-code {
    pointer-events: auto;
    display: flex;
    gap: 8px;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8.5px;
    border-radius: 5px;
    background-color: var(--light-background-1);
}

.delete-icon {
    cursor: pointer;
    width: 22px;
    height: 22px;
    margin: -4.5px;
    stroke-width: 2;
    color: var(--secondary-gray);
    transition: 0.25s ease-in-out;
}

.delete-icon:hover {
    opacity: 0.5;
}

.activation-code-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.activation-code-input input {
    width: 100%;
    padding: 10px;
    padding-top: 0%;
    padding-bottom: 0%;
    border-radius: 5px;
    outline: none;
    border: none;
    background-color: transparent;
    color: var(--primary);
    font-size: 16px;
    font-weight: 400;
    font-family: AvenirNext, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.activation-code-input button {
    cursor: pointer;
    padding: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
    border: 2px solid var(--primary);
    color: var(--primary);
    background-color: transparent;
    font-size: 16px;
    font-weight: 400;
    font-family: AvenirNext, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    transition: 0.25s ease-in-out;
}

.activation-code-input button:hover {
    background-color: var(--primary);
    color: var(--primary-invert);
}

.checkmark-icon {
    width: 19px;
    height: 19px;
    margin: -3.5px;
    stroke-width: 1.75;
    color: var(--primary);
}

.success-intertabs-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.right-arrow-icon {
    width: 27px;
    height: 27px;
    margin: -5.25px -3.5px;
    stroke-width: 2;
    color: var(--primary);
}

.go-icon {
    width: 32px;
    height: 32px;
    stroke-width: 1.75;
    color: var(--primary);
    position: absolute;
    /* Leaves the glyph's 16px box 16px from the corner, and grows from the glyph's corner. */
    top: 8px;
    right: 8px;
    transform-origin: 70.83% 29.17%;

    transition: 0.25s ease-in-out;
}

#upgrade-go-icon {
    right: 8px;
    top: 8px;
}

#manage-go-icon {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.dashboard-upgrade:hover #upgrade-go-icon {
    transform: scale(1.2);
}

.pricing-plan-basic .pricing-plan-features .pricing-plan-feature {
    color: var(--secondary-gray);
}

.pricing-plan-basic .pricing-plan-features .pricing-plan-feature .checkmark-icon {
    color: var(--secondary-gray);
}

/* .pricing-plan-premium .pricing-plan-features .pricing-plan-feature {
    color: var(--primary);
}

.pricing-plan-premium .pricing-plan-features .pricing-plan-feature .checkmark-icon {
    color: var(--primary);
} */

.title-mobile {
    display: none;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.title-descriptions {
    font-weight: 300;
    color: var(--primary);
}

.subtitle {
    width: calc(60% - 4px);
    font-size: var(--subtitle);
    color: var(--primary);
    margin-top: calc(var(--subtitle) * 0.5);
    margin-left: 2px;
    margin-right: 2px;
    text-align: left;
}

.title-buttons {
    display: flex;
    gap: 10px;
}

.title-button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 10px 12px;
    border-radius: 12px;
}

.download-icon {
    width: 20px;
    height: 20px;
}

.title-note {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 2px;
    margin-right: 2px;
    text-align: left;
    font-weight: 300;
    color: var(--primary);
    opacity: 0.3;
}

.video-section {
    padding: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 40px);
    aspect-ratio: 16 / 9;
    max-width: 1000px;
}

.video-section iframe {
    border-radius: 12px;
}

main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 40px);
    max-width: 1000px;
}

.heading-line {
    font-size: calc(var(--large-title) * 0.8);
    font-weight: 600;
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 80px;
    margin-bottom: 20px;
}

.features-section {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 80px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.feature-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
}

.feature-item-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.feature-item-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    margin-top: 20px;
    margin-bottom: 20px;
}

.feature-item-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
}

.feature-item-icon {
    fill: var(--primary);
    height: 36px;
    width: 36px;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.feature-item-description {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}

.loading {
    z-index: 2;
}

.error {
    opacity: 0;
    z-index: 1;
}

.success {
    opacity: 0;
    z-index: 1;
}

.loading, .error, .success {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 40px);
    width: calc(100% - 40px);
    padding: 20px;
    background-color: var(--primary-invert);

    transition: 0.25s ease-in-out;
}

.success-title {
    width: 100%;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.success-description {
    width: 100%;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
}

.bottom-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 80px;
    margin-bottom: 60px;
}

.bottom-section-content {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

.bottom-section-title {
    font-size: calc(var(--large-title) * 0.6);
    font-weight: 500;
}

.bottom-section-image {
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: calc(100% - 40px);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: var(--primary-invert);
}

/* One line; on narrow screens it scrolls sideways, running to the footer's edges while keeping
   the footer's padding at both ends. Aligned like the section above it: left on wide screens,
   centered once that section centers (700px). */
.footer-badges {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    align-self: stretch;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.footer-badges::-webkit-scrollbar {
    display: none;
}

/* Exactly as tall as the badges: block images, so no line-box gap under them. (The links are
   flex items, so already blocks; their display is left to the light/dark rules.) */
.badge-ph, .badge-sf, .badge-fa, .badge-tt {
    display: flex;
    flex-shrink: 0;
}

.footer-badges img {
    display: block;
}

.footer-badges img {
    /* As tall as the store buttons (.title-button). */
    height: 42px;
    width: auto;
}

.badge-sf-light, .badge-tt-light {
    display: flex;
}

.badge-sf-dark, .badge-tt-dark {
    display: none;
}

/* Product Hunt's badge is 250×54; shown at the others' height (0.75×). */
.footer-badges .badge-ph img {
    width: calc(42px * 250 / 54);
}

/* Scrolls sideways on narrow screens, like the badges row. */
.footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    align-self: stretch;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.footer-links::-webkit-scrollbar {
    display: none;
}

.footer-link, .footer-email {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: var(--secondary-gray);

    transition: 0.25s ease-in-out;
}

.footer-email {
    display: flex;
    align-items: center;
    gap: 4px;
}

.email-go-icon {
    width: 20px;
    height: 20px;
    margin: -5px;
    margin-bottom: -4px;
    stroke-width: 1.75;
    color: var(--secondary-gray);
    transition: 0.25s ease-in-out;
}

.footer-email:hover {
    color: var(--primary);
}

.footer-link:hover {
    color: var(--primary);
}

.footer-email:hover .email-go-icon {
    color: var(--primary);
}

.footer-divider {
    width: 100%;
    height: 1px;
    border-radius: 1px;
    background-color: var(--quinary-gray);
}

.footer-copyright {
    width: 100%;
    font-size: 14px;
    text-align: left;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Chrome's button on every browser but Safari, which gets its own (BROWSER_DETECT_SCRIPT sets
   the body's class). Edge uses the Chrome extension. */
.safari-button, .edge-button {
    display: none;
}

body.Safari .chrome-button {
    display: none;
}

body.Safari .safari-button {
    display: flex;
}

@media (max-width: 1200px) {
    .title {
        display: none;
    }

    .title-mobile {
        display: block;
    }

    .subtitle {
        width: 100%;
    }

    .title-content {
        align-items: center;
    }

    .subtitle,.title-note {
        text-align: center;
    }

    .title-section {
        justify-content: flex-start;
    }

    .title-image {
        height: calc(100% - var(--header-height));
        max-height: 100%;
        max-width: 750px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url('/https/intertabs.com/assets/title-image-mobile.png');
        background-size: 100% auto;
        background-position: 100% 100%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1040px) {
    .pricing-plans {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1000px) {
    :root {
        --large-title: 76px;
        --subtitle: 26px;
    }
}

@media (max-width: 900px) {
    :root {
        --large-title: 72px;
        --subtitle: 24px;
        --body: 17px;
    }
}

@media (max-width: 800px) {
    :root {
        --large-title: 68px;
        --body: 16px;
    }

    .title-section {
        width: calc(100% - 80px);
        min-height: calc(100vh - 80px - var(--header-height));
        padding: 40px;
    }
}

@media (max-width: 700px) {
    :root {
        --large-title: 64px;
        --body: 16px;
    }

    .header-logo {
        gap: 8px;
    }

    .header-logo img {
        /* margin-left: 4px; */
        margin-bottom: 2px;
        width: 33px;
        height: 33px;
    }

    .header-title {
        font-size: 28px;
    }

    .features-section {
        gap: 60px;
        margin-top: 60px;
    }

    .feature-item {
        flex-direction: column;
        gap: 40px;
    }

    .feature-item-content,
    .feature-item-image {
        width: 100%;
        /* Include the 20px side padding in that width, or the text column overflows a phone. */
        box-sizing: border-box;
    }

    .feature-item-title {
        font-size: 30px;
    }

    .feature-item-icon {
        height: 30px;
        width: 30px;
    }

    .feature-item-description {
        font-size: 20px;
    }

    .feature-item:nth-child(even) {
        flex-direction: column;
        align-items: center;
    }

    .dashboard-title, .pricing-title, .pricing-description, .features-page-title, .privacy-title {
        text-align: center;
    }

    .dashboard-tabs {
        flex-direction: column;
    }

    .pricing-plans {
        grid-template-columns: 1fr;
    }

    .pricing-plan {
        width: calc(100% - 46px);
    }        

    .bottom-section {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .bottom-section-content {
        align-items: center;
    }

    .bottom-section-title {
        font-size: calc(var(--large-title) * 0.6);
        text-align: center;
    }
    
    .bottom-section-image {
        max-width: 250px;
    }

    footer {
        align-items: center;
    }

    /* "safe": centered until the row overflows, then from the left, so every item can be
       scrolled to. */
    .footer-badges, .footer-links {
        justify-content: safe center;
    }

    .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .title-image {
        background-image: url('/https/intertabs.com/assets/title-image-mobile-2.png');
        background-size: 100% auto;
        background-position: 100% 100%;
        background-repeat: no-repeat;
    }

    .header-section {
        width: calc(100% - 30px);
        padding-right: 10px;
    }

    .header-tabs {
        display: none;
    }

    .header-tabs-mobile {
        display: flex;
    }

    .header-button {
        display: none;
    }

    .more-button {
        display: flex;
    }

    #signout-button {
        display: none;
    }
}

/* The marketing header has just Home and Pricing, which fit down to 380px, so it stays as on
   desktop until then; narrower, it uses the menu like the dashboard header. */
@media (min-width: 380px) and (max-width: 600px) {
    .header-two-tabs .header-tabs {
        display: flex;
    }

    .header-two-tabs .header-tabs-mobile,
    .header-two-tabs .more-button {
        display: none;
    }

    .header-two-tabs .header-button {
        display: flex;
        white-space: nowrap;
    }
}

@media (max-width: 350px) {
    :root {
        --large-title: 48px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --red: rgb(213, 62, 79);
        --orange: rgb(249, 126, 77);
        --yellow: rgb(255, 221, 107);
        --green: rgb(171, 221, 164);
        --teal: rgb(102, 194, 166);
        --blue: rgb(51, 136, 189);
        --purple: rgb(166, 118, 255);
        --pink: rgb(255, 82, 140);

        --red-text: rgb(213, 62, 79);
        --red-transparent: rgba(213, 62, 79, 0.5);

        --primary: white;
        --primary-transparent: rgba(255, 255, 255, 0.1);
        --primary-invert: rgb(20, 20, 20);
        --primary-invert-transparent: rgba(20, 20, 20, 0.8);
        --dark-gray: rgb(155, 155, 155);
        --secondary-gray: rgb(115, 115, 115);
        --tertiary-gray: rgb(85, 85, 85);
        --quaternary-gray: rgb(55, 55, 55);
        --quinary-gray: rgb(45, 45, 45);

        --light-background-1: rgb(33, 33, 33);
        --light-background-2: rgb(25, 25, 25);

        --active-color: rgb(27, 27, 27);
    }

    .badge-sf-light, .badge-tt-light {
        display: none;
    }

    .badge-sf-dark, .badge-tt-dark {
        display: flex;
    }
}

/* ─── Home page (2.0) ──────────────────────────────────────────────────────── */

.v2-home {
    /* Same content width as the rest of the site (main: 1000px). */
    display: block;
    margin-top: var(--header-height);
    padding-top: 0;
}

.v2-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
}

.v2-title {
    /* Same size and spacing as the features page title (.features-page-title). */
    margin: 60px 0 0;
    font-size: calc(var(--large-title) * 0.8);
    font-weight: 700;
    color: var(--primary);
}

.v2-subtitle {
    max-width: 680px;
    margin: 18px 0 0;
    font-size: calc(var(--subtitle) * 0.8);
    line-height: 1.35;
    color: var(--primary);
}

.v2-buttons {
    justify-content: center;
}

/* Hero: the popup with tab group chips (styled like Chrome's) floating around it. */
.v2-stage {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 20px;
}

.v2-popup.v2-hero-popup {
    position: relative;
    z-index: 1;
    width: 320px;
}

.v2-chips {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* A group: its chip, plus (for open groups) a loose tab centered underneath it. */
.v2-group {
    position: absolute;
    left: var(--x);
    top: var(--y);
}

.v2-right {
    left: auto;
    right: var(--x);
}

.v2-chip,
.v2-tab {
    display: block;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.v2-chip {
    position: relative;
    z-index: 1;
    color: black;
    background-color: var(--chip);
    animation: v2-chip-in 0.7s ease-out both;
}

/* An open group pulses when its tab lands. Each runs on the same 16s loop as its tab. */
.v2-chip-open {
    animation: v2-chip-in 0.7s ease-out both, v2-chip-pulse 16s ease-in-out var(--delay) infinite;
}

/* A loose tab that appears, slides toward its group's chip, and fades and shrinks just before it
   arrives, ending centered under the chip. "both" keeps it hidden until its turn. */
.v2-tab {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    color: var(--primary);
    background-color: var(--primary-invert);
    border: 1px solid var(--quaternary-gray);
    opacity: 0;
    animation: v2-tab-join 16s ease-in-out var(--delay) infinite both;
}

@keyframes v2-chip-in {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

/* The chip bounces softly while the tab disappears into it (12%-14.5%). */
@keyframes v2-chip-pulse {
    0%, 12% { scale: 1; }
    13% { scale: 1.08; }
    13.9% { scale: 0.97; }
    14.5%, 100% { scale: 1; }
}

/* Each tab's turn on the 16s loop (1% = 0.16s), in three stages:
   1. 0-5%: appears at its start position and rests a moment.
   2. 5-11%: moves in one smooth motion until it's half under the chip, tilting slightly as it
      goes, then stops briefly.
   3. 12-14.5%: moves to the chip's center, shrinking and fading out, all at once. */
@keyframes v2-tab-join {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--from-x) * var(--travel, 1)), calc(-50% + var(--from-y) * var(--travel, 1))) rotate(0deg) scale(0.85);
        animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2);
    }
    2.5%, 5% {
        opacity: 1;
        transform: translate(calc(-50% + var(--from-x) * var(--travel, 1)), calc(-50% + var(--from-y) * var(--travel, 1))) rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
    }
    11%, 12% {
        opacity: 1;
        transform: translate(calc(-50% + var(--from-x) * var(--travel, 1) * 0.25), calc(-50% + var(--from-y) * var(--travel, 1) * 0.25)) rotate(var(--tilt)) scale(1);
        animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5);
    }
    14.5%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--tilt)) scale(0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-chip,
    .v2-chip-open {
        animation: none;
    }

    .v2-tab {
        display: none;
    }
}

.v2-strip {
    display: block;
    width: 100%;
    height: auto;
}

.v2-popup {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--quinary-gray);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    background-color: var(--primary-invert, white);
}

/* Before and after in one spot: both share a grid cell, the after image fades in and out. */
.v2-swap {
    display: grid;
    align-items: start;
}

.v2-swap > *,
.v2-swap-after {
    grid-area: 1 / 1;
}

.v2-swap-after {
    animation: v2-swap 6s ease-in-out infinite;
}

@keyframes v2-swap {
    0%, 30% { opacity: 0; }
    45%, 85% { opacity: 1; }
    100% { opacity: 0; }
}

/* The strips are transparent, so the after image doesn't hide the before one: fade the before
   one out too. It leaves once the after one is mostly in and comes back before it goes, so the
   tabs both share don't dim mid-swap. */
.v2-strip-bleed .v2-swap > .v2-strip {
    animation: v2-swap-before 6s ease-in-out infinite;
}

@keyframes v2-swap-before {
    0%, 38% { opacity: 1; }
    46%, 84% { opacity: 0; }
    92%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-swap-after {
        animation: none;
        opacity: 1;
    }

    .v2-strip-bleed .v2-swap > .v2-strip {
        animation: none;
        opacity: 0;
    }
}

.v2-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.v2-section {
    margin-top: 110px;
}

.v2-step {
    --card-pad: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--card-pad);
    /* The badge color at 25%, the same tint the popup uses to highlight the current group, so each
       card matches the highlighted row in its screenshot. */
    border-radius: 20px;
    background-color: color-mix(in srgb, var(--step-color) 25%, var(--primary-invert));
}

.v2-step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* Each card sets its own --step-color, in rainbow order down the page. */
.v2-step {
    --step-color: var(--red);
}

/* In the text color on a square of the card's color, like the extension's welcome page icons
   (.welcome-text-icon). */
.v2-step-icon {
    width: 26px;
    height: 26px;
    padding: 9px;
    stroke-width: 1.75;
    border-radius: 10px;
    color: var(--primary);
    background-color: var(--step-color);
}

.v2-step-title {
    margin: 14px 0 0;
    font-size: 28px;
    font-weight: 500;
    color: var(--primary);
}

.v2-step-description {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.45;
    color: var(--primary);
    opacity: 0.7;
}

.v2-step-image {
    width: 300px;
    max-width: 100%;
}

/* A tab bar screenshot along the bottom of its card, edge to edge and clipped by the card's
   corners. The images have their tabs in the middle of a long stretch of empty tab bar, so the
   sides can be cropped freely. The tabs (--c0 to --c1, as fractions of the image's width) are
   sized to span the card's text, from padding to padding, and line up with it on the left. On
   narrow cards that would make them too small, so they stay at least --strip-min tall and
   overflow the card: to the right, or with .v2-strip-end to the left, keeping the tabs' right end
   in view. --aspect is the image's width / height. */
.v2-strip-bleed {
    container-type: inline-size;
    display: flex;
    overflow: hidden;
    margin-left: calc(-1 * var(--card-pad));
    margin-right: calc(-1 * var(--card-pad));
    margin-bottom: calc(-1 * var(--card-pad));
}

.v2-strip-bleed .v2-swap {
    flex-shrink: 0;
    --strip-h: max(var(--strip-min, 32px), calc((100cqw - 2 * var(--card-pad)) / (var(--aspect) * (var(--c1) - var(--c0)))));
    margin-left: calc(var(--card-pad) - var(--strip-h) * var(--aspect) * var(--c0));
}

.v2-strip-end .v2-swap {
    margin-left: calc(100cqw - var(--card-pad) - var(--strip-h) * var(--aspect) * var(--c1));
}

.v2-strip-bleed .v2-strip {
    width: auto;
    max-width: none;
    height: var(--strip-h);
}

@media (max-width: 800px) {
    .v2-step-row {
        grid-template-columns: 1fr;
    }

    /* Chips stay around the popup on small screens, overlapping its edges. */
    .v2-stage {
        margin-top: 36px;
        padding-top: 10px;
    }

    .v2-chip,
    .v2-tab {
        font-size: 13px;
        padding: 5px 10px;
    }

    .v2-group {
        --travel: 0.5;
    }

    /* Hug the popup's edges: chips overlap its sides without covering the middle. */
    .v2-group {
        left: calc(var(--x) * 0.3);
    }

    .v2-right {
        left: auto;
        right: calc(var(--x) * 0.3);
    }

    .v2-popup.v2-hero-popup {
        width: 240px;
    }
}

@media (max-width: 600px) {
    .v2-subtitle,
    .pricing-description {
        font-size: 18px;
    }

    .v2-step {
        --card-pad: 22px;
    }

    .v2-step-title {
        font-size: 23px;
    }

    .v2-section {
        margin-top: 70px;
    }

}

/* A wide step after a row of two (step 4 after 2 and 3). */
.v2-step-row + .v2-step {
    margin-top: 20px;
}

/* In a card whose neighbor is taller, keep the tab bar on the card's bottom edge. */
.v2-step .v2-strip-bleed {
    margin-top: auto;
}

/* The strips' tab bar is transparent so the card's tint shows through. Their tab titles are
   dark, so on a dark card the bar gets a light tint of its own. */
@media (prefers-color-scheme: dark) {
    .v2-step .v2-strip-bleed {
        background-color: color-mix(in srgb, var(--step-color) 25%, white);
    }
}

/* Narrow phones: no chips, just the popup at the full content width. */
@media (max-width: 440px) {
    .v2-chips {
        display: none;
    }

    .v2-popup.v2-hero-popup {
        width: 100%;
    }

    /* The cards' popup screenshots too (the tab strips already span the card). */
    .v2-step-image {
        width: 100%;
    }
}

/* Scroll-in animation (public/appear.js): marked elements fade up into place, like the hero
   chips (v2-chip-in). An animation rather than a transition, so it doesn't replace the
   elements' own hover transitions. */
.js-appear [data-appear] {
    opacity: 0;
}

.js-appear [data-appear].appeared {
    opacity: 1;
    animation: v2-chip-in 0.5s ease-in-out var(--appear-delay, 0s) both;
}

/* The logo at the bottom also turns back from 90° as it comes in. */
.js-appear .bottom-section-image[data-appear].appeared {
    animation:
        v2-chip-in 0.5s ease-in-out var(--appear-delay, 0s) both,
        v2-logo-spin 0.5s ease-in-out var(--appear-delay, 0s) both;
}

@keyframes v2-logo-spin {
    from { rotate: 90deg; }
    to { rotate: 0deg; }
}

/* Page transitions: moving between pages on the site animates instead of flashing to a new page.
   The header stays still, the active tab slides and reshapes into its spot on the next page (Home
   to Pricing to Dashboard), and the page underneath crossfades with a small lift. Browsers without
   cross-page view transitions just load the page as before; visitors who turn off motion too. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

header {
    view-transition-name: site-header;
}

/* Only one .header-tab shows at a time (the desktop or the mobile row), so the name stays unique. */
.header-tab {
    view-transition-name: active-tab;
}

/* Over the header, which is its own layer above the page. */
::view-transition-group(site-header) {
    z-index: 100;
}

::view-transition-group(active-tab) {
    z-index: 101;
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tabs differ in width, not height: stretch both snapshots to the moving box instead of letting
   their height follow their width. */
::view-transition-old(active-tab),
::view-transition-new(active-tab) {
    height: 100%;
    animation-duration: 0.35s;
}

::view-transition-old(root) {
    animation: page-out 0.2s ease-in both;
}

::view-transition-new(root) {
    animation: page-in 0.3s ease-out 0.05s both;
}

@keyframes page-out {
    to { opacity: 0; }
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* Apple's badge, as tall as the store buttons (.title-button) and the footer badges. */
.app-store-badge {
    display: flex;
    margin-top: 22px;
}

.app-store-badge img {
    display: block;
    height: 42px;
    width: auto;
}

/* The bottom section's picture of the apps: the Mac menu bar list, the iPhone in front of it
   fading out at the bottom, and the logo's ring of characters behind. Left and width are
   fractions of the pictures' 692 width in the mockup, top of their 833 height. */
.apps-stage {
    position: relative;
    flex-shrink: 0;
    /* At most half the section beside the text. */
    width: 50%;
    max-width: 430px;
    aspect-ratio: 692 / 833;
}

.apps-stage img {
    position: absolute;
    height: auto;
}

.apps-ring {
    left: calc(259 / 692 * 100%);
    top: 0;
    width: calc(433 / 692 * 100%);
}

/* Bordered and shadowed like the popup screenshots (.v2-popup). */
.apps-mac {
    left: 0;
    top: calc(146 / 833 * 100%);
    width: calc(365 / 692 * 100%);
    border-radius: 12px;
    border: 1px solid var(--quinary-gray);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    background-color: var(--primary-invert);
}

.apps-phone {
    left: calc(137 / 692 * 100%);
    top: calc(285 / 833 * 100%);
    width: calc(360 / 692 * 100%);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
    -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 74%);
    mask-image: linear-gradient(to bottom, black 45%, transparent 74%);
}

/* The ring turns in like the logo used to (v2-logo-spin). */
.js-appear .apps-ring[data-appear].appeared {
    animation:
        v2-chip-in 0.5s ease-in-out var(--appear-delay, 0s) both,
        v2-logo-spin 0.5s ease-in-out var(--appear-delay, 0s) both;
}

/* Narrow screens: the text spans the full content width, and the picture is inset so it doesn't
   fill the screen. The title's second line stays whole. */
@media (max-width: 700px) {
    .bottom-section-content {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .bottom-section-title {
        font-size: min(calc(var(--large-title) * 0.6), 8.6vw);
    }

    .apps-stage {
        width: calc(100% - 80px);
    }
}