/* Drift Learn — 定價頁。Ported from Drift Pricing.dc.html; the design already
   defines its own 1080/720 breakpoints, so this is its stylesheet verbatim. */

html, body { margin:0; padding:0; background:#EFE7DA; }
  * { box-sizing:border-box; }
  img { display:block; max-width:100%; }
  ::selection { background:#D9A450; color:#fff; }
  a { color:#8E6A22; text-decoration:none; }
  a:hover { color:#C08F35; }
  summary::-webkit-details-marker { display:none; }
  @keyframes p-pop { from { opacity:0; transform:translateY(34px) scale(.97); } to { opacity:1; transform:none; } }
  @keyframes p-breathe { 0%,100% { transform:scale(1); opacity:.55; } 50% { transform:scale(1.12); opacity:.85; } }
  @keyframes p-orbit { 0% { transform:rotate(0deg) translateX(14px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(14px) rotate(-360deg); } }
  @media (max-width: 1080px) {
    [data-lay="plans"] { grid-template-columns:1fr !important; gap:18px !important; }
    [data-lay="plan-notes"] { grid-template-columns:1fr !important; }
    [data-lay="faq"] { grid-template-columns:1fr !important; gap:32px !important; padding:44px 40px !important; }
    [data-lay="foot"] { grid-template-columns:1fr !important; gap:30px !important; }
    [data-lay="foot"] > div:not(:first-child) > div:last-child { flex-direction:row !important; flex-wrap:wrap; gap:8px 20px !important; }
  }
  @media (max-width: 720px) {
    [data-lay="nav"] { padding:12px 16px !important; }
    [data-lay="navcta"] { display:none !important; }
    [data-lay="navtabs"] { margin-left:auto; }
    [data-lay="hero"] { padding:40px 20px 0 !important; }
    [data-lay="hero"] h1 { font-size:38px !important; }
    [data-lay="hero"] p { font-size:16px !important; }
    section { padding-left:20px !important; padding-right:20px !important; }
    [data-lay="plans"] > div { padding:32px 24px !important; border-radius:28px !important; }
    [data-lay="plans"] span[style*="font-size:52px"] { font-size:40px !important; }
    [data-lay="faq"] { --faq-card-padding-inline:20px; padding:36px 24px !important; border-radius:30px !important; }
    [data-lay="faq"] h2 { font-size:32px !important; }
    [data-lay="faq"] summary { font-size:16.5px !important; }
    [data-lay="cta"] > div { padding:52px 24px !important; border-radius:30px !important; }
    [data-lay="cta"] h2 { font-size:34px !important; }
    [data-lay="cta"] p { font-size:16px !important; }
    [data-lay="cta"] form { flex-direction:column !important; }
    footer { padding:0 20px 28px !important; }
    footer > div { padding:36px 24px !important; border-radius:30px !important; }
  }


/* ---------------------------------------------------------- performance */

[data-lay="faq"] summary > span { flex-shrink: 0; }
[data-lay="faq"] p a { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }

[data-faq] details {
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}