/* ============================================================================
   Public card shell. The card itself is 390px, never stretched. On desktop
   it sits inside a phone bezel (matches the /app/templates preview look —
   the user-facing card identity is the same whether viewed on mobile or
   desktop). Skin engine = .sk (themes/skin.ejs); Manifesto stays bespoke
   (.tpl).
   ========================================================================== */

.sk-stage,.tpl-stage{
  min-height:100vh;display:flex;justify-content:center;align-items:flex-start;
  background:oklch(0.16 0.006 80);position:relative;
}
.sk-phone{width:100%;max-width:100%;display:block;position:relative;z-index:2}
/* Mobile + tablet: all the desktop artwork is hidden. The card already
   fills the screen, no canvas to decorate. */
.sk-wave,.sk-brand,.sk-dot{display:none}

@media (min-width:480px) and (max-width:767px){
  .sk-stage,.tpl-stage{align-items:flex-start;padding:24px 0}
}

/* ---------------------------------------------------------------------------
   Desktop · editorial "press shot" composition
   ---------------------------------------------------------------------------
   The phone is pinned at the top and only its inner content scrolls — like
   the device is being held up for a magazine photograph. Around it: warm
   paper canvas, three wave lines drifting at different curves, a
   ghosted oversized italic "C" floating off-center behind the phone, and
   (on wide viewports) an editorial sidebar with serial number + tagline.
   Layout is intentionally asymmetric: phone sits left-of-center, sidebar
   stacks vertically on the right, dots scatter off-grid.
   --------------------------------------------------------------------- */
@media (min-width:768px){
  /* Lock page scrolling — only the card inside the phone scrolls. */
  html,body{overflow:hidden;height:100%}
  body.card-body{overflow:hidden}

  .sk-stage{
    display:block;align-items:initial;padding:0;
    min-height:100vh;height:100vh;width:100%;
    position:relative;overflow:hidden;
    background:
      radial-gradient(120% 50% at 50% 0%,
        oklch(0.96 0.014 75) 0%,
        oklch(0.93 0.014 76) 55%,
        oklch(0.91 0.016 78) 100%);
  }
  /* Paper grain — layered radial dots, no asset. */
  .sk-stage::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(15,16,14,0.06) 50%, transparent 51%),
      radial-gradient(1px 1px at 70% 60%, rgba(15,16,14,0.05) 50%, transparent 51%),
      radial-gradient(1px 1px at 40% 85%, rgba(15,16,14,0.04) 50%, transparent 51%),
      radial-gradient(1px 1px at 85% 20%, rgba(15,16,14,0.05) 50%, transparent 51%);
    background-size:7px 7px,9px 9px,11px 11px,13px 13px;
    opacity:.7;
  }

  /* Three wave layers · each with its own drift speed for parallax. */
  .sk-wave{
    display:block;position:absolute;left:-2%;right:-2%;top:0;width:104%;
    height:100%;z-index:1;pointer-events:none;
    color:oklch(0.55 0.085 158);
  }
  .sk-wave path{
    transform-origin:center;
    animation:sk-wave-drift 28s ease-in-out infinite alternate;
  }
  .sk-wave-l1{opacity:.18}
  .sk-wave-l2{opacity:.12;animation-duration:36s;animation-direction:alternate-reverse}
  .sk-wave-l3{opacity:.09;animation-duration:44s}
  @keyframes sk-wave-drift{
    0%   { transform:translateX(0) }
    100% { transform:translateX(-30px) }
  }
  @media (prefers-reduced-motion:reduce){
    .sk-wave path{animation:none}
  }

  /* Geometric accent dots · scattered for asymmetry. */
  .sk-dot{
    display:block;position:absolute;border-radius:50%;
    background:oklch(0.55 0.085 158);opacity:.20;z-index:1;pointer-events:none;
  }
  .sk-dot-a{width:6px;height:6px;top:12%;left:11%}
  .sk-dot-b{width:10px;height:10px;top:36%;right:8%;opacity:.14}
  .sk-dot-c{width:4px;height:4px;bottom:18%;left:18%;opacity:.30}

  /* Big italic "C" ghost and editorial Cardfy sidebar were removed —
     too prominent on the page. The waves + dots + paper grain carry
     the artistic weight; the brand pill at top-left carries identity. */

  /* Phone bezel · FIXED at top, perfectly centered. The bezel itself
     never moves; only the inner .au container scrolls. Stays centered
     at every viewport — the editorial decoration around it provides
     the asymmetry without moving the phone itself. */
  .sk-phone{
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:390px;max-width:390px;
    /* Aspect-locked to a real iPhone (390:844 ≈ 1:2.165). The container
       gets the height the aspect demands, capped at 90vh for breathing
       room. At very tall screens it tops out at the natural phone size. */
    height:min(844px, 90vh);
    aspect-ratio:390/844;
    z-index:10;
    border-radius:46px;overflow:hidden;
    background:oklch(0.16 0.008 70);
    display:flex;flex-direction:column;
    box-shadow:
      0 0 0 11px oklch(0.16 0.008 70),
      0 0 0 12.5px oklch(0.32 0.012 70),
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 60px 130px -36px rgba(20,16,10,.32),
      0 32px 70px -24px rgba(20,16,10,.22);
  }

  /* Inner card · this is the scrollable lane. Width hard-locked so no
     internal media query in skin.ejs can push content beyond the bezel.
     Scrollbar must be invisible on all browsers — extra-aggressive rules
     because the default thin scrollbar shows through the bezel as a
     vertical sliver and breaks the "real phone" illusion. */
  .sk-phone > .au, .sk-phone .au{
    width:390px !important;max-width:390px !important;min-width:390px !important;
    flex:1 1 0;
    overflow-y:auto !important;overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .sk-phone > .au::-webkit-scrollbar,
  .sk-phone .au::-webkit-scrollbar,
  .sk-phone > .au::-webkit-scrollbar-track,
  .sk-phone .au::-webkit-scrollbar-track,
  .sk-phone > .au::-webkit-scrollbar-thumb,
  .sk-phone .au::-webkit-scrollbar-thumb{
    width:0 !important;height:0 !important;
    background:transparent !important;
    display:none !important;
    -webkit-appearance:none !important;
  }

  /* Force every internal container to FILL the locked 390px width.
     `width:auto !important` shrunk flex children to content because the
     parent flex-column couldn't stretch them against an explicit auto;
     `width:100%` plus `box-sizing:border-box` (project-wide default)
     makes each container fill its parent on the cross-axis. */
  .sk-phone .au-wrap,
  .sk-phone .au-pad,
  .sk-phone .au-band,
  .sk-phone .au-cover,
  .sk-phone .au-halo-hd,
  .sk-phone .au-medal,
  .sk-phone .au--prism .au-arc,
  .sk-phone .au-stack,
  .sk-phone .au-feat{max-width:100% !important;width:100% !important;
                     box-sizing:border-box}

  /* Restore the original horizontal padding of the mobile card · skin.ejs
     bumps paddings to 34px at 680px+, we don't want that inside the phone.
     Override only `padding-left` + `padding-right` so the inline
     `style="padding-top:NNpx"` set on each .au-pad block (action stack,
     featured sections, info module) still applies — without this the
     vertical rhythm collapses to zero. */
  .sk-phone .au .au-pad{padding-left:24px !important;padding-right:24px !important}
  /* Stack: force single column. Gap left to pill/soft/sharp mode rules
     (skin.ejs sets 12px in pill, 10px in default — let it cascade). */
  .sk-phone .au .au-stack{display:flex !important;flex-direction:column !important;
                          grid-template-columns:none !important}
  .sk-phone .au .au-tiles{grid-template-columns:1fr 1fr !important}
  .sk-phone .au .au-tiles.one{grid-template-columns:1fr !important}

  /* Cancel the 2-pane identity/content grid at 1040px+ from skin.ejs. */
  .sk-phone .au--mist .au-wrap,
  .sk-phone .au--halo .au-wrap,
  .sk-phone .au--medalhao .au-wrap{
    display:flex !important;flex-direction:column !important;
    grid-template-columns:none !important;column-gap:0 !important;
    padding-bottom:30px}
  .sk-phone .au--mist .au-wrap>header,
  .sk-phone .au--halo .au-wrap>header,
  .sk-phone .au--medalhao .au-wrap>header{padding-bottom:0;grid-column:auto !important}
  .sk-phone .au--mist .au-wrap>:not(header),
  .sk-phone .au--halo .au-wrap>:not(header),
  .sk-phone .au--medalhao .au-wrap>:not(header){grid-column:auto !important}
  .sk-phone .au--mist .au-wrap>.au-divider{display:block}
  .sk-phone .au--medalhao .au-medal .cap{border-radius:0}

  /* "Feito com Cardfy" pill · top-left corner of the page, away from
     the phone. Glassmorphic over the canvas. */
  .sk-brand{
    display:inline-flex;align-items:center;gap:10px;
    position:fixed;left:32px;top:32px;
    z-index:4;pointer-events:auto;text-decoration:none;
    padding:7px 14px 7px 9px;border-radius:999px;
    background:color-mix(in oklch, oklch(0.93 0.014 76) 78%, transparent);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    backdrop-filter:blur(10px) saturate(140%);
    border:1px solid color-mix(in oklch, oklch(0.20 0.012 70) 10%, transparent);
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .sk-brand:hover{
    background:color-mix(in oklch, oklch(0.96 0.014 76) 90%, transparent);
    border-color:color-mix(in oklch, oklch(0.20 0.012 70) 22%, transparent);
    transform:translateY(-2px);
  }
  .sk-brand-mk{
    width:22px;height:22px;border-radius:7px;
    background:oklch(0.20 0.012 70);color:oklch(0.96 0.012 76);
    display:grid;place-items:center;
    font-family:var(--font-serif,Georgia,serif);font-style:italic;
    font-size:13px;font-weight:400;letter-spacing:-0.02em;line-height:1;
  }
  .sk-brand-txt{
    font-size:12px;font-weight:520;color:oklch(0.36 0.012 70);
    letter-spacing:-0.005em;
  }
  .sk-brand-txt em{
    font-family:var(--font-serif,Georgia,serif);font-style:italic;
    font-weight:400;color:oklch(0.22 0.012 70);font-size:13px;
  }
}

/* Manifesto bespoke wrapper */
.tpl{width:390px;max-width:100vw;min-height:100vh;position:relative;overflow:hidden;
  font-family:var(--font-sans);letter-spacing:-0.005em;-webkit-font-smoothing:antialiased}
@media (min-width:480px){ .tpl{min-height:844px} }

[hidden]{display:none !important}

/* Server-rendered lead/quiz submit feedback (sessionless public card).
   Zero-JS: appears, holds, then fades out via a single CSS animation. */
.sk-fb{position:fixed;left:50%;bottom:24px;z-index:90;
  display:flex;align-items:center;gap:10px;max-width:min(420px,90vw);
  padding:13px 18px;border-radius:13px;color:#fff;
  font-family:var(--font-sans,system-ui);font-size:13.5px;font-weight:650;
  line-height:1.35;letter-spacing:-0.005em;text-align:center;
  box-shadow:0 18px 44px -18px rgba(8,10,14,.5),0 0 0 1px rgba(255,255,255,.06) inset;
  /* Visible by default — the animation only handles entrance + auto-exit.
     If animations are frozen/disabled it just stays shown (safe). */
  opacity:1;transform:translate(-50%,0);
  animation:sk-fb 5.4s cubic-bezier(.22,1,.36,1) forwards}
.sk-fb--ok{background:#0F5C3A}
.sk-fb--err{background:#8A2F22}
/* opacity stays 1 the whole time (so a frozen/disabled animation still
   shows it); only the entrance slide and the final auto-dismiss move it. */
@keyframes sk-fb{
  0%{opacity:1;transform:translate(-50%,14px)}
  6%{opacity:1;transform:translate(-50%,0)}
  90%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,10px);visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .sk-fb{animation-timing-function:steps(1,end)}}