/* Page-specific CSS for wrike-partnership — extracted verbatim from the
   approved Aura One preview. See css/shared.css for sitewide rules. */

h1,h2,h3{font-family:var(--display);}

.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

.btn-outline:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

.nav-links a.nav-item[aria-current="page"]{opacity:1;color:var(--blue);}

.nav-links a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px;}

/* ---------- Hero ---------- */
  .hero{padding:64px 0 0;position:relative;background:var(--white);}

.hero .wrap{max-width:1240px;}

.hero-grid{display:grid;grid-template-columns:46fr 54fr;gap:32px;align-items:center;padding:56px 0 60px;}

.hero .eyebrow{margin-bottom:18px;}

.hero h1{
    font-family:var(--cabin);
    font-weight:600;
    font-size:clamp(32px,4.2vw,46px);
    line-height:1.18;
    letter-spacing:0;
    margin:0 0 22px;
    color:var(--black);
  }

.hero .sub{font-size:18px;line-height:1.6;color:var(--gray-text);max-width:480px;margin:0 0 32px;}

.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

.hero-support-line{font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--gray-text-2);margin:20px 0 0;}


.hero-visual{position:relative;}

.hero-visual svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(28,26,23,.12));}

/* ---------- Shared section head ---------- */
  .section-head{max-width:640px;margin:0 0 56px;}

.section-head.centered{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- Why work with a partner ---------- */
  .why-partner{padding:120px 0;background:var(--gray-bg);}

.why-partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

.why-partner-copy .eyebrow{margin-bottom:16px;}

.why-partner-copy h2{font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.2;margin:0 0 20px;}

.why-partner-copy p{font-size:16.5px;line-height:1.75;color:var(--gray-text);margin:0 0 16px;}

.why-partner-closing{font-size:16.5px;font-weight:700;color:var(--black);margin-top:4px;}

.transition-visual{display:flex;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:44px 28px;box-shadow:0 24px 48px -28px rgba(28,26,23,.14);}

.transition-node{flex:1;text-align:center;font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--black);background:var(--gray-bg-2);border:1px solid var(--border);border-radius:14px;padding:24px 14px;}

.transition-connector{position:relative;flex:0 0 auto;width:64px;height:2px;background:var(--border);}

.transition-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;background:var(--black);color:var(--white);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:100px;}

/* ---------- Lifecycle (segmented bar, not the rail-node component) ---------- */
  .lifecycle{padding:120px 0;background:var(--white);}

.lifecycle-track{display:flex;align-items:center;gap:8px;margin-bottom:40px;}

.lifecycle-seg{flex:1;height:8px;border-radius:100px;background:var(--lc);opacity:.85;}

.lifecycle-details{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;}

.lifecycle-detail{border-left:3px solid var(--lc);padding-left:16px;}

.lifecycle-detail .lc-num{display:block;font-family:var(--display);font-size:12px;font-weight:800;color:var(--lc);letter-spacing:.04em;margin-bottom:8px;}

.lifecycle-detail h3{font-size:18px;font-weight:700;margin:0 0 10px;letter-spacing:-.005em;}

.lifecycle-detail p{font-size:14.5px;line-height:1.65;color:var(--gray-text);margin:0;}

/* ---------- Paired paths (New to Wrike / Already using) ---------- */
  .paths{padding:120px 0;background:var(--gray-bg);}

.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;}

/* STAGING FIX: grid items default to min-width:auto (content's min-content
   size), which forced this grid — and the whole page — wider than the
   viewport at narrow widths. Same root cause and fix already applied to
   the approved Contact page's .path-card during standalone build; the
   approved Wrike Partnership standalone preview itself is left untouched. */
.path-panel{min-width:0;}

.path-panel{background:var(--white);border-top:3px solid var(--pc);border-radius:20px;padding:44px 38px;box-shadow:0 2px 6px rgba(0,0,0,.03), 0 24px 48px -28px rgba(0,0,0,.14);}

.path-panel .eyebrow{color:var(--pc);margin-bottom:14px;}

.path-panel h2{font-size:clamp(21px,2.2vw,25px);font-weight:700;letter-spacing:-.01em;line-height:1.28;margin:0 0 16px;}

.path-panel > p{font-size:15.5px;line-height:1.7;color:var(--gray-text);margin:0 0 22px;}

.path-checklist{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;}

.path-check-item{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.55;color:var(--black);}

.path-check-item .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pc);margin-top:7px;}

/* ---------- Why Aura One ---------- */
  .why-aura{padding:120px 0;background:var(--white);}

.why-aura-grid{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:64px;align-items:start;}

.why-aura-photo-wrap{position:relative;}

.why-aura-photo{border-radius:20px;overflow:hidden;background:var(--gray-bg);aspect-ratio:4/5;box-shadow:0 30px 60px -20px rgba(46,107,179,.3), 0 10px 30px -10px rgba(123,79,166,.22);}

.why-aura-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}

.why-aura-badge{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--border);border-radius:100px;padding:9px 15px 9px 11px;font-size:12px;font-weight:700;color:var(--black);box-shadow:0 14px 28px -14px rgba(28,26,23,.35);}

.why-aura-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;}

.why-aura-copy .eyebrow{margin-bottom:16px;}

.why-aura-copy h2{font-weight:700;font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;line-height:1.2;margin:0 0 20px;}

.why-aura-copy p{font-size:16.5px;line-height:1.75;color:var(--gray-text);margin:0 0 16px;}

.why-aura-copy p strong{color:var(--black);}

.proof-points{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 30px;}

.proof-point{font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;background:var(--gray-bg-2);border:1px solid var(--border);color:var(--gray-text);}

.why-aura-badges{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);}

.why-aura-badges img{height:44px;width:auto;}

.why-aura-badges img.wordmark{height:26px;}

/* ---------- Purchasing panel ---------- */
  .purchasing{padding:120px 0;background:var(--gray-bg);}

.purchasing-panel{max-width:820px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:48px 44px;}

.purchasing-body{font-size:17px;line-height:1.75;color:var(--black);margin:0 0 28px;}

.purchasing-points{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px;}

.purchasing-points li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.65;color:var(--gray-text);}

.purchasing-points li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--blue);}

.purchasing-note{font-size:13px;line-height:1.65;color:var(--gray-text-2);margin:0;padding-top:20px;border-top:1px solid var(--border);}

/* ---------- FAQ ---------- */
  .faq{padding:120px 0;background:var(--white);}

.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--border);}

.faq-list details{border-bottom:1px solid var(--border);padding:26px 0;}

.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:17px;font-weight:600;color:var(--black);}

.faq-list summary::-webkit-details-marker{display:none;}

.faq-list summary .icon{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-text);}

.faq-list details[open] summary .icon{background:var(--black);color:var(--white);border-color:transparent;}

.faq-list details[open] summary .icon:before{content:"\2013";}

.faq-list summary .icon:before{content:"+";}

.faq-list p{font-size:16px;line-height:1.7;color:var(--gray-text);margin:16px 0 0;max-width:680px;}

/* ---------- Final CTA ---------- */
  .final-cta{position:relative;color:var(--black);text-align:center;padding:100px 0 130px;background:var(--white);}

.final-cta p{font-size:18px;color:var(--gray-text);margin:0 0 36px;max-width:540px;margin-left:auto;margin-right:auto;}

.final-cta .hero-cta{justify-content:center;}

@media(max-width:900px){
    .wrap{padding:0 24px;}
    .nav-inner{padding:14px 24px;}
    .nav-links{gap:20px;}
    .hero-grid{grid-template-columns:1fr;gap:44px;padding:36px 0 40px;}
    .hero-visual{order:-1;}
    .why-partner-grid{grid-template-columns:1fr;gap:40px;}
    .transition-visual{flex-direction:column;gap:0;padding:28px;}
    .transition-connector{width:2px;height:44px;}
    .lifecycle-track{flex-direction:column;gap:0;}
    .lifecycle-seg{width:3px;height:34px;flex:none;}
    .lifecycle-details{grid-template-columns:1fr;gap:32px;}
    .paths-grid{grid-template-columns:1fr;gap:28px;}
    .why-aura-grid{grid-template-columns:1fr;gap:36px;}
    .why-aura-photo-wrap{max-width:300px;margin:0 auto;}
    .purchasing-panel{padding:36px 26px;}
    .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px;}
    .footer-brand{grid-column:1/-1;margin-bottom:8px;}
    .final-cta{padding:72px 0 96px;}
    .cta-panel{padding:60px 32px;border-radius:22px;}
  }

@media(max-width:560px){
    .footer-top{grid-template-columns:1fr;}
    .footer-brand{grid-column:auto;}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
    .cta-panel{padding:48px 24px;border-radius:18px;}
  }

.reveal-group.in-view .reveal-item:nth-child(4){transition-delay:.24s;}

.reveal-group.in-view .reveal-item:nth-child(5){transition-delay:.31s;}