/* https:/www.wolfram.com/ai-access/


   developer:   tajudeen
   requires:    styles here...
   ========================================================================== */

/* ==========================================================================
   Common
   ========================================================================== */

:root {
   --herobg: #f7f7f7;
   --herocolor: #393939;
   --aibg: #CAE0EF;
   --h2color: #295771;
   --separator: #d6d6d6;
   --orange: #dd1100;
   --link: #51A6D7;
   --borderclr: #E9F4FF;
   --ai_bullet: #48A8DB;
   --p-color: #21203e;
   --color2: #2693D3;
   --color3: #6A6A6A;
   --color4: #1F8FCD;
   --color5: #2E7FB1;
}

body {
   font-family: 'Source Sans Pro', sans-serif;
}

.page-width {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.columns.b-hr {
    border-bottom: 1px solid #ccc;
    padding-bottom: 3rem;
}

.columns { display: flex }

.columns > div {
    flex: 1 1 50%;
}

/*.hide {
    display: none !important;
}

.show__900 {
    display: revert; !important;
}*/

#aiaccess ._left {
    padding-right: 1rem;
}

p.small-text {
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.5;
    max-width: 33rem;
}

p.large-text, p.small-text {
   color: #fff;
}

main h2 {
    font-size: 1.875rem;
    text-align: center;
    margin-bottom: 1.6875rem;
    color: #222;
    font-weight: 600;  
}

main h3 {
    font-size: 1.6rem;
    margin: 0rem 0 0.5rem;
    color: #222;
}

main h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.09px;
    color: #121212;
}

main h5 {
    font-style: italic;
    margin-bottom: .5rem;
}

main a {
    color: var(--orange);
}

main a:hover, main a:active {
    color: #f87818;
}

.list-square-bullets li:not(:last-of-type) {
    margin-bottom: .5rem;
}

.list-square-bullets li {
    display: flex;
    align-items: normal;
    text-align: left;
    font-size: 0.9375rem;
    color: #545454;
    line-height: 1.2;
}

.list-square-bullets li::before {
    content: "■";
    display: inline-block;
    font-size: 8px;
    line-height: 25px;
    margin-right: 9px;
    position: relative;
    color: #a3a3a3;
    margin-top: -3px;
}

.columns ._left ul {
    margin-bottom: 1.8rem;
}

.upgrade_note button {
    font-size: 0.9rem;
    color: var(--orange);
    font-weight: 600;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #D4D0D0;
    white-space: nowrap;
    padding: .4rem 1.5rem;
    cursor: pointer;
}

#aiaccess .upgrade_note {
    align-items: center;
    max-width: 25rem;
    gap: 0.8rem;
}

.upgrade_note > p {
    font-size: .875rem !important;
    font-style: italic;
    color: #121212;
    margin-bottom: 0 !important;
    line-height: 1.36;
}

.columns._img {
    border-bottom: 1px solid var(--separator);
    padding-bottom: 3rem;
}

/* ==========================================================================
   hero
   ========================================================================== */

main #hero h1 {
    color: #777;
    font-size: 2.375rem;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    margin-top: 3.75rem;
}

main #hero h1 > span {
    color: var(--orange);
    font-weight: 600;
}

#hero .columns ._left {
    padding: 3rem 1rem 2rem 6rem;
    flex: 1 1 60%;
}

main #hero {
    background-color: var(--herobg);
}

#hero p.large-text {
    font-size: 2.0625rem;
    padding: .5rem 2rem 2.65625rem;
    color: #444;
    font-weight: 400;
}

#hero button.upgrade {
    font-size: 1.1rem;
    padding: 0.5rem 2rem;
    margin-bottom: 1rem;
    background: #128ED1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

#hero ._right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

#hero .columns ._right {
    flex: 1 1 40%;
}

.left_note, .right_note {
    font-size: 0.875rem;
    font-style: italic;
    color: #21203e;
    text-align: left;
    position: relative;
    width: 222px;
}
.left_note {
    margin-right: -22px;
}

.right_note {
    margin-left: 1rem;
}

.left_note p, .right_note p {
    position: absolute;
    top: 47%;
}

.left_note p {
    max-width: 219px;
}

/* ==========================================================================
   Plan Highlights
   ========================================================================== */

#highlight {
    background: linear-gradient(to bottom, #e2e2e2 0%, #f1f1f1 100%);
    padding: 3rem 2rem 1rem;
}

#highlight .page-width {
    max-width: 64rem;
    padding-bottom: 1rem;
}

main .htlight h3 {
    margin-bottom: 1.2rem;
    font-size: 1.5625rem;
    font-weight: 600;
    margin-top: 1rem;
    color: #3b3b3b;
}

.htlight h3 span {
    color: var(--orange);
}

#highlight .wrapper {
    display: flex;
    justify-content: center;
} 

.htlight {
    background: #fff;
    border: 2px solid #D7D7D7;
    width: 33%;
    margin: 2rem 0;
    z-index: 0;
    padding: 2rem;
}

.htlight#hbasic {
    border-top-left-radius: 0.9375rem;
    border-bottom-left-radius: 0.9375rem;
}

.htlight#hresearch {
    border-top-right-radius: 0.9375rem;
    border-bottom-right-radius: 0.9375rem;
    padding-bottom: 0 !important;
}

.htlight#hpro {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.9375rem;
    border: 2px solid #f5b300;
    outline: 1px solid #f5b300;
    z-index: 1;
    min-width: 353px;
    padding: 2rem 4rem 1rem 4rem;
}

.htlight#hbasic, div#hresearch {
    max-width: 304.5px;
}

#hresearch ul.list-square-bullets {
    margin-bottom: 1rem;
}

.htlight#hbasic {
    padding: 2rem 1rem 2rem 2rem;
}

.htlight ul li {
    color: #555;
}

.htlight button {
    display: block;
    margin: 1rem 0;
}

.htlight#hpro button {
    margin: 2rem 0;
}

.htlight img {
    display: block;
    margin: 0 auto;
}


/* ==========================================================================
   AI Features
   ========================================================================== */

.card {
    background: #fff;
    padding: 3rem;
}

.card.ai_features {
    padding: 3rem 3rem 1rem 3rem;
}

main .card.ai_features > div {
    display: flex;
    border-bottom: 1px solid var(--separator);
    padding-bottom: 2rem;
}

.card.ai_features .bullets {
    flex: 1 1 25%;
}

.card.ai_features > p {
    padding: 0 2rem;
}

#ai-features .bullets:not(.bullets:last-of-type) {
    border-right: 1px solid var(--separator);
}

#ai-features .card#sub {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-bottom: 0;
    padding-top: 0 !important;
}

main h3+ p {
    font-size: 1.0625rem;
    margin-bottom: 2.3125rem;
}

.bullets .top {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: .8rem;
}

.bullets {
    padding: 1rem 2rem;
}

.bullets > p {
    font-size: 0.9375rem;
    color: #121212;
    letter-spacing: -0.08px;
}

.bullets .top p {
    line-height: 1.3;
}

.bullets .top > p {
    font-size: 1.125rem;
    color: #060606;
}

.bullets .top > p span {
    display: block;
}

.card.ai_features > p {
    padding: 0 2rem 1.9375rem;
    color: #222;
    font-style: italic;
    font-size: 1.125rem;
    text-align: center;
}

.card.b-radius h3+p {
    max-width: 31rem;
}

.card.b-radius ._right img {
    float: right;
}

.padding-r-2-5, #llm ._img ._right {
    padding-left: 2.5rem;
}

#llm ._left ul {
    max-width: 28rem;
}

#llm .columns > div {
    position: relative;
    padding-bottom: 12rem;
}

#llm .columns img {
    position: absolute;
    bottom: 0;
}

#llm .upgrade_note {
    gap: 0.8rem;
    margin-top: 3.96875rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--separator);
    padding-bottom: 3rem;
}

#aiaccess .columns {
    padding-bottom: 1rem;
    margin-top: 3rem;
}

main #ai-features .page-width {
    padding-bottom: 3rem;
}

#sub ._right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}


/* ==========================================================================
   Subscriptions
   ========================================================================== */

main #pricing h2 {
    font-size: 2rem;
}

section#pricing {
    background: #eeeeee;
    padding-bottom: 3rem;
}

.toggle-wrapper  {
    cursor: pointer;
    user-select: none;
    caret-color: transparent;
}

.toggle-wrapper > div {
    padding: 11px 17px;
    border: solid 2px #df000b;
    font-size: 1.2rem;
    position: relative;
    background: #fff;
}

.toggle-wrapper .toggle-btn {
    color: #df000b;
}

.toggle-wrapper .toggle-btn.active{
    background: #df000b;
    color: #fff;
}

/* ==========================================================================
   Pricing Block
   ========================================================================== */

#pricing .price-block {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.price-block > * {
    border: 1px solid var(--separator);
    position: relative;
    width: 33%;
    z-index: 0;
}

.price-block .plan {
    margin-top: 2rem;
    padding-bottom: 160px;
    background: #fff;
}

.price-block #pro, .price-block #pro_ {
    border: 2px solid #df000b;
    margin-top: 1.25rem;
    outline: 3px solid #df000b;
    z-index: 1;
}

.price-block #pro ._header, .price-block #pro_ .header {
    padding: 1.45rem;
    position: relative;
}

.price-block #pro ._header > div {
    position: absolute;
    left: 0;
    top: 0;
    padding: 9px;
    text-transform: uppercase;
    font-size: 0.8125rem;
    color: #fff;
    font-weight: 600;
}

.price-block ._header {
    background: #df000b;
    text-align: center;
    color: #fff;
    padding: 1.1rem;
}

.price-block ._header h4 {
    font-size: 1.8rem;
    margin-bottom: 0;
    color: #fff;
}

.price-block #basic ._header, .price-block #research ._header {
    background: #b90c14;
}

.vat-note {
    max-width: 100%;
    margin: .5rem 0.8rem .6rem;
    color: #636363;
    text-align: right;
    font-size: 0.8125rem;
}

.price-block ._content {
    margin-top: 1rem;
    text-align: center;
    margin: 0 auto 2rem auto;
}

.price-block .plan ._content > p {
    text-align: left;
    margin: 1rem 2.375rem 2rem;
    max-width: 20rem;
    color: #424242;
    margin-bottom: 1rem;
}

._price-tag.free, .price-block ._price-tag > div {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 50%;
}

._price-tag {
    display: flex; 
    padding: 1rem 0;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    min-height: 120px;
    padding-top: 0;
}

.price-block ._price-tag > div:first-of-type {
    /*border-right: 1px solid var(--separator);*/
    position: relative;
}

.price-block ._price-tag > div:first-of-type::after {
    content: "";
    position: absolute;
    top: 1rem;     
    bottom: 1rem;  
    right: 0;
    width: 1px;
    background: var(--separator);
}

.price-block ._price-tag.free > div {
    border-right: 0;
}

._price-tag > div > span {
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    color: #5b5b5b;
}

.price-block .plan_list ._features {
    padding: 2rem;
}

.price-block .plan_list {
    background: #F8F8F8;
    border-bottom: 8px solid #df000b;
    margin-bottom: 1rem;
}

.price-block .plan_list  ul li {
    position: relative;
    padding-left: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: #222;
    margin-bottom: 1rem;
}

.price-block .plan_list ul li::before {
    background-size: 23px 19px;
    content: "";
    height: 14px;
    left: 0;
    position: absolute;
    top: 3px;
    width: 47px;
}

.price-block .plan_list ul li.checked::before {
    background: url(../img/included.svg) no-repeat center center;
}

.price-block .plan_list ul li.unchecked::before {
    background: url(../img/not-included.svg) no-repeat center center;
    height: 32px;
    width: 35px;
    top: -4px;
    background-size: 27px 29px;
    left: 6px;
}

#pricing p.note {
    text-align: center;
    font-style: italic;
    margin-right: 0.625rem;
}

._price-tag .subscribe-btn a {
    color: #fff;
}

._price-tag .price .dollarsign {
    font-size: 1rem;
    vertical-align: 6px;
}

._price-tag .price .price {
    font-size: 1.6rem;
}

._price-tag .price .slash {
    font-size: 1.1rem;
    color: #636363;
}

.link-only {
    font-size: 13px;
    font-style: italic;
    margin: .4rem 0;
    min-height: 1.4rem;
    color: #636363;
}

._price-tag .subscribe-btn, button.outlined {
    background-color: var(--orange);
    padding: 0.41rem 1.4rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: .3rem;
    font-size: 1rem;
    font-weight: 600;
    border: solid 2px var(--color-primary);
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

._price-tag .outlined, button.outlined {
    border: 1px solid var(--orange);
    background: #fff;
}

.subscribe-btn:hover {
    background: #fe0000;
    color: #fff;
}

._price-tag .outlined:hover, ._price-tag .outlined:hover, button.outlined:hover, ._price-tag .outlined a:hover {
    background: #fe0000;
    color: #fff;
}

._price-tag .outlined a, button.outlined {
    color: var(--orange);
}

#pricing p.note a, #aiaccess .upgrade_note a, .price-tag > .price, #pricing p.note a,
.upgrade_note a, #sub a, .list-square-bullets li span span  {
    font-weight: 600;
}

._price-tag.free {
    padding-bottom: 2rem;
}

.load {
    display: flex;
    gap: 5px;
}

.load .square {
    height: auto;
    font-size: 1rem;
    color: #d1d1d1;
}

._price-tag.free > span {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}
#_country-picker-wrapper {
    margin: .5rem 0.8rem .6rem;
}


/* ==========================================================================
   For developers
   ========================================================================== */

#fordeveloper {
    padding: 3rem 0 3rem;
}

#fordeveloper .page-width {
    max-width: 975px;
}

.developers h3+p {
    font-size: 1.375rem;
    color: #060606;
    letter-spacing: -0.11px;
    font-weight: 600;
    margin-bottom: 12px;
}

.developers h3 {
    text-transform: uppercase;
}

#fordeveloper h5 {
    font-style: normal;
    text-transform: uppercase;
    color: #535353;
    font-size: 0.9375rem;
    margin-bottom: 0.9375rem;
}

#fordeveloper h4 {
    font-size: 1.4375rem;
    font-weight: 600;
    color: #454545;
    letter-spacing: -0.12px;
    max-width: 27rem;
}

.developers li {
    font-size: 0.9375rem;
    color: #535353;
    letter-spacing: -0.08px;
}

main .purple {  color: #7a5dba; }
main ._blue { color: #1ba0bd; }
main .dblue { color: #2c60b6; }

.developers ul a {
    display: block !important;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.09px;
    margin-bottom: 0.2rem;
}

.developers ul {
    max-width: 26rem;
}

.developers .list-square-bullets li {
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

.developers .list-square-bullets li:last-of-type {
    margin-bottom: 0;
}

.developers {
    border: solid 2px #d7d7d7;
    border-radius: 12px;
    padding: 1.8rem;
    background-image: url('/ai-access/img/llm-foundation-tools-wolfram-ai.svg'), linear-gradient(
        358deg,
        rgba(245, 252, 255, 1) 0%,
        rgba(230, 230, 230, 1) 0%,
        rgba(255, 255, 255, 1) 17%
      );
    background-repeat: no-repeat, no-repeat;
    background-position: calc(100% + 100px) center, center;
    background-size: auto 70%, cover;
}

.developers p.text {
    font-size: 0.9375rem;
    color: #121212;
    letter-spacing: -0.08px;
    max-width: 36rem;
}

.developers p.text.first {
    font-size: 1.0625rem;
    color: #121212;
    letter-spacing: -0.09px;
    margin-bottom: 1.5625rem;
}


/* ==========================================================================
   FAQ
   ========================================================================== */
#faq {
    padding: 0 3rem 3rem;
}

#faq h2 {
    text-align: left;
    border-top: 1px solid var(--separator);
    padding-top: 3rem;
}

#faq > div > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

#faq .item .answer {
    margin-bottom: 1rem;
    color: #404040;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

#faq .item .question {
    color: #333;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.222;
    margin-bottom: .25rem;
}

#student_block,
#standard_block {
    display: none;
}

#student_block.active,
#standard_block.active {
    display: block !important;
}


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .display-b__1200 { display: block !important; }
    #hero .columns ._left {
        padding-left: 0 !important;
    }
    .bullets {
        padding: 1rem .7rem;
    }
    .bullets .top > p {
        font-size: 1.1rem;
    }
    .bullets .top {
        gap: .5rem;
    }
    main .card.ai_features > div {
        margin-bottom: 2rem;
    }
    #llm .columns {
        gap: 1rem;
    }
    .htlight#hpro button { margin: 2rem auto; }
    .htlight { 
        padding: 1rem !important; 
        flex: 1 1 33%;
    }
    .htlight#hresearch .outlined { margin: 1rem auto; }
    .htlight#hpro { 
        min-width: unset;
        padding: 2rem !important; 
    }
    .highlight { padding: 3rem 1rem 1rem; }
    #highlight .page-width {
        max-width: 100%;
        padding: 1rem;
    }
    /* Pricing */
    .link-only { min-height: 2.1rem; }

}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #hero .columns { flex-direction: column; }
    #hero .columns ._left {
        padding-left: 0 !important;
        text-align: center;
        display: block;
    }
    #hero .page-width { padding: 0 1rem; }
    #hero .columns ._right {
        flex: 1 1 100% !important;
        display: block;
        margin: 0 auto;
    }
    #hero p.large-text {
        font-size: 1.5rem;
        padding: .5rem 1.5rem 2.2rem 1.5rem;
    }
    .card.ai_features { padding: 3rem 3rem 0rem 3rem; }
    #aiaccess .columns { margin-top: 0rem; }
    main .card.ai_features > div { margin-bottom: 0rem; }

    .left_note p, .right_note p {
        top: 18%;
    }
    section#pricing { padding-bottom: 0rem; }

    p.small-text { margin: 0 auto; }
    #pricing .price-block {
        flex-direction: column;
        max-width: 484px;
        margin: 0 auto;
        gap: 2rem 0;
    }
    .vat-note {
        font-size: 0.8125rem;
        max-width: 484px;
        font-size: 0.625rem;
        margin: .5rem auto;
    }
    .price-block > * { 
        width: 100%; 
        margin-top: 0 !important;
    }
    .price-block .plan ._content > p {
        text-align: center;
        margin: 1rem auto;
        max-width: 23rem;
    }
    .price-block ._content {
        margin: 0 auto;
        padding-top: 1rem;
    }
    #pricing p.note { 
        text-align:center; 
        padding: 1rem 0;
    }

    main .card.ai_features > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #ai-features .bullets:not(.bullets:last-of-type) {
         border-right: 0; 
    }
    .bullets .top > p { font-size: 1.2rem; }
    .bullets > p { font-size: 1.1rem; }
    #aiaccess .columns {
        flex-direction: column;
        gap: 1.687rem 0;
        padding-bottom: 0rem;
        margin-top: 0rem;
    }
    .card.b-radius ._right img { float: unset; }
    #llm .columns > div { padding-bottom: 6rem; }
    #llm .upgrade_note { padding-bottom: 3rem; }
    ._left.padding-b-4 {
        padding-bottom: 0 !important;
    }
    
    .htlight#hbasic img {
        width: 67px;
        height: 67px;
    }
    .htlight#hpro img {
        width: 119px;
        height: 65px;
    }
    .htlight#hresearch img {
        width: 122px;
        height: 65px;
    }
    main .htlight h3 { font-size: 18px; }
    #highlight .list-square-bullets li { font-size: 12px; }
    #highlight .list-square-bullets li::before { display: none; }
    .htlight#hpro { padding: 1rem !important; }
    #highlight .page-width { padding: 0; }
    .left_note, .right_note { margin-bottom: 2rem; }
    #llm .upgrade_note { margin-top: 1.875rem; }
    .columns ._left ul { margin-bottom: 1.875rem; }

    /* Pricing */
    .list-square-bullets li::before {
        font-size: 6px;
        margin-right: 7px;
        margin-top: -4px;
    }
    #_country-picker-wrapper, .toggle-wrapper {
        margin: .5rem auto !important;
        max-width: 484px;
    }
    .developers {
        background: linear-gradient(358deg, rgba(245, 252, 255, 1) 0%, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 17%);
    }

}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    .display-b__600 { display: block !important; }
    main #hero h1 > span > span { display: block !important; }
    main #hero h1 { margin-top: 2rem; }
    #hero .page-width { padding-bottom: 0; }

    /* ================================================= hero section */
    #hero p.large-text {
        text-align: center;
        max-width: 35rem;
        font-size: 1.6rem;
    }
    ._caption.flex { position: relative; }
    #ai-features .card { padding: 3rem 0 1.2rem 0; }
    .left_note {
        margin-right: -22px;
        left: 4%;
        top: 55%;
        margin-right: 0;
    }
    .left_note p { max-width: 23rem; }
    .left_note, .right_note {
        position: absolute;
        width: 295px;
    }
    .right_note {
        margin-left: 0;
        left: 4%;
        top: 34%;
    }
    .htlight#hpro { 
        padding: 2rem !important;
        order: 1;
        margin-top: 0;
    }
    main .htlight h3 { 
        text-align: center; 
        font-size: 2rem;
    }
    .htlight#hpro { 
        min-width: 100%;
    }
    #highlight { padding: 1rem 0 0 ; }
    .list-square-bullets li { font-size:1.2rem; }
    button.outlined {
        font-size:1.2rem; 
        padding: .85rem 2rem .85rem 2rem;
    }
    #aiaccess .upgrade_note, #llm ._left ul { max-width: 100%; }

    /* ================================================= Pods */
    #highlight .wrapper { 
        flex-direction: column; 
        max-width:400px;
        margin-left: auto;
        margin-right: auto;
    }
    .htlight#hbasic, div#hresearch { max-width: 100%; }
    .htlight {
        width: 100%;
        border-radius: 0.9375rem;
    }
    .htlight#hresearch button.outlined {
        margin-bottom: 3rem;
        display: block;
        margin: 0rem auto  3rem !important
    }
    .htlight#hresearch { order: 2; }
    .htlight#hbasic { 
        /*order: 3; */
        /*margin-top: 1rem;*/
        display: none;
    }
    .htlight#hpro button {
        display: block;
        margin: 2rem auto .25rem auto;
    }
    .htlight ul  {
        max-width:250px;
        margin:auto;
    }
    .htlight { padding: 2rem !important; }
    .page-width,#fordeveloper .page-width {
        max-width:400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ================================================= ai access */
    .card.ai_features { padding: 0 0 0 0; }
    .card.ai_features > p { padding: 0 0 1.2rem 0; }
    .page-width { padding: 2rem 1rem 3rem 1rem; }
    .bullets p, .bullets .top { margin-bottom: .2rem; }
    .bullets .top {
        flex-direction: column;
        align-items: flex-start;
    }
    #pricing p.note { margin: 1rem; }
    .card { padding: 0 0 1.2rem 0; }
    #aiaccess .columns { margin-top: 0; }
    main h3+ p {
        font-size: 1.23rem; 
        margin-bottom: 1.4rem;
    }
    .list-square-bullets li {
        font-size: 1.1rem; 
        padding-bottom: .5rem;
    }
    .columns ._left ul { margin-bottom: 0; }
    .upgrade_note p { font-size:1.1rem !important }
    main h4 {
        font-size: 1.23rem; 
        color: #535353;
    }
    .list-square-bullets li:not(:last-of-type) { margin-bottom: 0rem; }
    .padding-l-0__1200 { margin-top: 3rem !important; }
    #llm .upgrade_note { margin-top: 1rem; }
    #llm .columns { display: block; }
    #llm .columns img { position: relative; }
    #llm .columns > div { padding-bottom: 0rem; }
    main #llm h3, #sub h2 { margin-top: 1.8375rem; }
    main h5 {
        font-size:1.2rem; 
        color: #535353;
    }
    .margin-b-1 { font-size: 1.23rem; }
    #sub p { font-size: 1.23rem; }
    .padding-b-4 { padding-bottom: 2rem !important; }
    .columns {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
    }
    #sub ._right {
        display: block;
        flex-direction: unset;
        align-items: unset;
        justify-content: unset;
    }
    /* ================================================= pricing */
    main #pricing h2 { 
        font-size: 2.2rem; 
        margin-bottom:1rem;
    }
    .link-only { min-height: 1.4rem; }
    .padding-t-3 { padding-top: .5rem !important; }
    .price-block .plan { margin-top:0; }
    ._content p { 
        font-size:1.3rem; 
        max-width: 100% !important; 
        padding: 0 1.8rem 0 1.8rem;
    }
    ._price-tag.free { margin-bottom: 2rem; }
    ._price-tag div span { font-weight: 400; }
    ._price-tag .price .dollarsign { 
        font-size: 1.2rem; 
        vertical-align: 3px;
    }
    ._price-tag .price .price { font-size: 2rem; }
    ._price-tag .subscribe-btn {
        font-size:1.2rem; 
        padding: .5rem 1rem .5rem 1rem; 
        margin-top: 1.2rem;
    }
    .price-block #pro {
        margin-bottom: 2rem; 
        margin-top: 2rem;
    }
    .price-block #research {
        margin-bottom: 1rem; 
        margin-top: 1rem; 
    }
    ._price-tag { padding-bottom: 2rem; }
    #pricing .free .link-only { display: none; }
    ._price-tag.free > span {
        display: block;
        margin-bottom: 1rem;
    }
    #pricing .page-width { padding-bottom: 0; }
    section#pricing {
        background: #eeeeee;
        padding-bottom: 1rem;
    }
    #pricing p.note { margin: 0rem; }
    #_country-picker-wrapper, .toggle-wrapper {
        text-align:center;
    }
    .toggle-wrapper {
        justify-content: center;
        margin-bottom:1rem !important;
    }
    .toggle-wrapper > div {
        padding: 7px 14px;
    }


    /* ================================================= forDeveloper */
    #fordeveloper { 
        padding-bottom: 0;
        padding-top: 1rem; 
    }
    #fordeveloper h5 { font-size: 1.1rem; 
        line-height: 1.3;
    }
    #fordeveloper h4 {
        font-weight: 400; 
        font-size: 1.4rem; 
        line-height: 1.2;
    }
    .developers ul a {
        font-size: 1.3rem; 
        margin-bottom: .2rem;
    }
    .developers .list-square-bullets li { align-items: flex-start; }
    

    /* =================================================  Q&A */
    #faq { padding: .2rem .4rem .2rem .4rem; }
    #faq .item .question { 
        font-size: 1.3rem; 
        line-height: 1.35; 
        padding-bottom: .31rem;
    }
    #faq .item .answer { 
        font-size: 1.1rem; 
        color: #535353; 
    }
    #faq > div > div { grid-template-columns: 1fr; }
    #faq .page-width { padding: 1rem 1rem 3rem 1rem; }
    #highlight .page-width { padding: 1rem; }
    #highlight .list-square-bullets li::before { display: inline-block; }
    #highlight .list-square-bullets li { font-size: 1.1rem; }

    .htlight#hbasic img, .htlight#hpro img, .htlight#hresearch img  {
        width: revert-layer;
        height: revert-layer;
    }

}
/* styles for medium screens (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}