:root {
        --ink: #f6f2e9;
        --ink-soft: #b7c1cc;
        --paper: #06101d;
        --white: #0d1d30;
        --mint: #102b43;
        --aqua: #f2a316;
        --aqua-dark: #ffb228;
        --sun: #f2a316;
        --line: #25384b;
        --shadow: 0 22px 50px rgba(0, 0, 0, .36);
      }

      @font-face { font-display: swap; font-family: "Cygre"; font-style: normal; font-weight: 400; src: url("/cartilha/landing-assets/Cygre-Book.ttf") format("truetype"); }
      @font-face { font-display: swap; font-family: "Cygre"; font-style: normal; font-weight: 800; src: url("/cartilha/landing-assets/Cygre-ExtraBold.ttf") format("truetype"); }
      @font-face { font-display: swap; font-family: "Le Monde Livre"; font-style: normal; font-weight: 700; src: url("/cartilha/landing-assets/LeMondeLivre-Bold.otf") format("opentype"); }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Cygre", Arial, sans-serif; line-height: 1.5; overflow-x: hidden; }
      a { color: inherit; text-decoration: none; }
      .container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
      .eyebrow { color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
      .brand { align-items: center; display: inline-flex; }
      .brand img { display: block; height: auto; max-height: none; width: min(270px, 52vw); }
      .pill { border: 1px solid rgba(242,163,22,.48); border-radius: 2px; color: var(--aqua-dark); display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; padding: 7px 10px; text-transform: uppercase; }
      .button { align-items: center; background: var(--aqua); border: 0; border-radius: 2px; color: #07121e; cursor: pointer; display: inline-flex; font-weight: 800; justify-content: center; min-height: 52px; padding: 14px 22px; transition: background .2s ease, transform .2s ease; width: 100%; }
      .button:hover { background: var(--aqua-dark); transform: translateY(-2px); }
      .button-outline { background: transparent; border: 1px solid var(--aqua); color: var(--aqua-dark); }
      .button-outline:hover { background: var(--aqua); color: #07121e; }

      header { background: rgba(6,16,29,.92); border-bottom: 1px solid rgba(246,242,233,.10); position: sticky; top: 0; z-index: 10; }
      .topbar { align-items: center; display: flex; justify-content: space-between; min-height: 104px; }
      .topbar a:not(.brand) { color: var(--aqua-dark); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

      .hero { overflow: hidden; padding: 108px 0 92px; position: relative; }
      .hero::before { background: radial-gradient(circle, rgba(242,163,22,.15), transparent 66%); content: ""; height: 620px; position: absolute; right: -260px; top: -290px; width: 620px; }
      .hero-grid { align-items: center; display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; position: relative; }
      h1 { font-size: clamp(2.4rem, 5vw, 4.75rem); letter-spacing: -.06em; line-height: .99; margin: 14px 0 22px; max-width: 700px; }
      h1 em { color: var(--aqua); font-family: "Le Monde Livre", Georgia, serif; font-style: normal; letter-spacing: -.04em; }
      .hero p { color: var(--ink-soft); font-size: 1.13rem; margin: 0 0 28px; max-width: 610px; }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
      .hero-actions .button { width: auto; }
      .microcopy { color: var(--ink-soft); font-size: .78rem; margin: 12px 0 0; }
      .video { aspect-ratio: 16 / 9; background: #07121f; border: 1px solid rgba(242,163,22,.55); border-radius: 2px; box-shadow: var(--shadow); min-height: 0; overflow: hidden; position: relative; }
      .video-frame { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; }
      .video-thumb { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
      .video::after { background: linear-gradient(145deg, transparent 40%, rgba(242,163,22,.14)); content: ""; inset: 0; pointer-events: none; position: absolute; }
      .video-inner { align-items: center; color: white; display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 36px; position: absolute; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.55); z-index: 1; }
      .video-cta { align-items: center; background: var(--sun); border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font-family: "Cygre", Arial, sans-serif; font-size: .95rem; font-weight: 800; gap: 10px; padding: 13px 20px; }
      .video-cta .play { background: transparent; color: var(--ink); font-size: 1rem; height: auto; margin: 0; padding: 0; width: auto; }
      .play { align-items: center; background: var(--sun); border-radius: 50%; color: #07121e; display: flex; font-size: 1.3rem; height: 70px; justify-content: center; margin-bottom: 18px; padding-left: 3px; width: 70px; }
      .video strong { font-size: 1.45rem; line-height: 1.1; max-width: 280px; }
      .video span { color: #b7eadb; font-size: .85rem; margin-top: 10px; }

      .showcase { background: #06101d; border-top: 1px solid rgba(246,242,233,.10); border-bottom: 1px solid rgba(246,242,233,.10); color: var(--ink); overflow: hidden; }
      .showcase-grid { align-items: center; display: grid; gap: 54px; grid-template-columns: .85fr 1.15fr; }
      .showcase-copy p { color: var(--ink-soft); font-size: 1.06rem; max-width: 500px; }
      .showcase-copy .button { margin-top: 10px; width: auto; }
      .showcase-copy h2 { color: var(--ink); }
      .showcase-copy .eyebrow { color: var(--aqua); }
      .device-stage { background: radial-gradient(circle at 68% 32%, rgba(242,163,22,.13), transparent 39%), linear-gradient(145deg, #132c40, #091827); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(242,163,22,.28); min-height: 460px; overflow: hidden; position: relative; width: 100%; }
      .device { background: #111c2b; border: 1px solid #41556a; border-radius: 18px; box-shadow: 0 30px 55px rgba(0,0,0,.34); padding: 11px; position: absolute; }
      .device::before { background: #526579; border-radius: 50%; content: ""; height: 6px; left: 50%; position: absolute; top: 6px; transform: translateX(-50%); width: 6px; z-index: 2; }
      .device-screen { background: #f7f5ef; border-radius: 14px; height: 100%; overflow: hidden; }
      .device-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
      .laptop { background: transparent; border: 0; border-radius: 0; box-shadow: none; height: 290px; left: 17%; padding: 0; top: 58px; transform: rotate(-5deg); width: 390px; z-index: 1; }
      .laptop::before { background: #121e2e; border: 1px solid #3b5065; border-radius: 10px 10px 3px 3px; bottom: 34px; box-shadow: 0 20px 26px rgba(0,0,0,.2); content: ""; height: 236px; left: 0; position: absolute; right: 0; top: 0; }
      .laptop-screen { background: #f7f5ef; border: 7px solid #111c2b; border-radius: 6px 6px 2px 2px; height: 220px; left: 14px; overflow: hidden; position: absolute; right: 14px; top: 10px; z-index: 1; }
      .laptop-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
      .laptop-base { background: linear-gradient(#aeb8bd, #71818a); border-radius: 2px 2px 15px 15px; bottom: 0; box-shadow: 0 20px 22px rgba(0,0,0,.2); height: 38px; left: -22px; position: absolute; right: -22px; transform: perspective(80px) rotateX(18deg); }
      .laptop-base::after { background: #566773; border-radius: 0 0 8px 8px; content: ""; height: 5px; left: 42%; position: absolute; top: 4px; width: 16%; }
      .tablet { height: 220px; left: 9%; top: 196px; transform: rotate(-12deg); width: 164px; z-index: 3; }
      .tablet .device-screen { border-radius: 10px; }
      .phone { height: 245px; right: 9%; top: 142px; transform: rotate(9deg); width: 124px; z-index: 4; }
      .phone .device-screen { border-radius: 10px; }
      .paper-card { background: #fbfaf6; border: 1px solid rgba(6,16,29,.18); box-shadow: 0 16px 24px rgba(0,0,0,.18); height: 106px; padding: 10px; position: absolute; width: 146px; z-index: 2; }
      .paper-card::before { background: #f2a316; content: ""; display: block; height: 5px; margin-bottom: 9px; width: 48%; }
      .paper-card::after { background: repeating-linear-gradient(to bottom, #9ca9ae 0 2px, transparent 2px 8px); content: ""; display: block; height: 47px; opacity: .65; width: 82%; }
      .paper-card span { color: #253849; display: block; font-size: .55rem; font-weight: 800; line-height: 1.1; }
      .card-one { bottom: 18px; right: 2%; transform: rotate(13deg); }
      .card-two { right: 2%; top: 22px; transform: rotate(12deg); }
      .card-three { bottom: 18px; left: 1%; transform: rotate(8deg); }
      .device-caption { bottom: 8px; color: #a9b9c6; font-size: .63rem; left: 0; letter-spacing: .08em; position: absolute; right: 0; text-align: center; text-transform: uppercase; z-index: 5; }

      .collection { background: #06101d; scroll-margin-top: 96px; }
      .collection-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
      .collection-list li { border-bottom: 1px solid var(--line); color: var(--ink); min-width: 0; }
      .collection-list b { color: var(--aqua); font-size: .75rem; letter-spacing: .08em; min-width: 28px; }
      .collection-list li:nth-child(odd) { border-right: 1px solid var(--line); }
      .collection-list li:last-child { grid-column: 1 / -1; }
      .collection-list details { border: 0; padding: 0; }
      .collection-list summary { align-items: center; display: flex; font-size: 1rem; gap: 16px; min-height: 66px; padding: 12px 48px 12px 8px; }
      .collection-list summary::after { right: 18px; top: 14px; }
      .collection-list details[open] { background: rgba(15,46,69,.52); }
      .collection-list details p { border-left: 2px solid var(--aqua); color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0 18px 19px 52px; max-width: 470px; padding-left: 14px; }

      .authority { background: #0a2033; }
      .authority-grid { align-items: center; display: grid; gap: 44px; grid-template-columns: 250px 1fr; }
      .authority-photo { aspect-ratio: 1; background: #151020; border: 2px solid var(--aqua); border-radius: 50%; box-shadow: 0 18px 34px rgba(0,0,0,.28); overflow: hidden; width: 100%; }
      .authority-photo img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
      .authority-copy p { color: var(--ink-soft); font-size: 1.06rem; margin: 15px 0 0; max-width: 760px; }
      .authority-copy .eyebrow { margin-top: 20px; }

      section { padding: 80px 0; }
      .problem { background: #091a2a; color: #fff; }
      .section-heading { margin-bottom: 36px; max-width: 690px; }
      h2 { font-size: clamp(2rem, 3vw, 3.25rem); letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 0; }
      .problem h2 { color: #fff; }
      .problem .eyebrow { color: var(--aqua); }
      .problem-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
      .pain { background: #0e2539; border: 1px solid rgba(255,255,255,.10); border-radius: 2px; padding: 26px; }
      .pain b { color: var(--aqua-dark); display: block; font-size: 1.05rem; margin-bottom: 8px; }
      .pain p { color: #d6e0de; font-size: .94rem; margin: 0; }

      .method-grid { display: grid; gap: 22px; grid-template-columns: .8fr 1.2fr; }
      .method-card { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 30px; }
      .method-card h3 { font-size: 1.4rem; letter-spacing: -.03em; margin: 0 0 10px; }
      .five-r { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); margin-top: 18px; }
      .five-r div { background: #102d45; border-radius: 1px; color: var(--ink); font-size: .78rem; font-weight: 800; min-height: 76px; padding: 10px; }
      .five-r span { display: block; font-size: 1.25rem; }
      .what-you-get { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
      .what-you-get li { border-bottom: 1px solid var(--line); font-weight: 700; padding: 12px 0; }
      .what-you-get li::before { color: var(--aqua); content: "✓"; margin-right: 9px; }

      .method-section { background: #071522; color: var(--ink); }
      .method-intro { margin: 0 auto 32px; max-width: 760px; text-align: center; }
      .method-intro .eyebrow { color: var(--sun); }
      .method-intro h2 { font-family: "Le Monde Livre", Georgia, serif; font-size: clamp(2.1rem, 4vw, 3.35rem); }
      .method-intro p { color: var(--ink-soft); font-size: 1.04rem; margin: 14px auto 0; max-width: 670px; }
      .method-tabs { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }
      .method-tab { appearance: none; background: #091324; border: 1px solid rgba(166,190,208,.22); border-radius: 14px; color: var(--ink-soft); cursor: pointer; display: flex; flex-direction: column; min-height: 138px; padding: 14px; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
      .method-tab:hover { border-color: rgba(242,163,22,.70); transform: translateY(-2px); }
      .method-tab.active { border-color: var(--sun); box-shadow: 0 14px 28px rgba(0,0,0,.24); transform: translateY(-4px); }
      .method-tab .method-tab-top { align-items: center; display: flex; justify-content: space-between; }
      .method-tab .method-code { background: #16263b; border-radius: 4px; color: var(--sun); font-size: .72rem; font-weight: 800; padding: 4px 7px; }
      .method-tab .method-number { color: #7791a8; font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; }
      .method-tab .method-tab-icon { align-items: center; background: #121f34; border: 1px solid rgba(166,190,208,.15); border-radius: 11px; color: var(--sun); display: flex; font-size: 1.5rem; height: 42px; justify-content: center; margin: 12px auto 9px; width: 42px; }
      .method-tab strong { color: var(--ink); font-size: .92rem; letter-spacing: .02em; text-align: center; }
      .method-tab em { color: #8fa7b6; display: block; font-size: .72rem; font-style: normal; margin-top: 5px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
      .method-detail { background: #101a31; border: 1px solid rgba(166,190,208,.22); border-radius: 18px; display: grid; gap: 28px; grid-template-columns: 1.5fr .5fr; margin-top: 28px; padding: 34px; }
      .method-detail-head { align-items: center; display: flex; gap: 17px; }
      .method-detail-index { border-right: 2px solid var(--sun); color: var(--sun); font-size: 2rem; font-weight: 800; line-height: 1; padding-right: 17px; }
      .method-detail h3 { color: var(--ink); font-family: "Le Monde Livre", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.03em; margin: 0; }
      .method-detail-kicker { color: var(--sun); display: block; font-size: .88rem; font-weight: 800; margin-top: 5px; }
      .method-detail-copy > p { color: var(--ink-soft); font-size: 1rem; line-height: 1.62; margin: 24px 0 22px; max-width: 690px; }
      .method-detail-cards { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
      .method-usecase { background: #071020; border: 1px solid rgba(242,163,22,.36); border-radius: 12px; padding: 16px; }
      .method-usecase.application { border-color: rgba(48,191,207,.42); }
      .method-usecase b { color: var(--sun); display: block; font-size: .72rem; letter-spacing: .03em; margin-bottom: 8px; }
      .method-usecase.application b { color: var(--aqua); }
      .method-usecase p { color: var(--ink-soft); font-size: .86rem; line-height: 1.5; margin: 0; }
      .method-detail-visual { align-items: center; background: #070e20; border: 1px solid rgba(166,190,208,.18); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; min-height: 240px; padding: 24px; text-align: center; }
      .method-detail-visual .method-icon-large { align-items: center; background: rgba(242,163,22,.10); border: 1px solid rgba(242,163,22,.55); border-radius: 18px; color: var(--sun); display: flex; font-size: 3.2rem; height: 104px; justify-content: center; margin-bottom: 16px; width: 104px; }
      .method-detail-visual > span { color: #8097aa; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
      .method-detail-visual strong { color: var(--ink); font-family: "Le Monde Livre", Georgia, serif; font-size: 1.35rem; margin-top: 5px; }
      .method-detail-visual p { color: var(--ink-soft); font-size: .8rem; margin: 7px 0 0; }

      .offer { background: #0a2033; scroll-margin-top: 112px; }
      .pricing { align-items: stretch; display: grid; gap: 28px; grid-template-columns: 1fr; margin: 16px auto 0; max-width: 496px; }
      .price-card { background: radial-gradient(circle at 50% -20%, rgba(30,64,91,.55), transparent 48%), #0b1728; border: 1px solid rgba(166,190,208,.22); border-radius: 26px; display: flex; flex-direction: column; padding: 42px 32px 32px; position: relative; text-align: center; }
      .price-card.recommended { border: 2px solid var(--sun); box-shadow: 0 24px 44px rgba(0,0,0,.25); scroll-margin-top: 132px; transform: translateY(-10px); }
      .badge { background: var(--sun); border-radius: 999px; box-shadow: 0 6px 0 #bd760b; color: #07121e; font-size: .72rem; font-weight: 900; left: 50%; letter-spacing: .02em; line-height: 1; padding: 10px 20px; position: absolute; text-align: center; top: -17px; transform: translateX(-50%); white-space: nowrap; z-index: 1; }
      .badge::before { content: "✦"; margin-right: 7px; }
      .price-card .pill { border: 0; color: var(--aqua); font-size: .72rem; padding: 0; }
      .price-card h3 { font-family: "Le Monde Livre", Georgia, serif; font-size: clamp(1.65rem, 2.2vw, 2.05rem); letter-spacing: -.035em; line-height: 1.08; margin: 16px auto 12px; max-width: 390px; }
      .price-card > p { color: var(--ink-soft); margin: 0 auto 24px; max-width: 350px; min-height: 0; }
      .price-label { color: #8195a7; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin-top: 4px; text-transform: uppercase; }
      .price-installments { color: var(--ink); font-family: "Cygre", Arial, sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; margin: 12px 0 0; }
      .price-installments strong { color: var(--sun); font-family: "Le Monde Livre", Georgia, serif; font-size: 1.2em; letter-spacing: -.055em; }
      .cash-price { color: #9fb0bf !important; font-size: .84rem; margin: 7px auto 0 !important; min-height: 0 !important; }
      .cash-price strong { color: var(--ink); font-weight: 900; }
      .price-card .upgrade-note { color: var(--ink); font-size: .9rem; line-height: 1.45; margin: 14px auto 0; max-width: 340px; min-height: 0; padding: 0; }
      .price-card .upgrade-note strong { color: var(--aqua); }
      .inclusions-title { border-top: 1px solid var(--line); color: var(--ink); font-size: .82rem; font-weight: 900; letter-spacing: .06em; margin: 26px 0 7px; padding-top: 20px; text-align: left; text-transform: uppercase; }
      .price-card ul { flex: 1; list-style: none; margin: 0 0 26px; padding: 0; text-align: left; }
      .price-card li { padding: 8px 0; }
      .price-card li::before { color: var(--aqua); content: "✓"; font-weight: 900; margin-right: 8px; }
      .notice { color: var(--ink-soft); font-size: .76rem; margin: 16px 0 0; text-align: center; }

      .steps { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
      .step { border-top: 2px solid var(--aqua); padding-top: 18px; }
      .step span { color: var(--aqua); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
      .step h3 { font-size: 1.15rem; margin: 9px 0; }
      .step p { color: var(--ink-soft); margin: 0; }

      .faq { background: #081624; }
      details { border-bottom: 1px solid var(--line); padding: 18px 0; }
      summary { cursor: pointer; font-weight: 800; list-style: none; padding-right: 25px; position: relative; }
      summary::after { color: var(--aqua); content: "+"; font-size: 1.5rem; position: absolute; right: 0; top: -7px; }
      details[open] summary::after { content: "–"; }
      details p { color: var(--ink-soft); margin: 12px 0 0; max-width: 760px; }

      footer { background: #030910; color: #d1dfdc; padding: 38px 0; }
      footer .container { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
      footer .brand { color: #fff; }
      footer .brand img { width: min(230px, 48vw); }
      footer p { font-size: .8rem; margin: 0; text-align: right; }

      @media (max-width: 820px) {
        .hero-grid, .showcase-grid, .method-grid, .pricing, .authority-grid { grid-template-columns: 1fr; }
        .problem-grid, .steps { grid-template-columns: 1fr; }
        .five-r { grid-template-columns: repeat(5, minmax(55px, 1fr)); overflow-x: auto; }
        .method-tabs { display: flex; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
        .method-tab { flex: 0 0 164px; }
        .method-detail { grid-template-columns: 1fr; padding: 24px; }
        .method-detail-cards { grid-template-columns: 1fr; }
        .topbar a:not(.brand) { display: none; }
        .device-stage { min-height: 420px; margin: 0 auto; max-width: 480px; }
        .collection-list { grid-template-columns: 1fr; }
        .collection-list li:nth-child(odd) { border-right: 0; }
        .collection-list li:last-child { grid-column: auto; }
        .authority-photo { max-width: 250px; }
      }
      @media (max-width: 500px) {
        .container { width: min(100% - 28px, 1120px); }
        section, .hero { padding: 58px 0; }
        .hero-actions { display: grid; }
        .hero-actions .button { width: 100%; }
        .what-you-get { grid-template-columns: 1fr; }
        .device-stage { min-height: 350px; }
        .laptop { height: 230px; left: 16%; top: 52px; width: 300px; }
        .laptop::before { bottom: 28px; height: 188px; }
        .laptop-screen { border-width: 5px; height: 174px; left: 10px; right: 10px; top: 8px; }
        .laptop-base { height: 30px; left: -17px; right: -17px; }
        .tablet { height: 175px; left: 4%; top: 188px; width: 130px; }
        .phone { height: 205px; right: 3%; top: 132px; width: 105px; }
        .paper-card { height: 78px; padding: 7px; width: 105px; }
        .paper-card::before { height: 4px; margin-bottom: 6px; }
        .paper-card::after { height: 33px; }
        .authority-grid { gap: 22px; }
        /* Keep the recommendation badge readable on narrow screens and
           reserve enough room so it never covers the offer title. */
        .price-card.recommended { padding-top: 58px; }
        .badge {
          font-size: .63rem;
          height: auto;
          left: 50%;
          min-width: 140px;
          padding: 9px 14px;
          right: auto;
          top: -18px;
          transform: translateX(-50%);
          width: auto;
        }
        .price-card.recommended .pill { padding-right: 0; }
        footer .container { align-items: flex-start; flex-direction: column; }
        footer p { text-align: left; }
      }