/* "Two paths" (The same ten years, two ways), owner-approved and locked 2026-10-28 (Daniel: "approved, send to lead to give to claude";
   Codex family-c/two-paths-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-two-paths,
   classes and keyframes prefixed tp2- (tp- belongs to Two pools), h1/h2 shown as h3/h4, the review shell, review note, page body rules
   and @font-face dropped (Nunito Sans comes from the site's fonts.css). Values are unchanged; the guards at the end only stop site-wide
   rules (answer body p/li/img/heading styles) reaching in. Reduced motion also follows the site's html.dio-alive-off. */
.dio-two-paths{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#203846;font-synthesis:none;font-size:16px;line-height:normal}
.dio-two-paths *{box-sizing:border-box}
.dio-two-paths .tp2-figure{margin:0;container-type:inline-size}
.dio-two-paths .tp2-surface{padding:28px;background:#f5f7f7}
.dio-two-paths .tp2-surface h3.tp2-title{font-size:27px;line-height:1.25;font-weight:600;letter-spacing:-.025em;margin:0 0 38px}
.dio-two-paths .tp2-plan{margin-top:42px;display:grid;grid-template-columns:154px 40px minmax(0,1fr);align-items:center;column-gap:10px}
.dio-two-paths .tp2-tile{--cut:10px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:74px;padding:14px 16px;isolation:isolate;background:#688392;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));text-align:center;font-size:21px;line-height:1.25;font-weight:500}
.dio-two-paths .tp2-tile:before{content:"";position:absolute;inset:1.5px;background:#fff;z-index:-1;--inner-cut:calc(var(--cut) - .88px);clip-path:polygon(var(--inner-cut) 0,100% 0,100% calc(100% - var(--inner-cut)),calc(100% - var(--inner-cut)) 100%,0 100%,0 var(--inner-cut))}
.dio-two-paths .tp2-choice{font-size:23px;font-weight:600;background:#ed873c;min-height:80px}
.dio-two-paths .tp2-logo{display:block;width:73.8px;max-width:81%;height:auto;object-fit:contain}
.dio-two-paths .tp2-choice:before{background:linear-gradient(#f4a165,#ed873c 60%,#e9853b)}
.dio-two-paths .tp2-benefits{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dio-two-paths .tp2-benefit{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:6px;font-size:19px;font-weight:500}
.dio-two-paths .tp2-benefit svg{width:36px;height:36px;fill:none;stroke:#4c7288;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dio-two-paths .tp2-arrow{display:block;width:100%;height:auto;max-width:40px;fill:none;stroke:#4c7288;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dio-two-paths .tp2-repeated{margin-top:0}
.dio-two-paths .tp2-repeated h4.tp2-repeated-title{text-align:center;font-size:21px;font-weight:500;line-height:1.3;margin:0 0 18px;color:#4c6574}
.dio-two-paths .tp2-cycle{--arrow-gap:42px;--row-size:74px;--middle-size:72px;display:grid;grid-template-columns:minmax(0,1fr) var(--arrow-gap) minmax(0,1fr);grid-template-rows:var(--row-size) var(--middle-size) var(--row-size);position:relative}
.dio-two-paths .tp2-nodes{display:contents;margin:0;padding:0;list-style:none}
.dio-two-paths .tp2-break{grid-area:1/1}.dio-two-paths .tp2-visit{grid-area:1/3}.dio-two-paths .tp2-bill{grid-area:3/3}.dio-two-paths .tp2-recovery{grid-area:3/1}
.dio-two-paths .tp2-link{display:flex;align-items:center;justify-content:center}
.dio-two-paths .tp2-right{grid-area:1/2;padding:0 5px}.dio-two-paths .tp2-left{grid-area:3/2;padding:0 5px;transform:rotate(180deg)}
.dio-two-paths .tp2-down{grid-area:2/3}.dio-two-paths .tp2-down .tp2-arrow{width:36px;transform:rotate(90deg)}
.dio-two-paths .tp2-up{grid-area:2/1}.dio-two-paths .tp2-up .tp2-arrow{width:36px;transform:rotate(-90deg)}
.dio-two-paths .tp2-repeat{grid-area:2/1/3/4;place-self:center;width:calc(50% - 8px);margin:0;text-align:center;font-size:18px;line-height:1.25;color:#506875;padding:0 6px;background:#f5f7f7}
.dio-two-paths .tp2-figure figcaption{margin:16px 0 0;font-size:14px;line-height:1.55;color:#506875;max-width:62ch}
.dio-two-paths .tp2-playing .tp2-tile:not(.tp2-choice){animation:tp2-appear .5s ease both}
.dio-two-paths .tp2-playing .tp2-break{animation-delay:.2s}.dio-two-paths .tp2-playing .tp2-visit{animation-delay:.7s}.dio-two-paths .tp2-playing .tp2-bill{animation-delay:1.2s}.dio-two-paths .tp2-playing .tp2-recovery{animation-delay:1.7s}
.dio-two-paths .tp2-playing .tp2-repeat{animation:tp2-appear .5s ease 2.2s both}
.dio-two-paths .tp2-paused *{animation-play-state:paused!important}
@keyframes tp2-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@container (max-width:500px){
 .dio-two-paths .tp2-surface{padding:24px 20px}
 .dio-two-paths .tp2-surface h3.tp2-title{font-size:24px;margin-bottom:30px;max-width:22ch}
 .dio-two-paths .tp2-plan{grid-template-columns:112px 27px minmax(0,1fr);column-gap:6px}
 .dio-two-paths .tp2-choice{font-size:19px;min-height:74px;padding:12px}
 .dio-two-paths .tp2-benefits{gap:7px}.dio-two-paths .tp2-benefit{font-size:16px;gap:5px}.dio-two-paths .tp2-benefit svg{width:31px;height:31px}
 .dio-two-paths .tp2-plan{margin-top:34px}.dio-two-paths .tp2-repeated h4.tp2-repeated-title{font-size:20px;margin-bottom:16px}
 .dio-two-paths .tp2-cycle{--arrow-gap:34px;--row-size:74px;--middle-size:72px}
 .dio-two-paths .tp2-tile:not(.tp2-choice){font-size:17px;padding:12px 13px}
 .dio-two-paths .tp2-repeat{font-size:16px;width:calc(50% - 4px);padding:0 4px}
 /* 2026-11-11 watched review: on phones the up and down arrows stand 8px further out, so "Then the next tooth" is no longer tight against them */
 .dio-two-paths .tp2-up{transform:translateX(-8px)}.dio-two-paths .tp2-down{transform:translateX(8px)}
}
@container (max-width:340px){
 .dio-two-paths .tp2-surface{padding:22px 16px}.dio-two-paths .tp2-surface h3.tp2-title{font-size:22px;margin-bottom:26px}
 .dio-two-paths .tp2-plan{grid-template-columns:98px 23px minmax(0,1fr);column-gap:5px}
 .dio-two-paths .tp2-choice{font-size:18px;min-height:68px;padding:10px}
 .dio-two-paths .tp2-benefits{gap:4px}.dio-two-paths .tp2-benefit{font-size:14px}.dio-two-paths .tp2-benefit svg{width:27px;height:27px}
 .dio-two-paths .tp2-cycle{--arrow-gap:30px;--row-size:74px}
 .dio-two-paths .tp2-tile:not(.tp2-choice){font-size:16px;padding:12px 10px}
 .dio-two-paths .tp2-repeat{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.dio-two-paths .tp2-figure *{animation:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-two-paths .tp2-figure *,html[data-motion="reduce"] .dio-two-paths .tp2-figure *{animation:none!important}
@media print{.dio-two-paths .tp2-figure *{animation:none!important}}
/* guards against site-wide answer-body rules (section.part p / li, heading and img styles); no visual change from the lock */
.dio-two-paths .tp2-surface h3.tp2-title,.dio-two-paths .tp2-repeated h4.tp2-repeated-title{font-family:inherit;text-transform:none}
.dio-two-paths .tp2-surface h3.tp2-title{color:#203846}
.dio-two-paths .tp2-nodes>li{margin:0}
.dio-two-paths .tp2-cycle p.tp2-repeat{margin:0;color:#506875}
.dio-two-paths .tp2-figure figcaption{padding:0;background:none;text-align:left}
.dio-two-paths img.tp2-logo{border-radius:0;box-shadow:none;aspect-ratio:auto;object-fit:contain}
.dio-two-paths .tp2-benefit svg{max-width:none}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z).
   Same look as the where-bar and plan-b controls: one row above the figure, right side, wrapping on narrow widths; real buttons at least 44 px
   tall with a visible focus ring; hidden in print. Every rule is scoped to this widget. */
.dio-two-paths .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-two-paths .controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-two-paths .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;cursor:pointer}
.dio-two-paths .controls button:hover{background:#f1f5f6}.dio-two-paths .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-two-paths .controls button[aria-pressed=true]{background:#e6edf0}.dio-two-paths .controls button:disabled{opacity:.55;cursor:default}
.dio-two-paths .tp2-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media print{.dio-two-paths .controls{display:none!important}}