/* Jhilke Circle component vocabulary (redesign, 2026-10). Built on the --jh-* variables that site.js defines.
   Progressive enhancement: nothing here hides content. motion.js and circle.js only add behaviour. */
:root{--jc-hair:rgba(244,236,217,.14);--jc-gold-60:rgba(200,150,43,.6);--jc-r:14px;--jc-r-s:10px;--jc-gut:16px;color-scheme:dark}
html{scroll-padding-top:88px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.jc :focus-visible,.jc-top :focus-visible,.jc-foot :focus-visible{outline:3px solid var(--jh-gold-soft);outline-offset:3px}
.jc button{font-family:inherit;touch-action:manipulation}
.jc a,.jc button,.jc summary{-webkit-tap-highlight-color:rgba(200,150,43,.25)}
.jc-wrap{padding-inline:var(--jc-gut)}
@media(min-width:680px){.jc-wrap{padding-inline:32px}}
.jc-sec{padding-block:20px}
.jc-sec>.jc-wrap>h2,.jc-sec h2.jc-h{margin:0 0 10px;max-width:20ch;font-size:clamp(25px,6.4vw,48px)}
.jc-sec__lead{max-width:60ch;margin:0 0 22px;color:var(--jh-muted);font-size:15px;line-height:1.65}
@media(min-width:760px){.jc-sec{padding-block:44px}}
@media(min-width:901px){.jc-sec{padding-block:clamp(56px,6vw,88px)}.jc-sec__lead{font-size:16px;margin-bottom:30px}}

/* tile and card: one surface */
.jc-tile,.jc-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px;border:1px solid var(--jc-hair);border-radius:var(--jc-r);background:var(--jh-panel);color:var(--jh-text);text-decoration:none;transition:border-color .2s ease}
.jc-alt .jc-tile,.jc-alt .jc-card{background:var(--jh-panel-alt)}
.jc-tile:hover,.jc-tile:focus-within,.jc-card:hover,.jc-card:focus-within,.jc-tile[data-active]{border-color:var(--jc-gold-60)}
.jc-tile__fig{display:block;font:600 clamp(36px,10vw,56px)/1 Fraunces,Georgia,serif;color:var(--jh-gold-soft);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.jc-tile__label{display:block;margin:0;font-size:15px;font-weight:500;color:var(--jh-text);line-height:1.35}
.jc-tile__note{margin:0;font-size:14px;line-height:1.55;color:var(--jh-muted)}
/* What you get: five identical icon tiles. Phones: the strip. 760 to 1023: two columns, the fifth full width.
   From 1024: three over two, the second row centred (five across leaves ~170 px of text, 6+ lines). */
#get>.jc-wrap>h2{margin-bottom:20px}
.jc-get .jc-tile{gap:8px}
.jc-get .jc-i{width:28px;height:28px;margin-bottom:4px}
.jc-get h3{margin:0;font-size:20px;line-height:1.2}
@media(min-width:760px){.jc-strip__track.jc-get{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.jc-get>:nth-child(odd):last-child{grid-column:1/-1}}
@media(min-width:1024px){.jc-strip__track.jc-get{grid-template-columns:repeat(4,minmax(0,1fr))}.jc-get>*{grid-column:auto}}
.jc-card h3{margin:0;font-size:20px;line-height:1.2}
.jc-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--jh-muted)}
.jc-card__go{margin-top:auto;padding-top:6px;color:var(--jh-gold-soft);font-size:14px;font-weight:600;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.jc-card--media{padding:0;overflow:hidden}
.jc-card--media .jc-card__body{display:flex;flex-direction:column;gap:6px;padding:20px}
.jc-card__img{position:relative;overflow:hidden;aspect-ratio:2.3/1;border-bottom:1px solid var(--jc-hair);background:var(--jh-panel-alt)}
.jc-card__img img{display:block;width:100%;height:100%;object-fit:cover}
.jc-crop-a img{object-position:50% 35%}
.jc-crop-b img{object-position:50% 85%;transform:scale(1.5);transform-origin:50% 90%}

/* strip: scroll-snap carousel on phones, grid from 760 px */
.jc-strip{position:relative;margin-inline:calc(var(--jc-gut) * -1)}
.jc-strip__track{list-style:none;margin:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--jc-gut);padding:2px var(--jc-gut);scrollbar-width:none;overscroll-behavior-x:contain}
.jc-strip__track::-webkit-scrollbar{display:none}
.jc-strip__track>*{flex:0 0 84vw;max-width:380px;scroll-snap-align:start}
.jc-strip__ui{display:none}
.jc-strip--over .jc-strip__ui{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:8px}
.jc-strip__btn{width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--jc-hair);border-radius:50%;background:transparent;color:var(--jh-gold-soft);cursor:pointer}
.jc-strip__btn:hover{border-color:var(--jc-gold-60)}
.jc-strip__btn[disabled]{opacity:.4;cursor:default}
.jc-strip__dot{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:transparent;cursor:pointer;padding:0}
.jc-strip__dot::before{content:'';width:9px;height:9px;border-radius:50%;background:rgba(244,236,217,.35)}
.jc-strip__dot[aria-current=true]::before{background:var(--jh-gold-soft)}
.jc-strip__track:focus-visible{outline-offset:-3px}
@media(min-width:760px){
  .jc-strip{margin-inline:0}
  .jc-strip__track{display:grid;grid-template-columns:repeat(var(--jc-cols,3),minmax(0,1fr));overflow:visible;padding:0;scroll-snap-type:none}
  .jc-strip__track>*{max-width:none}
}


/* path: numbered steps and a gold line that fills while reading */
.jc-path-wrap{position:relative}
.jc-path{list-style:none;margin:0;padding:0;counter-reset:jcp}
.jc-path-wrap--v .jc-path{display:grid;gap:0}
.jc-path>li{position:relative;counter-increment:jcp}
.jc-path__n{display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border:2px solid var(--jh-gold);border-radius:50%;color:var(--jh-gold-soft);font:600 14px Inter,system-ui,sans-serif}
.jc-path__n::before{content:counter(jcp)}
.jc-path__line{display:none}
.jc-path>li.jc-card{padding-top:20px}
.jc-path-wrap--v .jc-path>li{padding:0 0 22px 52px}
.jc-path-wrap--v .jc-path__n{position:absolute;left:0;top:0;margin:0;background:var(--jh-page)}
.jc-path-wrap--v .jc-path__line{display:block;position:absolute;left:15px;top:16px;bottom:16px;width:2px;height:auto}
.jc-path__line path{fill:none;stroke-width:2}
.jc-path__track{stroke:var(--jc-hair)}
.jc-path__fill{stroke:var(--jh-gold);stroke-dasharray:1;stroke-dashoffset:0}
.jc-path-wrap--v .jc-path__line{width:2px}
/* the home page "how it works": four static cards, stacked on phones, 2 columns from 760, 4 from 1024 */
.jc-hiw__steps .jc-strip__track{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;overflow:visible;padding:0;scroll-snap-type:none}
.jc-hiw__steps .jc-strip__track>*{max-width:none}
@media(min-width:760px){.jc-hiw__steps .jc-strip__track{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){.jc-hiw__steps .jc-strip__track{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* accordion */
.jc-accordion{border-bottom:1px solid var(--jc-hair)}
.jc-accordion details{border-top:1px solid var(--jc-hair)}
.jc-accordion summary{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;padding:10px 4px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--jh-text)}
.jc-accordion summary::-webkit-details-marker{display:none}
.jc-accordion summary::after{content:'';flex:0 0 auto;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--jh-gold);border-bottom:2px solid var(--jh-gold);transform:rotate(45deg);transition:transform .25s ease}
.jc-accordion details[open] summary::after{transform:rotate(225deg)}
.jc-accordion__body{max-width:64ch;padding:0 4px 20px;color:var(--jh-muted);font-size:15px;line-height:1.7}
.jc-accordion__body p{margin:0}
@media(prefers-reduced-motion:no-preference){.jc-accordion details[open] .jc-accordion__body{animation:jc-fade .3s ease both}}
@keyframes jc-fade{from{opacity:0}to{opacity:1}}

/* tabs: without JS every panel shows, stacked, under its heading */
.jc-tabs__list{display:flex;gap:8px;margin:0 0 14px;padding:2px 0;overflow-x:auto;scrollbar-width:none}
.jc-tabs__list::-webkit-scrollbar{display:none}
.jc-tabs__tab{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 20px;border:1px solid var(--jc-hair);border-radius:999px;background:transparent;color:var(--jh-muted);font-size:15px;font-weight:500;cursor:pointer}
.jc-tabs__tab:hover{border-color:var(--jc-gold-60);color:var(--jh-text)}
.jc-tabs__tab[aria-selected=true]{border-color:var(--jh-gold);background:rgba(200,150,43,.14);color:var(--jh-text)}
.jc-tabs__panel>h3{margin:18px 0 6px;font-size:20px}
.jc-tabs--on .jc-tabs__panel>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.jc-tabs__panel[hidden]{display:none}
.jc-tabs__panel:focus-visible{outline-offset:6px}

/* stepper */
.jc-stepper fieldset{min-width:0;margin:0;padding:0;border:0}
.jc-stepper fieldset[hidden]{display:none}
.jc-stepper legend{padding:0;margin:0 0 14px;font:600 clamp(22px,6vw,28px)/1.2 Fraunces,Georgia,serif;color:var(--jh-text)}
.jc-stepper legend:focus{outline:none}
.jc-stepper legend:focus-visible{outline:3px solid var(--jh-gold-soft);outline-offset:6px}
.jc-stepper__progress{display:flex;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.jc-stepper__progress li{flex:1 1 0;min-width:0;padding-top:8px;border-top:3px solid var(--jc-hair);font-size:13px;line-height:1.3;color:var(--jh-faint)}
.jc-stepper__progress li[data-done]{border-top-color:var(--jc-gold-60);color:var(--jh-muted)}
.jc-stepper__progress li[aria-current=step]{border-top-color:var(--jh-gold);color:var(--jh-text);font-weight:600}
.jc-stepper__bar{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.jc-stepper__bar[hidden]{display:none}
.jc-stepper__bar button{min-height:48px;min-width:44px;padding:0 24px;border-radius:var(--jc-r-s);font-size:15px;font-weight:700;cursor:pointer}
.jc-stepper__back{border:1px solid var(--jc-hair);background:transparent;color:var(--jh-text)}
.jc-stepper__back:hover{border-color:var(--jc-gold-60)}
.jc-stepper__next{margin-left:auto;border:0;background:var(--jh-gold);color:var(--jh-page)}
.jc-stepper__next:hover{background:var(--jh-gold-soft)}
.jc-error{margin:6px 0 0;color:#F2B8A8;font-size:14px;line-height:1.45}
.jc-error:empty{display:none}
[aria-invalid=true]{border-color:#F2B8A8!important}

/* stat */
.jc-stat{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;border:1px solid var(--jc-hair);border-radius:var(--jc-r);background:var(--jh-panel)}
.jc-stat__label{margin:0;font-size:14px;color:var(--jh-muted)}
.jc-stat__fig{margin:0;font:600 clamp(26px,7vw,36px)/1.1 Fraunces,Georgia,serif;color:var(--jh-gold-soft);font-variant-numeric:lining-nums tabular-nums}
.jc-stat__upd{margin:0;font-size:13px;color:var(--jh-faint)}

/* phone: 9:16 video and its chapter list */
.jc-phone-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.jc-chapters{min-width:0}
.jc-phone{position:relative;width:64vw;max-width:320px;margin:0 auto;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--jc-hair);border-radius:var(--jc-r);background:var(--jh-panel-alt)}
.jc-phone video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.jc-phone__play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border:2px solid var(--jh-gold-soft);border-radius:50%;background:rgba(30,27,23,.82);color:var(--jh-gold-soft);cursor:pointer;padding:0}
.jc-phone__play:hover{background:var(--jh-gold);color:var(--jh-page)}
.jc-phone__play[hidden]{display:none}
.jc-chapters ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.jc-chapters ol::-webkit-scrollbar{display:none}
.jc-chapters li{flex:0 0 auto}
.jc-chapters button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--jc-hair);border-radius:999px;background:transparent;color:var(--jh-muted);font-size:14px;cursor:pointer;white-space:nowrap}
.jc-chapters button:hover{border-color:var(--jc-gold-60);color:var(--jh-text)}
.jc-chapters button[aria-current=true]{border-color:var(--jh-gold);background:rgba(200,150,43,.14);color:var(--jh-text)}
.jc-chapters time{font-variant-numeric:tabular-nums;color:var(--jh-gold-soft);font-size:13px}
@media(min-width:760px){
  .jc-phone-wrap{grid-template-columns:320px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
  .jc-phone{width:320px;margin:0}
  .jc-chapters ol{flex-direction:column;overflow:visible}
  .jc-chapters button{width:100%;max-width:420px;border-radius:var(--jc-r-s);white-space:normal;text-align:left}
}

/* reveal and count: markers only; motion.js adds the rise, circle.js the count */
.jc-reveal,.jc-count{}

/* home page */
.jc-home-hero{border-bottom:1px solid var(--jh-line);background:radial-gradient(circle at 22% 12%,rgba(200,150,43,.1),transparent 38%),var(--jh-page)}
.jc-home-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;padding-block:26px 24px}
.jc-home-hero__txt{display:contents}
.jc .jc-home-hero h1{order:1;max-width:none;margin:0;font-size:clamp(32px,8.6vw,48px);line-height:1.04}
.jc .jc-home-hero h1 span{display:block}
.jc-home-hero__sub{order:2;max-width:52ch;margin:0;color:var(--jh-muted);font-size:16px;line-height:1.6}
.jc-home-hero__img{order:3;position:relative;margin:4px 0;overflow:hidden;aspect-ratio:16/10;max-height:220px;border:1px solid var(--jc-hair);border-radius:var(--jc-r);background:var(--jh-panel-alt)}
.jc-home-hero__img img{position:absolute;left:0;right:0;top:-6%;width:100%;height:112%;object-fit:cover}
.jc-home-hero .jc-actions{order:4;margin:0}
.jc-home-facts{padding-block:4px 28px}
.jc-home-hero .jc-ridge{display:none}
@media(min-width:901px){.jc-home-hero .jc-ridge{display:block}.jc-home-hero__img{aspect-ratio:16/10;max-height:220px}}
@media(min-width:1024px){
  .jc-home-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);padding-block:clamp(56px,7vw,96px) 40px}
  .jc-home-hero__txt{display:block}
  .jc .jc-home-hero h1{margin:0 0 12px;font-size:clamp(38px,3.5vw,50px)}
  .jc-home-hero__img{aspect-ratio:4/5;max-height:none;margin:0}
  .jc-home-hero .jc-actions{margin:16px 0 0}
}
@media(min-width:901px){.jc-home-facts{padding-block:36px 56px}}
.jc-est2{margin-top:14px;padding:20px;border:1px solid var(--jc-hair);border-radius:var(--jc-r);background:var(--jh-panel)}
.jc-est2 label{display:block;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--jh-text)}
.jc-est2__row{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:16px;align-items:center}
.jc-est2 input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--jh-gold);background:transparent;cursor:pointer}
.jc-est2 input[type=number]{width:100%;min-height:48px;padding:8px 12px;background:var(--jh-page);color:var(--jh-text);border:1px solid rgba(244,236,217,.35);border-radius:var(--jc-r-s);font:600 18px Inter,system-ui,sans-serif}
.jc-est2 .jc-est-out{margin-top:14px;padding-top:14px}
.jc-est2 .jc-est-out p{font-size:16px;line-height:1.55;color:var(--jh-muted)}
.jc-est2 .jc-small{margin:8px 0 0}
.jc-est2 :focus-visible{outline:3px solid var(--jh-gold-soft);outline-offset:3px}
.jc-link-quiet{color:var(--jh-gold-soft);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px;font-size:15px}

/* shell touch-ups for the home round 1b (site.js is owned elsewhere, so these sit here with higher specificity) */
.jc-top .jc-logo{min-height:44px;padding-block:4px}
.jc-foot .jc-foot__brand{min-height:44px;margin-bottom:0}
@media(max-width:679px){
  .jc-foot .jc-foot__map{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;padding:12px 16px 4px}
  .jc-foot .jc-foot__brandcol{grid-column:1/-1;margin-bottom:0}
  .jc-foot .jc-foot__brand{display:none}
  .jc-foot .jc-foot__socials{gap:4px}
  .jc-foot h3{margin:0}
  .jc-foot .jc-foot__help{grid-column:1/-1}
  .jc-foot .jc-foot__help .jc-foot__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .jc-foot .jc-foot__bottom-inner{padding:6px 16px;gap:0 12px}
  .jc-foot .jc-foot__bottom-inner nav{display:grid;grid-template-columns:repeat(2,auto);gap:0 16px;justify-content:start}
  .jc-foot .jc-foot__links a[href$="/apply"]{display:none}
}
