.sg, .sg-toc { --sg-spring: cubic-bezier(.34, 1.56, .64, 1); --sg-gold: linear-gradient(135deg, #f5df9f 0%, #d6bd78 48%, #a98c45 100%); --sg-body: #d3cfc6; --sg-engrave: inset 0 0 0 4px #0a0a0b, inset 0 0 0 5px rgba(214, 189, 120, .2); } nav.sg-toc { display: block; padding: 22px 24px 24px; margin: 0 0 64px; border: 1px solid rgba(214, 189, 120, .26); border-radius: 18px; background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014)); box-shadow: var(--sg-engrave), 0 24px 60px rgba(0, 0, 0, .3); } .sg-kicker { color: var(--warm); font-size: 11px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 8px; } .sg-toc .sg-kicker { margin-bottom: 12px; } .sg-toc ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 24px; counter-reset: sgtoc; } .sg-toc li { counter-increment: sgtoc; min-width: 0; } .sg-toc a { display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 0; color: var(--txt); font-size: 14.5px; line-height: 1.35; border-bottom: 1px solid var(--line); transition: color .2s, transform .35s var(--sg-spring); } .sg-toc a::before { content: counter(sgtoc, decimal-leading-zero); flex: none; color: var(--warm); font: 700 10.5px/1.6 var(--sans); letter-spacing: .08em; } .sg-toc a:hover { color: var(--warm); text-decoration: none; transform: translateX(3px); } .sg { padding-top: 8px; color: var(--sg-body); font-size: 16px; line-height: 1.65; } .sg section { padding: 64px 0 0; scroll-margin-top: 16px; } .sg h2 { color: var(--txt); font-size: clamp(28px, 3.4vw, 38px); line-height: 1.14; margin-bottom: 12px; scroll-margin-top: 20px; } .sg h3 { color: var(--txt); font-family: var(--serif); font-size: 22px; font-weight: 620; line-height: 1.25; margin: 0 0 10px; scroll-margin-top: 20px; } .sg p { margin: 0 0 14px; } .sg-lead { color: var(--mut); font-size: 17px; max-width: 66ch; margin-bottom: 26px !important; } .sg a { text-decoration: underline; text-decoration-color: rgba(214, 189, 120, .55); text-underline-offset: 3px; color: var(--txt); } .sg a:hover { text-decoration-color: var(--warm); color: var(--warm); } .sg b, .sg strong { color: var(--txt); font-weight: 620; } .sg-sub { padding-top: 52px; scroll-margin-top: 16px; } .sg-rule { height: 1px; margin: 0; border: 0; background: linear-gradient(90deg, transparent, rgba(214, 189, 120, .4), transparent); } .sg ul { list-style: none; } .sg-bullets li { position: relative; padding: 0 0 10px 22px; } .sg-bullets li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sg-gold); } .sg-bullets--two { columns: 2; column-gap: 40px; margin-bottom: 14px; font-size: 15px; line-height: 1.5; } .sg-bullets--two li { break-inside: avoid; } .sg-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sg-paths a { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); text-decoration: none; transition: transform .4s var(--sg-spring), border-color .2s, background .2s; } .sg-paths a:hover { transform: translateY(-3px); border-color: rgba(214, 189, 120, .42); background: rgba(255, 255, 255, .045); color: inherit; } .sg-paths b { display: block; font-family: var(--serif); font-size: 18.5px; line-height: 1.25; margin-bottom: 7px; } .sg-paths span { display: block; color: var(--mut); font-size: 14px; line-height: 1.5; } .sg-paths i { display: block; margin-top: 12px; color: var(--warm); font: 650 13px var(--sans); } .sg-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 8px; } .sg-two--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .sg-two--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-two--center { align-items: center; } .sg-two--flip > .sg-shots { order: -1; } .sg-shots { display: grid; gap: 26px; min-width: 0; } .sg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 22px 0 26px; align-items: start; } .sg-pair .sg-note { margin: 20px 0 0; } .sg-steps { list-style: none; counter-reset: sgstep; min-width: 0; } .sg-steps > li { position: relative; counter-increment: sgstep; padding: 0 0 24px 56px; } .sg-steps > li::before { content: counter(sgstep); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 2px double #6d5928; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #f7e7b9, #d6bd78 52%, #a98c45); color: #2b2208; font: 800 14.5px/1 var(--sans); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); } .sg-steps > li::after { content: ""; position: absolute; left: 18.5px; top: 44px; bottom: 6px; width: 1px; background: linear-gradient(rgba(214, 189, 120, .5), rgba(214, 189, 120, .08)); } .sg-steps > li:last-child { padding-bottom: 4px; } .sg-steps > li:last-child::after { display: none; } .sg-steps b:first-child { display: block; font-size: 16.5px; margin-bottom: 3px; } .sg-steps p { margin: 0; } .sg-shot { margin: 0; min-width: 0; } .sg-shot a { display: block; border-radius: 14px; transition: transform .45s var(--sg-spring); } .sg-shot a:hover { transform: translateY(-3px); } .sg-shot img { display: block; width: 100%; height: auto; border-radius: 14px; background: #0c0c0e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 26px 60px rgba(0, 0, 0, .5); } .sg-shot figcaption { color: var(--mut); font-size: 13.5px; line-height: 1.5; margin-top: 11px; } .sg-shot--phone { max-width: 250px; margin-inline: auto; } .sg-note { padding: 20px 22px; margin: 22px 0; border: 1px solid rgba(214, 189, 120, .3); border-radius: 14px; background: rgba(214, 189, 120, .045); box-shadow: var(--sg-engrave); } .sg-note p:last-child, .sg-note ul:last-child { margin-bottom: 0; } .sg-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: 15px; line-height: 1.55; } .sg-table th, .sg-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); } .sg-table thead th { padding-top: 0; border-top: 0; color: var(--warm); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .sg-table tbody th { color: var(--txt); font-weight: 620; width: 28%; } .sg-table tbody tr:last-child th, .sg-table tbody tr:last-child td { border-bottom: 1px solid var(--line); } .sg-table--3 tbody th { width: 24%; } .sg-table--4 tbody th { width: 22%; } .sg-table em { color: var(--warm); font-style: normal; font-weight: 620; } .sg-code { margin: 10px 0 14px; padding: 12px 14px; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 10px; background: #0c0c0e; color: #e8e7e2; font: 13px/1.6 ui-monospace, Menlo, monospace; } .sg code { font: .92em ui-monospace, Menlo, monospace; color: #e8e7e2; overflow-wrap: anywhere; } .sg-code span { color: var(--mut); } .sg-price { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; } .sg-price-seal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 190px; height: 190px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 32% 26%, #ffffff, #d9d7d0 52%, #86847e); color: #141416; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 24px 54px rgba(0, 0, 0, .55); } .sg-price-seal::before { content: ""; position: absolute; inset: 9px; border: 3px double rgba(60, 54, 36, .5); border-radius: 50%; } .sg-price-seal b { color: #141416; font: 640 62px/1 var(--serif); } .sg-price-seal span { font: 700 10px/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; } .sg-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sg-fit > div { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .sg-fit li { position: relative; padding: 0 0 11px 26px; font-size: 15px; line-height: 1.55; } .sg-fit li:last-child { padding-bottom: 0; } .sg-fit li::before { position: absolute; left: 0; top: 0; font-weight: 800; } .sg-fit-yes li::before { content: "\2713"; color: var(--warm); } .sg-fit-no li::before { content: "\2715"; color: #e8a2a5; } .sg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sg-cards > div { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-size: 14.5px; line-height: 1.55; } .sg-cards h3 { font: 650 15.5px/1.35 var(--sans); margin: 0 0 6px; } .sg-cards p { margin: 0; color: var(--sg-body); } .sg-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 8px; align-items: start; } .sg-faq > div { min-width: 0; border-bottom: 1px solid var(--line); } .sg-faq details { border-top: 1px solid var(--line); } .sg-faq summary { position: relative; display: block; min-height: 44px; padding: 15px 34px 15px 0; color: var(--txt); font-weight: 620; font-size: 15.5px; line-height: 1.4; cursor: pointer; list-style: none; } .sg-faq summary::-webkit-details-marker { display: none; } .sg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; color: var(--warm); font: 400 22px/1.2 var(--sans); transition: transform .4s var(--sg-spring); } .sg-faq details[open] summary::after { transform: rotate(45deg); } .sg-faq summary:hover { color: var(--warm); } .sg-faq summary:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; } .sg-faq p { margin: 0; padding: 0 8px 18px 0; font-size: 15px; line-height: 1.6; } .sg-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; font-size: 14.5px; } .sg-more li { min-width: 0; } .sg-reviewed { margin: 30px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13.5px; } .sg-reviewed a { color: inherit; } #guides h2 { font-size: 22px; } @media (max-width: 1000px) { .sg-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sg-two, .sg-two--flip, .sg-two--even { grid-template-columns: minmax(0, 1fr); } .sg-two--flip > .sg-shots { order: 0; } .sg-paths { grid-template-columns: minmax(0, 1fr); } .sg-price { grid-template-columns: minmax(0, 1fr); } .sg-faq { grid-template-columns: minmax(0, 1fr); } .sg-faq > div:first-child { border-bottom: 0; } } @media (max-width: 720px) { .sg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sg-table, .sg-table tbody, .sg-table tr, .sg-table th, .sg-table td { display: block; width: auto !important; } .sg-table tr { padding: 12px 0; border-top: 1px solid var(--line); } .sg-table tbody tr:last-child { border-bottom: 1px solid var(--line); } .sg-table th, .sg-table td, .sg-table tbody tr:last-child th, .sg-table tbody tr:last-child td { padding: 3px 0; border: 0; } .sg-table tbody th { font-size: 15.5px; } .sg-table td[data-l]::before { content: attr(data-l); display: block; margin-top: 7px; color: var(--warm); font-size: 10.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; } .sg-fit { grid-template-columns: minmax(0, 1fr); } .sg-cards { grid-template-columns: minmax(0, 1fr); } .sg-pair { grid-template-columns: minmax(0, 1fr); } .sg-bullets--two { columns: 1; } } @media (max-width: 520px) { .sg-toc ol { grid-template-columns: minmax(0, 1fr); } nav.sg-toc { padding: 18px 18px 14px; margin-bottom: 48px; } .sg section { padding-top: 52px; } .sg-steps > li { padding-left: 50px; } .sg-fit > div, .sg-cards > div { padding: 20px; } } @media (prefers-reduced-motion: reduce) { .sg-toc a, .sg-paths a, .sg-shot a, .sg-faq summary::after { transition: none; } .sg-toc a:hover, .sg-paths a:hover, .sg-shot a:hover { transform: none; } }