/* LoTyde site v9.15.11 */
/* LoTyde v9.15.7-draft — desktop layout (loaded only at min-width:1024px via the
   <link media> attribute, so phones and tablets keep the existing layout exactly). */

/* ---------- 1. Wider containers ---------- */
:root{--wrap-max:1280px;--wrap-gutter:36px;--wrap:min(var(--wrap-max),calc(100% - 2*var(--wrap-gutter)))}
body .container,body header .container,body footer .container{width:var(--wrap)!important;max-width:var(--wrap-max)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
body.pg-care-plan .container,body.pg-terms .container{padding:0}
body .shop-grid{max-width:none}
body .cash-notice{max-width:960px}


/* ---------- 2. Calmer vertical rhythm ---------- */
body main section.section{padding-top:60px;padding-bottom:60px}
body main section.section-block{padding-top:52px;padding-bottom:52px}
body main .page-hero{padding:56px 0 52px}

/* ---------- 3. Page heroes: centered (Logan, Oct 27: the split title-left / intro-right layout looked off) ---------- */
body:not(.pg-home) main .page-hero .container{display:block;text-align:center}
body:not(.pg-home) main .page-hero .container>*{margin-left:auto;margin-right:auto;max-width:720px;text-align:center}
body:not(.pg-home) main .page-hero .container>.hero-title{max-width:none}
body:not(.pg-home) main .page-hero .hero-title h1{margin:0 auto;max-width:22ch;text-align:center}
body:not(.pg-home) main .page-hero .hero-title .eyebrow{margin-left:auto;margin-right:auto}
body:not(.pg-home) main .page-hero .container>.hero-title+*{margin-top:16px}
body:not(.pg-home) main .page-hero .actions,body:not(.pg-home) main .page-hero .problem-meta,body:not(.pg-home) main .page-hero .hero-pills{justify-content:center}
body:not(.pg-home) main .page-hero .cash-price,body:not(.pg-home) main .page-hero .care-cash{justify-content:center}
body:not(.pg-home) main .page-hero .sub-cta.inline{margin:18px auto 0}

/* same padding on every page hero; the library h1 had margin:0 !important from style.css */
body:not(.pg-home) main .page-hero,body.pg-services main .services-hero{padding-top:56px!important;padding-bottom:52px!important}
body.pg-library main .library-hero h1{margin:12px auto 16px!important}

/* ---------- 4. Home ---------- */
body.pg-home main{display:grid;grid-template-columns:minmax(var(--wrap-gutter),1fr) minmax(0,640px) minmax(0,640px) minmax(var(--wrap-gutter),1fr)}
body.pg-home main>*{grid-column:1/-1;min-width:0}
body.pg-home main>.home-hero{grid-row:1;padding:72px 0 76px}
body.pg-home main>.home-hero .container{text-align:left}
body.pg-home main>.home-hero .container>*{max-width:calc(50% - 32px);margin-left:0;margin-right:0;text-align:left}
body.pg-home main>.home-hero .actions,body.pg-home main>.home-hero .hero-pills{justify-content:flex-start}
body.pg-home main>.home-hero .hero-location,body.pg-home main>.home-hero .hero-contact-cta{text-align:left}
body.pg-home main>.home-cards-section{grid-row:1;grid-column:3/4;align-self:center;position:relative;z-index:2;background:transparent;padding:0!important}
body.pg-home main>.home-cards-section .container{width:100%}
body.pg-home main>.home-cards-section .tech-scene{min-height:0}
body.pg-home main>.home-cards-section .lt-stack{margin:0 0 0 auto;width:min(560px,100%);height:400px}
body.pg-home .help-strip .container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:56px;align-items:center}
body.pg-home .help-strip .section-head{text-align:left;margin:0}
body.pg-home .help-strip ul.help-list{max-width:none;margin:0}
body.pg-home main>.pl-feature{grid-column:2/3;padding:56px 14px 56px 0!important}
body.pg-home main>.pl-feature+.section{grid-column:3/4;padding:56px 0 56px 14px}
body.pg-home main>.pl-feature .container,body.pg-home main>.pl-feature+.section .container{width:100%;max-width:none;height:100%;margin:0}
body.pg-home .pricing-callout{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px 28px;box-shadow:0 10px 30px rgba(15,47,78,.06)}

/* ---------- 5. Problem Library articles: reading column + sticky help sidebar ---------- */
body.pg-article main .container.problem-content{display:grid;grid-template-columns:minmax(0,720px) minmax(340px,1fr);gap:0 48px;align-items:start;padding:40px 48px 48px}
body.pg-article .pc-main{max-width:720px;min-width:0}
body.pg-article .pc-aside{position:sticky;top:calc(var(--header-h,96px) + 20px);min-width:0}
body.pg-article .pc-aside .article-cta{margin-top:0;padding:26px 24px}
body.pg-article .pc-aside .article-cta h2{margin-top:0;font-size:1.3rem}
body.pg-article .pc-aside .related-grid{grid-template-columns:1fr;gap:10px}
body.pg-article .pc-aside>h2{margin-top:28px;font-size:1.15rem}
body.pg-article .pc-aside .article-meta{margin-top:18px}

/* ---------- 6. Problem Library index ---------- */
body.pg-library .library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.pg-library .library-hero .container{text-align:center}

/* ---------- 7. Services ---------- */
body.pg-services .services-accordion-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
body.pg-services .services-hero{padding-top:56px;padding-bottom:52px}
body.pg-services .services-hero{padding-top:52px;padding-bottom:48px}

/* ---------- 8. Home extras ---------- */
body.pg-home main>.home-hero .hero-pills{margin-top:18px}
body.pg-home main>.home-hero h1{max-width:none}

/* ---------- 9. Care Plan ---------- */
body.pg-care-plan .benefit-grid{gap:20px}

/* ---------- 10. Websites ---------- */
body.pg-websites .cards.two{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
body.pg-websites .web-included ul.web-includes{columns:2;column-gap:48px}
body.pg-websites .web-included ul.web-includes li{break-inside:avoid}

/* ---------- 11. 3D Printing ---------- */
body.pg-3d-printing .container:has(>.planned-list){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;align-items:center}
body.pg-3d-printing .container:has(>.planned-list)>.section-heading{text-align:left!important;margin:0!important;max-width:none}
body.pg-3d-printing .planned-list{margin:0}
body.pg-3d-printing .interest-box{max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;padding:40px 44px;align-items:start}
body.pg-3d-printing .interest-box>*{grid-column:1}
body.pg-3d-printing .interest-box>form,body.pg-3d-printing .interest-box>.form-success{grid-column:2;grid-row:1/span 4;margin-top:0!important}
body.pg-3d-printing .interest-box>.interest-actions{align-self:start}
body.pg-3d-printing .shop-card img{aspect-ratio:5/4}

/* ---------- 12. Contact ---------- */
body.pg-contact main .cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.pg-contact main .cards-grid:has(>article:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
body.pg-contact main .cards-grid>article{margin:0}
body.pg-contact .support-section .container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 56px;align-items:center}
body.pg-contact .support-section .section-heading{text-align:left;margin:0;max-width:none}
body.pg-contact .support-section .support-card{max-width:none;margin:0;width:auto}

/* ---------- 13. Problem Library index ---------- */
body.pg-library .library-hero h1,body.pg-library .library-hero .lead{text-align:center;margin-left:auto;margin-right:auto}
body.pg-library main>section:nth-of-type(2) .library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 14. Readable line lengths (~80 characters max) ---------- */
body.pg-article .pc-main{font-size:1.0625rem}
body.pg-care-plan .terms-link-section p,body.pg-device-repair main p.oh-section-intro{max-width:66ch!important}
body.pg-care-plan .terms-link-section p{margin-left:auto;margin-right:auto}
body.pg-privacy main .container.privacy-body{max-width:860px!important;width:min(860px,calc(100% - 72px))!important}
body.pg-terms .terms-body p,body.pg-terms .terms-body li{max-width:64ch}
body.pg-websites main p{max-width:66ch!important}
body.pg-websites main .section-heading p{margin-left:auto;margin-right:auto}
body.pg-article .article-cta p.pc-quick{display:block;margin:14px 0 0;font-size:.92rem}
body.pg-article .article-cta p.pc-quick a{color:#fff!important;font-weight:800}
body.pg-services .services-section-intro{max-width:none}

/* ---------- 15. Large screens (1600px and up): ~1520px wide, 48px gutters ---------- */
@media (min-width:1600px){
  :root{--wrap-max:1520px;--wrap-gutter:48px}
  body.pg-home main{grid-template-columns:minmax(var(--wrap-gutter),1fr) minmax(0,760px) minmax(0,760px) minmax(var(--wrap-gutter),1fr)}
  body.pg-home .help-strip .container{grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:72px}
  body.pg-home .help-strip ul.help-list{gap:22px}
  body.pg-home .help-strip ul.help-list .help-item{padding-top:26px;padding-bottom:26px}
  /* grids use the extra room instead of stretching cards */
  body.pg-services .services-primary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body .cards.five{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body .cards.five>*{grid-column:auto!important}
  body.pg-device-repair .oh-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  body.pg-3d-printing .cards.four,body.pg-3d-printing .split-notice{max-width:none!important}
  body.pg-3d-printing .shop-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  body.pg-3d-printing .shop-card img{aspect-ratio:1/1}
  body.pg-library .library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* articles: reading column + help card + related problems as a third column */
  body.pg-article main .container.problem-content{grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:0 56px}
  body.pg-article .pc-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 28px;align-items:start}
  body.pg-article .pc-aside>.article-cta{grid-column:1;grid-row:1/span 3}
  body.pg-article .pc-aside>h2{grid-column:2;margin-top:0}
  body.pg-article .pc-aside>.related-grid,body.pg-article .pc-aside>.article-meta{grid-column:2}
  body.pg-home .pl-feature-inner{max-width:none}
  body.pg-home main>.pl-feature .container,body.pg-home main>.pl-feature+.section .container{width:100%!important;max-width:none!important}
  body.pg-care-plan main p{max-width:72ch}
  body.pg-care-plan main .care-cta p,body.pg-care-plan main .page-hero p,body.pg-care-plan main .savings-hero p,body.pg-care-plan main .terms-link-section p{margin-left:auto;margin-right:auto}
  body.pg-care-plan .simple-grid p{max-width:64ch}
  body.pg-home main>.home-cards-section .tech-scene{place-items:center end}
  body.pg-home main>.home-cards-section .lt-stack{width:min(600px,100%)}
}

/* ---------- 16. Bigger header logo on desktop (Logan, Oct 27). Source is 600x227, sharp up to ~2x. ---------- */
header.site-header .brand .logo{height:100px!important}
header.site-header .container.nav{min-height:108px}
header.site-header.is-slim .brand .logo{height:62px!important}
header.site-header.is-slim .container.nav{min-height:70px}
/* v9.15.7 menu button: the links moved into the Menu panel, so the full-size logo now fits at 1024-1199 too. */

/* ---------- 17. Design-quality pass (Logan, Oct 27: "it needs to be pristine") ---------- */
/* decorative swooshes cut straight through content on long desktop pages */
main::before,main::after{display:none!important}
/* calmer line breaks */
body main h1,body main h2,body main h3{text-wrap:balance}
body main p,body main li{text-wrap:pretty}
/* centered section headings: center the intro paragraph too (it kept a left margin, ~80px off-center) */
body main .section-heading>p:not(.eyebrow){margin-left:auto;margin-right:auto}
body.pg-pricing main .section-heading>p:not(.eyebrow),
body.pg-3d-printing .container:has(>.planned-list)>.section-heading>p,
body.pg-contact .support-section .section-heading>p{margin-left:0;margin-right:0}
body.pg-care-plan main .comparison-section .section-intro{margin-left:auto;margin-right:auto;text-align:center}
body.pg-3d-printing main p.shop-lead{margin-left:auto;margin-right:auto}
/* left-aligned pricing section intros were capped at 560px (two short lines) */
body.pg-pricing main .section-heading>p:not(.eyebrow){max-width:72ch}
/* a notice box straight under a card grid touched it (0px gap) */
body main .cards+.notice,body main .cards+.web-included{margin-top:18px!important}
/* hero sub-CTA (Care Plan "Join" button) stays the 420px used everywhere else, not the 720px intro width */
body:not(.pg-home) main .page-hero .container>.sub-cta.inline{max-width:420px}
/* thank-you: breathing room under the buttons */
body.pg-thank-you main .page-hero .terms-mini{margin-top:22px}
/* plan buttons that wrap to two lines read as buttons, not stretched pills */
body main .sub-cta:not(.inline) .btn{border-radius:14px;padding:12px 14px}
/* Services: the two dropdown cards' footer links now line up with the other two */
body.pg-services .services-primary-dropdown{display:flex;flex-direction:column}
body.pg-services .services-primary-dropdown .services-primary-trigger{flex:1 1 auto}
body.pg-services .services-primary-card .services-card-link{min-height:49px}
/* Device repair: in-card eyebrows match the site's eyebrow style */
body.pg-device-repair main .oh-card>.eyebrow{font-size:.72rem;letter-spacing:.12em;color:var(--green,#147a32);font-weight:900;margin-bottom:6px}
/* Contact: "When We're Available" heading sits left like the other two-column sections */
body.pg-contact .support-section .section-heading{text-align:left!important}
body.pg-contact .support-section .section-heading>h2{margin-bottom:0}
/* About: 4 + 3 value cards, the last row centered at the same card width */
body.pg-about .about-promise .cards-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
body.pg-about .about-promise .cards-grid>*,body.pg-about .about-promise .cards-grid>*:nth-child(-n+4){grid-column:span 2}
body.pg-about .about-promise .cards-grid>*:nth-child(5){grid-column:2/span 2}
/* Problem Library index: short last rows are centered instead of hanging left */
body.pg-library main .library-grid{--cols:3;display:flex!important;flex-wrap:wrap;justify-content:center;gap:18px}
body.pg-library main>section:nth-of-type(2) .library-grid{--cols:4}
body.pg-library main .library-grid>*{flex:0 0 calc((100% - (var(--cols) - 1)*18px)/var(--cols));min-width:0;margin:0}
/* Pricing > Care Plan: heading left, $99 card right, instead of a lone card with empty space beside it */
body.pg-pricing main .care-block{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:40px;align-items:center}
body.pg-pricing main .care-block>*{grid-column:1/-1}
body.pg-pricing main .care-block>.section-heading{grid-column:1;margin-bottom:0}
body.pg-pricing main .care-block>.care-plan-price-card{grid-column:2;grid-row:1;margin:0;width:auto;max-width:none}
body.pg-pricing main .care-block>.cards{margin-top:28px}
/* Terms: table of contents + body centered as one block under the centered title */
body.pg-terms .terms-layout{grid-template-columns:250px minmax(0,880px);justify-content:center}
/* Checkout: form + "Good to know" centered under the centered title */
body.pg-checkout .checkout-grid{margin-left:auto!important;margin-right:auto!important;width:min(1040px,calc(100% - 72px))!important}
@media (min-width:1600px){ body.pg-library main .library-grid{--cols:4} }
/* Terms: the 64ch line cap also hit the rate-table rows, leaving an empty strip on the right of each table */
body.pg-terms .terms-rows li,body.pg-terms .hour-list li,body.pg-terms .rate-rows li{max-width:none}
body main .sub-cta:not(.inline) .btn{display:flex;align-items:center;justify-content:center;min-height:56px}
/* 5-plan grids below 1600px: 3 + 2 with the second row centered at the same card width (was two stretched cards) */
@media (max-width:1599px){
  body main .cards.five>*:nth-child(n+4){grid-column:span 2!important}
  body main .cards.five>*:nth-child(4){grid-column:2/span 2!important}
}