/* EasyPak motion layer, v13 (24 Oct 2026)
   Only transform, opacity, shadow, colour and clip change, so nothing on the page reflows.
   Everything sits inside prefers-reduced-motion:no-preference. Hover effects only on devices with a real pointer. */

:root{--mo-orange:#e9a23b;--mo-ease:cubic-bezier(.2,.7,.2,1);--mo-lift:0 2px 4px rgba(21,92,57,.06),0 22px 48px rgba(21,92,57,.16)}

/* Static orange accent under section headings (no motion, so it shows for everyone) */
.section h2:not(.prose h2):not(.contact-card h2)::after,
.ftools__head h2::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--mo-orange);margin-top:14px;transform-origin:left center}
.ftools__head h2::after,.cta h2::after{margin-left:auto;margin-right:auto;transform-origin:center}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Section heading line stretches while you are in that section ---------- */
  .section h2:not(.prose h2):not(.contact-card h2)::after,
  .ftools__head h2::after{transition:transform .6s var(--mo-ease)}
  .mo-current h2::after{transform:scaleX(1.9)}

  /* ---------- Hover: computers and laptops only ---------- */
  @media (hover:hover) and (pointer:fine){

    /* Cards and boxes: lift, deeper shadow, thin orange line along the top */
    .card,.why,.step,.stat,.pk,.pk-extra,.pkh,.guide-card,.ftool,.pk-rules li,.pk-check li,
    .cat-inside a,.cat-pages figure,.tools-box,.contact-card,.cat-get,.tool,.ck-group,.other-grid a,.cta{
      transition:transform .28s var(--mo-ease),box-shadow .28s var(--mo-ease),border-color .28s var(--mo-ease),background-size .35s var(--mo-ease),color .2s ease}

    /* orange line drawn as a background layer (cards without a top picture) */
    .why,.step,.stat,.pk-extra,.guide-card,.ftool,.pk-rules li,.pk-check li,.cat-inside a,.cat-pages figure,.tools-box,.contact-card,.tool,.ck-group,.other-grid a{
      background-image:linear-gradient(var(--mo-orange),var(--mo-orange));background-repeat:no-repeat;background-position:50% 0;background-size:0 3px}
    .why:hover,.step:hover,.stat:hover,.pk-extra:hover,.guide-card:hover,.ftool:hover,.pk-rules li:hover,.pk-check li:hover,
    .cat-inside a:hover,.cat-pages figure:hover,.tools-box:hover,.contact-card:hover,.tool:hover,.ck-group:hover,.other-grid a:hover,
    .ftool:focus-visible,.guide-card:focus-visible,.cat-inside a:focus-visible,.other-grid a:focus-visible{background-size:100% 3px}

    /* cards with a picture or gradient on top: line drawn as its own layer above it */
    .card,.pkh,.pk,.cta{position:relative}
    .card::after,.pkh::after,.pk::after,.cta::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mo-orange);transform:scaleX(0);transition:transform .35s var(--mo-ease);z-index:2;pointer-events:none}
    .pk::after{left:16px;right:16px;border-radius:0 0 3px 3px}
    .cta::after{left:28px;right:28px;border-radius:0 0 3px 3px}
    .card:hover::after,.pkh:hover::after,.pk:hover::after,.cta:hover::after,.pkh:focus-visible::after{transform:scaleX(1)}

    /* lift and deeper shadow */
    .card:hover,.why:hover,.pk:hover,.pk-extra:hover,.pkh:hover,.guide-card:hover,.ftool:hover,.stat:hover,
    .pkh:focus-visible,.ftool:focus-visible,.guide-card:focus-visible{transform:translateY(-6px);box-shadow:var(--mo-lift);border-color:#c9ddd1}
    .ftool--lead:hover{box-shadow:0 22px 52px rgba(21,92,57,.34)}
    .stat:hover{box-shadow:0 22px 48px rgba(10,40,25,.32)}
    .step:hover,.pk-rules li:hover,.pk-check li:hover,.cat-inside a:hover,.cat-pages figure:hover,.tools-box:hover,.ck-group:hover,.cta:hover,
    .cat-inside a:focus-visible{transform:translateY(-4px);box-shadow:var(--mo-lift)}
    /* big panels that hold forms: shadow and line only, no lift, so nothing moves while someone types */
    .contact-card:hover,.cat-get:hover,.tool:hover{box-shadow:0 26px 60px rgba(16,40,28,.18)}

    /* icons and arrows answer the card */
    .why .ic,.ftool__ic{transition:transform .35s var(--mo-ease)}
    .why:hover .ic,.ftool:hover .ftool__ic{transform:translateY(-2px) rotate(-6deg) scale(1.06)}

    /* Pictures inside cards zoom in a little. clip-path keeps the zoom inside the picture's own box. */
    .card-img,.pkh img,.pk-img,.cat-pages img,.guide-card img{transition:transform .6s var(--mo-ease),clip-path .6s var(--mo-ease);clip-path:inset(0)}
    .card:hover .card-img,.pkh:hover img,.pkh:focus-visible img,.pk:hover .pk-img,.cat-pages figure:hover img,.guide-card:hover img{transform:scale(1.06);clip-path:inset(2.83%)}

    /* Buttons rise and glow */
    .btn:hover,.nav-cta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(31,122,77,.30),0 0 0 4px rgba(31,122,77,.10)}
    .btn--light:hover,.btn--outline-light:hover,.bg-dark .btn:hover,.cta .btn:hover{box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 0 4px rgba(255,255,255,.18)}
    .wa-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 30px rgba(37,211,102,.45)}

    /* Table rows highlight */
    table tr td{transition:background-color .2s ease}
    table tr:hover td{background-color:#eef6f1}

    /* FAQ questions shift and lift */
    .faq-item summary .faq-q,.faq-item summary .faq-n{transition:transform .25s var(--mo-ease),color .2s ease}
    .faq-item summary:hover .faq-q{transform:translate(6px,-1px);color:var(--green)}
    .faq-item summary:hover .faq-n{transform:translateY(-1px)}
    .faq-item summary:hover .faq-ic{background:var(--green);border-color:var(--green);color:#fff}
    .faq-help .btn{transition:transform .2s var(--mo-ease),box-shadow .2s var(--mo-ease),background .2s var(--mo-ease),border-color .2s var(--mo-ease),color .2s ease}

    /* Related reading and "learn more" links slide right */
    .other-grid a:hover,.other-grid a:focus-visible{transform:translateX(6px)}
    .learn-more,.ftool__cta span,.sources a{transition:transform .25s var(--mo-ease),color .2s ease}
    .learn-more:hover,.sources a:hover{transform:translateX(5px)}
    .learn-more{display:inline-block}
    .ftool:hover .ftool__cta span{transform:translateX(4px)}

    /* Menu links: a green line slides in under the word */
    .nav-links>a:not(.btn):not(.nav-cat):not(.nav-cta){background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .3s var(--mo-ease),color .2s ease}
    .nav-links>a:not(.btn):not(.nav-cat):not(.nav-cta):hover{background-size:100% 2px}

    /* Small chips and jump links */
    .pill,.pk-jump a,.gl-jump a,.card-list li,.pk-add li{transition:transform .2s var(--mo-ease),border-color .2s ease,color .2s ease}
    .pill:hover,.pk-jump a:hover,.gl-jump a:hover{transform:translateY(-2px)}
    .foot-social a{transition:transform .2s var(--mo-ease),color .2s}
    .foot-social a:hover{transform:translateY(-2px)}
  }

  /* Buttons press down when clicked or tapped (all screens) */
  .btn,.nav-cta,.wa-float,.ftool__cta span{transition:transform .2s var(--mo-ease),box-shadow .2s var(--mo-ease),background .2s var(--mo-ease),border-color .2s var(--mo-ease),color .2s ease}
  .btn:active,.nav-cta:active,.wa-float:active{transform:translateY(1px) scale(.97);box-shadow:0 2px 8px rgba(21,92,57,.18);transition-duration:.08s}
  .card:active,.pkh:active,.ftool:active,.guide-card:active,.cat-inside a:active,.other-grid a:active{transform:scale(.985);transition-duration:.1s}

  /* ---------- Scroll: things below the first screen rise into place ---------- */
  /* .mo-hide is only ever added by motion.js, so if the script fails nothing is hidden */
  .mo-hide{opacity:0;transform:translateY(26px)}
  .mo-in{opacity:1;transform:none;transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease);transition-delay:var(--mo-d,0ms)}

  /* Reading progress line on guides and long pages */
  .mo-progress{position:fixed;left:0;top:0;right:0;height:3px;background:var(--mo-orange);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}
}

/* Reduced motion: switch off the movement the older stylesheet already had too */
@media (prefers-reduced-motion:reduce){
  .card:hover,.why:hover,.pk:hover,.pkh:hover,.guide-card:hover,.ftool:hover,.stat:hover,.pk-extra:hover,.cat-inside a:hover,
  .btn:hover,.btn--primary:hover,.btn--ghost:hover,.btn--light:hover,.wa-float:hover{transform:none}
  .mo-progress{display:none}
}

/* Printing always shows everything */
@media print{.mo-hide{opacity:1 !important;transform:none !important}.mo-progress{display:none}}

/* ===== FAQ layout, v14 (24 Oct 2026) =====
   Heading and help box on the left, numbered questions that open and close on the right.
   Built with <details>, so it works without any script, answers stay in the page for search engines,
   and the browser's find-in-page opens a closed answer by itself. */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;align-items:start}
.faq-side{position:sticky;top:104px}
.faq-side h2{margin-bottom:0}
.faq-help{margin-top:30px;padding:22px 22px 24px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-shadow,0 8px 24px rgba(21,92,57,.06))}
.faq-help-t{font-weight:800;color:var(--ink);font-size:1.02rem;margin:0 0 14px}
.faq-help-b{display:flex;flex-wrap:wrap;gap:10px}
.faq-help-b .btn{min-height:44px;padding:10px 20px;font-size:.93rem}
.faq-layout .faq-list{max-width:none;margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--card-shadow,0 8px 24px rgba(21,92,57,.06));overflow:hidden}
.faq-item{border-top:1px solid var(--line);position:relative}
.faq-item:first-child{border-top:0}
.faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mo-orange);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-item[open]{background:var(--green-mist)}
.faq-item[open]::before{transform:scaleY(1)}
.faq-item summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 26px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-n{font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--green);min-width:24px}
.faq-q{font-weight:700;font-size:1.05rem;line-height:1.4;color:var(--ink)}
.faq-item[open] .faq-q{color:var(--green-dark)}
.faq-ic{position:relative;width:32px;height:32px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--green);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-ic::after{transform:rotate(90deg)}
.faq-item[open] .faq-ic{background:var(--green);border-color:var(--green);color:#fff}
.faq-item[open] .faq-ic::after{transform:rotate(0deg)}
.faq-a{padding:0 64px 24px 66px}
.faq-a p{color:var(--ink-soft);line-height:1.7;max-width:64ch;margin:0}
.faq-a a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.faq-item summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:12px}
.bg-dark .faq-q{color:var(--ink)}
/* smooth open and close where the browser supports it; instant elsewhere */
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.faq-item::before,.faq-ic,.faq-ic::before,.faq-ic::after{transition:none}}
@media(max-width:960px){
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static;display:contents}
  .faq-side .eyebrow{justify-self:start;margin-bottom:-14px}
  .faq-help{order:3;margin-top:0}
}
@media(max-width:560px){
  .faq-item summary{padding:18px 16px;gap:12px}
  .faq-q{font-size:1rem}
  .faq-ic{width:28px;height:28px}
  .faq-a{padding:0 18px 20px 52px}
  .faq-layout .faq-list{border-radius:16px}
  .faq-help-b .btn{flex:1 1 auto;justify-content:center}
}
@media print{.faq-item::details-content{content-visibility:visible;block-size:auto}.faq-side{position:static}}