/*
 * Subpage styles for northfollow.com: How it works, For teams, Pricing, Support and the 404 page.
 * Built on site.css (header, footer, buttons, cards) and the content brief's sections 4 to 8.
 * Breakpoints as in site.css: mobile < 760px, desktop >= 760px, wide desktop >= 1100px.
 */

/* ---------- Page hero ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(112px,11vw,168px) clamp(20px,5vw,80px) clamp(40px,5vw,72px)}
.phero__in{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,24px)}
.phero--center .phero__in{align-items:center;text-align:center}
.phero h1{max-width:900px;font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-0.02em;font-weight:600;text-wrap:balance}
.phero h1 .accent{color:var(--teal-700)}
.phero__lede{max-width:640px;font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.aurora--page .a{width:52%;right:-12%;top:-40%}
.aurora--page .b{width:34%;right:16%;top:10%}
.aurora--page .c{width:40%;left:-14%;bottom:-50%}

/* Active page in the header and the menu */
.nav__links a[aria-current="page"]{color:var(--text-primary)}
.menu nav a[aria-current="page"]{color:var(--teal-700)}

/* Soft page transitions between documents (Chromium; other browsers just load the page). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:nfPageOut 220ms var(--ease) both}
::view-transition-new(root){animation:nfPageIn 420ms var(--ease) both}
@keyframes nfPageOut{to{opacity:0}}
@keyframes nfPageIn{from{opacity:0;transform:translateY(12px)}}

/* Checked list used by teams, pricing and support */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:26px}
.ticks .tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal-50);color:var(--teal-700)}
.ticks .tick .i{width:15px;height:15px;stroke-width:3}

/* ---------- How it works: sticky scroll story ---------- */
.story{padding:0 clamp(20px,5vw,80px) clamp(56px,6vw,96px)}
.story__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.story__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.sstep{display:flex;gap:18px;padding:24px;border-radius:28px;background:#FFFFFF;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--border-subtle)}
.sstep__n{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--teal-50);color:var(--teal-700);font-size:24px;font-weight:600;transition:background var(--dur-slow),color var(--dur-slow),transform var(--dur-slow) var(--ease-bounce)}
.sstep h2{font-size:clamp(24px,2.2vw,32px);line-height:1.15;font-weight:600}
.sstep p{margin-top:8px;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--text-secondary);text-wrap:pretty}
.story__phone{display:none}
@media (min-width:900px){
  .story__in{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(40px,6vw,96px)}
  .story__steps{gap:0}
  .sstep{min-height:72vh;align-items:center;padding:0 0 0 4px;background:none;box-shadow:none;border-radius:0;opacity:.32;transition:opacity 400ms var(--ease)}
  .sstep.is-active{opacity:1}
  .sstep.is-active .sstep__n{background:var(--teal-500);color:var(--navy-800);transform:rotate(-6deg)}
  .story__phone{display:flex;justify-content:center;position:sticky;top:max(96px,calc(50vh - 322px));align-self:start;height:644px}
  .js-off .sstep,.no-io .sstep{opacity:1}
}

/* Story phone screens: data-screen on .story-phone picks the visible one (crossfade from .hp__step). */
.story-phone [data-screen]{opacity:0}
.story-phone[data-screen="0"] [data-screen="0"],.story-phone[data-screen="1"] [data-screen="1"],.story-phone[data-screen="2"] [data-screen="2"],.story-phone[data-screen="3"] [data-screen="3"],
.story-phone[data-screen="4"] [data-screen="4"],.story-phone[data-screen="5"] [data-screen="5"],.story-phone[data-screen="6"] [data-screen="6"],.story-phone[data-screen="7"] [data-screen="7"]{opacity:1}
.story-phone[data-screen="1"] .hp__status{color:#FFFFFF}
.story-phone[data-screen="3"] .hp__wave span{animation:nfWave var(--d,.5s) ease-in-out var(--dl,0s) infinite alternate}
.sp__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:6px 14px 18px}
.sp__h{padding:8px 18px 4px;font-size:28px;line-height:34px;font-weight:600}
.sp__label{padding:0 4px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--neutral-600)}
.sp__row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--border-default)}
.sp__row.is-on{box-shadow:inset 0 0 0 2.5px var(--teal-500);background:var(--teal-50)}
.sp__row .box{width:40px;height:40px;border-radius:14px;background:var(--teal-50);color:var(--teal-700)}
.sp__row .box .i{width:20px;height:20px}
.sp__row b{display:block;font-size:16px;line-height:20px;font-weight:600}
.sp__row small{display:block;font-size:13px;line-height:18px;color:var(--neutral-600)}
.sp__row > .i{margin-left:auto;color:var(--teal-700)}
.sp__btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:600}
.sp__btn .i{width:20px;height:20px}
.sp__heat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp__heat span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;border-radius:18px;background:var(--neutral-50);font-size:15px;font-weight:600;color:var(--neutral-600)}
.sp__heat span .i{width:22px;height:22px}
.sp__heat .hot{background:var(--heat-hot-bg);color:var(--heat-hot-fg);box-shadow:inset 0 0 0 2.5px var(--heat-hot-fg)}
.sp__team{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp__team .avatar{width:40px;height:40px;font-size:15px}
.sp__team .add{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-default);color:var(--neutral-600)}
.sp__team .add .i{width:18px;height:18px}
.sp__rec{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--navy-800);color:#FFFFFF}
.sp__dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--orange-500);animation:nfBlink 1.2s ease-in-out infinite}
@keyframes nfBlink{50%{opacity:.25}}
.sp__rec b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.sp__rec small{margin-left:auto;font-size:13px;color:var(--navy-200)}
.sp__slides{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp__slides span{aspect-ratio:4/3;border-radius:12px;background:var(--navy-100);display:grid;place-items:center;color:var(--navy-600)}
.sp__slides span:nth-child(2){background:var(--teal-100)}
.sp__slides span:nth-child(3){background:var(--orange-100)}
.sp__slides .i{width:22px;height:22px}
.sp__sync{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 6px;text-align:center}
.sp__sync .box{width:76px;height:76px;border-radius:26px;background:var(--success-bg);color:var(--success-fg)}
.sp__sync .box .i{width:36px;height:36px}
.sp__sync b{font-size:20px;font-weight:600}
.sp__sync small{font-size:14px;color:var(--neutral-600)}
.sp__ok{color:var(--success-fg) !important}
.sp__mail{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:#FFFFFF;box-shadow:var(--shadow-md),inset 0 0 0 1px var(--border-subtle)}
.sp__mail .hp__futo{font-size:14px}
.sp__mail p{font-size:14px;line-height:21px;color:var(--text-secondary)}
.sp__sent{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;background:var(--success-bg);color:var(--success-fg);font-size:16px;font-weight:600}
.sp__sent .i{width:20px;height:20px;stroke-width:2.5}

/* Closing call to action on subpages (reuses .cta from site.css) */
.cta p{position:relative;margin-top:16px;max-width:640px;font-size:clamp(18px,1.5vw,21px);line-height:1.5}

/* ---------- For teams: tabs ---------- */
.teams{padding:0 clamp(20px,5vw,80px) clamp(64px,7vw,112px)}
.teams__in{max-width:1200px;margin:0 auto}
.tabs__list{position:relative;display:inline-flex;max-width:100%;padding:6px;border-radius:999px;background:var(--neutral-100);overflow-x:auto;scrollbar-width:none}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{position:relative;z-index:1;flex:none;height:48px;padding:0 clamp(14px,2vw,24px);border:0;border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:clamp(15px,1.3vw,17px);font-weight:600;color:var(--text-secondary);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-base)}
.tabs__tab[aria-selected="true"]{color:var(--navy-800)}
.tabs__tab:focus-visible{border-radius:999px}
.tabs__ind{position:absolute;z-index:0;top:6px;left:0;height:48px;width:0;border-radius:999px;background:#FFFFFF;box-shadow:var(--shadow-sm);transition:transform 420ms var(--ease),width 420ms var(--ease)}
.tabs__list:not(.is-ready) .tabs__ind{display:none}
.tabs__panels{margin-top:clamp(24px,3vw,40px);display:grid}
.tabs__panel{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:clamp(24px,3.4vw,56px);border-radius:32px;background:#FFFFFF;box-shadow:var(--shadow-md),inset 0 0 0 1px var(--border-subtle)}
.tabs__panel + .tabs__panel{margin-top:16px}
.tabs--js .tabs__panel{grid-area:1/1;margin:0;opacity:1;transition:opacity 420ms var(--ease),transform 420ms var(--ease),visibility 0s}
.tabs--js .tabs__panel[aria-hidden="true"]{opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 0s linear 260ms}
.tabs__panel h2{font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-0.015em;font-weight:600;text-wrap:balance}
.tabs__panel > div > p{margin-top:16px;font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--text-secondary);text-wrap:pretty}
.tabs__panel .ticks{margin-top:24px}
.tabs__side{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:var(--bg-subtle)}
.tabs__side .box{transform:rotate(-6deg)}
.tabs__side .box .i{width:26px;height:26px}
.tabs__side .sp__label{padding:0}
.tabs__plan{font-size:28px;line-height:32px;font-weight:600}
.tabs__side .btn{align-self:flex-start}
@media (min-width:900px){.tabs__panel{grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}}

/* ---------- Pricing ---------- */
.plans{padding:0 clamp(20px,5vw,80px) clamp(48px,5vw,80px)}
.plans__in{max-width:1200px;margin:0 auto}
.billing{display:flex;flex-direction:column;align-items:center;gap:12px}
.toggle{display:inline-flex;padding:6px;border-radius:999px;background:var(--neutral-100)}
.toggle button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:background var(--dur-base),color var(--dur-base),box-shadow var(--dur-base)}
.toggle button[aria-pressed="true"]{background:#FFFFFF;color:var(--navy-800);box-shadow:var(--shadow-sm)}
.billing__note{font-size:15px;color:var(--text-secondary)}
.save{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--orange-100);color:var(--orange-800);font-size:13px;font-weight:600}
.plans__grid{margin-top:clamp(28px,3vw,48px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
@media (min-width:760px){.plans__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  /* Five plans: three on top, the last two centred underneath. */
  .plans__grid{display:flex;flex-wrap:wrap;justify-content:center}
  .plans__grid > *{flex:0 0 calc((100% - 32px) / 3)}
}
.plan{height:100%;display:flex;flex-direction:column;gap:14px;padding:28px;overflow:hidden}
.plan--pop{box-shadow:var(--shadow-lg),inset 0 0 0 2.5px var(--teal-500)}
.plan__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.plan h2{font-size:24px;line-height:28px;font-weight:600}
.badge-pop{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--orange-500);color:var(--navy-800);font-size:13px;font-weight:600;white-space:nowrap}
.plan__for{font-size:16px;color:var(--text-secondary)}
.plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-height:58px}
.plan__price b{font-size:clamp(40px,3.6vw,48px);line-height:1;font-weight:600;letter-spacing:-0.01em}
.plan__price span{font-size:16px;color:var(--text-secondary)}
.plan__price .save{align-self:center}
.plan__more{font-size:15px;line-height:22px;color:var(--text-secondary)}
.plan .ticks{flex:1;padding-top:6px;border-top:1.5px solid var(--border-subtle)}
.plan .ticks li{font-size:16px;line-height:24px}
.plan .btn{width:100%;margin-top:6px}
[data-price-yearly]{display:none}
.is-yearly [data-price-monthly]{display:none}
.is-yearly [data-price-yearly]{display:flex}

.trial{position:relative;overflow:hidden;margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--navy-800);color:#FFFFFF}
.trial .box{background:var(--orange-500);color:var(--navy-800);transform:rotate(-6deg)}
.trial p{flex:1 1 300px;font-size:clamp(19px,1.6vw,23px);line-height:1.4;font-weight:500}
.trial small{display:block;margin-top:4px;font-size:15px;font-weight:400;color:var(--navy-200)}

/* Expandable comparison and FAQ (native <details>) */
.compare{margin-top:24px;border-radius:28px;background:#FFFFFF;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--border-subtle)}
.compare > summary,.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
.compare > summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.compare > summary{min-height:72px;padding:0 28px;font-size:20px;font-weight:600;border-radius:28px}
.chev{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);transition:transform var(--dur-slow) var(--ease)}
.chev .i{width:20px;height:20px}
details[open] > summary .chev{transform:rotate(180deg)}
.compare__scroll{overflow-x:auto;padding:0 12px 20px}
.compare table{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--border-subtle)}
.compare thead th{font-size:15px;font-weight:600;color:var(--navy-800);position:sticky;top:0;background:#FFFFFF}
.compare tbody th{text-align:left;font-weight:500;color:var(--text-primary)}
.compare td{color:var(--text-secondary)}
.compare td .i{margin:0 auto;width:20px;height:20px}
.compare .yes{color:var(--teal-700)}
.compare .no{color:var(--neutral-300)}
.compare__note{padding:4px 22px 0;font-size:14px;color:var(--text-secondary)}

.faq-sec{padding:clamp(56px,6vw,96px) clamp(20px,5vw,80px)}
.faq-sec .wrap{max-width:860px}
.faq-sec h2{text-align:center}
.faq{margin-top:clamp(28px,3vw,48px);display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:24px;background:#FFFFFF;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--border-subtle)}
.faq summary{min-height:64px;padding:14px 20px 14px 24px;font-size:clamp(18px,1.4vw,20px);line-height:1.35;font-weight:600;border-radius:24px}
.faq details p{padding:0 24px 22px;font-size:17px;line-height:1.6;color:var(--text-secondary)}

/* ---------- Support ---------- */
.help{padding:0 clamp(20px,5vw,80px) clamp(24px,3vw,48px)}
.help__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.help__card{display:flex;flex-direction:column;gap:12px;padding:28px}
.help__card .box{background:var(--teal-50);color:var(--teal-700);margin-bottom:6px}
.help__card h2{font-size:22px;line-height:28px;font-weight:600}
.help__card p{font-size:16px;line-height:24px;color:var(--text-secondary);text-wrap:pretty}
.help__card .lede-link{margin-top:auto;min-height:40px;font-size:16px}
.help__card--contact{background:var(--navy-800);color:#FFFFFF;box-shadow:var(--shadow-md)}
.help__card--contact .box{background:var(--teal-500);color:var(--navy-800)}
.help__card--contact p{color:var(--navy-100)}
.help__card--contact .lede-link{color:var(--teal-200);word-break:break-word}

/* ---------- 404 ---------- */
.nf404{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;padding:clamp(112px,11vw,160px) clamp(20px,5vw,80px) 72px}
.nf404 .phero__in{align-items:center;text-align:center}
.nf404__star svg{display:block;width:72px;height:auto;animation:nfStar 4.5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
  .tabs__ind,.tabs--js .tabs__panel,.tabs--js .tabs__panel[aria-hidden="true"]{transform:none !important}
  .sstep.is-active .sstep__n{transform:none}
}
.nowrap{white-space:nowrap}